如何用js自己实现Animate运动函数
js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那么运动的原理就是这样。
我们知道从a这一点到b这一点我们的运动方式有很多,
1.比如匀速运动到这一点
2.比如先快后慢,
3.必须先慢后快等等
所以我们的运动算法也有很多,那么下面我就图解一下如何写我们自己的运动算法
先看匀速算法
于是我们可以用js写出这段代码
/** 运动算法
* t:动画已经消耗的时间
* b:小球初始位置
* c:小球的需要移动额距离
* 动画持续的总时间
* */
var tween = {
linear: function(t, b, c, d){
return c * t / d + b;
}
}
然后我们看看非匀速运动
我们用代码写出来
var tween = {
strongEaseOut:function( t, b, c, d){
return t * t *c / (d *d) + b;
},
}
我们现在只是介绍两种不同的运动算法,当然运动算法还要很多,我们不意义例举,我们接着看如何写改变属性的js
首先我们定义一个运动类
var Animate = function ( dom ) {
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
}
主要是初始化一些数据,然后我们在Animate的原型上定义一个start方法,该方法表示运动开始
Animate.prototype.start = function ( propertyName,endPos,duration,easing ){
this.startTime = +new Date;//记录现在的开始时间
this.startPos = this.dom.getBoundingClientRect()[ propertyName ];//记录开始的位置
this.propertyName = propertyName;//需要改变的属性(传)
this.endPos = endPos;//得到目标位置(传)
this.duration = duration;//得到需要的时间(传)
this.easing = tween[ easing ]//选择哪种运动的算法(传)
var self = this;
var timeId = setInterval(function(){
//如果self返回false,则取消定时器
if( self.step()=== false ) {
clearInterval( timeId )
}
},19)
}
上面的setInterval每隔19毫秒就会执行一次,每次都是执行step方法,step方法就是每次需要计算更新小球的位置
Animate.prototype.step = function(){
//目前的时间
var t = +new Date;
//如果时间超过开始时间和需要时间之和,则矫正目前的位置为目标位置
if( t >= this.startTime + this.duration ) {
this.update( this.endPos )
return false;//返回false为了取消定时器
}
//计算小球的位置
var pos = this.easing( t - this.startTime, this.startPos, this.endPos-this.startPos ,this.duration)
//更新div的属性
this.update( pos )
}
那么update方法也仅仅就是更新div的属性而已
//更新当前位置
Animate.prototype.update = function( pos ){
this.dom.style[ this.propertyName ] = pos + 'px'
}
接下来我们看看我们在html里面如何执行,html代码
<div style="position: absolute;background: blue;width: 100px;height: 100px;left: 0;" id="div"></div>
然后是执行代码
var div = document.getElementById('div')
var animate = new Animate( div )
animate.start('left',500,5000,'linear')
到现在我们整个运动就结束了
完整的代码地址在我的github上https://github.com/jiangzhenfei/Animate/blob/master/index.html
如何用js自己实现Animate运动函数的更多相关文章
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- 如何用 js 实现一个 apply 函数
如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...
- 如何用 js 实现一个 call 函数
如何用 js 实现一个 call 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...
- 如何用 js 实现一个 sleep 函数
如何用 js 实现一个 sleep 函数 原理 实现方式 总结 refs js sleep xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- 如何用 js 实现一个 new 函数
如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...
- 如何用 js 实现一个 bind 函数
如何用 js 实现一个 bind 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...
- JS里面的两种运动函数
最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...
- 原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
- 运动函数封装(js)
// 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(functi ...
随机推荐
- TCP系列06—连接管理—5、TCP fastopen(TFO)
一.TFO背景 当前web和web-like应用中一般都是在三次握手后开始数据传输,相比于UDP,多了一个RTT的时延,即使当前很多应用使用长连接来处理这种情况,但是仍然由一定比例的短连接,这额外多出 ...
- osg::Vec2 Vec3 Vec4
osg::Vec2可以用于保存2D纹理坐标. osg::Vec3是一个三维浮点数数组. osg::Vec4用于保存颜色数据.
- JavaScript数组自定义属性
我们可以以json键值对的形式自定义属性. 首先定义一个JS数组JSarray. 然后按json键值对的形式进行赋值. 最后在控制台显示结果. 代码如下: var JSarray = new Arra ...
- MVC4 DropDownList (二) — 省市联动
1.添加省份和城市类 //省份 public class Province { public int Id { get; set; } public string Name { get; set; } ...
- VS2012或VS2010 工具栏中无法显示DevExpress控件
进入命令提示符 跳转到Dev控件安装目录,如[目录D:\Program Files (x86)\DevExpress\DXperience 12.2\Tools]下, 然后执行命令: ToolboxC ...
- C# .net 调用QQ邮箱
public static void QQfs() { try { MailMessage mm = new MailMessage(); MailAddress Fromma = new MailA ...
- project之chrome.exe
查看chrome.exe的以来文件可以得到下面这个列面,大部分是在%systemroot%/system32下面的系统dll文件,只有两个是chromium自己生成的:base.dll, conten ...
- shit antd & Merry Christmas bug
shit antd & Merry Christmas bug https://github.com/ant-design/ant-design/issues/13098 antd 玩大了? ...
- 第71天:jQuery基本选择器(二)
jQuery选择器 一.内容过滤选择器 选择器 描 述 返 回 示 例 :contains(text) 匹配含有文本内容text的元素 集合元素 $(“p:contains(今天)”) :empty ...
- VBA 实现学校上课教员一学期中所有上课时间,在一页中通过背景底色反应出来
需求:学校一学期的所有课程表,每个教员都有可能上好几门课,但给一个教员调课时需要查找所调课时间位置有没有此教员上其它的课 相冲突,手动查找很不方便,这里想通过一个表中位置显示出同一教员在所有课表中出现 ...