- 基本原理
- 定时器改变对象的属性
- 根据新的属性重新渲染动画
- 动画类型:JavaScript 动画、CSS 动画、SVG 动画
- JavaScript 动画
- 灵活性高、可控性强,性能好
- 易用性较差,没有封装好
- 实现方式
- 增量实现动画:简单但不好设定周期
- 使用时间设定周期
- 通用化:封装为类
- 匀速运动,已知周期
- 自由落体运动,做一个平方的映射p=>p**2
- 匀减速运动,p=>p*(2-p)
- 平抛运动,水平轴匀速,垂直轴匀加速
- 旋转加平方,加入之前的旋转
- 贝塞尔轨迹
- 椭圆轨迹,变换a数值
- 周期运动
- 线性插值f§ = from+(to-from)p;f§=top+from*(1-p)
360前端星计划之前端动画
最新推荐文章于 2020-06-02 18:02:18 发布