收藏
回答

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

最后一次编辑于  2019-01-11
回答关注问题邀请回答
收藏

2 个回答

  • Jarod
    Jarod
    2019-01-16

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

    2019-01-16
    有用
    回复 5
    • 2019-01-16

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

      2019-01-16
      回复
    • 2019-01-22

      怎么做的,求指教?

      2019-01-22
      回复
    • Jarod
      Jarod
      2019-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)
        
      },


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


      2019-03-02
      1
      回复
    • 一瓶香膏(刘恩)
      一瓶香膏(刘恩)
      2020-12-04
      真机上面,顺半圈,逆半圈,十分诡异
      2020-12-04
      回复
  • 2019-01-14

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

    2019-01-14
    有用
    回复 1
    • Helen
      Helen
      2019-02-18

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

      2019-02-18
      回复
登录 后发表内容