requestAnimationFrame动画封装

最新推荐文章于 2023-03-29 14:33:15 发布

weixin_30739595

最新推荐文章于 2023-03-29 14:33:15 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jerrypig/p/10150329.html

本文介绍了一个自定义动画实现的方法，通过创建Animator类及其原型方法，实现了动画的开始和停止功能。利用requestAnimationFrame进行平滑动画更新，适用于浏览器环境。

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

function Animator(duration, progress) {
    this.duration = duration;
    this.progress = progress;
    this.next = true;
}
Animator.prototype = {
    constructor: Animator,
    start: function (finished) {
        var startTime = new Date().getTime();
        var duration = this.duration,
            self = this,
            timeOut = 0;
        var vendors = ['webkit', 'moz'];
        for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
            window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
        }
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (callback, element) {
                var start = 0,
                    finish = 0;
                window.setTimeout(function () {
                    start = +new Date();
                    callback(start);
                    finish = +new Date();
                    timeOut = 1000 / 300 - (finish - start);
                }, timeOut);
            };
        }

        window.requestAnimationFrame(function step() {
            var p = (new Date().getTime() - startTime) / duration;
            self.progress(p, p);
            if (p >= 1.0) {
                self.progress(1.0, 1.0);
                self.next = false;
                finished();
            }

            if (self.next) {
                window.requestAnimationFrame(step);
            }

        });
    },
    stop: function () {
        this.next = false;
    }
};

转载于:https://www.cnblogs.com/jerrypig/p/10150329.html