js:原生动画及公式(封装动画)

最新推荐文章于 2023-02-20 20:49:33 发布
最新推荐文章于 2023-02-20 20:49:33 发布
阅读量406 收藏 1
点赞数
原文链接：https://juejin.im/post/5c6cb4f5f265da2d9e174e0b
版权

linear(匀速运动的公式)

function linear(t,b,c,d){
         return t/d*c+b;//t是走过的时间、d是总时间、c是总路程(灵活的有可能是opacity的变化的值)、b是元素的初始位置
}
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.animate动画的封装</title>
    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: brown;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="utils.js"></script>
<script>
    var oBox=document.getElementById('box');
    ;(function(){
        function linear(t,b,c,d){
            return t/d*c+b;
        }

        function animate(curEle,target,duration,callback){
            var begin={};
            var distance={};
            for(var key in target){//检测当前属性属不属于目标对象
                begin[key]=utils.css(curEle,key);
                distance[key]=target[key]-begin[key];
                console.log(target[key]);
                console.log(distance[key])
            }
            var time=0;
            curEle.timer=setInterval(()=>{
                time+=17;//走过的时间

                if(time>=duration){//如果走过的时间大于等于总时间
                    utils.css(curEle,target);
                    clearInterval(curEle.timer);
                    typeof callback==='function'?callback():null;
                    return;
                }

                for(var key in target){
                    var val=linear(time,begin[key],distance[key],duration );//time是走过的时间,
                    utils.css(curEle,key,val);
                }
            },17)
        }
        function change() {
            oBox.style.width=500;
            oBox.style.height=700;
            oBox.style.background='yellowGreen';
        }
        animate(oBox,{width:1000,height:1000,opacity:1,left:2500,top:2500},3000,change)
    })();
</script>
</body>
</html>
复制代码

utils.js

var utils = (function () {
    function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    };
    function getCss(curEle,attr) {
        var  val;
        if("getComputedStyle" in window){
            // 先判断是否支持getComputedStyle;
            val = getComputedStyle(curEle)[attr];
        }else{
            val = curEle.currentStyle[attr];
        }
        // 去单位
        var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise|opacity)$/;
        // 校验当前属性是否带有单位
        if(reg.test(attr)){
            // 判断是否为空；
            if(!isNaN(parseFloat(val))){
                val = parseFloat(val);
            }
        }
        return val;
    }
// setCss : 每执行一次，都会设置元素一个属性样式；
    function setCss(curEle,attr,val) {
        var  reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
        if(reg.test(attr)){
            if(typeof val==="number"){
                val = val + "px";
            }
        }
        curEle.style[attr]=val;// 设置行内样式；
    }
    function setGroupCss(curEle,obj) {
        // 遍历obj;调用封装的setCss，设置元素的单个样式；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }
    function css(...arg) {// 在函数定义的括号中，... 是剩余运算符；将所有的实参放入到一个数组中；
        //
        if(arg.length===3){
            // [oBox,"height",300]
            setCss(...arg);
        }else if(arg.length===2){
            if(toString.call(arg[1])==="[object Object]"){
                setGroupCss(...arg)
            }else{
                return getCss(...arg)
            }
        }
    }
    function win(attr,val) {
        // 如果是两个实参，那么一定是设置；如果是一个实参，是获取；
        if(val===undefined){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = val;
        document.body[attr] = val;


    }
    return {
        offset:offset,
        getCss:getCss,
        setCss:setCss,
        setGroupCss:setGroupCss,
        css:css,
        win:win
    }
})();
// 单例模式
/*
var utils= {
    offset:function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    }
}*/

复制代码

animate.js

