jQuery动画如何实现
沉沙 2018-05-28 来源 : 阅读 1114 评论 0

摘要:本文讲解了jQuery动画的实现过程,希望阅读本篇文章以后大家有所收获,掌握jQuery动画的实现,加深大家对jQuery的理解。

没有引入deferred机制,其余流程都有了

//////////////创建动画缓动对象 //////////////function Tween(value, prop, animation) {
    this.elem    = animation.elem;
    this.prop    = prop;
    this.easing  = "swing"; //动画缓动算法
    this.options = animation.options;
    //获取初始值
    this.start   = this.now = this.get();
    //动画最终值
    this.end     = value;
    //单位
    this.unit    = "px"
}
 
function getStyles(elem) {
    return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};
 
function swing(p) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}
 
Tween.prototype = {
    //获取元素的当前属性
    get: function() {
        var computed = getStyles(this.elem);
        var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
        return parseFloat(ret);
    },
    //运行动画    run:function(percent){
        var eased
        //根据缓动算法改变percent
        this.pos = eased = swing(percent);
        //获取具体的改变坐标值
        this.now = (this.end - this.start) * eased + this.start;
        //最终改变坐标
        this.elem.style[this.prop] = this.now + "px";
        return this;
    }
}
 
//////////动画类 //////////function Animation(elem, properties, options){
    //动画对象
    var animation = {
        elem            : elem,
        props           : properties,
        originalOptions : options,
        options         : options,
        startTime       : Animation.fxNow || createFxNow(),//动画开始时间
        tweens          : [] //存放每个属性的缓动对象,用于动画    }
 
    //生成属性对应的动画算法对象
    for (var k in properties) {
        // tweens保存每一个属性对应的缓动控制对象
        animation.tweens.push( new Tween(properties[k], k, animation) )
    }
 
    //动画状态
    var stopped;
    //动画的定时器调用包装器
    var tick = function() {
        if (stopped) {
            return false;
        }
        //动画时间算法
        var currentTime = Animation.fxNow || createFxNow
            //运动时间递减
            remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),
            temp = remaining / animation.options.duration || 0,
            percent = 1 - temp;
 
        var index = 0,
            length = animation.tweens.length;
 
        //执行动画改变
        for (; index < length; index++) {
            //percent改变值            animation.tweens[index].run(percent);
        }
 
        //是否继续,还是停止
        if (percent <= 1 && length) {
            return remaining;
        } else {
            //停止
            return false;
        }
 
    }
    tick.elem = elem;
    tick.anim = animation
 
    Animation.fx.timer(tick)
}    
//创建开始时间function createFxNow() {
    setTimeout(function() {
        Animation.fxNow = undefined;
    });
    return (Animation.fxNow = Date.now());
}
 
//用于定时器调用
Animation.timers =[]
 
Animation.fx = {
    //开始动画队列    timer: function(timer) {
        Animation.timers.push(timer);
        if (timer()) {
            //开始执行动画            Animation.fx.start();
        } else {
            Animation.timers.pop();
        }
    },
    //开始循环    start: function() {
        if (!Animation.timerId) {
            Animation.timerId = setInterval(Animation.fx.tick, 13);
        }
    },
    //停止循环    stop:function(){
        clearInterval(Animation.timerId);
        Animation.timerId = null;
    },
    //循环的的检测    tick: function() {
        var timer,
            i = 0,
            timers = Animation.timers;
 
        Animation.fxNow = Date.now();
 
        for (; i < timers.length; i++) {
            timer = timers[i];
            if (!timer() && timers[i] === timer) {
                //如果完成了就删除这个动画
                timers.splice(i--, 1);
            }
        }
 
        if (!timers.length) {
            Animation.fx.stop();
        }
        Animation.fxNow = undefined;
    }
}


 本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程