10 回复
示例：
```javascript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct SequenceAnimation {
[@State](/user/State) scale: number = 1;
[@State](/user/State) rotate: number = 0;
[@State](/user/State) color: Color = Color.White;
async runSequenceAnimation() {
// 第一阶段：放大
animateTo({ duration: 500 }, () => {
this.scale = 1.5;
})
// 等待300ms
await new Promise(resolve => setTimeout(resolve, 300))
// 第二阶段：旋转
animateTo({ duration: 800 }, () => {
this.rotate = 360;
})
// 第三阶段：变色
animateTo({ duration: 400 }, () => {
this.color = Color.Blue;
})
}
build() {
Image($r('app.media.app_icon'))
.width(100)
.height(100)
.scale(this.scale)
.rotate({ angle: this.rotate })
.backgroundColor(this.color)
.onClick(() => this.runSequenceAnimation())
}
}更多关于HarmonyOS鸿蒙Next中如何给图标设置一个动效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，给图标设置动效可以通过使用ArkUI框架中的动画组件来实现。具体步骤如下：
-
定义动画属性：首先，在组件的
attribute属性中定义需要动画化的属性，例如scale、rotate、translate等。 -
创建动画对象：使用
Animation类创建动画对象，并设置动画的持续时间、延迟、重复次数等参数。 -
绑定动画到组件：通过
animator属性将动画对象绑定到目标组件上。 -
触发动画：通过用户交互或逻辑条件触发动画的执行。
以下是一个简单的示例代码，展示如何给图标设置一个缩放动效：
import { Animation, animator } from '@ohos.animator';
@Entry
@Component
struct IconAnimation {
private scaleAnimation: Animation = new Animation({
duration: 1000, // 动画持续时间
delay: 0, // 动画延迟
iterations: Infinity, // 动画重复次数
curve: 'easeInOut' // 动画曲线
});
build() {
Column() {
Image($r('app.media.icon'))
.width(100)
.height(100)
.animator({
scale: this.scaleAnimation
})
.onClick(() => {
this.scaleAnimation.play(); // 点击图标时播放动画
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}在这个示例中，当用户点击图标时，图标会执行一个缩放动画。动画的属性、持续时间、延迟、重复次数等都可以根据需要进行调整。