(function () {
    // 运动方式
    var zhufengEffect = {
        // 匀速运动公式
        Linear: function (t, b, c, d) {
              return t/d * c + b;
        },
        //指数衰减的反弹缓动
        Bounce: {
            easeIn: function(t, b, c, d) {
                return c - zhufengEffect.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut: 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 + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut: function(t, b, c, d) {
                if (t < d / 2) {
                    return zhufengEffect.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                }
                return zhufengEffect.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        },
        //二次方的缓动
        Quad: {
            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;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t + b;
                }
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },
        //三次方的缓动
        Cubic: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },
        //四次方的缓动
        Quart: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut: 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;
            }
        },
        //五次方的缓动
        Quint: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },
        //正弦曲线的缓动
        Sine: {
            easeIn: function(t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut: function(t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },
        //指数曲线的缓动
        Expo: {
            easeIn: function(t, b, c, d) {
                return (t == 0)
                    ? b
                    : c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut: function(t, b, c, d) {
                return (t == d)
                    ? b + c
                    : c * (-Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if (t == 0)
                    return b;
                if (t == d)
                    return b + c;
                if ((t /= d / 2) < 1)
                    return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        },
        //圆形曲线的缓动
        Circ: {
            easeIn: function(t, b, c, d) {
                return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                }
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },
        //超过范围的三次方缓动
        Back: {
            easeIn: function(t, b, c, d, s) {
                if (s == undefined)
                    s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut: function(t, b, c, d, s) {
                if (s == undefined)
                    s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut: function(t, b, c, d, s) {
                if (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;
            }
        },
        //指数衰减的正弦曲线缓动
        Elastic: {
            easeIn: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d) == 1)
                    return b + c;
                if (!p)
                    p = d * .3;
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : 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;
            },
            easeOut: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d) == 1)
                    return b + c;
                if (!p)
                    p = d * .3;
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : 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);
            },
            easeInOut: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d / 2) == 2)
                    return b + c;
                if (!p)
                    p = d * (.3 * 1.5);
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1)
                    return -.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) * .5 + c + b;
            }
        }

    };

    /**
     *
     * @param curEle 当前执行动画的元素
     * @param target 目标值对象 {left:500,top:300}
     * @param duration 总过渡时间 2000ms
     */
    // effect 指定运动方式 传参
    // 传一个数字
    // 传一个数组 ['Quad','easeInOut']
    function move(curEle, target, duration,effect, callBack) {
        // 默认运动方式
        var tempEffect = zhufengEffect.Linear;

        // 判断effect 如果是个数字
        if(typeof effect === "number") {
            switch (effect) {
                case 0:
                    tempEffect = zhufengEffect.Linear;
                    break;
                case 1:
                    tempEffect = zhufengEffect.Quad.easeInOut;
                    break;
                case 2:
                    tempEffect = zhufengEffect.Bounce.easeIn;
                    break;
                case 3:
                    tempEffect = zhufengEffect.Cubic.easeInOut;
                    break;
            }
        } else if(effect instanceof Array) {
            //如果以数组方式指定远动方式 ['Quad','easeInOut']
            tempEffect = effect.length === 2? zhufengEffect[effect[0]][effect[1]]:zhufengEffect[effect[0]];
        } else if(typeof effect === "function") {
            callBack = effect;
        }
        // 执行本次动画之前 清除上次动画
        curEle.zfTimer? clearInterval(curEle.zfTimer) : null;

        var begin = {}; // 存储元素执行动画前 相应属性初始状态
        var change = {}; // 存储元素执行动画 相应属性状态变化值
        for(var key in target) {
            // target  对象 目标位置
            if(target.hasOwnProperty(key)) {
                // begin {'left': 'left初始值'}
                begin[key] =Number(utils.css(curEle, key));// 获取属性初始值，在obj新增key属性，初始值赋值给begin的key的属性值
                // change {'left': 'left变化值'}
                console.log(begin[key]);//获取的透明度的
                change[key] =target[key] - begin[key]// key属性要变化的值，并且放在change对象中
                console.log(change[key]);
            }
        }
        // console.log(begin);
        // console.log(change);

        var time = null; // 记录当前时间
        curEle.zfTimer = setInterval(function () {
            time += 10;
            if(time >= duration) { // 结束条件
                // target：{left: 500, top: 300}
                utils.css(curEle,target); // 确保是目标状态
                clearInterval(curEle.zfTimer); //结束动画
                typeof callBack ==="function"? callBack.call(curEle) : null;
                return;
            }
            // 计算出当前时间 元素相应属性 的状态
            // target 有多少个属性 zfEffect.Linear 执行多少次 并且把相应属性的参数传递进去 计算出 当前状态
            // 第一次的时候 key 是left  第二次的时候key 是 top
            for(var key in target) {
               if(target.hasOwnProperty(key)) {
                   // 计算出 当前时间time 元素相应属性 所处状态
                   var curPos = tempEffect(time,begin[key],change[key], duration);
                   // 将当前元素 相应属性 设置为 当前计算出来的状态curPos
                   utils.css(curEle, key, curPos);
               }
            }
        }, 10);
    }
