在小组件和灵动岛中使用动画#

这些API让你在小组件中播放动图或者使用位移和旋转动画。

AnimatedFrames 组件#

描述#

AnimatedFrames 组件允许你通过提供的子视图来展示帧动画。这些子视图将按顺序循环显示，形成动画效果。你可以自定义动画的持续时间。

属性#

• duration: DurationInSeconds
  动画的持续时间，单位为秒。

• children: VirtualNode[]
  一组视图，作为动画的每一帧。每个子视图在动画过程中依次显示。

示例#

1<AnimatedFrames duration={4}>
2  <Circle fill="red" frame={{width: 20, height: 20}} />
3  <Circle fill="red" frame={{width: 25, height: 25}} />
4  <Circle fill="red" frame={{width: 30, height: 30}} />
5  <Circle fill="red" frame={{width: 35, height: 35}} />
6</AnimatedFrames>

AnimatedGif 组件#

描述#

AnimatedGif 组件用于在小组件中渲染一个 GIF 动图。你可以提供 GIF 文件的路径，并可选地设置动画的持续时间。

属性#

• path: string
  GIF 文件的路径。

• duration: DurationInSeconds (可选)
  动画的持续时间，单位为秒。如果未提供，使用默认持续时间。

示例#

1<AnimatedGif
2  path={Path.join(Script.directory, "test.gif")}
3  duration={4}
4/>

SwingAnimation 类型#

描述#

SwingAnimation 类型定义了视图在水平和垂直方向上的摇摆动画配置。

属性#

• duration: DurationInSeconds
  动画的持续时间，单位为秒。

• distance: number
  视图在给定轴向上摇摆的距离。

ClockHandRotationEffectPeriod 类型#

描述#

ClockHandRotationEffectPeriod 类型用于定义时钟指针旋转效果的周期。你可以使用预定义值如 "hourHand"、"minuteHand" 或 "secondHand"，也可以提供自定义的持续时间。

AnimatedImage 组件#

描述#

AnimatedImage 组件用于在小组件中渲染一个动画图像。你可以使用 SFSymbol 或 UIImage 作为动画帧，并自定义动画的持续时间和内容模式（适应或填充）。

属性#

• systemImages: (string | { name: string; variableValue: number })[] (可选)
  一个包含 SFSymbol 名称和变量值的数组，用于显示作为动画帧的符号图像。

• images: UIImage[] (可选)
  一个 UIImage 数组，用于显示作为动画帧的图像。

• contentMode: ContentMode (可选)
  图像在父容器中的显示方式。默认为 "fit"。
  可选值："fit"、"fill"。

• duration: DurationInSeconds
  动画的持续时间，单位为秒。

示例 (使用 SFSymbol)#

1<AnimatedImage
2  duration={6}
3  systemImages={[
4    {name: "chart.bar.fill", variableValue: 0},
5    {name: "chart.bar.fill", variableValue: 0.3},
6    {name: "chart.bar.fill", variableValue: 0.6},
7    {name: "chart.bar.fill", variableValue: 1},
8  ]}
9  contentMode="fit"
10/>

示例 (使用 UIImage)#

1const image1 = Path.join(Script.directory, "image1.png")
2const image2 = Path.join(Script.directory, "image2.png")
3
4<AnimatedImage
5  duration={4}
6  images={[
7    UIImage.fromFile(image1),
8    UIImage.fromFile(image2),
9  ]}
10  contentMode="fill"
11/>

CommonViewProps 类型#

描述#

此类型定义了支持动画效果的视图的公共属性，包括摇摆动画和时钟指针旋转效果。

属性#

• swingAnimation: { x?: SwingAnimation, y?: SwingAnimation } (可选)
  定义了视图在 X 轴和 Y 轴上的摇摆动画配置。每个轴向都可以有单独的动画设置：

  • x: 水平轴的动画配置。
  • y: 垂直轴的动画配置。

• clockHandRotationEffect: ClockHandRotationEffectPeriod | { anchor: KeywordPoint | Point, period: ClockHandRotationEffectPeriod } (可选)
  定义模拟时钟指针的旋转效果。可以指定锚点（可选）和周期（例如，"hourHand"、"minuteHand"、"secondHand"），或者提供自定义的旋转持续时间。

示例 (摇摆动画)#

1<Circle
2  fill="systemRed"
3  frame={{width: 50, height: 50}}
4  swingAnimation={{
5    x: {duration: 4, distance: 250},
6    y: {duration: 2, distance: 50},
7  }}
8/>

示例 (时钟指针旋转效果)#

1<Circle
2  fill="systemBlue"
3  frame={{width: 50, height: 50}}
4  clockHandRotationEffect="minuteHand"
5/>