lufy's legend

标题: 关于动画加快的问题 [打印本页]

作者: ningbnii 时间: 2019-11-14 15:48
标题: 关于动画加快的问题
lufy，您好
我想在ionic中使用lufy，做了一个简单的动画demo，一共两个页面，如下图所示，第一个页面中只有一个链接跳转，第二个页面是一个动画。
问题描述：当点击动画跳转到第二个页面，然后再从第二个页面点击返回，回到第一个页面，再点击动画跳转到第二个页面，会发现动画变快了，请问是什么原因导致的，是否有解决方法呢？
附上github地址：https://github.com/ningbnii/ionic_lufy_demo1.git
运行方法：ionic serve

作者: lufy 时间: 2019-11-27 10:04
不好意思，最近一直没上论坛
你可以到这里下载引擎的最新版本试一下，应该可以解决你的问题
https://github.com/lufylegend/lufylegend.js/tree/develop

作者: ningbnii 时间: 2019-12-1 09:18
lufy，您好！
我测试了新版本，问题已经解决，动画不在加快了。
有个新的问题，问题描述：我在ENTER_FRAME事件中，打印了一个自增的值，发现返回上一页的时候，计时器仍然在跑，再次进入后，会重新增加一个新的计时器，然后会发现同时存在两个计时器。
我想在离开页面的时候，停止当前计时器，请问有没有办法主动停止计时器呢？

作者: lufy 时间: 2019-12-2 13:16

ningbnii 发表于 2019-12-1 09:18
lufy，您好！
我测试了新版本，问题已经解决，动画不在加快了。
有个新的问题，问题描述：我在ENTER_FRAME ...

这个应该是代码的问题了吧，你在切换页面的时候应该判断一下，在已经加入计时器的情况下就不应该再次加入计时器了

作者: lufy 时间: 2019-12-3 08:29
另外，如果你切换页面，计时器怎么会还在跑？之前的页面没有隐藏吗？

作者: ningbnii 时间: 2019-12-3 10:48
感谢lufy的关注，我在页面离开的时候，removeAllEventListener，这样计时器可以停止了

作者: ningbnii 时间: 2019-12-3 12:56
发现如果将LInit的参数设置为requestAnimationFrame，又会出现动画加快的问题了

作者: ningbnii 时间: 2019-12-4 11:33
我做了一个新的demo，地址https://github.com/ningbnii/ionic_lufy_demo

点击动画，返回首页，然后再点击单指移动，返回首页，再点击动画，动画就会加快

作者: lufy 时间: 2019-12-5 09:09

ningbnii 发表于 2019-12-4 11:33
我做了一个新的demo，地址https://github.com/ningbnii/ionic_lufy_demo

点击动画，返回首页，然后再点击 ...

我看了代码，你相当于一个页面里用了多个canvas，
不能考虑一下只用一个canvas吗？

作者: ningbnii 时间: 2019-12-5 09:13

lufy 发表于 2019-12-5 09:09
我看了代码，你相当于一个页面里用了多个canvas，
不能考虑一下只用一个canvas吗？ ...

嗯，是这样的，每个页面里面都有一个canvas，我就是想测试一下是否可行，因为我感觉css定位比canvas要方便一些，这样可以用css来控制定位，涉及动画的部分用lufy来做

作者: lufy 时间: 2019-12-5 09:16

ningbnii 发表于 2019-12-5 09:13
嗯，是这样的，每个页面里面都有一个canvas，我就是想测试一下是否可行，因为我感觉css定位比canvas要方 ...

因为这样会导致多次调用引擎的初始化函数LInit，所以才会导致上述的问题的，
如果可以考虑iframe的话，倒是可以解决这个问题

作者: ningbnii 时间: 2019-12-5 09:21

lufy 发表于 2019-12-5 09:16
因为这样会导致多次调用引擎的初始化函数LInit，所以才会导致上述的问题的，
如果可以考虑iframe的话，倒 ...

哦，是否有方法可以主动清除初始化的状态呢，让页面再次进入的时候重新初始化，因为这个ionic可以监听到页面离开事件，我想在这个事件中做一些处理

