页面分类动画

显示动画

function animateTo(value: AnimateParam, event: () => void): void; 

代码如下：（实现属性变化引发的动画）

@Entry @Component struct Animate_Page1 {   @State boxWidth: number = 100;   @State boxHeight: number = 100;   @State flag: boolean = true;    build() {     Stack({ alignContent: Alignment.BottomEnd }) {       Column() {         Row() {          }         .width(this.boxWidth)         .height(this.boxHeight)         .backgroundColor(Color.Red)       }       .height('100%')       .width('100%')       .justifyContent(FlexAlign.Center)        Button("动画")         .width(50)         .height(50)         .margin(20)         .onClick(() => {           animateTo({             duration: 1000 //动画时间           }, () => {             if (this.flag) {               this.boxWidth = 240;               this.boxHeight = 240;             } else {               this.boxWidth = 100;               this.boxHeight = 100;             }             this.flag = !this.flag;           })         })     }     .width('100%')   } } 

常见属性

• duration：动画执行时间

• iterations：动画播放次数，-1表示无限次播放

• curve：播放曲线

• playMode：动画播放模式

• delay：动画延迟播放时间

属性动画

使用animation属性去定义动画的属性，需要注意的点是，如果在animation方法后定义的属性，在改变时将不会触发动画。

@Entry @Component struct Animate_Page2 {   @State boxWidth: number = 100;   @State boxHeight: number = 100;   @State flag: boolean = true;    build() {     Stack({ alignContent: Alignment.BottomEnd }) {       Column() {         Row() {          }         .width(this.boxWidth)         .height(this.boxHeight)         .backgroundColor(Color.Red)         .animation({           duration: 1000         })       }       .height('100%')       .width('100%')       .justifyContent(FlexAlign.Center)        Button("动画")         .width(50)         .height(50)         .margin(20)         .onClick(() => {           if (this.flag) {             this.boxWidth = 240;             this.boxHeight = 240;           } else {             this.boxWidth = 100;             this.boxHeight = 100;           }           this.flag = !this.flag;         })     }     .width('100%')   } } 

常见属性

• duration：动画执行时间

• iterations：动画播放次数，-1表示无限次播放

• curve：播放曲线

• playMode：动画播放模式

• delay：动画延迟播放时间

弹簧曲线动画（springCurve属性）

实现组件的左右抖动

import curves from '@ohos.curves';  @Entry @Component struct Animate_Page3 {   @State message: string = '登录框';   @State translateX: number = 0;   @State translateY: number = 0;    jumpWithSpeed(velocity: number) {     this.translateX = -10;     animateTo({       duration: 2000,       //速度（velocity）质量（mass）刚度（stiffness）阻尼（damping）       curve: curves.springCurve(velocity, 1, 1, 1)     }, () => {       this.translateX = 0;     })   }    build() {     Column() {       Row() {         Text(this.message).fontSize(40).width('100%').textAlign(TextAlign.Center)       }       .width(200)       .height(200)       .backgroundColor(Color.Gray)       .margin({         top: 20,         bottom: 50       })       .translate({         x: this.translateX,         y: this.translateY       })        Row() {         Button("jump10").width(100).onClick(() => {           this.jumpWithSpeed(10)         })         Button("jump200").width(100)           .onClick(() => {             this.jumpWithSpeed(200)           })       }.justifyContent(FlexAlign.SpaceAround)       .width('100%')     }     .height('100%')     .width('100%')   } } 

路径动画（motionPath属性）

需要在改变的外层轮廓添加animation属性，才能实现。需要注意点坐标需要乘2.

@Entry @Component struct Animate_Page4 {   @State message: string = 'Hello World';   @State flag: boolean = true;    build() {     Column() {       Row() {         Text(this.message).fontSize(20).width('100%').textAlign(TextAlign.Center)       }       .width(100)       .height(100)       .backgroundColor(Color.Gray)       .margin(10)       .onClick(() => {         this.flag = !this.flag;       })       .motionPath({         path: "M start.x start.y L10 400 L400 400 Lend.x end.y",         from: 0,         to: 1,         rotatable: false//控制组件是否沿运动方向旋转       })     }     .height('100%')     .width('100%')     .alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End)     .animation({       duration: 2000     })   } } 

页面间动画-放大缩小视图

关键属性：sharedTransition属性

sharedTransition属性中的type类型包含Exchange和Static两种，详细简介如下图：

实现两个页面之间的图片放大缩小的方式跳转

Animate_Page5：

import router from '@ohos.router';  @Entry @Component struct Animate_Page5 {   @State message: string = 'Hello World';    build() {     Column() {       Image($r('app.media.app_icon'))         .width(50)         .height(50)         .margin({           top: 30,           bottom: 30         })         .sharedTransition("icon1", {           duration: 1000,           type: SharedTransitionEffectType.Exchange         })        Button("点我跳转")         .width(200)         .fontSize(20)         .fontColor(Color.White)         .onClick((event: ClickEvent) => {           router.pushUrl({             url: "pages/Animate_Page5_Image"           })         })     }     .height('100%')     .width('100%')   } } 

Animate_Page5_Image：

import router from '@ohos.router';  @Entry @Component struct Animate_Page5_Image {   @State message: string = 'Hello World';    build() {     Column() {       Image($r('app.media.app_icon'))         .width(50)         .height(50)         .onClick(() => {           router.back();         })         .sharedTransition("icon1")     }     .height('100%')     .width('100%')     .justifyContent(FlexAlign.Center)   } } 

页面转场动画

可以设置转场动画方向和透明度等属性

pageTransition() {     //页面打开时候的动画   PageTransitionEnter({})     .onEnter((type: RouteType, progress: number) => {      })     //页面离开时候的动画   PageTransitionExit({})     .onExit((type: RouteType, progress: number) => {      }) }