HarmonyOS 鸿蒙Next 动画播放的起始点设置该怎么设置

Image($r('app.media.bg_custom_scan_ray'))
  .width(this.widthSize)
  .height(this.heightSize)
  .animation({
    duration: 1200,
    curve: Curve.Friction,
    delay: 1000,
    iterations: -1,
    playMode: PlayMode.Alternate
  })
  .onAppear(() => {
    this.heightSize = 280
  })

高度变化的时候都是从图片的高度的一半向两边展开的动画，能不能让动画顶部向底部张开，动画我怎么能够让他停止，又让他重新启动

更多关于HarmonyOS 鸿蒙Next 动画播放的起始点设置该怎么设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 1楼•2 个月前

设置iterations的属性值为-1，使动画无限循环执行，可以再通过一段duration为0的动画覆盖当前无限循环动画，使动画停止播放。参考示例如下：

//执行动画元素

Row().width(150).height(150).backgroundColor('#ff00ff').scale(this.doScale)

...

//播放动画

Button('播放动画').onClick(() => {

    //Alternate:动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

    animateTo({ duration: 400, iterations: -1, playMode: PlayMode.Alternate,

    }, () => {

       this.doScale = { x: 0.8, y: 0.8 }

  })

})

//停止播放

Button('停止播放').onClick(() => {

        animateTo({ duration: 0, iterations: 1,

        }, () => {

          this.doScale = { x: 1, y: 1 }

    })

})

animation默认展开方式就是这样的，没有属性可以修改。

可以通过.position可设置图片起始位置，使用.translate可以设置组件转场时的平移效果，设置起始位置和结束位置，设置在y轴上的平移。也可以自定义属性动画，通过自定义可动画属性接口和可动画数据类型，实现效果，这个需要您自行实现，参考文档如下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-custom-attribute-animation-V5

更多关于HarmonyOS 鸿蒙Next 动画播放的起始点设置该怎么设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•2 个月前

在HarmonyOS鸿蒙Next系统中，动画播放的起始点设置通常与动画的属性配置相关。你可以通过动画资源文件或代码直接设置动画的起始属性。

动画资源文件设置

如果你使用XML或JSON格式的动画资源文件定义动画，可以在文件中指定动画的起始状态。例如，对于位置动画，可以设定初始位置属性。

<!-- 动画资源文件示例 -->
<translate
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:duration="500"
    ohos:fromXDelta="0"  <!-- 起始X偏移量 -->
    ohos:fromYDelta="0"  <!-- 起始Y偏移量 -->
    ohos:toXDelta="100"  <!-- 结束X偏移量 -->
    ohos:toYDelta="100"/> <!-- 结束Y偏移量 -->

代码设置

在代码中，你可以通过动画播放器的API设置动画的起始属性。例如，使用AnimatorSet或特定的动画类（如TranslateAnimation），在启动动画前设置初始状态。

// 注意：此段代码仅为示例，鸿蒙动画设置不使用Java API
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.your_animation);
animator.setTarget(yourView); // 设置动画目标视图
animator.start(); // 启动动画

鸿蒙特定代码（非Java示例，假设使用鸿蒙特定API）:

// 鸿蒙API示例（非C/C++，仅为示意）
Animation animation = new Animation();
animation.setStartX(0); // 设置起始X坐标
animation.setStartY(0); // 设置起始Y坐标
yourView.startAnimation(animation); // 启动动画

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html