CSS3动画帧数科学计算法http://tid.tenpay.com/?p=5983

 总结都浓缩在这个工具里了，想知道工具的地址或想窥探工具诞生的趣事请往下看 。
 

—————————————————————–     华丽丽的开篇     —————————————————————-

 

本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结。虽然大家访问不到咱们的饭卡站点，不过能够小窥一下咱们的动画示例哟。

（请使用chrome、safari或firefox浏览器看效果，效果地址）

实现上面“嘀卡萌风骚乱舞”的动画，比较麻烦的是，要凭感受本身算参数写代码，重复试个千百回，才能达到最终满意的效果。

好比这个动画：

我曾经，这么干过

还这么干过

step1, 动做1在0%上，动做停留20帧

@keyframes anim-name{   0%, 20%{ /* 动做1 */ }  ... }

step2,  动做之间过渡5帧，动做1结束帧在20%，20+5=25, 动做2在25%帧，动做停留20帧

@keyframes anim-name{   0%, 20%{ /* 动做1 */ }  25%, 45%{ /* 动做2 */ }  ... }

……

通过一番计算后

@keyframes anim-name{   0%, 20%{ /* 动做1 */ }  25%, 45%{ /* 动做2 */ }  50%, 70%{ /* 动做3 */ }  75%, 95%{ /* 动做4 */ }  100%, 120%{ /* 动做5 */ } }

艾玛，帧数超出100%了>_<

从新计算了一番，动做数5，动做过渡帧数5%，动做停留帧数16%

@-webkit-keyframes anim-name{     0%, 16%{  /* 动做1 */  }     21%, 37%{  /* 动做2 */  }     42%, 58%{  /* 动做3 */  }     63%, 79%{  /* 动做4 */  }     84%, 100%{  /* 动做5 */  } }

感谢人民感谢党，最后一帧加起来恰好100%

刷新页面看效果以后……（动做过渡有点快，动做停留有点长）

效果不对，重算!

效果不对，重算!

……

就这样被折腾地体无完肤，深入感悟咱们是用生命在作动画，啊…..多么痛的领悟悟悟~~（有共鸣的，请默默的点个赞，谢谢）

因此，咱们今天来探讨如何更科学的计算帧数?

文章主要研究循环动画，各个动做之间的过渡有规律性。

 

好比嘀卡萌跳舞动画

 走路动画

还有跑步动画

（该动画的实现，可 查看 白树同窗的分享）

动做过渡有规律性，从代码层面也可理解为各动做之间的过渡帧数是同样的。

如上面白树同窗实现的跑步动画，各动做之间的过渡帧约14.3帧，代码为

@keyframes anim-name{     0% {background-position: 0 0;}     14.3% {background-position: -180px 0;}     28.6% {background-position: -360px 0;}     42.9% {background-position: -540px 0;}     57.2% {background-position: -720px 0;}     71.5% {background-position: -900px 0;}     85.8% {background-position: -1080px 0;}     100% {background-position: 0 0;} }

好，下面让咱们愉快的进入主题吧

循环动画按循环方式能够分为：

用CSS代码的方式表示，就是：

单向循环：  animation-iteration-count: infinite; animation-direction: normal;

双向循环：  animation-iteration-count: infinite; animation-direction: alternate;

 

先看看作一个动画须要哪些条件

总帧数：100 （已知参数）

CSS3帧动画的帧数设置是从0%~100%，数值能够带小数位，0%能够用from关键词替代，100%能够用to关键词替代

动做数：n （已知参数）

动画中的几个关键动做

动做停留帧数：x （未知参数）

在当前动做停留的帧数

动做过渡帧数：y （未知参数）

上一个动做过渡到下一个动做须要用的帧数

咱们用示例来讲明它们之间的关系。

 

单向循环动画

示例要求：实现一个3个动做的单向循环动画

为了方便理解，以线段图示法来展现

Step1，满帧100%

0%　　　　　　　　　　　　　　　　　　　　　　　　　　　100%

└─────────────────────────────────────────┘

Step2，添加动做节点(总节点数 = 动做数)

