收藏
回答

cover-image/cover-view 动画问题

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 客户端 7.0.2 2.5.0

- 当前 Bug 的表现(可附上截图)

cover-image/cover-view transform:rotate 动画模拟器里正常,而真机表现不正常

用 keyframes、transition、wx.createAnimation 三种方式都有问题。

分别表现为:

  • keyframes 没有过渡动画效果,在 animation-duration 结束后直接从 0% 跳到 100%,没有中间动画过程;

  • transition 不能只围绕 z 轴转动,无论是只设置 rotate 还是 rotateZ,都会绕三轴一起转动。

  • wx.createAnimation 本质同上,效果也同上


- 预期表现

cover-image/cover-view transform:rotate 可以绕z轴平滑转动。


- 复现路径

https://developers.weixin.qq.com/s/3K1LAlma7z58


- 提供一个最简复现 Demo

https://developers.weixin.qq.com/s/3K1LAlma7z58

最后一次编辑于  01-11  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 亿事无忧
    亿事无忧
    01-14

    没人理?目前看下来,在真机上,没有任何办法让 cover-view / cover-image 的 rotate 正常动起来。大佬们看看呢

    01-14
    赞同
    回复 1
    • Helen
      Helen
      02-18

      请问下 过渡动画问题解决了吗?我现在也遇到transition过渡真机无效的问题

      02-18
      回复
  • Jarod
    Jarod
    01-16

    可以实现,我花了半天的时间搞定了。

    01-16
    赞同
    回复 4
    • Apollo&丸子君
      Apollo&丸子君
      01-16

      是怎么实现的呢?求指教~~

      01-16
      回复
    • 亿事无忧
      亿事无忧
      01-22

      怎么做的,求指教?

      01-22
      回复
    • Jarod
      Jarod
      03-02
      onShow() {
       let animation= wx.createAnimation({
         duration: 2000,
         transformOrigin: '50% 50% 0',
         timingFunction: 'linear'
        })
       
        var that = this;
        let rotateCount = 0
        this.timer= setInterval(function () {
          rotateCount+=1
          animation.rotate(180 * rotateCount).step()
          console.log("rotate:" + rotateCount)
            that.setData({
              animation: animation.export()
          });
        }, 2000)
        
      },


      03-02
      1
      回复
    • Jarod
      Jarod
      03-02
      <view>
        
              <cover-view class="cover">
              <cover-image class="rotateLogo" src="/image/logo.png" animation="{{animation}}"> </cover-image>
              </cover-view>
       
       
          </map>
      </view>


      03-02
      1
      回复