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运动函数的更多相关文章

  1. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  2. 如何用 js 实现一个 apply 函数

    如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...

  3. 如何用 js 实现一个 call 函数

    如何用 js 实现一个 call 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  4. 如何用 js 实现一个 sleep 函数

    如何用 js 实现一个 sleep 函数 原理 实现方式 总结 refs js sleep xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  5. 如何用 js 实现一个 new 函数

    如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...

  6. 如何用 js 实现一个 bind 函数

    如何用 js 实现一个 bind 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  7. JS里面的两种运动函数

    最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...

  8. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  9. 运动函数封装(js)

    // 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer  = setInterval(functi ...

随机推荐

  1. iOS-修改导航栏文字字体和颜色

    //修改导航栏文字字体和颜色 nav.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[RGBColor co ...

  2. OSG学习:位置变换节点示例

    osg::PositionAttitudeTransform节点. #include <osgViewer\Viewer> #include <osg\Node> #inclu ...

  3. css那些事儿2 经典两列布局

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  4. 微信小程序项目笔记以及openId体验版获取问题

    公司一直说要搞小程序,说了几个月,最近才算落地,一个很小的项目,就结果来讲,勉强让自己窥得小程序门径. 下面总结一下,为了弄好小程序,所学到的知识,以及项目中遇到的问题以及解决的办法.纯属个人见解. ...

  5. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

  6. php缓存技术——memcache常用函数详解

    php缓存技术——memcache常用函数详解 2016-04-07 aileen PHP编程 Memcache函数库是在PECL(PHP Extension Community Library)中, ...

  7. asp.net mvc4 使用分部视图来刷新数据库

    前几天研究SSE,用浏览器做侦听后台数据库数据变化,如果有更新,就即时通过浏览器,使用SSE效果果然OK,侦听数据库有更新时马上会向浏览器通知有新数据,我还在浏览器里放了短音提示,但遇到一个问题,发出 ...

  8. HDU 3879 Base Station(最大权闭合子图)

    将第i个用户和他需要的基站连边,转化成求二分图的最大权闭合子图. 答案=正权点之和-最小割. # include <cstdio> # include <cstring> # ...

  9. 【题解】Atcoder ARC#67 F-Yakiniku Restaurants

    觉得我的解法好简单,好优美啊QAQ 首先想想暴力怎么办.暴力的话,我们就枚举左右端点,然后显然每张购物券都取最大的值.这样的复杂度是 \(O(n ^{2} m)\) 的.但是这样明显能够感觉到我们重复 ...

  10. 2018牛客多校第六场 G.Pikachu

    题意: 给出一棵n个点的树,每条边有边权.对这个树加边变成一个完全图.新加的边的权值为边上两点在树上的距离.求完全图上任意两点的最大流之和. 题解: 一共有C(n,2)个点对.假设当前求s到t之间的最 ...