运动框架一:跳动的数字
发布在js菜鸟中的菜鸟开始学飞2015年4月8日view:6145
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

今天简单的为大家一个运动框架

手机端支付宝中余额宝的数字跳动效果

这是实现的效果 http://sandbox.runjs.cn/show/dmyzoa94

其实很简单

//在一定的时间内 增长一定数字

//当前的数字=增长的数值/所用的时间*已用的时间

//增长的数值=运动结束数值-运动起始数值

function move(){
var oSpan=document.getElementById("oSpan");
var d=45123451215412;//跳动到最后的数字
var s= parseInt(oSpan.innerHTML);//起始起始值 一般是 0 或其他
var time=1000;  //所用时间 1000毫秒( 在1秒内 数值增加到d);
var outTime=0;  //所消耗的时间
var interTime=30;
var timer = setInterval(function(){
    outTime+=interTime;
    if(outTime<time){
        oSpan.innerHTML= parseInt(d/time*outTime);
    }else{
        oSpan.innerHTML=d;
    }
    },interTime);
}

为什么说他是运动框架!而不是简单的运动呢。我们可以看下

网页上用到的动态的效果都是动态改变DOM的样式比如:宽高、左坐标left值、透明度等等

以下公式一样同理

当前的位置=(移动终点位置-移动初点位置)/所用的时间*已用的时间

这样一来就可以动态的改变“当前的位置” 这里可以是坐标 可以是数值、也可以是透明度。都可以!所以称之为运动框架。

今天就先简单的介绍一下。后期会将完整的运动框架完善!

我在珠峰培训 学习 JS

评论
发表评论
暂无评论
WRITTEN BY
古道川
技法无高低、功力有深浅。
TA的新浪微博
PUBLISHED IN
js菜鸟中的菜鸟开始学飞

今天不是特殊的日子、我想要的,我会去争取!把自己驾到台风口上,学飞!!!

技法我高低,功力有深浅!呵呵~

我的收藏