作者: lufy 时间: 2019-12-5 09:36

ningbnii 发表于 2019-12-5 09:21
哦，是否有方法可以主动清除初始化的状态呢，让页面再次进入的时候重新初始化，因为这个ionic可以监听到 ...

其实虽然你使用了多个canvas，但是页面里也只是一个canvas有效而已，
所以，你可以只用一个canvas，然后通过改变这个canvas本身的css来解决问题不是吗？

或者，通过修改引擎的初始化函数
https://github.com/lufylegend/lu ... nction.js#L489-L511
这个是引擎的源码，你可以重写一个LInit来覆盖原来的代码，
思路是在_requestAF(loop, s);的地方加个赋值
var requestId = _requestAF(loop, s);
然后通过window.cancelAnimationFrame(requestId);来取消
理论上是可行的，我不确定是否会引起其他问题，如果有的话，可以告诉我，我再看看其他地方是否有需要改动的地方

作者: ningbnii 时间: 2019-12-5 09:47

lufy 发表于 2019-12-5 09:36
其实虽然你使用了多个canvas，但是页面里也只是一个canvas有效而已，
所以，你可以只用一个canvas，然后 ...

好的，感谢lufy，我试一下

作者: ningbnii 时间: 2019-12-5 16:53
我测试发现使用requestAnimationFrame会出现动画加速的问题，使用数值没有问题

作者: lufy 时间: 2019-12-6 08:05

ningbnii 发表于 2019-12-5 16:53
我测试发现使用requestAnimationFrame会出现动画加速的问题，使用数值没有问题

动画加速具体在什么情况下发生？

作者: ningbnii 时间: 2019-12-6 10:05
本帖最后由 ningbnii 于 2019-12-6 10:09 编辑

lufy 发表于 2019-12-6 08:05
动画加速具体在什么情况下发生？

当两个页面的LInit的speed值不一致的时候，比如A为500，B为50，打开A动画慢，打开B动画快，这时候再打开A，会发现动画和B一样快了，感觉是取了最大值
如果所有页面speed都一样，就不会出现动画变快的现象

作者: lufy 时间: 2019-12-6 23:51

ningbnii 发表于 2019-12-6 10:05
当两个页面的LInit的speed值不一致的时候，比如A为500，B为50，打开A动画慢，打开B动画快，这时候再打开A ...

等我抽空自己试一下看看

作者: lufy 时间: 2019-12-8 10:24
我在www/index.html中把LInit重写了一下，你试试看还会不会出现上述你说的问题

index.html

3.88 KB, 下载次数: 1905

作者: ningbnii 时间: 2019-12-8 18:31
本帖最后由 ningbnii 于 2019-12-8 18:41 编辑

lufy 发表于 2019-12-8 10:24
我在www/index.html中把LInit重写了一下，你试试看还会不会出现上述你说的问题
...

确实没问题了，我复制了两个动画页面，一个用的requestAnimationFrame，一个用的100，每个页面的speed不再受其他页面的影响啦，
请问：LGlobal.childList 这个是干嘛用的呢

作者: lufy 时间: 2019-12-8 19:27

ningbnii 发表于 2019-12-8 18:31
确实没问题了，我复制了两个动画页面，一个用的requestAnimationFrame，一个用的100，每个页面的speed不 ...

这个是引擎最底层的对象列表，引擎会每帧循环该列表里的对象，所以初始化的时候需要重新清空一下

作者: ningbnii 时间: 2019-12-8 19:46

lufy 发表于 2019-12-8 19:27
这个是引擎最底层的对象列表，引擎会每帧循环该列表里的对象，所以初始化的时候需要重新清空一下 ...

哦，感谢lufy，这个改动会更新到最新版本中吗

作者: lufy 时间: 2019-12-9 08:32

ningbnii 发表于 2019-12-8 19:46
哦，感谢lufy，这个改动会更新到最新版本中吗

这个改动不会对引擎造成影响，而且还能防止多次初始化引擎带来的问题，所以下次会更新进去的

欢迎光临 lufy's legend (http://lufylegend.com/forum/)