收藏
回答

小程序中运用动画移动效果 图片会先闪烁一下再移动?

代码如下:

wxml中:

<view class = "main">

<button catchtap = "transform" class = "transform" animation = "{{ani_trans}}">transform</button>

<image class = "book1" mode = "widthFix" src = "图片地址.jpg" animation = "{{ani_book1}}"></image>

</view>


js中:

transform:function(){

var ani_t0 = wx.createAnimation({

delay: 400,

duration: 200,

})

ani_t0.opacity(1.0).translate(30,40).step()

this.setData({

ani_book1: ani_t0.export()

})

},


简单来说,就是一个button控制一张image,点击按钮后,图片移动(30,40)。

实际在真机上看效果,图片会先闪烁(类似于重加载?)一次,随后再执行动画的移动效果。

有没有什么办法可以去除这个闪烁的效果?

还是说不用wx.createAnimation去写动画,而是要改写成帧动画?

望指教!


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

1 个回答

  • 茜茜又困了🐽
    茜茜又困了🐽
    2022-08-04

    给image包一层view,animation属性写到view上,看看还会有闪烁的问题嘛?

    举例:
    <view animation="{{ 变量 }}">
      <image>...</image>
    </view>
    
    2022-08-04
    有用 1
    回复 9
    • 景霖
      景霖
      2022-08-04
      尝试了一下  点击按钮  没有移动效果了。。
      2022-08-04
      回复
    • 景霖
      景霖
      2022-08-04
      不过又给view里面加了class  可以执行了!
      2022-08-04
      回复
    • 茜茜又困了🐽
      茜茜又困了🐽
      2022-08-04回复景霖
      代码怎么写的?我看不到,提供下代码片段或者截图
      2022-08-04
      回复
    • 茜茜又困了🐽
      茜茜又困了🐽
      2022-08-04回复景霖
      那问题解决了嘛?
      2022-08-04
      回复
    • 景霖
      景霖
      2022-08-04回复茜茜又困了🐽
      解决了部分,谢谢你!
      2022-08-04
      回复
    查看更多(4)
登录 后发表内容