05-JS特效-缓动动画

最新推荐文章于 2023-12-17 11:30:00 发布
最新推荐文章于 2023-12-17 11:30:00 发布
阅读量1.7k 收藏 3
点赞数 2
分类专栏： JavaScript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luyu13141314/article/details/53824124
版权

动画的种类

动画原理 = 盒子位置 + 步长。

1.闪动。 （瞬间到达）
2.匀速。 （每次走一样距离）
3.缓动。 （开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…）

缓动动画原理

缓动动画原理： 盒子位置 + 步长（步长越来越小）

盒子位置 = 盒子本身位置+（目标位置-盒子本身位置）/ 10；

公式： leader = leader + (target - leader) / 10;

缓动动画用到的三个Math方法

Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入取整

0.缓动动画封装

    <style>
       div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
    <body>
    <button>走到200</button>
    <button>走到400</button>
    <div></div>
    <script>

    //获取元素
    var div = document.getElementsByTagName("div")[0];
    var btnArr = document.getElementsByTagName("button");

    //绑定事件
    btnArr[0].onclick = function () {
        //封装一个方法，调用这个函数。带两个参数。一个是盒子，一个是目标。
        animate(div,20);
    }
    btnArr[1].onclick = function () {
        animate(div,400);
    }

    //缓动动画封装

    function animate(ele,target){
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            var leader = ele.offsetLeft;
            var step = (target-leader)/10;
            //二次处理步长：大于0向上取整，小于0向下取整
            step = step>0 ?Math.ceil(step) :Math.floor(step);
            ele.style.left = leader +step +"px";
            if(Math.abs(target-leader)<Math.abs(step)){
                ele.style.left = target +"px";
                clearInterval(ele.timer);
            }
        },30);
    }

    </script>
    /body>

