
回复
动画是提升鸿蒙应用交互体验的关键利器。今天,我们手把手实现一个“跳跃动画按钮”,通过 ArkTS 的动画能力打造更灵动的 UI,打造真正有“呼吸感”的界面!
HarmonyOS ArkUI 动画支持以下模式:
我们将用 animateTo
实现尺寸动画。
@Entry
@Component
struct BouncyButton {
@State scaleVal: number = 1.0
build() {
Column() {
Text('点我跳动!')
.fontSize(18)
.padding(12)
.backgroundColor('#4A90E2')
.borderRadius(12)
.scale({ x: this.scaleVal, y: this.scaleVal })
.onClick(() => {
this.animate()
})
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.height('100%')
}
animate() {
animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
this.scaleVal = 1.2
}, () => {
animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
this.scaleVal = 0.9
}, () => {
animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
this.scaleVal = 1.0
})
})
})
}
}
技术点 | 说明 |
---|---|
@State |
控制动画目标值(scale) |
animateTo |
实现平滑补间动画 |
多段动画嵌套 | 三段组合实现“先放大→再缩小→归位” |
scale |
控制缩放大小,支持 X/Y 分别定义 |
《设备能力调用全攻略:调用相机、定位与系统分享》
教你玩转鸿蒙端侧原生能力,让你的应用动真格!
《设备能力调用全攻略:调用相机、定位与系统分享》
教你玩转鸿蒙端侧原生能力,让你的应用动真格!