0%　　　　　　　　　　　　　？%　　　　　　　　　　　　100%

过渡y帧　　　　　　　　　　　过渡y帧

└────────────────────┴────────────────────┘

动做1　　　　　　　　　　　　动做2　　　　　　　　　　　　动做3

这个时候，咱们很轻易的算出动做2的keyframes帧数是50%

实际上，不少时候咱们须要让每一个动做停顿一会，而不会闪动太快。如“嘀卡萌风骚乱舞”的动画，每一个动做都须要定格一会，这个时候咱们须要给每一个动做分配一些停留帧数。

Step3，添加停留帧 (总节点数 = 动做数 * 2)

0%　　　　?%　　　　　?%　　　　　?%　　　　 ?%　　　　100%

停留x帧　　过渡y帧　　　停留x帧　　过渡y帧　　　停留x帧

└───────┴────────┴────────┴───────┴───────┘

动做1　　　 　　　　　　动做2　　　　　　　　　　动做3

这下就复杂了，不过咱们仔细分析，会发现它们之间有必定的规律。

3x + 2y = 100

动做个数 = 3       停留帧个数 = 3      过渡帧个数 = 2

设动做个数为n，则

动做个数 = n       停留帧个数 = n      过渡帧个数 = n-1

而后，咱们能够得出一个公式

nx + (n-1)y = 100

接下来咱们能够有规则性的尝试动画参数了，咱们尝试让每一个动做停留20帧，经过公式求得动做过渡帧数y也等于20，因而得出咱们的帧数代码

.demo{animation:anim-name 1s infinite;}  /* 单向循环 */  @keyframes anim-name{     0%, 20%{  /* 动做1 */  }     40%, 60%{  /* 动做2 */  }     80%, 100%{  /* 动做3 */  } }

有了公式，咱们就不用瞎尝试啦，能够少死点脑细胞了

 

双向循环动画

示例要求：实现一个3个动做的双向循环动画

复制上面的动画代码，加个 animation-direction: alternate; 属性不就行了？

(哦，不对，按照心理学反推论，若是这么简单，做者有必要另起篇幅吗？确定有阴谋！)

不用猜了，我就是有阴谋！

继续线段图示，当咱们加入 animation-direction: alternate; 属性以后的效果是

问题：首尾动做从第二遍播放开始会重复停留时间！

这个并非咱们指望看到的效果，不过解决方法也很简单

经过线段图分析

2x + 2y = 100

动做个数 = 3       停留帧个数 = 2         过渡帧个数 = 2

设动做个数为n，则

动做个数 = n       停留帧个数 = n-1     过渡帧个数 = n-1

而后，咱们能够得出一个公式

(n-1)(x+y) = 100

接下来咱们仍是尝试让每一个动做停留20帧，经过公式求得动做过渡帧数y等于30，因而得出咱们的帧数代码

.demo{animation:anim-name 1s infinite alternate;} /* 双向循环 */  @keyframes anim-name{     0%, 10%{  /* 动做1 */  }     40%, 60%{  /* 动做2 */  }     90%, 100%{  /* 动做3 */  } }

注意：双向循环动画，首尾动做停留帧要各减一半，示例的首尾动做停留帧为10 (20/2=10)

细心的同窗会发现，其实这里还有点小瑕疵，那就是

问题：第一次播放的第一个动做只停了一半时间！

有时咱们作动做衔接，必定要全部动做时间都保持一致。解决办法也不是没有，能够给动画加个延迟时间 animation-delay 属性，时长等于动做停留时间的一半，如何计算时长后面会讲到。

除了加延时解决这个问题以外，还有一个伪方法，请继续往下看

 

模拟双向循环动画

示例要求：实现一个3个动做的双向循环动画

模拟双向循环动画就是不使用 animation-direction: alternate; 属性实现双向循环的效果。

有点绕，上线段图

经过线段图分析

4x + 4y = 100

动做个数 = 5       停留帧个数 = 4         过渡帧个数 = 4

设动做个数为n，则

动做个数 = n       停留帧个数 = n-1     过渡帧个数 = n-1

