javascript - Jquery animate中的step方法问题

问题描述

问 题

是这样的。因为比较喜欢js，而且js数组也好操作，想用网页写一个电梯模拟算法，用到了animate来表现动画效果。
最开始的时候我遇到了这样的问题。假设电梯从6楼下降到1楼，那么就要生成一个从6到1楼的匀速运动动画，这个动画是一个线程。但是如果下降到了4楼的时候，突然3楼有人要上电梯，那就必须得在3楼停下来。
如果在这个线程之后直接调用去3楼的线程，两个线程不会互相覆盖，而是会互相累加，它会先到1楼后上3楼，但如果在接收到3楼请求的时候立刻调用stop(true)方法停止动画并且重新生成一个动画的话，在停止的那里会卡顿一下，这样看起来好像电梯故障，不是想要的效果。
经过一番查资料，我找到了step这个方法，先贴一下网上的资料代码。借用，无意冒犯

$(".demo").animate({
aa:2,
bb:10
}, {
step:function(now,fx){
//参数step：规定每个动画的每一步完成之后要执行的函数
// now:是当前动画正在改变的属性的实时值；
// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素：elem;
// 动画正在改变的属性：prop;
// 正在改变属性的当前值：now;
// 正在改变属性的结束值：end;
// 正在改变属性的单位：unit;等
        // 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值
        if(fx.prop=="bb"){fx.end=5}
        //console.log(fx.prop+": "+n);
    },
    duration:1000
})

这个step方法相当于把一个动画分解成无数小段，每执行一个小段就会调用一遍。并且提供了修改fx.now和fx.end的值的机会，我以为这就是我要的方法。只要接收到3楼请求的时候，修改fx.end为3楼的位置就行了。紧接着新的问题就出来了。
fx.now虽然也是fx的一个属性，但这个属性不是死的，经过我查询JQuery源码，发现它是根据start、end以及移动位置百分比来计算的，一旦修改了end，now值就会改变，造成电梯突然往上抽搐一下接着下降的效果。
很抱歉啰嗦了这么多，只是为了把问题说得更清楚。有没有dalao对这个方法比较熟悉，能不能帮忙想个解决办法,或者做这个电梯小程序还有没有别的表现方式？谢谢dalao

解决方案

今天被迫查了JQuery，又经过一番尝试，终于找到了解决办法。大概有我这种问题的人很少吧，不过我还是贴一下答案吧。
虽然step提供了修改fx的属性值的一个机会，但是并不是直接修改就能解决的。在这里，fx.start和fx.end都是一成不变的，而fx.pos这个属性，代表的是动画当前状态在整个动画过程中的百分比，它的值从0到1，中间是以0.为开头的一长串小数。而fx.now代表的就是动画当前属性改变的值。
经过一番查源码，得到这样一个公式：fx.now = (fx.end - fx.start) * fx.pos + fx.start。倘若修改了fx.end的话，now值有可能会改变，就会造成中途动画突然抽搐一下的情况。所以需要修改fx.start的值。假设修改后fx.end的值为end1，修改后fx.start，设其为start1，那么
start1 = (fx.start - fx.pos * (fx.start - (fx.end - end1)))/(1 - fx.pos)
并且start只能赋值一次，接下来的step方法需要沿用赋值后的start。也就是说，设一个初始变量

var flag = true
step:function(now,fx){
    fx.end = end1;//这一步用来修改fx.end的值，请根据自己需要去写。
    if(flag){
        fx.start = (fx.start - fx.pos * (fx.start - (fx.end - end1)))/(1 - fx.pos);
        flag = false;
    }
}

这篇关于javascript - Jquery animate中的step方法问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！