HarmonyOS鸿蒙Next中关于动画中PlayMode.Reverse的问题

HarmonyOS鸿蒙Next中关于动画中PlayMode.Reverse的问题

我在开发中使用动画开发，代码如下

@ComponentV2
struct ShackHand {
  @Param serverActive:boolean = false

  @Local colorArray:Array<JumpTrans> = [
    new JumpTrans("#8002ECFC", 500),
    new JumpTrans("#802d2de3", 1000),
    new JumpTrans("#8002ECFC", 1500),
    new JumpTrans("#802d2de3", 2000),
    new JumpTrans("#8002ECFC", 2500),
  ]

  build() {
    RelativeContainer(){
      ForEach(this.colorArray, (jump:JumpTrans, index:number)=>{
        Circle({"width":"180lpx", "height":"180lpx"})
          .stroke(Color.White)
          .margin({
            left: index * 30
          })
          .strokeWidth("5lpx")
          .fill(jump.color)
          .transition(generaterEffect(jump.delay))
      })

    }
    .backgroundColor(Color.Black)
    .width("600lpx")
    .height("600lpx")

  }
}

function generaterEffect(delay:number):TransitionEffect{
  return  TransitionEffect.scale({x:0.1, y:0.1})
    .animation({
      duration: 1000,
      playMode: PlayMode.Reverse,
      delay:delay
    })
}

class JumpTrans {
  color:ResourceColor
  delay:number
  constructor(color:ResourceColor, delay: number) {
    this.color = color
    this.delay = delay
  }
}

按照文档的说法，动画倒放应该是由原大小缩小到期望的大小，但是实际的情况是，页面中圆形已经缩小到设置的值，然后，再由原大小缩小到期望大小。

我也尝试在scale添加{x:1,y:1}效果也是一样的，不知道有没有好的解决办法


更多关于HarmonyOS鸿蒙Next中关于动画中PlayMode.Reverse的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，PlayMode.Reverse是动画的播放模式之一，用于实现动画逆向播放。当设置PlayMode.Reverse时，动画会从结束状态反向播放到起始状态。该模式适用于需要来回播放的动画场景，例如展开/折叠效果。开发者可通过AnimatorOption的playMode属性设置。逆向播放时，动画的插值器效果也会相应反转。

更多关于HarmonyOS鸿蒙Next中关于动画中PlayMode.Reverse的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，PlayMode.Reverse的行为确实需要特别注意。根据您的代码和描述，问题出在动画初始状态的处理上。

当使用PlayMode.Reverse时，动画会从结束状态反向播放到开始状态。但在您的代码中，Circle组件在动画开始前就已经处于缩小状态(scale 0.1)，这会导致动画看起来像是从原大小缩小到0.1，而不是预期的从原大小缩小到0.1再恢复原大小的反向效果。

解决方案是：

  1. 确保Circle的初始状态是未缩放的(x:1,y:1)
  2. 在TransitionEffect中设置目标缩放值(x:0.1,y:0.1)
  3. 使用PlayMode.Reverse时，动画会从0.1缩放到1

修改generaterEffect函数如下：

function generaterEffect(delay:number):TransitionEffect{
  return TransitionEffect.scale({x:1, y:1})
    .animation({
      duration: 1000,
      playMode: PlayMode.Reverse,
      delay:delay
    })
}

这样动画就会从原始大小(1)缩小到0.1，然后反向播放时从0.1恢复到1，符合预期效果。

回到顶部