javascript - Jquery animate中的step方法问题
PHP中文网
PHP中文网 2017-04-11 11:38:46
[JavaScript讨论组]

是这样的。因为比较喜欢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

PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
PHP中文网

今天被迫查了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;
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号