js实现页面各种运动效果总结

蔚落 2022-01-10 05:51 260阅读 0赞

匀速运动：  
解决速度问题 : 速度在函数体内部完成  
var speed = target-obj.offsetLeft > 0 ? 正值 ： 负值  
![操作一个盒子实现匀速运动][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

缓冲运动：  
解决速度问题 **让运动的物体达到目标值**

var speed = (target - obj.offsetLeft)/10;  //速度随着时间变化而变化
       speed = speed > 0 ? Math.ceil( speed )  //对速度进行取值
       Math.floor( speed );

![变速运动效果的实现][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]

多物体运动：  
让每一个运动的物体拥有自己的定时器 **定时器独立**  
把定时器作为对象的属性 **让定时器独立**  
![页面实现多个物体的运动][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]

链式运动  
上一个动作结束 进入到下一个动作  
解决 ： 在运动函数上加一个参数，参数代表**回调函数**

完美运动：  
//obj 操作的元素  
//json 参数为 要操作的属性和目标值 键–属性 值–目标值  
//callback 回调函数  
var flag;//开关变量 当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220109/85f0a619ef574242b79f046cc676774d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220109/48f64a3bc7f943ed9cdeb94990d11eb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20220109/85601238f4c84327ae2a7130f24cc70d.png