而后，咱们能够得出一个公式

(n-1)(x+y) = 100

但动做个数5包含了重复动做，不符合咱们的计算习惯，不包含重复动做个数3才符合咱们的计算习惯。那么设

（不含重复）动做个数为 m

（含重复）动做个数为 n，则 n = 2m-1，将 2m-1 带入上面的公式得出公式

(2m-1-1)(x+y) = 100

将m统一换成n表示，再简化公式后获得最终公式

(2n-2)(x+y) = 100

接下来咱们再次尝试让每一个动做停留20帧，经过公式求得动做过渡帧数y等于5，因而得出咱们的帧数代码

.demo{animation:anim-name 1s infinite;} /* 模拟双向循环 */  @-webkit-keyframes anim-name{     0%{  /* 动做1 */  }     20%{  /* 动做1 */  }     25%{  /* 动做2 */  }     45%{  /* 动做2 */  }     50%{  /* 动做3 */  }     70%{  /* 动做3 */  }     75%{  /* 动做2 */  }     95%{  /* 动做2 */  }     100%{  /* 动做1 */  } }

缩写版代码

.demo{animation:anim-name 1s infinite;} /* 模拟双向循环 */  @keyframes anim-name{     0%, 20%, 100%{  /* 动做1 */  }     25%, 45%, 75%, 95%{  /* 动做2 */  }     50%, 70%{  /* 动做3 */  } }

模拟双向循环的方法可让全部动做的停留时间都保持一致，缺点就是代码比较多，帧数也算得麻烦，不过也不失为一种解决方法。通常状况下，仍是建议你们使用双向循环+延迟播放的方案。

提到延迟播放，跟时间有关系，这个延迟时长该怎么定？若是以上方案，每一个动做咱们要固定它的过渡时间，好比动做之间过渡0.4秒，那过渡帧数又该怎么定？接下来咱们再挖掘一下，帧数如何跟时间结合。

 

时间模式计算帧数

咱们在作动画的时候须要设置一个 animation-duration 动画持续时间的属性，知道持续播放时间咱们就能够很轻易的计算出播放速度，还记得咱们小学学的速度公式吗？

设，总帧数为s(100帧)，播放时间为t，播放速度为v，得出公式

v = s / t

继续用示例来加深理解。

示例要求：实现一个3个动做的单向循环动画，播放时间2秒，每一个动做的过渡时间为0.4秒

经过播放速度公式，咱们能够计算出过渡帧数。

播放速度：  100帧 / 2秒 = 50帧/秒
过渡帧数：  50帧/秒 * 0.4秒 = 20帧

得出过渡帧数，接下来套用单向循环动画的帧数公式，计算出停留帧数，参考上面总结的公式  nx + (n-1)y = 100  ，推导公式得出停留帧数 x = (100-(n-1)y) / n

动做个数(n)：  3

过渡帧数(y)： 20
停留帧数：  (100-(3-1)*20)/3 = 20帧

因而得出咱们的帧数代码

.demo{animation:anim-name 2s infinite;}  /* 单向循环 */  @keyframes anim-name{     0%, 20%{  /* 动做1 */  }     40%, 60%{  /* 动做2 */  }     80%, 100%{  /* 动做3 */  } }

 

这么多公式，眼都花了更别说记了。别着急，公式是给机器记的，这种破事就交给咱们的机器去算。下面是一个简易的CSS3动画帧数计算器，能够帮咱们省去一些计算的烦恼。

CSS3动画帧数计算器：http://tid.tenpay.com/labs/css3_keyframes_calculator.html

以白树同窗的跑步动画为示例

动画是单向循环，有7个关键动做，动做须要使用逐帧过渡效果 animation-timing-function:step-start 实现，因此动做个数须要额外加1，即有8个动做。使用 step-start 后会自动平分动做停留时间，因此keyframes咱们就不用加动做停留帧数了。

打开工具页面，选择 [单向循环动画] -> [不停顿] -> [动做个数8] -> [生成代码]

最后……就没有最后了，欢迎你们一块儿交流探讨。

原文地址：http://tid.tenpay.com/?p=5983