【CSS3动画思维系列】GIF转CSS3优化

突然，心血来潮，就想写写东西了，起个流弊一点的标题？ 那就【CSS3动画思维系列】？至于能不能写成一个系列，那就要看日常需求饱不饱和了q(๑¯ ε ¯ ๑)p...

这里不会去讲那些度娘可以度到的基础属性做个代码搬运工，只是尝试分析自己在做某个项目中制作CSS3动画的过程实现思路，希望有所启发，至于CSS3它只是一种技术载体，用canvas、svg、webgl等等等皆无妨。

项目背景：腾讯医典某运营页面吸引用户填写海报入口，需动画，gif压缩后800K，需优化，制作之；

实现目标：

目标效果

初步分解：动画大体可以划分为 树叶，鹅毛笔，笔迹 三个部分，而代码实现可以通过 旋转、平移、遮罩来还原动画效果。

优化效果：图片体积40K不到，动画效果如下：

代码效果

一、叶

目标效果

树叶旋转可以通过叶柄底部为变换原点transform-origin，正负旋转一定角度来实现，旋转幅度为 原位 -> 负小 -> 正小 -> 负大 -> 正大 -> 归位，具体CSS动画keyframes如下：

@keyframes a_leaf {
  0%{ transform: rotate(0deg); }
  20%{ transform: rotate(-4deg); }
  40%{ transform: rotate(3deg); }
  62%{ transform: rotate(-8deg); }
  82%{ transform: rotate(8deg); }
  100%{ transform: rotate(0deg); }
}

至于为何不用60、80 要用 62、82，是为了拉伸减缓 正小->负大 的移动速度，避免机械式的等分打点，如果觉得区别不大，可以随喜取整，问题不大；

实现效果如下：

代码效果

动画一般都不会独立分割存在，会多元素复合附属，所以在叶子旋转rotate的同时，添加斜切skew，会让树叶有一种被风吹弯变形的感觉，具体CSS动画keyframes如下：

@keyframes a_leaf {
  0%{ transform: rotate(0deg) skew(0deg,0deg); }
  20%{ transform: rotate(-4deg) skew(3deg,0deg); }
  40%{ transform: rotate(3deg) skew(-1deg,0deg); }
  62%{ transform: rotate(-8deg) skew(3deg,0deg); }
  82%{ transform: rotate(8deg) skew(-4deg,0deg); }
  100%{ transform: rotate(0deg) skew(0deg,0deg); }
}

实现效果如下：

动画复合代码效果

斜切的方向与旋转的方向要吻合，让叶子在旋转的同时产生一定的形变，从而更加自然流畅，不至于太硬。

二、笔

目标效果

该动画主要是 鹅毛笔在第二行第三行平移移动画线（写字），将原点定位在第二行笔迹线的起点 -> 右平移到笔迹线终点 -> 左下移到第三行起点 -> 右平移到笔迹线终点 -> 左上归位到起点，具体CSS动画keyframes如下：

@keyframes a_pen {
  0%{ transform: translate(0rpx,0rpx); }
  23%{ transform: translate(60rpx,0rpx); }
  33%{ transform: translate(78rpx,0rpx); }
  65%{ transform: translate(0rpx,20rpx); }
  85%{ transform: translate(76rpx,20rpx); }
  100%{ transform: translate(0rpx,0rpx); }
}

0~23 区间右平移60，23~33 区间右平移18，第二行笔迹线 动画时间为 33%，在笔迹线末尾进行了速度减缓的处理，视觉效果模拟顿笔的手感；

鹅毛笔左下移动到第三行起点的运动速度也进行变慢处理，第三行则是 65~85 区间绘制笔迹线，动画时间为 20%，处理第三行鹅毛笔的运动，没有做末尾顿笔的处理，一块一慢，尽量不让同样的动画机械式的重复，如果两条笔迹线都是按同样的速度处理，会有点乏味；

实现效果如下：

代码效果

树叶的摇摆采用旋转+斜切对细节进行处理，毛笔同样不仅只是平移，还可以添加旋转，因为手腕不可能一直都是让毛笔平移写字的，有可能会旋腕，所以平移+旋转也是符合自然规律的，具体CSS动画keyframes如下：

