CSS3动画帧数计算器
研究循环动画，且各个动作之间的过渡有规律性
－余杰
举个例子各个动作之间的过渡有规律性
方案1
@keyframes anim-name{
0%, 20%{ /* 动作1 */ }
25%, 45%{ /* 动作2 */ }
50%, 70%{ /* 动作3 */ }
75%, 95%{ /* 动作4 */ }
100%, 120%{ /* 动作5 */ }
}
方案2
@-webkit-keyframes anim-name{
0%{ /* 动作1 */ }
25%{ /* 动作2 */ }
50%{ /* 动作3 */ }
75%{ /* 动作4 */ }
100%{ /* 动作5 */ }
}
@-webkit-keyframes anim-name{
0%, 16%{ /* 动作1 */ }
21%, 37%{ /* 动作2 */ }
42%, 58%{ /* 动作3 */ }
63%, 79%{ /* 动作4 */ }
84%, 100%{ /* 动作5 */ }
}
动作数5，动作过渡帧数5%，动作停留帧数16%动作过渡有点快，动作停留有点长
效果不对，重算!
效果不对，重算!
...
看看做一个动画需要哪些条件
总帧数：100 （已知参数）
CSS3帧动画的帧数设置是从0%~100%，数值可以带小数位，0%可以用from关键词替代，100%可以用to关键词替代
动作数：n （已知参数）
动画中的几个关键动作
动作停留帧数：x （未知参数）
在当前动作停留的帧数
动作过渡帧数：y （未知参数）
上一个动作过渡到下一个动作需要用的帧数
循环动画按循环方式可以分为：
用CSS代码的方式表示，就是：
单向循环： animation-iteration-count: infinite; animation-direction: normal;
双向循环： animation-iteration-count: infinite; animation-direction: alternate;
示例要求：实现一个3个动作的单向循环动画
为了方便理解，以线段图示法来展示
Step1，满帧100%
0% 100%
└────────────────────────────┘
Step2，添加动作节点(总节点数 = 动作数)
0% ？% 100%
过渡y帧 过渡y帧
└──────────────┴──────────────┘
动作1 动作2 动作3
这个时候，我们很轻易的算出动作2的keyframes帧数是50%
单向循环动画
添加停留帧 (总节点数 = 动作数 * 2)
0% ?% ?% ?% ?% 100%
停留x帧 过渡y帧 停留x帧 过渡y帧 停留x帧
└───────┴──────┴──────┴─────┴─────┘
动作1 动作2 动作3
停留x帧 过渡y帧
3x + 2y = 100
动作个数 = 3 停留帧个数 = 3 过渡帧个数 = 2
设动作个数为n，则
动作个数 = n 停留帧个数 = n 过渡帧个数 = n-1
然后，我们可以得出一个公式
nx + (n-1)y = 100
双向循环动画
2x + 2y = 100
动作个数 = 3 停留帧个数 = 2 过渡帧个数 = 2
设动作个数为n，则
动作个数 = n 停留帧个数 = n-1 过渡帧个数 = n-1
然后，我们可以得出一个公式
(n-1)(x+y) = 100
给动画加个延迟时间 animation-delay 属性，时长等于动作停留时间的一半
设，总帧数为s(100帧)，播放时间为t，播放速度为v，得出公式
v = s / t
模拟双向循环动画
4x + 4y = 100
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
三克油！