JS 实现持续动画的几种方式

最新推荐文章于 2024-06-05 10:20:14 发布

persist_xyz

最新推荐文章于 2024-06-05 10:20:14 发布

阅读量1.1k

点赞数 1

文章标签： css js requestAnimFrame animation

本文链接：https://blog.csdn.net/persist_xyz/article/details/87886834

版权

实现一个持续动画效果的几种方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>实现持续的动画效果</title>
    <style>
        div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: #5b5;
            /* animation: move 5s linear 1s infinite;   第一种方法 */
        }
        @keyframes move{
            from{
                left: 0;
            }
            to{
                left: 500px;
            }
        }
    </style>
   
</head>

<body>
    <div id="d"></div>

    <script type="text/javascript">

console.log('============第二种===========')

        var a = document.getElementById('d')
        var flag = true, left = 0;
        setInterval(() => {
             left == 500 ? flag = false : (left == 0 ? flag = true : '');
             flag ? a.style.left = `${left++}px` : a.style.left = `${left--}px`
        }, 10);

console.log('============第三种===========')

        // 兼容性处理
        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback, element) {
                    window.setTimeout(callback, 10)
                }
            )
        })()

        function render() {
            left == 500 ? flag = false : (left == 0 ? flag = true : '');
            flag ? a.style.left = `${left++}px` : a.style.left = `${left--}px`
        }

        (function loop() {
            render()
            requestAnimFrame(loop)
        })()

    </script>
</body>

</html>

persist_xyz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 实现持续动画的几种方式

实现一个持续动画效果的几种方式&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;实现持续的动画效果&amp;lt;/title&amp;gt;
复制链接

扫一扫