使用 Animation 组件

• 基本原理：通过在组件树中直接使用 Animation 组件，并配置其属性来实现动画效果。
• 示例代码：

import { Animation, Component } from '@ohos/animate';

@Component

struct MyComponent {

private anim: Animation = new Animation();

build() {

this.anim.duration = 2000;

this.anim.easing = 'ease-in-out';

this.anim.iterations = 1;

this.anim.keyframes = [

{ percent: 0, translateX: 0, translateY: 0 },

{ percent: 0.5, translateX: 100, translateY: 50 },

{ percent: 1, translateX: 200, translateY: 100 }

];

const rect = <Rect width="100" height="100" backgroundColor="#FF0000">

</Rect>;

rect.animation = this.anim;

return <Stack>{rect}</Stack>;

}

}

使用 @keyframes 规则

• 基本原理：类似于 CSS 中的 @keyframes 规则，在 ArkTS 中可以使用 @keyframes 定义关键帧动画，然后将其应用到组件的 style 属性中。
• 示例代码：

@Component

struct MyComponent {

build() {

const keyframes = `

@keyframes myAnimation {

0% {

transform: translateX(0px) translateY(0px);

}

50% {

transform: translateX(100px) translateY(50px);

}

100% {

transform: translateX(200px) translateY(100px);

}

}

`;

const rect = <Rect width="100" height="100" backgroundColor="#FF0000" style=

{{ animation: `myAnimation 2s ease-in-out 0s 1 normal both` }}></Rect>;

return <Stack>{rect}</Stack>;

}

}

使用 Transition 组件

• 基本原理： Transition 组件用于在组件的显示和隐藏状态之间添加过渡动画效果。
• 示例代码：

import { Transition, Component } from '@ohos/animate';

@Component

struct MyComponent {

private show: boolean = false;

build() {

const rect = <Rect width="100" height="100" backgroundColor="#FF0000">

</Rect>;

const transition = <Transition name="fade" duration="2000" easing="ease-in

out">

{this.show? rect : null}

</Transition>;

return <Stack>

<Button onClick={() => this.show =!this.show}>Toggle</Button>

{transition}

</Stack>;

}

}

使用 AnimateTo 和 AnimateBy 函数

• 基本原理： AnimateTo 函数用于将组件的属性从当前值动画到指定的值， AnimateBy 函数则是在组件当前属性值的基础上进行相对的动画变化。
• 示例代码：

import { AnimateTo, AnimateBy, Component } from '@ohos/animate';

@Component

struct MyComponent {

private myComponent: Component | null = null;

build() {

const rect = <Rect ref={(el) => this.myComponent = el as Component}

width="100" height="100" backgroundColor="#FF0000"></Rect>;

const button1 = <Button onClick={() => {

if (this.myComponent) {

AnimateTo(this.myComponent, { translateX: '100px', translateY: '100px'

}, { duration: 2000, easing: 'ease-in-out' });

}

}}>Animate To</Button>;

const button2 = <Button onClick={() => {

if (this.myComponent) {

AnimateBy(this.myComponent, { translateX: '50px', translateY: '50px' },

{ duration: 2000, easing: 'ease-in-out' });

}

}}>Animate By</Button>;

return <Stack>{rect}{button1}{button2}</Stack>;

}

}