基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01 原创

awa_Liny
发布于 2024-10-10 19:50
浏览
0收藏

在《鸿蒙动效基础课》这个系列企划中,Liny 将会大致介绍关于原生鸿蒙动效(以及用户体验)的诸多开发要点、思路与细节。

作为第一节课,Liny 希望率先介绍 ArkUI 的 .animation() 属性和来自 @ohos.curves 的 Curves.springMotion() 方法,用于构造简单的弹簧动画(真的很 Q 弹)。

参考代码:index.ets

import Curves from '@ohos.curves';

@Entry
@Component
struct Index {
  @State message: string = '(๑´ﻌ`๑)';
  align_left: AlignRuleOption = {
    center: { anchor: '__container__', align: VerticalAlign.Center },
    left: { anchor: '__container__', align: HorizontalAlign.Start }
  };
  align_right: AlignRuleOption = {
    center: { anchor: '__container__', align: VerticalAlign.Center },
    right: { anchor: '__container__', align: HorizontalAlign.End }
  };
  @State align_rules: AlignRuleOption = this.align_left;
  @State went_to_the_right: boolean = false;
  @State response: number = 0.55;
  @State dampingFraction: number = 0.825;

  build() {
    Column() {
      RelativeContainer() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules(this.align_rules)
          .animation({ curve: Curves.springMotion(this.response, this.dampingFraction) })
      }
      .layoutWeight(1)

      Column({ space: 10 }) {
        Text(".animation({ curve: Curves.springMotion(" + this.response.toString() + ", " +
        this.dampingFraction.toString() + ") })")

        Row({ space: 10 }) {
          Text("response")
            .fontWeight(FontWeight.Bold)
          TextInput({ text: this.response.toString() })
            .selectAll(true)
            .onChange((a) => {
              if (a == "") {
                return;
              }
              let new_value = Number.parseFloat(a);
              this.response = new_value
            })
            .layoutWeight(1)
        }

        Text("当 dampingFraction = 0 的时候动画的时长")
          .margin({ bottom: 10 })

        Row({ space: 10 }) {
          Text("dampingFraction")
            .fontWeight(FontWeight.Bold)
          TextInput({ text: this.dampingFraction.toString() })
            .selectAll(true)
            .onChange((a) => {
              if (a == "") {
                return;
              }
              let new_value = Number.parseFloat(a);
              this.dampingFraction = new_value;
            })
            .layoutWeight(1)
        }

        Text("[0,1) 值越小越弹,0 时一直弹")
        Text("1 临界,也就是普通的渐缓")
        Text("(1, +∞) 值越大渐缓越明显")
          .margin({ bottom: 10 })

        Button("ε=( o`ω′)ノ")
          .type(ButtonType.Capsule)
          .width("100%")
          .onClick(() => {
            if (this.went_to_the_right) {
              this.align_rules = this.align_left;
            } else {
              this.align_rules = this.align_right;
            }
            this.went_to_the_right = !this.went_to_the_right;
          })
      }
      .alignItems(HorizontalAlign.Start)
      .width("100%")
    }
    .padding({ left: 20, right: 20
  • 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.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.

从 .animation() 开始

这个神秘的属性可以为几乎所有组件的属性变化创造连贯的动画。

在这个例子中,我们设置了一个 Text((๑´ﻌ`๑))和一个按钮(ε=( o`ω′)ノ)。在点击按钮之后会来回切换(Toggle)Text 组件的对齐方式(左对齐 ←→ 右对齐)。

没有 .animation() 的时候是这样的:

基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01-鸿蒙开发者社区

添加 .animation() :

.animation({ duration: 1000, delay: 1000, curve: Curve.ExtremeDeceleration
  • 1.

关键参数说明:

{duration: 动画的持续时间,单位毫秒, delay: 动画开始的延迟,单位毫秒, curve: 动画曲线,决定了动画的表现效果(渐慢、先快后慢、几乎匀速、……)} 

基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01-鸿蒙开发者社区

值得一提的是,在 curve: 这一栏中,除了输入 Curve 预置的几个

(比较古板)的曲线以外,还可以通过 Curves 库构造其他自定义的曲线。这篇文章即将介绍的便是 Curves.curveMotion() 函数,可以用来创造一个具有弹性的动画。

正片:Curves.springMotion

使用前需要先导入:

import Curves from '@ohos.curves';
  • 1.


关键参数说明

在本例中写出来长这样:

.animation({ curve: Curves.springMotion(this.response, this.dampingFraction) })
  • 1.


response

表示“弹簧自然振动周期,决定弹簧复位的速度”。

默认值:0.55

单位:秒

取值范围:(0, +∞)

说明:

设置小于等于0的值时,按默认值0.55处理。

等于当 dampingFraction = 1 的时候弹性动画的时长,也等于 dampingFraction = 0 时弹性动画弹一个来回的时长。

dampingFraction

是阻尼系数。

阻尼系数。

0 表示无阻尼,一直处于震荡状态;

大于 0 小于 1 的值为欠阻尼,运动过程中会超出目标值;

等于 1 为临界阻尼;

大于 1 为过阻尼,运动过程中逐渐趋于目标值。

默认值:0.825

单位:秒

取值范围:[0, +∞)

说明:

设置小于0的值时,按默认值0.825处理。

阻尼越大,到位的速度越快,即弹的过程越短;阻尼越小,动画就会更弹。

这段话的意思就是:

取值 [0,1) 时,值越小越弹,取 0 时动画会一直弹;
1 是临界,让动画变成普通(标准)的渐缓动画;
(1, +∞) 值越大,渐缓越明显,就像逆着风前进一样,不过最终都会抵达终点。

示例

默认参数(0.55,0.825)

基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01-鸿蒙开发者社区

2 秒时长,无弹性

基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01-鸿蒙开发者社区

0.55 秒周期,一直弹

基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01-鸿蒙开发者社区

后话

感谢你读到这里!这是 Liny 正式撰写的第一篇 HarmonyOS NEXT 开发笔记,可能存在诸多不足,也可能掠过诸多内容。还望诸位开发者同学/同志海涵!如有疏漏,也请业内前辈大佬斧正。

鸿蒙生态的建设任重道远,(~o ̄3 ̄)~ 在一起,就可以!


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2025-3-25 18:59:08修改
1
收藏
回复
举报
1


回复
    相关推荐
    开放原子开源基金会旗下开源项目——OpenHarmony官方账号
    觉得TA不错?点个关注精彩不错过
    286
    帖子
    0
    视频
    2954
    声望
    144
    粉丝
    社区精华内容