前端动画总结

1,按照之前看过的一篇文章,动画分为补间动画,逐帧动画、canvas动画和svg动画。

2,css的过渡效果大多数情况下是规定了初始状态和结束状态,中间状态用css3自带的api实现,这种事补间动画。

3,利用setTimeout或者requestAnimationFrame通过修改属性的关键参数实现的则是逐帧动画

4,用来区分补间还是逐帧的区别是中间状态是否则自己所设置。

5,canvas动画和svg再说。

在使用动画上面,出于兼容性和性能的考虑优先使用css3,然后可以考虑使用js或者canvas或者svg。

css动画总结

1,利用过渡效果实现:transition,注意对display没有效果。

2,利用animation,animation对display也没有效果。animation.css实现的淡入淡出实际针对的opacity。

3,然后还可以借助css3的曲线函数,也就是运动曲线函数。

4,js实现是利用数学知识实现数量的指定变化。

原文地址:https://www.cnblogs.com/zhensg123/p/10500608.html