【鸿蒙学习笔记】使用动画

官方文档：使用动画

目录标题

属性动画：通用属性发生改变时而产生的属性渐变效果
- animation
- animateTo
- 自定义属性动画 @AnimatableExtend
转场动画：是页面或组件的切换动画 , 显示/隐藏切换时的动画
- 出现/消失转场：实现一个组件出现或者消失时的动画效果
- 导航转场：一个界面消失，另外一个界面出现
- 模态转场：新的界面覆盖在旧的界面上，旧的界面不消失的
- 共享元素转场：对元素做的一种位置和大小匹配的过渡动画效果
- 动画曲线:属性值关于时间的变化函数
其他未完待续

在这里插入图片描述

属性动画：通用属性发生改变时而产生的属性渐变效果

animation

import curves from '@ohos.curves';@Entry
@Component
struct AnimationDemo {@State flag: boolean = false;@State rotateValue: number = 0;@State animationValue: number = 0;@State color: Color = Color.Red;build() {Column() {Column() {Text('ArkUI').textStyle().backgroundColor(0xf56c6c).fontColor(Color.Yellow).rotate({ angle: this.rotateValue }).animation({ curve: curves.springMotion() })Text('ArkUI').textStyle().backgroundColor(0x67C23A).fontColor(this.color).translate({ x: this.animationValue, y: this.animationValue }).animation({ curve: curves.springMotion() })}Button('点我').margin({ top: 120 }).width(150).onClick(() => {this.flag = !this.flag;this.rotateValue = this.flag ? 180 : 0;this.animationValue = this.flag ? 20 : 0;this.color = this.flag ? Color.Black : Color.White;})}.width('100%').height('100%').backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)}
}@Extend(Text)
function textStyle() {.fontWeight(FontWeight.Bold).fontSize(30).textAlign(TextAlign.Center).borderRadius(10).width(150).height(150)
}

在这里插入图片描述

animateTo

import curves from '@ohos.curves'@Entry
@Component
struct PropAnimation {@State flag: boolean = false;@State rotateValue: number = 0;@State translateValue: number = 0;@State opacityValue: number = 1;build() {Column() {Column() {this.CommonText()}.ColumnStyle().backgroundColor(0xf56c6c).rotate({ angle: this.rotateValue })Column() {this.CommonText()}.ColumnStyle().backgroundColor(0x67C23A).opacity(this.opacityValue).translate({ x: this.translateValue, y: this.translateValue })Button('点我').margin({ top: 120 }).width(150).onClick(() => {this.flag = !this.flag;animateTo({ curve: curves.springMotion() }, () => {this.rotateValue = this.flag ? 90 : 0;this.opacityValue = this.flag ? 0.6 : 1;this.translateValue = this.flag ? 100 : 0;})})}.width('100%').height('100%').backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)}@BuilderCommonText() {Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(30).fontColor(Color.White)}
}@Extend(Column)
function ColumnStyle() {.width(150).height(150).borderRadius(10).justifyContent(FlexAlign.Center)
}

在这里插入图片描述

自定义属性动画 @AnimatableExtend

// 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口
@AnimatableExtend(Text)
function rollFontSize(size: number) {.fontSize(size)
}@Entry
@Component
struct AnimatablePropertyExample {@State fontSize: number = 20;build() {Row() {Text("点击我").backgroundColor(Color.Pink).width(300).height(140).textAlign(TextAlign.Center).rollFontSize(this.fontSize).animation({ duration: 2000, delay: 0, curve: Curve.Ease }).onClick(() => {this.fontSize = this.fontSize == 20 ? 30 : 20;})}.width("100%").height('100%').justifyContent(FlexAlign.Center).padding(10)}
}

在这里插入图片描述

转场动画：是页面或组件的切换动画 , 显示/隐藏切换时的动画

出现/消失转场：实现一个组件出现或者消失时的动画效果

import curves from '@ohos.curves';@Entry
@Component
struct TransitionEffectDemo {@State isPresent: boolean = false;private effect: TransitionEffect =// 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.1, 0.1) }).combine(TransitionEffect.scale({ x: 3, y: 3 }))// 添加旋转转场效果.combine(TransitionEffect.rotate({ angle: 90 }))// 添加平移转场效果.combine(TransitionEffect.translate({ y: 100 }).animation({ curve: curves.springMotion() }))// 添加move转场效果.combine(TransitionEffect.move(TransitionEdge.BOTTOM))build() {Stack() {if (this.isPresent) {Column() {Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(20).fontColor(Color.White)}.justifyContent(FlexAlign.Center).width(150).height(150).borderRadius(10).backgroundColor(0xf56c6c).transition(this.effect)}Column().width(155).height(155).border({ width: 5, radius: 10, color: Color.Black })Button('Click').margin({ top: 320 }).onClick(() => {this.isPresent = !this.isPresent;})}.width('100%').height('60%')}
}