网站地图    收藏   

主页 > 前端 > javascript >

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

来源:未知    时间:2020-03-26 11:53 作者:小飞侠 阅读:

[导读] 这是基于tween.js的扩展类移植部分扩展类代码进行换算即可。 /***Createdbylipanon2020/3/23.*///补丁window.requestAnimationFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window...

这是基于tween.js的扩展类移植部分扩展类代码进行换算即可。

image.png

效果:http://www.zixuephp.com/codes/js/animate/


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;
        }
        #f{
            width: 200px;
            height: 200px;
            background: #f00;
            position: absolute;
            left:80px;
            top:330px;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div>
    <div id="f"></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);
            };
    }
)();

//比例换算公式
var Easing = {
    Linear: {
        None: function (k) {
            return k;
        }
    },
    Quadratic: {
        In: function (k) {
            return k * k;
        },
        Out: function (k) {

            return k * ( 2 - k );
        },
        InOut: function (k) {
            if (( k *= 2 ) < 1) return 0.5 * k * k;
            return -0.5 * ( --k * ( k - 2 ) - 1 );
        }
    },

    Cubic: {
        In: function (k) {
            return k * k * k;
        },
        Out: function (k) {
            return --k * k * k + 1;
        },
        InOut: function (k) {
            if (( k *= 2 ) < 1) return 0.5 * k * k * k;
            return 0.5 * ( ( k -= 2 ) * k * k + 2 );
        }
    },
    Quartic: {
        In: function (k) {
            return k * k * k * k;
        },
        Out: function (k) {
            return 1 - ( --k * k * k * k );
        },
        InOut: function (k) {
            if (( k *= 2 ) < 1) return 0.5 * k * k * k * k;
            return -0.5 * ( ( k -= 2 ) * k * k * k - 2 );
        }
    },
    Quintic: {
        In: function (k) {
            return k * k * k * k * k;
        },
        Out: function (k) {
            return --k * k * k * k * k + 1;
        },
        InOut: function (k) {
            if (( k *= 2 ) < 1) return 0.5 * k * k * k * k * k;
            return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
        }
    },
    Sinusoidal: {
        In: function (k) {
            return 1 - Math.cos(k * Math.PI / 2);
        },
        Out: function (k) {
            return Math.sin(k * Math.PI / 2);
        },
        InOut: function (k) {
            return 0.5 * ( 1 - Math.cos(Math.PI * k) );
        }
    },

    Exponential: {
        In: function (k) {
            return k === 0 ? 0 : Math.pow(1024, k - 1);
        },
        Out: function (k) {
            return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
        },
        InOut: function (k) {
            if (k === 0) return 0;
            if (k === 1) return 1;
            if (( k *= 2 ) < 1) return 0.5 * Math.pow(1024, k - 1);
            return 0.5 * ( -Math.pow(2, -10 * ( k - 1 )) + 2 );
        }
    },
    Circular: {
        In: function (k) {
            return 1 - Math.sqrt(1 - k * k);
        },
        Out: function (k) {
            return Math.sqrt(1 - ( --k * k ));
        },
        InOut: function (k) {
            if (( k *= 2 ) < 1) return -0.5 * ( Math.sqrt(1 - k * k) - 1);
            return 0.5 * ( Math.sqrt(1 - ( k -= 2) * k) + 1);
        }
    },
    Elastic: {
        In: function (k) {
            var s, a = 0.1, p = 0.4;
            if (k === 0) return 0;
            if (k === 1) return 1;
            if (!a || a < 1) {
                a = 1;
                s = p / 4;
            }
            else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
            return -( a * Math.pow(2, 10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) );
        },
        Out: function (k) {
            var s, a = 0.1, p = 0.4;
            if (k === 0) return 0;
            if (k === 1) return 1;
            if (!a || a < 1) {
                a = 1;
                s = p / 4;
            }
            else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
            return ( a * Math.pow(2, -10 * k) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) + 1 );
        },
        InOut: function (k) {
            var s, a = 0.1, p = 0.4;
            if (k === 0) return 0;
            if (k === 1) return 1;
            if (!a || a < 1) {
                a = 1;
                s = p / 4;
            }
            else s = p * Math.asin(1 / a) / ( 2 * Math.PI );
            if (( k *= 2 ) < 1) return -0.5 * ( a * Math.pow(2, 10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) );
            return a * Math.pow(2, -10 * ( k -= 1 )) * Math.sin(( k - s ) * ( 2 * Math.PI ) / p) * 0.5 + 1;
        }
    },

    Back: {
        In: function (k) {
            var s = 1.70158;
            return k * k * ( ( s + 1 ) * k - s );
        },
        Out: function (k) {
            var s = 1.70158;
            return --k * k * ( ( s + 1 ) * k + s ) + 1;
        },
        InOut: function (k) {
            var s = 1.70158 * 1.525;
            if (( k *= 2 ) < 1) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
            return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
        }
    },
    Bounce: {
        In: function (k) {
            return 1 - TWEEN.Easing.Bounce.Out(1 - k);
        },
        Out: function (k) {
            if (k < ( 1 / 2.75 )) {
                return 7.5625 * k * k;
            } else if (k < ( 2 / 2.75 )) {
                return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
            } else if (k < ( 2.5 / 2.75 )) {
                return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
            } else {
                return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
            }
        },
        InOut: function (k) {
            if (k < 0.5) return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
            return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;

        }
    }

};

