js运动函数

紫微前端

于 2022-05-30 15:21:39 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript 前端 json

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125047306

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文深入探讨JavaScript如何实现动态效果，包括利用setTimeout和requestAnimationFrame创建平滑动画，以及如何处理帧率和性能优化。通过实例解析，帮助开发者更好地理解和运用JavaScript进行前端动效开发。

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

function animate(obj, json, callback) {
    clearInterval(obj.timer);
    var speed,
        current;
    obj.timer = setInterval(function () {
        var lock = true;
        for (var prop in json) {
            if (prop == 'opacity') {
                current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
            } else {
                current = parseInt(window.getComputedStyle(obj, null)[prop]);
            }
            speed = (json[prop] - current) / 7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (prop == 'opacity') {
                obj.style[prop] = (current + speed) / 100;
            } else {
                obj.style[prop] = current + speed + 'px';
            }

了解本专栏