ArkUI动效设计：构建灵动交互体验的技术实践

一、ArkUI动效设计原理

ArkUI通过声明式语法与动画API的结合，提供了三种核心动效实现方式：

1. 属性动画：通过修改组件的透明度、位移、缩放等属性实现基础动画
2. 转场动画：使用transition组件实现元素出现/消失的过渡效果
3. 物理动画：基于弹簧曲线等物理模型实现拟真运动效果

二、核心动画API解析

// 基础动画模板
import curves from '@ohos.curves'

animateTo({
    duration: 1000,        // 动画时长(ms)
    curve: curves.spring(1, 1, 0), // 弹簧曲线参数
    delay: 200,            // 延迟启动时间
    iterations: 3,         // 重复次数(-1表示无限)
    playMode: PlayMode.Reverse // 播放模式
}, () => {
    // 动画目标属性修改
    this.rotateAngle = 90
    this.opacityValue = 0.5
})

三、典型动效实现案例

3.1 卡片悬停效果

@State cardScale: number = 1

build() {
    Column() {
        CardComponent()
            .scale({ x: this.cardScale })
            .onHover((isHover) => {
                if (isHover) {
                    animateTo({
                        duration: 300,
                        curve: curves.fastOutSlowIn
                    }, () => {
                        this.cardScale = 1.05
                    })
                } else {
                    animateTo({
                        duration: 200,
                        curve: curves.linear
                    }, () => {
                        this.cardScale = 1
                    })
                }
            })
    }
}

3.2 列表项入场动画

// 在ForEach中为每个列表项添加独立动画
ForEach(this.itemList, (item: ListItem, index) => {
    ListItemComponent(item)
        .opacity(this.isInitialized ? 1 : 0)
        .translate({ y: this.isInitialized ? 0 : 50 })
        .animation({
            duration: 500,
            delay: index * 50,
            curve: curves.easeOut
        })
}, (item) => item.id)

四、性能优化实践

1. 动画分层原则：

// 避免在动画块中执行复杂逻辑
animateTo({
    // 动画参数
}, () => {
    // ✅ 仅修改UI属性
    this.targetWidth = 200
    
    // ❌ 避免数据操作
    // this.dataList.push(newItem)
})

2. 复合动画优化：

// 合并多个属性动画
animateTo({
    duration: 1000
}, () => {
    this.rotateAngle = 180
    this.bgColor = Color.Blue
    this.cardHeight = 300
})

3. 内存管理策略：

// 及时清理未完成的动画
private cancelController = new AnimatorResult()

startAnimation() {
    this.cancelController = animateTo({
        // 动画参数
    }, () => {
        // 动画逻辑
    })
}

stopAnimation() {
    this.cancelController.finish()
}

五、进阶动效设计

多手势协同动画：

@State offsetX: number = 0
@State offsetY: number = 0
private panX: number = 0
private panY: number = 0

build() {
    GestureGroup(GestureMode.Parallel) {
        PanGesture()
            .onActionUpdate((event: GestureEvent) => {
                this.panX = event.offsetX
                this.panY = event.offsetY
            })
            .onActionEnd(() => {
                animateTo({
                    duration: 500,
                    curve: curves.cubicBezier(0.2, 0.8, 0.2, 1)
                }, () => {
                    this.offsetX += this.panX
                    this.offsetY += this.panY
                    this.panX = 0
                    this.panY = 0
                })
            })
    }
    .onTouchCancel(() => {
        animateTo({
            duration: 300,
            curve: curves.fastOutSlowIn
        }, () => {
            this.panX = 0
            this.panY = 0
        })
    })
}