//   把函数放进全局下的zfAnimate
   window.zfAnimate = move;

})();
复制代码
weixin_34342905
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS-:原生JavaScript动画组件库
05-27
综上所述，"JS-原生JavaScript动画组件库"涉及的技术点广泛，涵盖了JavaScript基础、DOM操作、动画原理、性能优化等多个方面。通过深入理解和实践这些知识点，开发者可以创建出高效且具有交互性的动画效果。
javascript_learning:原生js的一些动画效果
05-10
本教程将深入探讨JavaScript的核心概念，特别是原生JavaScript在创建动画效果方面的应用，以及DOM（文档对象模型）和BOM（浏览器对象模型）的基础知识。 一、JavaScript基础 JavaScript是一种解释型、弱类型、基于...
JavaScript Tween算法及缓动效果javascript
chaoxidawang的专栏
01-09 1855
javascript tween算法及缓动效果 flash做动画时会用到tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。 我这里要教大家的是怎么利用flash的tween类的算法,来做js的tween算法,并利用它做一些简单的缓动效果。 实例效果 tween类型: linearquadraticcubicquarticquinticsinusoidal exponentia
js--动画函数（最全版）
m0_63813622的博客
11-13 913
js动画函数的多种考虑因素---详细
js之轮播图的逻辑(简单)
m0_67932301的博客
05-14 378
js之轮播图的逻辑
轮播图 （无缝轮播图）
m0_46088512的博客
09-17 3303
1.无缝轮播核心:在最后多加一张第一张图,当达到最后一张t1的时候一瞬间将ul拉回到0的位置 结构： <div class="wrap"> <ul> <li><img src="./image/t1.png" alt=""></li> <li><img src="./image/t2.png" alt=""></li> ...
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 4604
JS无缝滚动轮播图案例
原生javascript实现的一个简单动画效果
10-22
本文将详细解析如何使用原生JavaScript创建一个简单的动画效果，包括一个可移动的div元素以及开始、停止动画的按钮。 首先，我们需要创建一个HTML页面结构，包含一个绿色的div元素和两个按钮，分别用于开始和停止...
原生JS实现首页进度加载动画
11-24
总的来说，原生JS实现首页进度加载动画涉及的知识点包括：JavaScript事件监听、DOM操作、CSS动画、浏览器兼容性处理以及性能分析API的使用。通过这样的实践，开发者可以提高用户在等待页面加载时的体验，同时也可以...
原生js彩色漂浮的文字动画代码
11-23
在JavaScript的世界里，创建动态和引人入胜的视觉效果是一项常见的挑战，而"原生js彩色漂浮的文字动画代码"则提供了一种实现这种效果的方法。这篇文章将深入探讨如何利用JavaScript来创建彩色漂浮文字的动画效果，...
js实现图片无缝循环轮播
10-16
主要为大家详细介绍了js实现图片无缝循环轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最全面的无缝滚动轮播图（只为解放你的双手）
热门推荐
Jdoit CW的博客
05-30 1万+
文章目录1. 轮播图效果展示2. 轮播图剖析2.1. 原理简介2.2. 功能需求3. 代码分析3.1. HTML代码分析3.2. JavaScript代码逐步引导 写在前面：最近在给自己的二手网页添加动画时发现轮播图还真是无处不在，样式也是五花八门。于是手写轮播图的想法涌上心头，经过一番折腾之后，它诞生了。优化了些内容，对无js基础的小伙伴也很友好（只需改动样式，js动态变化）。 1. 轮播图效果展示 2. 轮播图剖析 2.1. 原理简介 2.2. 功能需求 3. 代码分析 3.1. HTML代码分析 3.
淘宝顶部header的居中布局
u011280778的博客
06-29 1922
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js实现无缝轮播图
weixin_45571121的博客
09-11 4086
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
JS匀速/缓动i动画函数封装简易
凭澜偏偏
07-19 161
缓动系数公式：缓动公式：起始值+=（结束值-起始值）*缓动系数 匀速 function LinearAnimation(btnid,boxid,step,target) { var btn=document.getElementById(btnid); var box=document.getElementById(boxid); ...
js 常用函数
Provenr的博客
04-10 803
解决0.1+0.2不等于0.3的小数累加精度问题 // formatFloat(num1, num2) { let baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; ...
JavaScript缓动函数浅谈
weixin_30781631的博客
03-13 500
前段时间的一个周末，自己在家看jQuery源码解析的文章，动手写了一个粗糙的模仿jQuery的animate方法的一个插件，也顺带了解了animate方法有用到的缓动函数。因此以下内容就是基于本次练手的一些见解。 缓动函数的概念 缓动函数并不是从JavaScript这个语言发展出来的，而是从其他可以实现动画的语言搬运过来的，例如Flash。因为这只是个纯函数，所以在语言当中迁移也很容易。...
无缝滚动轮播图
qq_44902858的博客
12-15 1073
在页面布局中通常会用到轮播图，特别是在一些大型的网页中都可以看到轮播图，有时候为了方便快速我们可能会用到一些插件直接使用轮播图，还有就是自己把轮播图写出来，轮播图的样式有很多，接下来我们将了解常用的一种轮播图的写法 页面样式 <style> * { padding: 0; margin: 0; list-style: none; border: 0; }
js无缝轮播图，有过渡效果（详细解析）
最新发布
qq_59599812的博客
02-20 1439
此时需要注意，需要在判断中用到setTimeout延时器，过渡效果有几秒，延时器也要写几秒。因为有过渡效果，不然会有问题，要把过渡清除，设置延时器是把延时器的时间当做过渡去使用。1.无缝轮播思路：复制轮播图第一张到最后一张，当轮播图到最后一张时，需要判断，到第一张。
优化实战：原生JavaScript高效编程与设计
《JavaScript优化原生JavaScript》是一本由罗伯特·C·艾瑟德奇编著的专业书籍，该书专注于设计、编程和调试使用在实际项目中的原生JavaScript应用程序。作者拥有超过30年的编程经验，从早期的IBM punchcards和U.S. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值