JS运动框架-move3.js

本文介绍了一个简单的运动框架实现方法,通过使用JavaScript,可以为网页元素创建平滑的动画效果。该框架包括获取元素样式和启动动画两个核心函数,能够处理不同属性的动画,并在动画结束后执行回调函数。
/**
 * Created by zhanghaibin on 16/12/5.
 */
//完美运动框架
function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
};
function startMove(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer=setInterval(function () {
        var bStop=true; //这一次运动就结束了---所有的值都到达了
        for(var attr in json){
            //1.取当前值
            var iCur=0;
            if(attr=='opacity'){
                iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
            }else{
                iCur=parseInt(getStyle(obj,attr));
            }
            //2.算速度
            var speed=(json[attr]-iCur)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            //3.检测停止
            if(iCur!=json[attr]){
                bStop=false;
            }
            if(attr=='opacity'){
                obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
                obj.style.opacity=(iCur+speed)/100;
            }else{
                obj.style[attr]=iCur+speed+'px';
            }
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            };
        }
    },30)
};
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值