动画函数MTween.js

怼烎@ 2022-05-23 03:57 161阅读 0赞

实现各种各样的动画效果

使用方法：MTween(init);

参数：init：（是个对象）\{

el:obj,//元素

target:\{attr:val\},//元素属性及对应的目标点（是个对象，也就是可以设置多个属性及其值）！注意：如果是设置透明度和scale系列放大缩小的时候，比如想要把元素放大为原来的2倍，就要写为200，同理，透明度设置为1，就要写为100

time:1000,//时间（此时为1s）

type:"linear",//动画类型

callBack:fn,//回调函数（即，整个动画执行完之后要执行的函数）

callIn:fn//同步函数（即，动画在执行过程中同步执行的函数）

\}

前四个参数是必选参数，后两个是可选参数

动画类型的可选值有：

linear、easeIn、easeOut、easeBoth、easeInStrong、easeOutStrong、easeBothStrong、
    elasticIn、elasticOut、elasticBoth、backIn、backOut、backBoth、bounceIn、bounceOut、bounceBoth

下面是我们封装的函数（因为下面的封装函数，里面涉及的知识点我已经在其他函数中详细解释了，所以，下面没写注释）

如果有什么疑问，可以看[cssTransform][]，以及[css函数封装][css]，里面有注释，当然如果你只是要用这个函数的话，知道怎么用就可以，那直接把下面的引入你的代码中，然后直接使用即可

var Tween = {
        linear: function (t, b, c, d){
            return c*t/d + b;
        },
        easeIn: function(t, b, c, d){
            return c*(t/=d)*t + b;
        },
        easeOut: function(t, b, c, d){
            return -c *(t/=d)*(t-2) + b;
        },
        easeBoth: function(t, b, c, d){
            if ((t/=d/2) < 1) {
                return c/2*t*t + b;
            }
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d){
            return c*(t/=d)*t*t*t + b;
        },
        easeOutStrong: function(t, b, c, d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeBothStrong: function(t, b, c, d){
            if ((t/=d/2) < 1) {
                return c/2*t*t*t*t + b;
            }
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        },
        elasticIn: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            if ( (t /= d) == 1 ) {
                return b+c;
            }
            if (!p) {
                p=d*0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p/4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        elasticOut: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            if ( (t /= d) == 1 ) {
                return b+c;
            }
            if (!p) {
                p=d*0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },
        elasticBoth: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            if ( (t /= d/2) == 2 ) {
                return b+c;
            }
            if (!p) {
                p = d*(0.3*1.5);
            }
            if ( !a || a < Math.abs(c) ) {
                a = c;
                var s = p/4;
            }
            else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            if (t < 1) {
                return - 0.5*(a*Math.pow(2,10*(t-=1)) *
                    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            }
            return a*Math.pow(2,-10*(t-=1)) *
                Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
        },
        backIn: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        backOut: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s = 2.70158;  //回缩的距离
            }
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        backBoth: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            if ((t /= d/2 ) < 1) {
                return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            }
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        bounceIn: function(t, b, c, d){
            return c - Tween['bounceOut'](d-t, 0, c, d) + b;
        },
        bounceOut: function(t, b, c, d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
            }
            return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
        },
        bounceBoth: function(t, b, c, d){
            if (t < d/2) {
                return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
            }
            return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
        }
    };
    function css(element, attr , val){
        if(attr == "scale"||attr == "scaleX"
            ||attr == "scaleY"||attr == "scaleZ"
            ||attr == "rotateX"||attr == "rotateY"
            ||attr == "rotateZ"||attr == "rotate"
            ||attr == "skewX"||attr == "skewY"
            ||attr == "translateX"||attr == "translateY"
            ||attr == "translateZ") {
            return cssTransform(element, attr, val);
        }
        if(arguments.length == 2){
            var val = getComputedStyle(element)[attr];
            if(attr=='opacity'){
                val = Math.round(val*100);
            }
            return parseFloat(val);
        }
        if(attr == "opacity") {
            element.style.opacity= val/100;
        } else {
            element.style[attr]= val + "px";
        }
    }
    function cssTransform(element, attr, val){
        if(!element.transform){
            element.transform = {};
        }
        if(typeof val === "undefined"){
            if(typeof element.transform[attr] === "undefined"){
                switch(attr){
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                    case "scaleZ":
                        element.transform[attr] = 100;
                        break;
                    default:
                        element.transform[attr] = 0;
                }
            }
            return element.transform[attr];
        } else {
            element.transform[attr] = val;
            var transformVal  = "";
            for(var s in element.transform){
                switch(s){
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                    case "scaleZ":
                        transformVal += " " + s + "("+(element.transform[s]/100)+")";
                        break;
                    case "rotate":
                    case "rotateX":
                    case "rotateY":
                    case "rotateZ":
                    case "skewX":
                    case "skewY":
                        transformVal += " " + s + "("+element.transform[s]+"deg)";
                        break;
                    default:
                        transformVal += " " + s + "("+element.transform[s]+"px)";
                }
            }
            element.style.WebkitTransform = element.style.transform = transformVal;
        }
    }
    function MTween(init){
        var t = 0;
        var b = {};
        var c = {};
        var d = init.time / 20;
        for(var s in init.target){
            b[s] = css(init.el, s);
            c[s] = init.target[s] - b[s];
        }
        clearInterval(init.el.timer);
        init.el.timer = setInterval(
            function(){
                t++;
                if(t>d){
                    clearInterval(init.el.timer);
                    init.callBack&&init.callBack.call(init.el);
                } else {
                    init.callIn&&init.callIn.call(init.el);
                    for(var s in b){
                        var val = Number((Tween[init.type](t,b[s],c[s],d)).toFixed(2));
                        css(init.el, s, val);
                    }
                }
            },
            20
        );
    }

