官方文档:使用动画
目录标题
- 属性动画:通用属性发生改变时而产生的属性渐变效果
- [转场动画:是页面或组件的切换动画 , 显示/隐藏 切换时的动画](#转场动画:是页面或组件的切换动画 , 显示/隐藏 切换时的动画)
- 其他未完待续
属性动画:通用属性发生改变时而产生的属性渐变效果
animation
cpp
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
cpp
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)
}
@Builder
CommonText() {
Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(30).fontColor(Color.White)
}
}
@Extend(Column)
function ColumnStyle() {.width(150).height(150).borderRadius(10).justifyContent(FlexAlign.Center)
}
自定义属性动画 @AnimatableExtend
cpp
// 第一步:使用@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)
}
}
转场动画:是页面或组件的切换动画 , 显示/隐藏 切换时的动画
出现/消失转场:实现一个组件出现或者消失时的动画效果
cpp
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%')
}
}
导航转场:一个界面消失,另外一个界面出现
需要消化
- 导航转场的动画效果是系统定义的,开发者不能修改。
- 导航转场推荐使用
Navigation
组件实现,可搭配NavRouter
组件和NavDestination
组件实现导
航功能。 - 使用场景
模态转场:新的界面覆盖在旧的界面上,旧的界面不消失的
- 应用场景
弹出对话框时对话框做出现和消失的动画
共享元素转场:对元素做的一种位置和大小匹配的过渡动画效果
- 一镜到底动效,眼瞅着变化
动画曲线:属性值关于时间的变化函数
需要消化