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