2024年11月5日 LiuJinTao
文章目录
鸿蒙中动画的使用
一、属性动画 - animation
属性动画代码示例
ts
/**
* 属性动画的演示
*/
@Entry
@Component
struct Index {
@State selfWidth: number = 20
@State setId: number = 0
build() {
Column() {
Text("HarmonyOS NEXT")
.fontWeight(FontWeight.Bold)
.fontSize(this.selfWidth)
.textAlign(TextAlign.Center)
.animation({
// 动画事件
duration: 900,
// 动画曲线
// curve: Curve.Linear,
curve: "cubic-bezier(1.00, -0.18, 1.00, -0.33)",
// 延迟时间
delay: 500,
// 执行次数 (-1 无限次)
iterations: 2,
// 播放模式
playMode: PlayMode.Alternate
})
Button("放大")
.onClick(() => {
// 这里通过定时器实现动画效果(20毫秒动一下,产生视觉效果!)
this.setId = setInterval(() => {
if (this.selfWidth < 50) {
this.selfWidth++
} else {
clearInterval(this.setId) // 关闭定时器
}
}, 30)
})
Button("缩小")
.onClick(() => {
// 当 animation 发现该组件属性发生变化,就会执行 animation属性动画 (这里我们改变字体大小)
this.selfWidth = 20
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
二、显示动画 - AnimateTo
ts
/**
* 显示动画的演示
*/
@Entry
@Component
struct Index {
@State selfWidth: number = 20
@State setId: number = 0
build() {
Column() {
Text("HarmonyOS NEXT")
.fontWeight(FontWeight.Bold)
.fontSize(this.selfWidth)
.textAlign(TextAlign.Center)
Button("放大")
.onClick(() => {
// 这里通过定时器实现动画效果(20毫秒动一下,产生视觉效果!)
this.setId = setInterval(() => {
if (this.selfWidth < 50) {
this.selfWidth++
} else {
clearInterval(this.setId) // 关闭定时器
}
}, 30)
})
Button("缩小")
.onClick(() => {
animateTo({
// 这里可以写 animation 中的所有配置
duration: 900,
} , () => {
// 事件触发,这里执行的事件逻辑都会通过动画形式呈现
// 和 animation比较,这个比较专一,控制字体大小就只会呈现字体大小动画
this.selfWidth = 20
})
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
三、专场动画
- Index
ts
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Index {
build() {
Column() {
Column() {
Image($r("app.media.startIcon"))
.width(100)
.aspectRatio(1)
// 分别绑定该属性,且id值一样,通过路由跳转实现专场动画效果
.sharedTransition("sharedID", {duration: 350})
Button("跳转")
.onClick(() => {
router.pushUrl({
url: "pages/Index2"
})
})
}
}
.width("100%")
.height("100%")
.justifyContent(FlexAlign.Center)
}
}
- Index2
ts
import { router } from '@kit.ArkUI';
@Entry
@Component
struct Index2 {
@State message: string = 'Hello World';
build() {
Column() {
Image($r("app.media.startIcon"))
.width("100%")
.height(400)
// 分别绑定该属性,且id值一样,通过路由跳转实现专场动画效果
.sharedTransition("sharedID", {duration: 350})
Button("返回")
.onClick(() => {
router.pushUrl({
url: "pages/Index"
})
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
}