未验证 提交 870baa0f 编写于 作者: L luoying_ace 提交者: Gitee

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

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 6b1aab1e
...@@ -31,24 +31,21 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC ...@@ -31,24 +31,21 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC
struct AttrAnimationExample { struct AttrAnimationExample {
@State widthSize: number = 250 @State widthSize: number = 250
@State heightSize: number = 100 @State heightSize: number = 100
@State changeColor: number = 0xFF0000FF
@State rotateAngle: number = 0 @State rotateAngle: number = 0
@State flagA: boolean = true @State flag: boolean = true
@State flagB: boolean = true
@State flagC: boolean = true
build() { build() {
Column() { Column() {
Button('change width and height') Button('change width and height')
.onClick(() => { .onClick(() => {
if (this.flagA) { if (this.flag) {
this.widthSize = 100 this.widthSize = 100
this.heightSize = 50 this.heightSize = 50
} else { } else {
this.widthSize = 250 this.widthSize = 250
this.heightSize = 100 this.heightSize = 100
} }
this.flagA = !this.flagA this.flag = !this.flag
}) })
.margin(30) .margin(30)
.width(this.widthSize) .width(this.widthSize)
...@@ -56,43 +53,20 @@ struct AttrAnimationExample { ...@@ -56,43 +53,20 @@ struct AttrAnimationExample {
.animation({ .animation({
duration: 2000, duration: 2000,
curve: Curve.EaseOut, curve: Curve.EaseOut,
delay: 500,
iterations: 1,
playMode: PlayMode.Normal
})
Button('change backgroundColor')
.onClick(() => {
if (this.flagB) {
this.changeColor = 0xFFFF4500
} else {
this.changeColor = 0xFF0000FF
}
this.flagB = !this.flagB
})
.margin(30)
.backgroundColor(this.changeColor)
.animation({
duration: 800,
curve: Curve.ExtremeDeceleration,
iterations: 3, iterations: 3,
playMode: PlayMode.Normal playMode: PlayMode.Normal
}) })
Button('change rotate angle') Button('change rotate angle')
.onClick(() => { .onClick(() => {
if (this.flagC) { this.rotateAngle = 90
this.rotateAngle = 90
} else {
this.rotateAngle = 0
}
this.flagC = !this.flagC
}) })
.margin(30) .margin(50)
.rotate({ angle: this.rotateAngle }) .rotate({ angle: this.rotateAngle })
.animation({ .animation({
duration: 1200, duration: 1200,
curve: Curve.Friction, curve: Curve.Friction,
delay: 500, delay: 500,
iterations: 10, iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.AlternateReverse playMode: PlayMode.AlternateReverse
}) })
}.width('100%').margin({ top: 20 }) }.width('100%').margin({ top: 20 })
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册