纯JS实现jquery的动画方法，animate.js-自学php网

纯JS实现jquery的动画方法，animate.js

来源：未知时间：2020-03-24 11:50 作者：小飞侠阅读:次

[导读] 今天站长给大家带来纯JS实现过渡动画。目前只实现平速过渡，如果需要加速或者减速需要前端同学们自己加入 speed 速度变量自己代入方法里面。源码： !DOCTYPEhtmlhtmlheadmetacharset=UTF-8...

今天站长给大家带来纯JS实现过渡动画。目前只实现平速过渡，如果需要加速或者减速需要前端同学们自己加入 speed 速度变量自己代入方法里面。

源码：

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #a{
            width: 50px;
            height: 50px;
            background: #f00;
            position: absolute;
            left:50px;
            top:20px;
        }

        #b{
            width: 50px;
            height: 50px;
            background: #00d6b2;
            position: absolute;
            left:0px;
            top:80px;
        }

        #c{
            width: 200px;
            height: 200px;
            background: #00d6b2;
            position: absolute;
            left:80px;
            top:130px;

            margin-left: 10px;
        }


    </style>

</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div>

    <script src="js/animate.js"></script>

</body>
</html>

源码：

/**
 * Created by lipan on 2020/3/23.
 */

// 补丁
window.requestAnimationFrame = (
    function(){
        return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    }
)();



;(function(w){
    console.log(w);
    var A = {
        data:{
            anmList:[]
        },
        move:function(dom,pms,time,cbk){

            //校验传参
            if(this.isEmptyObject(pms)){
                return false;
            }

            var anmLen = 1;
            //拆碎
            for(i in pms){
                var fn = {}
                fn = {};
                fn.dom = dom;
                fn.startTime = new Date().getTime();
                fn.pms = pms;
                fn.overTime = time;
                fn.fn = cbk;
                A.getDefaultStyle(fn); //追加默认参数
                fn.type = i;
                fn.value = pms[i];
                fn.anmLen = anmLen;

                if(typeof fn.default[i] == "undefined"){
                    continue;
                }

                //追加动画队列
                this.data.anmList.push(fn);
                anmLen ++;
            }



            this.frameChange();
        },
        getStyle:function(obj,styleName){
            if(obj.currentStyle){
                return obj.currentStyle[styleName];
            }else{
                return getComputedStyle(obj,null)[styleName];
            }
        },
        isEmptyObject: function( obj ) {
            var name;
            for ( name in obj ) {
                return false;
            }
            return true;
        },
        //设置默认属性
        getDefaultStyle:function(item){
            //测试

            var dom = item.dom;
            if(typeof item.default == "object"){ return false;}

            item.default = {};
            item.default.width = dom.style.width != ""?parseInt(dom.style.width):dom.offsetWidth;
            item.default.height = dom.style.height != ""?parseInt(dom.style.height):dom.offsetHeight;
            item.default.left = dom.style.left != ""?parseInt(dom.style.left):dom.offsetLeft;
            item.default.top = dom.style.top != ""?parseInt(dom.style.top):dom.offsetTop;
            item.default.opacity = parseFloat(this.getStyle(dom,'opacity'));

        },

        //真刷新
        anmpx:function(item){

            //console.log('获得当前实列',item);

            var now = new Date().getTime(),
                proportion = (now - item.startTime)/item.overTime; //获得比例


            //循环CSS属性
            var _value;
            var _last = item.value; //最终期望结果
            var _default = item.default[item.type]; //原始大小


            var _nowValue = _last - _default; //期望 - 原始
            _value = _default + _nowValue * proportion; //得到当前


            //console.log('anmpx',i,_value);
            if(_nowValue > 0){  //大
                if(_value >= _last){
                    _value = _last;
                    item.isok = true;
                }
            }else{ //小
                if(_value  0 && requestAnimationFrame(A.frameChange);
        }
    }
    w.A = A;

})(window);

调用实列

A.move(document.getElementById("a"),{
    left:300,
    top:150
},2200,function(){
    console.log('触发完成');
});


A.move(document.getElementById("b"),{
    left:500,
    top:180,
    width:300,
    height:190
},1200,function(item){
    console.log('触发完成',item);

    A.move(document.getElementById("b"),{
        left:100,
        top:50
    },1200,function(item){
        console.log('触发完成',item);

        A.move(item.dom,{
            left:300,
            top:300,
            width:100,
            height:100
        },1200,function(item){
            console.log('触发完成',item);

        });


    });


});

A.move(document.getElementById("c"),{
    width:100,
    height:100,
    opacity:0.3,
    color:"#ff0"
},1200,function(item){
    console.log('触发完成',item);
});

vue双向绑定实现原理详解

纯JS实现jquery的动画方法，animate.js，加入扩展缓动算法

子栏目

纯JS实现jquery的动画方法，animate.js

最新评论

添加评论

更多文章推荐

添加评论