【鸿蒙学习笔记】使用动画

官方文档：使用动画

属性动画：通用属性发生改变时而产生的属性渐变效果

animation

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

animateTo

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

自定义属性动画 @AnimatableExtend

// 第一步：使用@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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

转场动画：是页面或组件的切换动画 , 显示/隐藏 切换时的动画

出现/消失转场：实现一个组件出现或者消失时的动画效果

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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

导航转场：一个界面消失，另外一个界面出现

需要消化

1. 导航转场的动画效果是系统定义的，开发者不能修改。
2. 导航转场推荐使用Navigation组件实现，可搭配NavRouter组件和NavDestination组件实现导
   航功能。
3. 使用场景
   

模态转场：新的界面覆盖在旧的界面上，旧的界面不消失的

1. 应用场景
   弹出对话框时对话框做出现和消失的动画

共享元素转场：对元素做的一种位置和大小匹配的过渡动画效果

1. 一镜到底动效，眼瞅着变化

动画曲线:属性值关于时间的变化函数

需要消化

其他未完待续