@keyframes a_pen {
  0%{ transform: translate(0rpx,0rpx) rotate(0deg); }
  23%{ transform: translate(60rpx,0rpx) rotate(0deg); }
  33%{ transform: translate(78rpx,0rpx) rotate(-2deg); }
  65%{ transform: translate(0rpx,20rpx) rotate(5deg); }
  85%{ transform: translate(76rpx,20rpx) rotate(-3deg); }
  100%{ transform: translate(0rpx,0rpx) rotate(0deg); }
}

23~33 笔末顿笔的同时，以笔尖为原点 逆时针2deg，笔会稍竖起来一些，而移动第二笔起始的地方 顺时针5deg，笔会稍平一些，画第二笔的时候，再从顺时针5deg逆时针旋转至负3deg，毛笔通过移动快慢的节奏感，加上旋转的细节，会比单纯的平移自然且流畅许多。

实现效果如下：

动画复合代码效果

三、线

笔迹线条动画，一般常用svg实现，具体实现方式度娘好多就不当搬迁工，但这里的只是用普通CSS定位与遮挡截断实现，并不是svg，笔迹线的keyframes必须跟毛笔的吻合一致，这样才能与毛笔划动的节奏呼应（然而录制的时候，放慢放大了图片，才发现笔迹线稍微快了一些些，尴尬q(๑¯ ε ¯ ๑)p），第一根线具体CSS动画keyframes如下：

@keyframes a_line-1 {
  0%{ width: 0rpx; }
  23%{ width: 60rpx; }
  33%{ width: 78rpx; }
  65%{ width: 78rpx; }
  85%{ width: 78rpx; }
  100%{ width: 78rpx; }
}

33~100 区间，第一根线一直都是保持拉满状态，因为毛笔在划第二根线，第一根线需要在画完后一直存在直至动画重新开始，第二根线则有所区别，具体CSS动画keyframes如下：

@keyframes a_line-2 {
  0%{ width: 0rpx; }
  23%{ width: 0rpx; }
  33%{ width: 0rpx; }
  65%{ width: 0rpx; }
  85%{ width: 77rpx; }
  100%{ width: 77rpx; }
}

在毛笔画完第一根线移动到第二根线之前，即 0~65 区间，第二根线需一直处于隐藏状态，而画完第二根线后 85~100 区间毛笔需回到动画 0 与起始点重合构成循环，所以这个动画需一直都是保持拉满状态直至归0。

四、余

余它细节动画，其实还有很多可以制作，比如相对比较明显的，是 星星的闪烁，很普遍的动画，具体CSS动画keyframes如下：

@keyframes a_star {
  0%{ transform: scale(0.2); opacity: 0; }
  50%{ transform: scale(1); opacity: 1; }
  60%{ transform: scale(1); opacity: 0.8; }
  70%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(0.2); opacity: 0; }
}

星星从小到大再缩小，透明度从无到有，再闪烁后消失，因为星星闪烁动画相对比较次要，所以这里的处理是 让它通过透明度的变化来实现闪烁的效果，弱化它的存在，如果想要强烈一点的表达，可以通过放大缩小体积的手法实现，因为体积变大，视觉层面会上移，相对于降低透明度手法，肯定会更突显一些；而星星这里还有一种制造随机感的手法，具体CSS动画keyframes如下：

.star-1{
  animation: a_star 2.2s ease-in-out both infinite;
}
.star-2{
  animation: a_star 2.6s 0.2s ease-in-out both infinite;
}

如果星星是同个执行时间，则一起亮一起暗很呆板，通过调整不同星星的动画时间与动画延迟，制造随机感，可达到keyframe复用，随机而有序的效果。

再如果，在这个场景还想制作其它的动画，比如这笔 是从哪来，在干什么，要去哪里，笔生三连？

转化为人话，即是 考虑元素的入场动画，循环动画，出场动画，它又可以怎么去表达呢？

旧时新浪博客: 陈在真
个人博客: 陈在真