JavaScript运动框架

date

Jul 27, 2021

slug

animate-frame

status

Published

运动框架

匀速运动

匀速运动的停止条件

例子1: 侧边栏

优化1 鼠标移开返回

优化2 合并重复的代码

例子2：淡入淡出

缓冲运动

当距离终点的距离越来越大的时候，速度也越来越大

当距离终点的距离越来越小的时候，速度也越来越慢

速度和距离成正比

优化

问题一：

现在这里的问题是，我们在300px的时候有个div作为标准，我们看到，到了300的时候，这个绿色的div没有全部在300的右面

console一下，发现是287

console一下速度

这是为什么

px是计算机接受的最小的距离单位，如果写的是29.5px会变成29px不会四舍五入，计算进看到小数，直接把小数点后面去掉了

把speed处理下

问题2：

综合起来是这样：

但凡用到缓冲运动，一定要取整！！！

潜在问题：目标值不是整数的时候，

多物体运动

框架

多物体的淡入淡出

任意值的运动框架

offset的bug

所以之前用了offset的都有潜在的bug

初步

问题1：如果更改透明度 opacity是个小数， parseInt直接解析错误

问题2：opacity的单位也没有px这样直接错误了

改良：带透明度的运动框架

链式运动

回调函数

运动停止时，执行函数

运动停止时，开始下一次运动

完美运动框架

链式运动框架的问题：一个对象的多个属性同时变就不行了

演变

函数	模式
start(target)	匀速/缓动
start(obj, target)	多物体
start(obj, attr, target)	任意值
start(obj, attr, target, fn)	链式运动
start(obj, json, fn)	完美