[cssTransform]: https://blog.csdn.net/lhjuejiang/article/details/80514094
[css]: https://blog.csdn.net/lhjuejiang/article/details/80536798

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript—封装animte动画函数

封装Animte 动画函数虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。我比较喜欢底层的算法

淡淡的烟草味﹌/ 2023年10月11日 13:15/ 0 赞/ 47 阅读

相关 JS封装缓动动画效果函数

原理 JS的动画效果原理其实就是添加一个定时器,每多少毫秒调用一次,就可以使盒子运动一次. 在这里我封装了一个缓动动画函数,只要有对象需要添加动画就可以调用这个动画函

亦凉/ 2023年07月07日 05:56/ 0 赞/ 2 阅读

相关 vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画) <!DOCTYPE html> <html lang="en"> <h

Love The Way You Lie/ 2023年06月29日 05:53/ 0 赞/ 37 阅读

相关 Vue之过渡动画钩子函数+Velocity.js动画库

前言 CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式，包含transition过渡类型动画和@keyframes类型动画。 JS钩子函数方式

桃扇骨/ 2023年06月12日 04:22/ 0 赞/ 34 阅读

相关 JavaScript动画实现的原理、动画函数的封装

JavaScript动画实现的原理、动画函数的封装动画实现的原理核心原理是通过定时器setInterval（）不断移动盒子的位置实现步骤： 1. 获得盒

- 日理万妓/ 2023年01月02日 02:20/ 0 赞/ 199 阅读

相关 HarmonyOS动画,js开发13 animation动画组件&鸿蒙的定时函数和js的动画

今天给大家介绍的是animation动画组件在鸿蒙中的应用.要实现一个 animation 动画，需要使用两个属性@keyframes 和 animation. 一.关键帧(

蔚落/ 2022年10月16日 07:47/ 0 赞/ 194 阅读

相关常见的10个JavaScript动画函数库

一、[Snap.svg][] SVG是一种创建交互式动画非常棒的方式，独立的分辨率的矢量图形在任何大小的屏幕上看起来效果都很好。Snap.svg库使操作SVG变得更jQuer

绝地灬酷狼/ 2022年08月05日 12:14/ 0 赞/ 264 阅读

相关动画函数MTween.js

实现各种各样的动画效果使用方法：MTween(init); 参数：init：（是个对象）\{ el:obj,//元素

怼烎@/ 2022年05月23日 03:57/ 0 赞/ 162 阅读

相关 vue中动画函数钩子js动画

1. 动画开始：@before-enter @before-leave 动画过程： @enter @leave 在这个

系统管理员/ 2022年04月15日 03:45/ 0 赞/ 305 阅读

相关新动画函数requestAnimationFrame

经典动画话不多说，首先来个经典的动画函数： function animate(element, name, from, to, time) {

小灰灰/ 2022年03月29日 05:43/ 0 赞/ 315 阅读