;(function(w){

    var A = {
        data:{
            anmList:[],
            speed:1,
            key:0,
            isRun:false
        },
        move:function(dom,pms,time,cbk,es){

            //校验传参
            if(this.isEmptyObject(pms) || typeof dom == "undefined" || dom == null){
                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.speed = 1;
                fn.speedx = 1;
                fn.fn = cbk;
                A.getDefaultStyle(fn); //追加默认参数
                fn.type = i;
                fn.value = pms[i];
                fn.anmLen = anmLen;
                fn.es = typeof es != "undefined"?es:null;

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

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

            console.log('调用KEY',A.data.key,this.data.isRun);
            A.data.key ++;

            if(this.data.anmList.length > 0 && !this.data.isRun){
                this.frameChange('first');
            }

        },
        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; //获得比例
            //加速度带入

            if(item.es != null){
                proportion = item.es(proportion);
            }

            //proportion = proportion * (item.speed + item.speedx);
            //item.speedx > 0?item.speedx -= 0.3:null;

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


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


            if(_nowValue > 0){  //大
                if(_value >= _last){
                    _value = _last;
                    item.isok = true;
                }
            }else{ //小
                if(_value <= _last){
                    _value = _last;
                    item.isok = true;
                }
            }

            switch (item.type){
                case "opacity":
                    //设置属性
                    item.dom.style[item.type] = _value;
                    break;
                default:
                    //设置属性
                    item.dom.style[item.type] = _value +"px";
            }


        },
        frameChange:function(type){
            //console.log('aaaa',A.data.anmList);

            if(typeof type != "undefined" && type == "first"){
                console.log('我触发了',type);
            }

            A.data.anmList.forEach(function(item,key){
                if(item.isok || item === null){

                    item.anmLen --;

                    if( item.anmLen === 0){
                        //触发回调
                        item.fn(item);
                    }

                    //销毁当前实列
                    A.data.anmList[key] = null;

                    //删除当前实列
                    A.data.anmList.splice(key,1);

                    //如果队列没有数据,关闭动画状态
                    if(A.data.anmList.length  0 && requestAnimationFrame(A.frameChange);
        },

    }
    w.A = A;

})(window);

A.move(document.getElementById("a"),{
    left:500,
    top:150
},2000,function(){
    console.log('触发完成');
},Easing.Quadratic.In);


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

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

        //setTimeout(function(){
            console.log(item.dom);
            A.move(item.dom,{
                left:300,
                top:300,
                width:100,
                height:100
            },800,function(item){
                console.log('触发完成',item);
            },Easing.Quintic.InOut);
        //},1000);




    },Easing.Quintic.Out);


},Easing.Cubic.InOut);

//document.getElementById("c").onclick = function(e){
    A.move(document.getElementById("c"),{
    width:100,
    height:100,
    opacity:0.3,
    color:"#ff0"
    },2000,function(item){
        console.log('触发完成',item);
    },Easing.Elastic.In);
//}


var ops = 1;
var type = false;
function autoAnm(dom){
    var op = !type?0.1:1;
    A.move(dom,{
        opacity:op,
    },300,function(item){
        type = !type;
        autoAnm(item.dom);
    });
}

autoAnm(document.getElementById("f"),ops);





//requestAnimationFrame(A.frameChange);


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论