#星光不负 码向未来# 0 到 1 把“死”界面拍活：HarmonyOS 属性动画来帮忙 原创

// AnimateToDemo.ets
import { curves } from '@kit.ArkUI';

@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  @State rotateValue: number = 0;   // 旋转角度
  @State translateX: number = 0;    // X 偏移
  @State opacityValue: number = 1;  // 透明度

  build() {
    Row({ space: 40 }) {
      // 蓝方块：负责旋转
      Column()
        .rotate({ angle: this.rotateValue })
        .backgroundColor('#317AF7')
        .width(100).height(100).borderRadius(30)
        .onClick(() => {
          // 闭包内一口气改三个变量，系统会自动 diff 并给有差异的属性加动画
          this.getUIContext()?.animateTo(
            { curve: curves.springMotion() }, // 弹簧曲线，爽感来源
            () => {
              this.animate = !this.animate;
              this.rotateValue = this.animate ? 90 : 0;
              this.opacityValue   = this.animate ? 0.6 : 1;
              this.translateX     = this.animate ? 50 : 0;
            });
        });

      // 红方块：负责透明 + 偏移
      Column()
        .opacity(this.opacityValue)
        .translate({ x: this.translateX })
        .backgroundColor('#D94838')
        .width(100).height(100).borderRadius(30)
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

// AnimationDemo.ets
import { curves } from '@kit.ArkUI';

@Entry
@Component
struct AnimationDemo {
  @State animate: boolean = false;
  @State rotateValue: number = 0;
  @State translateX: number = 0;
  @State opacityValue: number = 1;

  build() {
    Row({ space: 40 }) {
      Column()
        .opacity(this.opacityValue)
        .rotate({ angle: this.rotateValue })
        .animation({ curve: curves.springMotion() }) // ← 挂在属性后
        .backgroundColor('#317AF7')
        .width(100).height(100).borderRadius(30)
        .onClick(() => {
          this.animate = !this.animate;
          this.rotateValue = this.animate ? 90 : 0;
          this.opacityValue = this.animate ? 0.6 : 1;
          this.translateX   = this.animate ? 50 : 0;
        });

      Column()
        .opacity(this.opacityValue)
        .translate({ x: this.translateX })
        .animation({ curve: curves.springMotion() }) // ← 挂在属性后
        .backgroundColor('#D94838')
        .width(100).height(100).borderRadius(30)
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

// AnimatablePropertyExample.ets
@AnimatableExtend(Text)
function animatableWidth(width: number) {
  .width(width);          // 每帧回调刷新宽度
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State textWidth: number = 80;

  build() {
    Column({ space: 20 }) {
      Text('AnimatableProperty')
        .animatableWidth(this.textWidth)           // ④ 使用自定义属性
        .animation({ duration: 2000, curve: Curve.Ease })
        .backgroundColor('#00D9CD').padding(10).borderRadius(8)

      Button('Play')
        .onClick(() => {
          this.textWidth = this.textWidth === 80 ? 160 : 80; // 宽度跳变→动画补间
        })
    }
    .width('100%').padding(10)
  }
}