HarmonyOS 开发中使用动画效果卡顿，怎么办？

Question

在应用中使用动画效果时，动画表现不流畅或卡顿。

问题代码如下：

// 优化动画代码，减少计算
this.$element('animElement').animate({
  duration: 1000,
  iterations: 'infinite',
  keyframes: [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ]
});

Answer 1

避免使用复杂的动画属性，这样可以减少浏览器的计算负担。尽量使用CSS属性进行动画，这样浏览器可以利用硬件加速。比如，transform和opacity通常比width或top性能更好。

this.$element('animElement').animate({
  duration: 1000,
  iterations: 'infinite',
  keyframes: [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ]
});