收藏
评论

createAnimation从入门到放弃

请允许我起了一个略有夸大的标题,只是为了凸显此时无奈的心情。

起因:


上图是动画结束效果,


这是初始效果。

交互需求是,点击后图标分别向两侧移动,然后百分比显示。

过了一下脑子,想想应该挺简单的,createAnimation分别生成两个动画,点击后赋值,然后setTimout 让百分比显示。

事实上也确实实现了,你以为就这样完了吗?要是完了,我能放弃使用这个方案么?

神奇的事情发生了,我下拉刷新页面后,整个人就不好了。


这是什么鬼,为啥图标不重置,回到居中位置,难道css写的有问题,懵逼中。

 

这是整体页面,列表是一个文本流,需要下拉刷新,数据在一个数组里,下拉后数组重新赋值。


打开f12 看到了罪魁祸首


createAnimation 移动实现根据transform。我的问题是,我把动画清空后(重新赋值null),然后列表重新赋值,动画对象是没了,但是动画的效果并没有重置,还是保留着原来的效果。

定位到问题解决就行,首先想到的是,既然动画效果没有重置,那就人为重置,但是仔细想想用户点击完后不应该是交互重置,应该一直显示交互完成状态,那是在下拉刷新的时候重置动画,也不行,会看到居中的动画,这个方案pass掉。

这个时候就很无力了,createAnimation没有重置么?那要是有需要多次点击的交互怎么做?


实在是不能重置动画,就不用了,弃坑。

最后还是用css3实现,点击后改变字段,给图标添加class,绑定动画,这样可以完美解决。

如果有类似的交互,还是直接用css吧,真是浪费感情。不知道有人遇到类似的问题没有?

最后一次编辑于  2018-09-06
赞 0
收藏

2 个评论

  • 尚
    2018-09-07

    js动画性能没有css动画性能好吧

    2018-09-07
    赞同
    回复 1
    • 刘乐
      刘乐
      2018-09-07

      是的,

      不过今天上线项目,发现自己的手机css交互卡顿,不知道什么情况,相同的动画,两个页面,一个卡一个不卡。


      2018-09-07
      回复
  • 卢霄霄
    卢霄霄
    2018-09-06


    2018-09-06
    赞同
    回复 12
    • 刘乐
      刘乐
      2018-09-06

      你实际用过这个属性么?我试了下但是并没有奏效,而且并不是很符合我的场景,我要是用这个的话,我下拉刷新后需要给数组中每一项export赋值,并不好。又不能在点击操作后直接export,还是需要展示交互效果的。

      我用css实现了想要的效果,createAnimation 我感觉并不是很合适。



      2018-09-06
      回复
    • 卢霄霄
      卢霄霄
      2018-09-06回复刘乐

      组件里有用到。不过我的页面,动画一般都用的都是本来就两个状态的,互相切换切换,不会是你这种要一直保持。页面滚动啊,跳转啊之类的,都会用还原。

      2018-09-06
      回复
    • 刘乐
      刘乐
      2018-09-06回复卢霄霄

      嗯 我之前用过也没注意到,我这需求也是第一碰见。

      我试了下export() 我在定时器里放了一个空的animation对象然后再次给他赋值,但是他的

      状态还是有的。

      不知道官方文档指的动画操作具体什么意思?


      2018-09-06
      回复
    • 卢霄霄
      卢霄霄
      2018-09-06回复刘乐

      哦。。。我理解你的意思了。。。我之前理解错你的意思了。。

      这个export清理的是还在进行的动画。。比如,动作1是往下移动到100px,耗时10秒。动作2是移动到0位置,耗时也是10秒。。在动作1 export后,动画还在执行期间,执行 动作2 的export,这时候动作1还没走完的部分,会被清理,转而执行动作2。。

      如果是要清理你这个状态。。是挺麻烦的。。你必须要执行一遍清理的动画,但是可以用 step-end 或者 step-start 来遮挡效果

      2018-09-06
      回复
    • 卢霄霄
      卢霄霄
      2018-09-06回复刘乐

      你说出问题的版本,方便做个代码片段不?

      2018-09-06
      回复
    查看更多(7)