问题背景

如下方代码所示，该段代码在微信开发者工具内动画正常且流畅，但运行在ios设备中运行时发生动画卡顿，难以触发动画，且时常发生卡顿。

1
2
3

<view animation={{animation}}>
  <img src="..." mode="widthFix" style="width: 100%"/>
</view>

尝试解决的思路

  1. 把相同动画应用到文本按键上，在ios设备中运行时，按键动画展示丝滑且无闪烁，考虑是内容的问题。

  2. 尝试将image组件更换为cover-image组件。我所设置的view外层有一个圆角，并且有一个缩放动画，在更改完组件后，圆角消失，动画变为了偏移而非缩放，也就是说小程序的animation变形并未作用到cover组件上，放弃这条路。

（在微信官方文档中无论是在cover系列组件的章节，还是animation的章节，均未提到其是剥离文档流而存在这件事，算是个坑，也可呢是官方没想到会有人这么玩吧）

  1. 尝试使用background-image样式来替换image组件，成功。

最终解决方案

把image图片设置未外层view的background-image就能完美解决了，亲测有效，在ios设备上展示丝滑，且不会发生图片闪烁。