鸿蒙动画学习

• 动画分类

1. 属性动画 .animation() —— 挂在组件上，属性一变自动平滑过渡
2. 显式动画 animateTo() —— 把改状态的代码包起来，主动触发动效
3. 页面间转场 NavDestination.systemTransition —— 页面切换动画
4. 组件内转场 .transition() —— 组件出现/消失时的特效
5. 关键帧动画 keyframeAnimateTo() —— 一个动画分好几段控制
6. 路径动画 .motionPath() —— 组件沿自定义路径移动

属性动画

• 能动画：宽高、背景色、透明度、缩放、旋转、位移
• 不能：zIndex、focusable 这种值变了画面不一定变

就是给 Column 加 .animation()，我的理解就是给它加一个动画效果.animation ({ })里加动画实现的效果条件比如动画时长以及运行次数等

.animation({
duration: 800, // 动画时长
curve: Curve.EaseInOut, // 曲线
iterations: 1 // 次数，-1 无限循环
})

曲线解释

• Linear：匀速
• EaseIn：慢到快
• EaseOut：快到慢
• EaseInOut：缓入缓出
• Spring：弹性回弹

学习成果

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct AttributeAnimationDemo{
@State boxWidth:number=100
@State boxHeight:number=100
build() {
Column({space:20}){
Column()
.width(this.boxWidth)
.height(this.boxHeight)
.backgroundColor('#007AFF')
.borderRadius(20)
.animation({
duration:700,
curve:Curve.EaseInOut ,
iterations:1
})
Button('缩小')
.onClick( ()=>{
this.boxWidth=50
this.boxHeight=50
})
.width('20%')
.height('10%')

.padding(20)
Button('放大')
.onClick( ()=>{
this.boxWidth=200
this.boxHeight=200
})
.width('20%')

.height('10%')

.padding(20)
}
.justifyContent(FlexAlign.Center)
}
}

运行视频

显式动画

注意事项

1. 别在 aboutToAppear / aboutToDisappear 里调动画——build 还没执行，属性没初值，动画出不来
2. 状态管理 V2 里用 animateTo 可能出异常效果，要留意
3. animateTo 能做宽高动画，但内容（文字、Canvas）默认直接跳到终点，要跟随变化得配 renderFit
4. 组件出现/消失的效果，显式动画不好做的话，就用 .transition()

animate to与箭头函数联用

1.控制状态
Button('切换卡片')
.onClick(() => {
animateTo({ duration: 500, curve: Curve.EaseInOut }, () => {
this.showCard = !this.showCard
})
})

2.一次修改多个属性

animateTo({ duration: 800, curve: Curve.EaseInOut }, () => {
this.boxWidth = 160
this.boxHeight = 160
this.opacity = 1
})

属性动画与显式动画的区别

• 属性动画是"这个组件以后属性变了都要动画"——声明一次，永久生效
• 显式动画是"这次修改要有动画"——每次都要主动写

属性动画:

Column()
.width(this.boxWidth)
.height(this.boxHeight)
.animation({ duration: 800, curve: Curve.EaseInOut })

Button('放大').onClick(() => {
this.boxWidth = 160
this.boxHeight = 160
})

显式动画

Column()
.width(this.boxWidth)
.height(this.boxHeight)

Button('放大').onClick(() => {
animateTo({ duration: 800, curve: Curve.EaseInOut }, () => {
this.boxWidth = 160
this.boxHeight = 160
})
})

转场动画

组内转场

if加transition ➕animate to

if (this.showCard) {
Text('卡片')
.transition(TransitionEffect.opacity(0).animation({ duration: 500 }))
}
animateTo({ duration: 500 }, () => {
this.showCard = !this.showCard
})

1.透明度过渡：TransitionEffect.opacity(0)

2.缩放：TransitionEffect.scale({ x: 0.5, y: 0.5 })
3.平移：TransitionEffect.translate({ x: 200, y: 0 })
4.旋转：TransitionEffect.rotate({ z: 1, angle: 180 })
5.边缘移入/出：TransitionEffect.move(TransitionEdge.BOTTOM)
6.非对称：TransitionEffect.asymmetric(进, 出)

六种动画对比

下面用一张表格汇总属性动画、显式动画、组件内转场、页面间转场、关键帧动画和路径动画的核心差异，方便快速查阅。

简单来说：属性动画和显式动画解决的是「属性变化要不要动」的问题，前者声明一次、后者每次主动写；组件内转场和页面间转场解决的是「组件或页面出现/消失」的问题；关键帧动画和路径动画则偏向更精细的动画编排，分别控制分段节奏和运动轨迹。

对称转场和非对称转场

对称

Text('Hello')
.transition(
TransitionEffect.translate({ x: 200 })
.combine(TransitionEffect.opacity(0))
.animation({ duration: 500 })
)

进场与退场效果相同

.combine 的作用是将两个效果重叠起来

非对称

if (this.showCard) {
Text('卡片')
.transition(
TransitionEffect.asymmetric(
// 第一个参数：进场效果
TransitionEffect.opacity(0)
.combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))
.animation({ duration: 500 }),

// 第二个参数：退场效果
TransitionEffect.move(TransitionEdge.BOTTOM)
.animation({ duration: 400 })
)
)
}

