未验证 提交 3eee8fa1 编写于 作者: L luoying_ace 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md.

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 870baa0f
# 显式动画
提供显示动画接口
提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 接口名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| animateTo(value:&nbsp;[AnimateParam](#animateparam对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
animateTo(value: AnimateParam, event: () => void): void
| 参数 | 类型 | 是否必填 | 描述 |
| ---------------- | ------------ | -------------------- | -------------------- |
| value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 |
| event | () => void | 是 | 指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
## AnimateParam对象说明
......@@ -25,7 +27,6 @@
| onFinish | ()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
## 示例
```ts
......@@ -33,26 +34,24 @@
@Entry
@Component
struct AnimateToExample {
@State widthSize: number = 200
@State widthSize: number = 250
@State heightSize: number = 100
@State rotateAngle: number = 0
private flag: boolean = true
build() {
Column() {
Button('click me')
Button('change width and height')
.width(this.widthSize)
.height(this.heightSize)
.backgroundColor(0x317aff)
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
.margin(30)
.onClick(() => {
if (this.flag) {
animateTo({
duration: 1000, // 动画时长
tempo: 0.5, // 播放速率
curve: Curve.EaseInOut, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
duration: 2000,
curve: Curve.EaseOut,
iterations: 3,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end')
}
......@@ -61,25 +60,31 @@ struct AnimateToExample {
this.heightSize = 50
})
} else {
animateTo({
duration: 200, // 动画时长
curve: Curve.Ease, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.widthSize = 200
animateTo({}, () => {
this.widthSize = 250
this.heightSize = 100
})
}
this.flag = !this.flag
})
Button('change rotate angle')
.margin(50)
.rotate({ angle: this.rotateAngle })
.onClick(() => {
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.AlternateReverse,
onFinish: () => {
console.info('play end')
}
}, () => {
this.rotateAngle = 90
})
})
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001174104398](figures/zh-cn_image_0000001174104398.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册