鸿蒙5.0开发进阶：ArkTS组件-关键帧动画 (keyframeAnimateTo)

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

关键帧动画 (keyframeAnimateTo)

在UIContext中提供keyframeAnimateTo接口来指定若干个关键帧状态，实现分段的动画。同属性动画，布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容等，如果要内容跟随宽高变化，可以使用renderFit属性配置。

说明

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

该接口为UIContext类的成员函数，需要通过UIContext实例对象调用。

keyframeAnimateTo(param: KeyframeAnimateParam, keyframes: Array): void

设置关键帧动画。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填描述
paramKeyframeAnimateParam是关键帧动画的整体动画参数。
keyframesArray<KeyframeState>是所有的关键帧状态。

KeyframeAnimateParam对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称参数类型是否必填描述
delaynumber否

动画的整体延时时间，单位为ms(毫秒)，默认不延时播放。

默认值：0

说明：

delay>=0为延迟播放，delay<0表示提前播放。对于delay<0的情况：当delay的绝对值小于实际动画时长，动画将在开始后第一帧直接运动到delay绝对值的时刻的状态；当delay的绝对值大于等于实际动画时长，动画将在开始后第一帧直接运动到终点状态。其中实际动画时长等于单次动画时长乘以动画播放次数。

iterationsnumber否

动画播放次数。默认播放一次，设置为-1时表示无限次播放。设置为0时表示无动画效果。

默认值：1

取值范围：[-1, +∞)

onFinish() => void否动画播放完成回调。当keyframe动画所有次数播放完成后调用。

KeyframeState对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称参数类型是否必填描述
durationnumber是

该段关键帧动画的持续时间，单位为毫秒。

取值范围：[0, +∞)

说明：

- 设置小于0的值时按0处理。

- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。

curveCurve| string | ICurve否

该关键帧使用的动画曲线。

默认值：Curve.EaseInOut

说明：

由于springMotion、responsiveSpringMotion、interpolatingSpring曲线时长不生效，故不支持这三种曲线。

event() => void是指定在该关键帧时刻状态的闭包函数，即在该关键帧时刻要达到的状态。

示例

该示例主要演示如何通过keyframeAnimateTo来设置关键帧动画。

  1. // xxx.ets
  2. import { UIContext } from '@kit.ArkUI';
  3.  
  4. @Entry
  5. @Component
  6. struct KeyframeDemo {
  7.   @State myScale: number = 1.0;
  8.   uiContext: UIContext | undefined = undefined;
  9.  
  10.   aboutToAppear() {
  11.     this.uiContext = this.getUIContext?.();
  12.   }
  13.  
  14.   build() {
  15.     Column() {
  16.       Circle()
  17.         .width(100)
  18.         .height(100)
  19.         .fill("#46B1E3")
  20.         .margin(100)
  21.         .scale({ x: this.myScale, y: this.myScale })
  22.         .onClick(() => {
  23.           if (!this.uiContext) {
  24.             console.info("no uiContext, keyframe failed");
  25.             return;
  26.           }
  27.           this.myScale = 1;
  28.           // 设置关键帧动画整体播放3次
  29.           this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
  30.             {
  31.               // 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
  32.               duration: 800,
  33.               event: () => {
  34.                 this.myScale = 1.5;
  35.               }
  36.             },
  37.             {
  38.               // 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
  39.               duration: 500,
  40.               event: () => {
  41.                 this.myScale = 1;
  42.               }
  43.             }
  44.           ]);
  45.         })
  46.     }.width('100%').margin({ top: 5 })
  47.   }
  48. }

鸿蒙5.0开发进阶全套学习资料
微信名片
注：本文转载自blog.csdn.net的懂你的大海的文章"https://blog.csdn.net/Androidbye/article/details/145548958"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！