收藏
回答

小程序animation动画 怎样让图片在一组动画中同时旋转和平移?

 // 飞镖动画
donghuafunction (){
  // 屏幕三分之一宽度向下取整
  let roundx = 0 - Math.floor(Math.random() * this.data.sanfenwidth +  this.data.sanfenwidth);
  let roundy = 0 - Math.floor(Math.random() * this.data.liufenheight + this.data.sanfenheight);
  console.log('roundx',roundx);
  console.log('roundy',roundy);
  // 旋转(逆时针360度+0-100度)
  pingani.rotateZ((0-Math.random())* 100 - 360)
  // 移动  x,y 单位为像素 (屏幕三分之二> x >屏幕三分之一宽度)   屏幕二分之一高度 > y > 屏幕三分之二高度
  .translate(roundx, roundy)
  .step()
  
  this.setData({pingani: pingani.export()})
},

上面是我的一组动画函数,这一组动画是使一张飞镖图片在旋转的同时,进行移动(和缩放)
但rotateZ()旋转的时候,影响了移动的轨迹,我希望图片的旋转不影响轨迹方向,请问怎么实现呢??
回答关注问题邀请回答
收藏

3 个回答

  • 1019
    1019
    2021-02-22

    业务原因又改用了小程序的关键帧动画,发现关键帧动画可以在位移的同时旋转,不影响轨迹。

    2021-02-22
    有用
    回复
  • 阿旺
    阿旺
    2021-02-22

    wx.createAnimation(Object object)的时候object为{transformOrigin:"50% 50% 50%"} 呢


    2021-02-22
    有用
    回复 2
    • 1019
      1019
      2021-02-22
      找到解决办法了,图片外面包一层view,view绑定位移动画,图片绑定旋转动画,同时导出动画就可以,哈哈
      2021-02-22
      1
      回复
    • 卢霄霄
      卢霄霄
      2021-02-22回复1019
      真聪明~
      2021-02-22
      回复
  • 陈宇明
    陈宇明
    2021-02-22

    做个旋转的gif图

    2021-02-22
    有用
    回复
登录 后发表内容
问题标签