温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript如何实现匀速动画效果

发布时间:2021-09-30 10:42:24 来源:亿速云 阅读:172 作者:小新 栏目:开发技术

小编给大家分享一下javascript如何实现匀速动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

实现思路:

1、主要使用定时函数setInterval()来实现动画效果
2、可以将动画封装成一个函数,这样可以多个元素调用,不用重复写
3、动画函数接收参数- - -元素对象、目标偏移量、回调函数
①函数里添加一个定时函数,给定时函数一个名字,后面清除定时函数要使用定时函数名
②定时函数里面处理程序:
a. 给一个固定的每步移动值,设置元素对象的偏移量匀速变化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判断偏移量是否达到目标值,达到的话停止动画- - -
clearInterval(obj.timer);
并且在动画停止时判断是否存在回调函数,有回调函数的话执行回调函数
4、在动画函数的最前面添加清除定时器函数,清除之前的动画影响- - -clearInterval(obj.timer);
有时需要点击按钮后,触发动画这种,没有添加清除的话,重复点击按钮,动画效果会叠加,越来越快
5、也可以将动画函数封装到js文件中进行引用

小提示:以上只是一种方法,不同动画效果根据所需进行调整实现方法

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匀速动画</title>
    <style>
        .box {
            position: relative;
            width: 1000px;
            margin-top: 20px;
        }
        
        .xiaohuli {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }
        
        .pikaqiu {
            position: absolute;
            top: 150px;
            left: 0;
            width: 200px;
            height: 150px;
        }
    </style>
</head>

<body>
    <button class="btn1">点击移动小狐狸</button>
    <button class="btn2">点击移动皮卡丘</button>
    <div class="box">
        <img src="images/小狐狸.jpg" alt="" class="xiaohuli">
        <img src="images/皮卡丘.jpg" alt="" class="pikaqiu">
    </div>
    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var xiaohuli = document.querySelector('.xiaohuli');
        var pikaqiu = document.querySelector('.pikaqiu');

        btn1.addEventListener('click', function() {
            animate(xiaohuli, 300);
        })

        btn2.addEventListener('click', function() {
            animate(pikaqiu, 450);
        })

        // 动画函数     obj动画对象, target目标左偏移量, callback回调函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {

                obj.style.left = obj.offsetLeft + 5 + 'px';

                if (obj.offsetLeft >= target) {
                    // 停止动画
                    clearInterval(obj.timer);
                    // 如果有回调函数,执行回调函数
                    if (callback) {
                        callback();
                    }
                }


            }, 30);
        }
    </script>
</body>

</html>

页面效果:

javascript如何实现匀速动画效果

以上是“javascript如何实现匀速动画效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI