requestAnimationFrame 兼容方案

最新推荐文章于 2024-04-05 02:42:05 发布

weixin_30814223

最新推荐文章于 2024-04-05 02:42:05 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/he-wei/p/10297848.html

本文介绍如何使用HTML、CSS和JavaScript创建一个简单的动画效果。通过修改内联元素的位置属性，利用requestAnimationFrame进行平滑动画过渡，实现了一个从左向右移动的方块动画。代码中详细展示了html结构、css样式和JavaScript逻辑，并提供了在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码
css代码
JavaScript代码

编写涉及：css, html, js

在线演示codepen

html代码

<div class="roll-box">
    <div class="inner-box">move</div>
</div>

<button onclick="startMove()"> start move</button>

css代码

.roll-box {
    position: relative;
    width: 600px;
    height: 400px;
    background: #007acc;
    overflow: hidden;
    color: #fff;
}
.inner-box {
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(245, 152, 30);
}
button{
    margin-top: 20px;
    padding: 6px 10px;
    border: 0;
    color: #fff;
    background-color: rgb(39, 133, 240);
}

JavaScript代码

let moveCount = 0;
let rafId = '';
const ele = document.querySelector('.inner-box');

window.requestAniFrame = (function () {
    return window.requestAnimationFrame

        // Older versions Chrome/Webkit
        window.webkitRequestAnimationFrame ||

        // Firefox < 23
        window.mozRequestAnimationFrame ||

        // opera
        window.oRequestAnimationFrame ||

        // ie
        window.msRequestAnimationFrame ||

        function (callback) {
            return window.setTimeout(callback, 1000 / 60);
        };
})()

window.cancelAnimation = (function () {
    return window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.cancelRequestAnimationFrame || function (id) { clearTimeout(id) }
})()

function moveFn() {
    ele.setAttribute('style', 'left:' + moveCount + 'px');
    moveCount++

    if (moveCount > 550) {
        window.cancelAnimation(rafId)
    } else {
        rafId = window.requestAniFrame(moveFn)
    }
}

function startMove() {
    // 必须先清除，否者多次点击会生成多个动画帧，导致元素移动速度加快
    window.cancelAnimation(rafId)
    rafId = window.requestAniFrame(moveFn)
}