分享一个自己造的Animate函数(里面还有一些其他的小函数)

最近在使用学习jQuery的时候,我发现jQuery的Animate函数动画只能够进行一个线性的动画,刚好最近又看了一个缓动动画的一个实现吧,于是自己就有一个想法:干脆直接自己重写一个函数用来实现Tween类的动画

开始介绍一下这个函数吧

刚开始进行实现的时候,我想着就能不能像jQuery一样在原生js对象上进行一个添加这个方法

然后最开始我是这样的

document.prototype.Animate=function(){};

开始我天真的以为页面上的所有元素都是从document上实现的,后面我运行之后才发现,浏览器居然报错了!

当时我真的只是想说,我不知道这个错误的意思,有同学知道的可以解解惑吗

机智的我当时就写了一条语句

console.log(box.__proto__);

来查看页面上的元素究竟是通过谁构造的

最后我惊讶的发现所有html元素的原型都指向了HTMLElement这个构造函数

 

然后我就改变思路,直接

HTMLElement.prototype.Animate=function(){};

最后发现成功调用

 

然后开始介绍函数了其实

 

其实也没有什么可以介绍的

大家可以下载了来用一下,写得非常差也没有兼容ie低版本

我还做了一个轮播图使用这个函数

但是这个轮播图逻辑很复杂,大家可以看一下,期间发现了许多bug解决了

如果你的动画需要缓动的话可以查看源码的Tween类

Animate函数以编写jsdoc

做淡入淡出轮播图时修复了一些bug,现在里面集成了两种版本的轮播图

有兴趣的同学可以下载下来看看

下载地址:https://www.lanzous.com/i21ojij

Tween函数博客地址:http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html