Harmony Next 动画大全01-属性动画

属性动画概述

属性动画是HarmonyOS中最基础的动画类型，它通过改变组件的属性值来实现平滑的过渡效果。在HarmonyOS NEXT中，属性动画提供了丰富的接口和能力，让开发者可以轻松创建各种动态视觉效果。

属性动画的核心原理是：系统按照设定的动画参数（如时长、曲线等），驱动属性值从起始值逐渐变化到终点值，从而在UI上产生连续的视觉效果。

属性动画的特点

1. 平滑过渡：属性值不会瞬间变化，而是按照动画曲线平滑过渡
2. 支持多种属性：包括位置、大小、透明度、旋转角度等
3. 灵活控制：可以自定义动画时长、曲线、延迟等参数
4. 高性能：系统优化了动画的执行效率

属性动画的分类

1. 系统预置可动画属性

HarmonyOS提供了多种可直接动画的属性：

• 布局属性：width、height、margin、padding等
• 变换属性：translate（平移）、scale（缩放）、rotate（旋转）
• 外观属性：backgroundColor、opacity、borderRadius等
• 内容属性：fontSize、fontColor等

2. 自定义可动画属性

通过@AnimatableExtend装饰器，开发者可以自定义可动画属性，扩展动画能力。

属性动画的实现方式

1. 使用animateTo接口

animateTo({
  duration: 1000, // 动画时长(ms)
  curve: Curve.EaseInOut, // 动画曲线
  delay: 200, // 延迟时间(ms)
  iterations: 3, // 重复次数
  playMode: PlayMode.Normal // 播放模式
}, () => {
  // 在此闭包内修改属性值
  this.widthSize = 200;
  this.opacityValue = 0.5;
});

2. 使用animation修饰符

@Component
struct AnimationExample {
  @State widthSize: number = 100;
  
  build() {
    Column() {
      Text('Hello')
        .width(this.widthSize)
        .animation({
          duration: 500,
          curve: Curve.Spring
        })
    }
    .onClick(() => {
      this.widthSize = this.widthSize === 100 ? 200 : 100;
    })
  }
}

3. 使用keyframeAnimateTo接口

关键帧动画允许定义多个关键状态：

keyframeAnimateTo({
  duration: 2000,
  iterations: 2
}, [
  {
    duration: 800,
    event: () => { this.rotateValue = 90; }
  },
  {
    duration: 500,
    event: () => { this.rotateValue = 180; }
  },
  {
    duration: 700,
    event: () => { this.rotateValue = 0; }
  }
]);

动画曲线类型

HarmonyOS提供了多种动画曲线：

• Linear：线性变化
• Ease：缓入缓出
• EaseIn：缓入
• EaseOut：缓出
• EaseInOut：缓入缓出
• Spring：弹簧效果
• Friction：阻尼效果
• Custom：自定义贝塞尔曲线

最佳实践

1. 合理使用系统接口：优先使用系统提供的动画接口而非自定义实现
2. 优化动画性能：避免在动画过程中进行复杂计算
3. 控制动画时长：一般控制在200-500ms之间
4. 减少同时运行的动画数量：过多动画会影响性能
5. 使用合适的动画曲线：根据场景选择合适的曲线类型

示例代码

基础属性动画

@Entry
@Component
struct BasicAnimationExample {
  @State rotateValue: number = 0;
  @State scaleValue: number = 1;
  
  build() {
    Column() {
      Button('旋转+缩放')
        .width(150)
        .height(150)
        .rotate({ angle: this.rotateValue })
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .animation({
          duration: 1000,
          curve: Curve.Spring
        })
        .onClick(() => {
          this.rotateValue += 90;
          this.scaleValue = this.scaleValue === 1 ? 1.5 : 1;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

组合动画效果

@Entry
@Component
struct CombinedAnimationExample {
  @State translateX: number = 0;
  @State opacityValue: number = 1;
  @State color: Color = Color.Red;
  
  build() {
    Column() {
      Text('组合动画')
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor(this.color)
        .opacity(this.opacityValue)
        .translate({ x: this.translateX })
        .animation({
          duration: 800,
          curve: Curve.EaseOut
        })
        .onClick(() => {
          this.translateX = this.translateX === 0 ? 100 : 0;
          this.opacityValue = this.opacityValue === 1 ? 0.5 : 1;
          this.color = this.color === Color.Red ? Color.Blue : Color.Red;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

总结

属性动画是HarmonyOS动画系统的基础，掌握属性动画的使用方法对于开发流畅的UI交互至关重要。通过合理使用各种动画接口和参数，开发者可以创建出丰富多样的动态效果，提升用户体验。