1. 参数顺序：asymmetric(进, 出) 第一个是插入效果，第二个是退场效果，
2. 时长可以不一样：进场 500ms、退场 400ms，各自独立，互不影响

成果

@Entry
@Component
struct AnimateToDemo {
@State showCard: boolean = true

build() {
Column({ space: 20 }) {

if (this.showCard) {
Column() {
Text('我是卡片')
.fontSize(20)
.fontColor(Color.White)
}
.width(150)
.height(150)
.backgroundColor('#34C759')
.borderRadius(20)
.justifyContent(FlexAlign.Center)
.transition(
TransitionEffect.asymmetric(
TransitionEffect.opacity(0)
.combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))
.animation({ duration: 500, curve: Curve.EaseOut }),
TransitionEffect.move(TransitionEdge.BOTTOM)
.animation({ duration: 400, curve: Curve.EaseIn })
)
)
}

Button('隐藏')
.width(220)
.fontSize(16)
.backgroundColor('#FF3B30')
.onClick(() => {
animateTo({ duration: 500 }, () => {
this.showCard = false
})
})

Button('显示')
.width(220)
.fontSize(16)
.backgroundColor('#007AFF')
.onClick(() => {
animateTo({ duration: 500 }, () => {
this.showCard = true
})
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}

粒子动画

Particle：粒子组件，鸿蒙用来制作粒子动画的UI组件，可以把它想成装粒子的大盒子。
emitter：发射器，定义粒子从哪里产生、以何种方式生成，容易理解的想成喷泉的喷头。
particle：粒子本身，控制粒子长什么样子
color：粒子颜色，设置粒子的色彩
acceleration：加速度，控制粒子飞行方向与运动速度，
opacity：透明度变化，控制粒子透明程度的变化
updater：更新器，让粒子属性可以随时间自动变化
config：配置，给功能填写各项参数
disturbanceFields：扰动场，给粒子施加外力

代码骨架

@Entry
@Component
struct XxxEffect {
build() {
Stack() {
// 背景
Text().width('100%').height('100%').backgroundColor(Color.Black)

// 粒子组件
Particle({
particles: [
{
emitter: { /* 发射器 */ },
color: { /* 颜色 */ },
opacity: { /* 透明度 */ },
acceleration: { /* 加速度 */ }
}
]
})
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}

1.发射器里面的具体内容代码骨架

emitter: {
particle: {
type: ParticleType.POINT, // 粒子类型：圆点
config: { radius: 4 }, // 圆点半径
count: 200, // 同屏粒子总数
lifetime: 8000, // 每个粒子存活毫秒数
lifetimeRange: 2000 // 存活时间浮动范围
},
emitRate: 30, // 每秒发射多少个
position: [0, -50], // 发射起点坐标
shape: ParticleEmitterShape.RECTANGLE, // 发射器形状
size: ['100%', 50] // 发射窗口大小
}

2.颜色代码骨架及注释

color: {
range: ['#ffffff', '#e0e8ff'] // 从这个范围里取色
}

3.透明度基本骨架

opacity: {
range: [0.0, 1.0],
updater: {
type: ParticleUpdater.CURVE,
config: [
{
from: 0.0, // 从透明
to: 1.0, // 到不透明
startMillis: 0,
endMillis: 1000,
curve: Curve.EaseIn
},
{
from: 1.0,
to: 0.0, // 到透明
startMillis: 6000,
endMillis: 8000,
curve: Curve.EaseOut
}
]
}
}

from/to = 从哪变到哪；startMillis/endMillis = 第几毫秒到第几毫秒完成。

4.加速度模版

acceleration: {
speed: {
range: [8, 18], // 速度范围 vp/秒
updater: {
type: ParticleUpdater.RANDOM, // 随机变化
config: [2, 8] // 每秒随机增减 2~8
}
},
angle: {
range: [80, 100] // 角度：0右 90下 180左 270上
}
}

关于粒子动画学习本人见解

骨架性比较强 有种套公式的感觉

学习成果

@Entry
@Component
struct SnowEffect {
build() {
Stack() {
Text()
.width('100%')
.height('100%')
.backgroundColor('#1a1a2e')

Particle({
particles: [
{
emitter: {
particle: {
type: ParticleType.POINT,
config: {
radius: 4
},
count: 200,
lifetime: 800000,
lifetimeRange: 2000
},
emitRate: 30,
position: [0, -50],
shape: ParticleEmitterShape.RECTANGLE,
size: ['100%', 50]
},
color: {
range: ['#ffffff', '#e0e8ff']
},
opacity: {
range: [0.0, 1.0],
updater: {
type: ParticleUpdater.CURVE,
config: [
{
from: 0.0,
to: 1.0,
startMillis: 0,
endMillis: 1000,
curve: Curve.EaseIn
},
{
from: 1.0,
to: 0.0,
startMillis: 6000,
endMillis: 8000,
curve: Curve.EaseOut
}
]
}
},
acceleration: {
speed: {
range: [8, 18],
updater: {
type: ParticleUpdater.RANDOM,
config: [2, 8]
}
},
angle: {
range: [80, 100]
}
}
}
]
})
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}