简易版的Tween

最新推荐文章于 2024-09-16 08:08:21 发布

转载最新推荐文章于 2024-09-16 08:08:21 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ecma/archive/2012/02/03/2337473.html

本文介绍了一个简化版的Tween动画处理器，用于实现基本的CSS动画效果，包括改变元素的样式属性和透明度。通过设置初始值、终止值和可选参数，可以轻松控制动画的时长、回调函数和缓动效果。

与之前的Tween 类似，只是这个为简洁版：

/**
 * 动画处理器（缓动效果）
 * @param obj DOM对象
 * @param prop 要改变的样式属性，如left（填opacity时，1表示不透明，0表示完全透明）
 * @param v1 初始值（不带px）
 * @param v2 终止值（不带px）
 * @param opt Object 其他选项[可选]
 *           （duration:动画时长/毫秒, callback:动画结束时的回调, func:算子）
*/
var Tween = function(obj, prop, v1, v2, opt) {
var currentTime, interval, duration, result;
    opt = opt || {};
    opt.func = opt.func || function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
    };
    currentTime = 0;
    interval = 1000 / 60;
    duration = (opt.duration || 1000) / interval;
    (function _fn() {
        result = opt.func(currentTime, v1, v2 - v1, duration);
if (prop == 'opacity') {
            obj.style.opacity = result.toFixed(2);
            obj.style.filter = 'alpha(opacity=' + Math.ceil(result * 100) + ')';
        } else {
            obj.style[prop] = Math.ceil(result) + 'px';
        }
if (currentTime++ < duration) {
            setTimeout(_fn, interval);
        } else {
            opt.callback && opt.callback();
        }
    })();
};

转载于:https://www.cnblogs.com/ecma/archive/2012/02/03/2337473.html