原生js实现jquery函数animate()动画效果

最新推荐文章于 2024-04-06 13:12:20 发布

zerlinda_c

最新推荐文章于 2024-04-06 13:12:20 发布

阅读量2.9w

点赞数 1

分类专栏： jquery 问题总结文章标签： jquery 函数 html 动画 js

本文链接：https://blog.csdn.net/zerlinda_c/article/details/50353908

版权

本文介绍了一位实习生如何通过JS实现类似jQuery的animate动画效果。作者指出，虽然jQuery方便，但有时其预设选项有限，无法满足所有需求。文中详细解释了自定义animate函数的参数，并分享了编写过程中需要注意的细节，如对象属性处理、独立的定时器、数据格式检查和速度调整等。

摘要由CSDN通过智能技术生成

　　通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样，可选的参数不多有时候可能并不能实现我们想要的效果。
　　
　　注释的部分是用来测试用的，写代码的过程并不是十分顺利，因为用js平时用的不是很细，都是大体知道方法，也用过，但等到真正要实现动画函数的时候，细枝末节写错了就可能把人难住了。
函数里面有几个参数解释一下，

obj,函数的对象
json,数值对，形式{attr：”value”, attr: “value”}，在这里是指要动画对象的运动属性
interval,每执行一次改变的间隔，这里改变的是对象是属性值
sp,值变换的速度，使动画具有缓冲效果，而不只是匀速不变（sp为1）的
fn,回调函数，执行完动画之后的行为

　　代码比较简单，只是有几个细节需要注意，在这里提醒一下：
对象的属性不必直接声明，所以函数的第一句clearInterval(obj.timer);并不会报错。
必须为每一个对象分别添加一个定时器，否则互相会影响，一个定时器公用的结果是定时器的多个对象运动出现卡顿。
son数据格式了解一下，当遍历对象的动画属性的时候，需要icur != json[arr]判断是否每一个属性已经达到目标值。flag的作用是防止当其中某个属性第一个达到目标值后，clearInterval(obj.timer)清除了定时器，结果其他动画属性并没有达到目标值。所以在每次遍历的时候初始化flag值为true，只要遇到一个没有达到目标属性的对象，就将flag置为false，直至对象的所有属性达到目标值，清除定时器。
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);这一句的作用是将属性值取整，因为属性值除了opacity没有小数。
最后调用的时候注意动画的对象，在使用f