1. 缓动框架封装（单个属性）

     <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
    </head>
    <body>
    <button>动起来...</button>
    <div></div>

    <script>

        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];

        btn.onclick = function () {
            animate(box,"top",400);
            //animate(box,"width",400);
            //animate(box,"height",400);
        }

        //缓动动画：(设置单个属性的值需要多出一个参数。属性)
        function animate(ele,attr,target){
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //获取盒子自身的位置不能再用检测的方法了：offsetLeft;
                    //改用自己封装的获取样式的方法;既能获取内嵌式和行内式又可以获取外链式
                var leader = parseInt(getStyle(ele,attr)) || 0;//带有单位，需要去掉px
                //获取步长
                var step = (target-leader)/10;
                step = step>0?Math.ceil(step):Math.floor(step);
                //赋值的时候要用传过来的属性
                ele.style[attr] = leader + step +"px";
                console.log(1);
                if(Math.abs(target-leader)<=Math.abs(step)){
                    ele.style[attr] = target+"px";
                    clearInterval(ele.timer);
                }
            },30);
        }


        //封装一个兼容写法：
        function getStyle(ele,attr){
            //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }

    </script>
    /body>

2. 缓动框架封装（多个属性）利用json实现

        <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /*margin-left: 100px;*/
        }
        </style>
        </head>
        <body>
        <button>动起来...</button>
        <div></div>


        <script>

        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];


        btn.onclick = function () {
        //缓动动画
        var obj1 = {"left": 800, "top": 200, "width": 200, "height": 200};
        animate(box, obj1);

    }
    function animate(ele, json) {
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //多个属性操作：很简单。
            //1.利用for...in循环。
            //2.把程序中的attr换成for...in中的k。
            //3.把程序中的target换成for...in中的json[k]。
            for (var k in json) {
                var leader = parseInt(getStyle(ele, k)) || 0;//带有单位，需要去掉px
                //获取步长
                var step = (json[k] - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //赋值的时候要用传过来的属性
                ele.style[k] = leader + step + "px";
                console.log(1);
                //定时器最难清除，一会儿再做。。。。

            }

        }, 30);
    }


    //封装一个兼容写法：
    function getStyle(ele, attr) {
        //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }

    </script>
    </body>

3. 缓动框架封装（清除定时器）

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
    </head>
    <body>
    <button>动起来</button>
    <div></div>
    <script>

        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];

        btn.onclick = function () {
            var obj1 = {"left":800,"top": 200,"width":200,"height":200};
            animate(box,obj1);

        }

        function animate(ele,json){
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //定义一个开闭原则
                var bool = true;

                for(var k in json){
                    var leader = parseInt(getStyle(ele,k)) || 0;//带有单位，需要去掉px
                    //获取步长
                    var step = (json[k]-leader)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    //赋值的时候要用传过来的属性
                    leader = leader + step;
                    ele.style[k] = leader +"px";
                    console.log(1);
                    //定时器最难清除，必须保证所有属性都到达指定位置，才能清除定时器
                    //再次启用开闭原则：有一个没有到达目标位置，也不能清除定时器
                    //if(Math.abs(json[k]-leader)>Math.abs(step)){
                    //没到达指定位置，就是当前位置和目标位置不相等
                    if(json[k]!=leader){
                        //不能清除定时器
                        bool = false;
                    }
                }
                //看看这个bool类型值是否被修改，如果是默认true代表所有元素都到达指定位置，就可以清除定时器了。
                if(bool){
                    clearInterval(ele.timer);
                }
            },30);
        }


        //封装一个兼容写法：
        function getStyle(ele,attr){
            //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }

    </script>
    </body>

4. 缓动框架封装（回调函数）

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /*margin-left: 100px;*/
        }
    </style>
    </head>
    <body>
    <button>动起来...</button>
    <div></div>


    <script>

        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];


        btn.onclick = function () {
            //缓动动画
            var obj1 = {"left":400};
            var obj2 = {"top":400};
            //回调函数
            animate(box,obj1, function () {
                animate(box,obj2);
            });
            //走完第一个在走第二个：1.第一个定时器被清除的时候就可以走第二个函数来了。


        }

        //加一个fn，带表一个函数，当前一个定时器被清除的时候，在执行这个函数
        function animate(ele,json,fn){
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //定义一个开闭原则
                var bool = true;

                for(var k in json){
                    var leader = parseInt(getStyle(ele,k)) || 0;//带有单位，需要去掉px
                    //获取步长
                    var step = (json[k]-leader)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    //赋值的时候要用传过来的属性
                    leader = leader + step;
                    ele.style[k] = leader +"px";
                    console.log(1);
                    //定时器最难清除，必须保证所有属性都到达指定位置，才能清除定时器
                    //再次启用开闭原则：有一个没有到达目标位置，也不能清除定时器
                    //没到达指定位置，就是当前位置和目标位置不相等
                    if(json[k]!=leader){
                        //不能清除定时器
                        bool = false;
                    }
                }
                //看看这个bool类型值是否被修改，如果是默认true代表所有元素都到达指定位置，就可以清除定时器了。
                if(bool){
                    clearInterval(ele.timer);
                    //定时器被清除了，我可以执行fn这个函数了。
                        //判断：如果传递了函数就执行，如果没有传递，不管他
                    if(fn){//如果fn存在将代表函数体，如果不存在代表undefined
                        fn();
                    }
                }
            },30);
        }



        //封装一个兼容写法：
        function getStyle(ele,attr){
            //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }

    </script>
    </body>

5. 缓动框架封装（特殊属性处理透明度和层级）

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
    </head>
    <body>
    <button>动起来</button>
    <div></div>
    <script>

        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];

        btn.onclick = function () {
            //缓动动画
//            var obj1 = {"left":400};
            var obj1 = {"opacity": 0.4};
//            var obj1 = {"z-index": 2};
//            var obj1 = {"background-color": "pink"};
            //回调函数
            //特殊属性特殊处理
            animate(box,obj1);
        }

        function animate(ele,json,fn){
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //定义一个开闭原则
                var bool = true;
                for(var k in json){
                    //需求:特殊属性特殊处理。if判断如果是什么属性怎么处理，如果是另外一个属性，怎么处理....
                    //如果是层级，我们这么处理（k的值为z-index）
                    if("z-index" === k){
                        //层级不是缓慢移动到最高的，而是一次性提到最好。(需求决定)
                        //事件触发瞬间，层级立刻提高到最高，不能慢慢移动到最高。
                        ele.style.zIndex = json[k];
                    //如果是透明度我们这么处理
                    }else if("opacity" === k){
                        //问题1：透明度的值是小数，所以应该*100之后计算。（兼容IE678方便计算）
                        //问题2：透明度的兼容性不好。如果想要兼容IE678，要使用filter。(*100)

                        // 先获取透明度，然后*100在取整(小数精度丢失问题)。
                        // 如果没有给opacity属性，那么默认1，*100之后值为100；
                        var leader = parseInt(getStyle(ele,k)*100) || 100;
                        var step = (parseInt(json[k]*100)-leader)/10;
                        step = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader + step;
                        //直接为opacity赋值，不需要加单位px；
                            //opacity要的是0-1之间的小数，所以除以100；
                        ele.style.opacity = leader/100;
                        //兼容ie678,不需要除以100，因为filter的值为100进制。
                        ele.style.filter = "alpha(opacity="+leader+")";
                        console.log(1);
                        if(parseInt(json[k]*100)!=leader){
                            //不能清除定时器
                            bool = false;
                        }
                    //普通属性普通处理
                    }else{
                        var leader = parseInt(getStyle(ele,k)) || 0;//带有单位，需要去掉px
                        var step = (json[k]-leader)/10;
                        step = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader + step;
                        ele.style[k] = leader +"px";
                        console.log(1);
                        //if(Math.abs(json[k]-leader)<=Math.abs(step)){:对小数也可以赋值
                        if(json[k]!=leader){
                            //不能清除定时器
                            bool = false;
                        }
                    }
                }
                if(bool){
                    clearInterval(ele.timer);
                    if(fn){
                        fn();
                    }
                }
            },30);
        }

        //封装一个兼容写法：
        function getStyle(ele,attr){
            //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }

    </script>
    </body>

案例

1.筋斗云
2.仿360开机页面
3.手风琴
4.旋转木马轮播图

喝着绿茶的猫
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
科技风-粒子特效-js动画-网页背景动效-可跟随鼠标移动-源码
09-22
很多博客背景的科技风粒子特效，html源码，可以F12全屏当作背景版也可以自己开发到页面里当作背景特效
js的缓动动画
qq_61706112的博客
02-15 655
一、匀速动画 <body> <button>点击移动</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function()
缓动动画
Mr.J的博客
09-02 636
转自个人网站：https://www.jinxiaoliang.cn/2019/09/01/javascript-animation-07/ 一、缓动动画原理 1.缓动动画就是让元素运动的速度有所改变，最常见的就是让运动速度慢慢停下来。 2.思路： （1）让盒子每次移动的距离慢慢变小，盒子就会慢慢停下来 （2）核心算法：让**（目标值 - 盒子目前的位置）/ 10** 的值作为每次盒子移动的距离，...
分享116个JS特效动画效果，总有一款适合您
MankTang的博客
02-05 815
js
JS动画函数——缓动动画
weixin_44145894的博客
01-06 233
【代码】JS动画函数——缓动动画。
JavaScript之动画特效
QSY_com的博客
02-06 775
移动端浏览器兼容性较好，不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)，Android和IOS都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可以相应用户手指(或触控笔)对屏幕或者触控板操作。touchstart：手指触摸到一个DOM元素时触发。touchmove：手指在一个DOM元素上滑动时触发。tiuchend：手指从一个DOM元素上移动时触发。
黑色粒子特效-科技风-js动画-网页背景动效-跟随鼠标移动背景效果-源码
09-30
很多博客背景的科技风粒子特效，html源码，可以F12全屏当作背景版也可以自己开发到页面里当作背景特效。黑色的粒子特效，使用canvas绘制，可以跟随鼠标的移动变换背景粒子，很有科技感
DomLastic-js点击删除项目弹性动画插件.zip
07-11
js代码 <!-- jQuery --> [removed][removed] [removed][removed] <!-- domLastic.js --> [removed][removed] <link rel="stylesheet" href="assets/demopage-styles.css?3.1.64" type=...
js-实时时钟带晃动动画j特效效果.rar
07-11
今天我们要用js技术来实现实时时钟带晃动动画特效效果，以及实时时钟带晃动动画特效效果演示。
网页动画素材 JS龙卷风粒子特效（抖音资料）
07-11
网页动画素材 JS龙卷风粒子特效（抖音资料）网页动画素材 JS龙卷风粒子特效（抖音资料）网页动画素材 JS龙卷风粒子特效（抖音资料）网页动画素材 JS龙卷风粒子特效（抖音资料）网页动画素材 JS龙卷风粒子特效（抖音...
JS缓动动画原理教学（超细节）
周百万的博客
07-02 413
JavaScript缓动动画原理教学（超细节）
JavaScript 实现简单的移动和缓动的效果
qq_65715980的博客
07-11 1289
CSS布局，JavaScript代码——移动获取元素，封装函数实现移动，移动效果与移动同理使用函数来封装，代码大致与js移动相同，中间判断与上文稍微有些不同，其中的含义是，第一次移动取移动距离的十分之一，接下来的每一次移动，都是取省下来还剩多少距离的十分之一，取整是为了，在无线接近于所设置的距离可以移动。.........
分享114个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 1422
js
JS特效第29弹：html5酷炫线条背景动画特效
最新发布
weixin_38343072的博客
12-17 163
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
分享113个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 4495
js
使用JavaScript 实现简单的移动和缓动的动画效果
yzq0820的博客
07-08 2813
目录一、H5的简单布局二、css的布局三、获取元素四、使用js来实现‘盒子’移动效果展示五、使用js来实现缓动效果 效果展示 六、完整代码评论区自取二、css的布局简易的布局出两个不同颜色的‘盒子’。三、获取元素四、使用js来实现‘盒子’移动可以使用函数封装，来实现，修改调用，不需要在代码中修改，可以减少出错的几率。效果展示依旧可以使用函数来封装，达到简洁的效果大致代码与js移动相同，中间判断与上文稍微有些不同，其中的含义是，第一次移动取移动距离的十分之一，接下来的每.........
JavaScript之实现缓动动画效果
weixin_53849180的博客
10-23 3652
思路 1.首先缓动动画函数封装 ，obj目标对象 ，target目标位置，这样可以不用每次要使用动画效果的时候都写一次js代码， 2.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来 3.核心算法：（目标值-现在的位置）/10作为每次移动得距离 步长(这里步长要取整) 4.停止条件：让当前盒子位置等于目标位置就停止定时器 js代码如下 function animate(obj,target){ // 先清除以前得定时器，只保留当前得一个定时器执行 clearInterval(
JavaScript 动画缓动函数
jpmoney的博客
10-23 481
JavaScript 动画缓动函数。
JS登录和注册表单动画切换特效
06-12
可以使用CSS和JavaScript实现表单动画切换特效，以下是一个简单的实现方法： HTML代码： ```html <form id="login-form" class="form"> <h2>Login <button type="submit">Login <p>Don't have an account...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值