公告列表
公告列表
收藏
回答

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

https://developers.weixin.qq.com/s/3K1LAlma7z58
最后一次编辑于  2019-01-11
回答关注问题邀请回答
收藏

3 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-05-31

    我也遇到了这个问题，只是我的需求正好就只是translate与opacity。

    经测试，在模拟器和android机上都能正常显示，


    2021-05-31
    有用 1
    回复
  • 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
      赞
      回复
请 登录 后发表内容
相关文档