华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用（属性、显示、专场）动画

2024年11月5日 LiuJinTao

文章目录

鸿蒙中动画的使用
- - 一、属性动画 - animation
  - - - 属性动画代码示例
  - 二、显示动画 - AnimateTo
  - 三、专场动画

鸿蒙中动画的使用

一、属性动画 - animation

在这里插入图片描述

属性动画代码示例

/*** 属性动画的演示*/
@Entry
@Component
struct Index {@State selfWidth: number = 20@State setId: number = 0build() {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

在这里插入图片描述

/***  显示动画的演示*/
@Entry
@Component
struct Index {@State selfWidth: number = 20@State setId: number = 0build() {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

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

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)}
}