如何使用js实现一个持续的动画效果

今天药忘吃喽~ 2023-07-18 12:40 52阅读 0赞

### 使用js实现一个持续的动画效果 ###

**定时器思路**

var e = document.getElementById('e')
    var flag = true;
    var left = 0;
    setInterval(() => { 
        left == 0 ? flag = true : left == 100 ? flag = false : ''
        flag ? e.style.left = ` ${ left++}px` : e.style.left = ` ${ left--}px`
    }, 1000 / 60)

**requestAnimationFrame**

//兼容性处理
    window.requestAnimFrame = (function(){ 
        return window.requestAnimationFrame       ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame    ||
               function(callback){ 
                    window.setTimeout(callback, 1000 / 60);
               };
    })();
    
    var e = document.getElementById("e");
    var flag = true;
    var left = 0;
    
    function render() { 
        left == 0 ? flag = true : left == 100 ? flag = false : '';
        flag ? e.style.left = ` ${ left++}px` :
            e.style.left = ` ${ left--}px`;
    }
    
    (function animloop() { 
        render();
        requestAnimFrame(animloop);
    })();

**使用css实现一个持续的动画效果**

animation:mymove 5s infinite;
    
    @keyframes mymove { 
        from { top:0px;}
        to { top:200px;}
    }

*  `animation-name` 规定需要绑定到选择器的 `keyframe`名称。
 *  `animation-duration` 规定完成动画所花费的时间，以秒或毫秒计。
 *  `animation-timing-function` 规定动画的速度曲线。
 *  `animation-delay` 规定在动画开始之前的延迟。
 *  `animation-iteration-count` 规定动画应该播放的次数。
 *  `animation-direction` 规定是否应该轮流反向播放动画

[个人博客地址:][Link 1]大家可以看看

[Link 1]: https://caoduoya.github.io/