使用 requestAnimationFrame 实现 js 动画--成交额动画

qianlingvip

已于 2024-08-25 12:34:51 修改

阅读量379

点赞数 4

分类专栏： html js动画文章标签： javascript html

于 2024-08-25 12:32:48 首次发布

本文链接：https://blog.csdn.net/zhangqling/article/details/141527762

版权

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

js动画

1 篇文章 0 订阅

订阅专栏

前言：我们经常在购物平台网站上看到一些动画效果，这些动画不是 css 样式动画，而是内容发生改变后开始动画，如果，成交额动画，有一个值变化到另外一个值的时候，一位一位的去动，看起来很炫酷，其实，这就是 js 动画。

css 动画和 js 动画的区别

css 动画

优点：

简单易用：可以通过CSS属性来控制动画效果，不需要编写复杂的JavaScript代码，常用的属性有animation， transtion。
性能较好：使用GPU加速，可以实现流畅的动画效果，如transform: translateZ, will-change。
兼容性好：大部分现代浏览器都支持CSS动画。

缺点：

功能受限：只能实现一些简单的动画。
缺乏交互性：CSS 动画通常只能在元素加载时播放一次，或者一直重复相同的动画，不能根据用户行为进行交互。

js 动画

优点：

功能强大：可以通过编写 js 代码实现复杂的动画效果，可以控制元素的位置、大小、颜色等属性。
可交互性：可以根据用户行为进行交互，例如点击、拖拽等。

缺点：

编写复杂：需要编写一定的 js 代码，可能需要使用第三方库来简化操作。
性能较差：如果动画效果过于复杂，可能会影响网页的性能，导致卡顿或闪烁，对于技术要求比较高。

css 动画适合实现一些简单的动画效果，例如过渡、旋转、缩放等；而 js 动画适合实现复杂的动画效果，例如路径动画、物理动画等。在选择使用css 动画还是 js 动画时，需要根据具体需求和场景来进行权衡。

使用 js 动画实现交易额动画化

// start代表开始值，to代表结束值， duration是动画时间， fn是具体交互回调
function animation(start, to, duration, fn) {
    const startTime = Date.now();
    const diff = to - start;
    const dep = diff / duration;
    let value = start;
    fn(value);
    function _run() {
        const now = Date.now();
        const time = now - startTime;
        if (time >= duration) {
            value = to;
            fn(value);
            return;
        }
        value = start + time * dep;
        fn(value);
        requestAnimationFrame(_run);
    }

    requestAnimationFrame(_run)
}

使用上述 animation 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js动画</title>
</head>
<body>
    <div>
        <span>当前价格</span>
        <span class="value">299</span>
    </div>
    <button class="button">改价</button>
    <script src="./index.js"></script>
</body>
</html>

window.onload = function () {
    document.querySelector('.button').addEventListener('click', () => {
        animation(299, 30, 2000, (value)=>{
            console.log(value.toFixed(2), 'value');
            document.querySelector('.value').innerHTML=value.toFixed(2);
        })
    })
}