收藏
回答

有更好的动画实现方法吗?现有方法有两个缺点,大家遇到过吗?

动画调试中发现两个问题 :

1, 想做个动画,比如缩放再回到原始大小。需要两步完成。;(

2,分成两步,实际操作中发现,会发生堵塞,动画缩小后回不来了(频繁点击时发生)

代码如下:(哪个大佬帮忙一下呢)

var tempPOAnimation = wx.createAnimation({

duration: 200,

      timingFunction:"ease",

      })

     this.data.animationPOChangeOver =  tempPOAnimation

     tempPOAnimation.scale3d(0.01,0.01,0.01).step()

     tempPOAnimation.scale3d(1,1,1).step()


     this.setData({

      animationPOChangeover: tempPOAnimation.export(),

   })

回答关注问题邀请回答
收藏

3 个回答

  • 赵永_制程
    赵永_制程
    2020-12-08
     通过以下方法解决了,文档理有明确说明:关键帧替代wx.createAnimation。 this.animate(selector, keyframes, duration, callback)
    


    this.animate('#animationPOChangeover', [

          {rotateY: 0},

          {rotateY: 22},

          {rotateY: 45},

          {rotateY: 65},   

          {rotateY: 90},

          {rotateY: 110},

          {rotateY: 135},

          {rotateY: 155},

          {rotateY: 180},

          {rotateY: 155}, 

          {rotateY: 135},

          {rotateY: 110},

          {rotateY: 90},

          {rotateY: 65},

          {rotateY: 45},

          {rotateY: 22},

          {rotateY: 0},

          ], 1000, function () {

            this.clearAnimation('#animationPOChangeover', {rotateY: true }, function () {

            })

        }.bind(this))


    2020-12-08
    有用 1
    回复
  • 朝阳
    朝阳
    2020-12-03

    可以尝试CSS动画,我测试的CSS动画效果虽然写代码比较简单,但是动画效果不是很流畅,你可以测试一下

    2020-12-03
    有用 1
    回复 1
    • 赵永_制程
      赵永_制程
      2020-12-03
      感谢,我也在想这样。
      2020-12-03
      回复
  • 杨志强
    杨志强
    2020-12-03

    也可以对当前事件处理函数进行节流处理,目的是动画执行完成前,不重复执行当前动画。

    2020-12-03
    有用 1
    回复 1
    • 赵永_制程
      赵永_制程
      2020-12-03
      谢谢,确实也是个好办法。
      2020-12-03
      回复
登录 后发表内容
问题标签