GIF 案例，从 .animation() 到 Curves.springMotion｜鸿蒙动效笔记 01 ...

 在《鸿蒙动效基础课》这个系列企划中，Liny 将会大致介绍关于原生鸿蒙动效（以及用户体验）的诸多开发要点、思路与细节。
作为第一节课，Liny 希望率先介绍 ArkUI 的 .animation() 属性和来自 @ohos.curves 的 Curves.springMotion() 方法，用于构造简朴的弹簧动画（真的很 Q 弹）。
参考代码：index.ets

1. import Curves from '@ohos.curves';
3. @Entry
4. @Component
5. struct Index {
6.   @State message: string = '(๑´ﻌ｀๑)';
7.   align_left: AlignRuleOption = {
8.     center: { anchor: '__container__', align: VerticalAlign.Center },
9.     left: { anchor: '__container__', align: HorizontalAlign.Start }
10.   };
11.   align_right: AlignRuleOption = {
12.     center: { anchor: '__container__', align: VerticalAlign.Center },
13.     right: { anchor: '__container__', align: HorizontalAlign.End }
14.   };
15.   @State align_rules: AlignRuleOption = this.align_left;
16.   @State went_to_the_right: boolean = false;
17.   @State response: number = 0.55;
18.   @State dampingFraction: number = 0.825;
20.   build() {
21.     Column() {
22.       RelativeContainer() {
23.         Text(this.message)
24.           .id('HelloWorld')
25.           .fontSize(50)
26.           .fontWeight(FontWeight.Bold)
27.           .alignRules(this.align_rules)
28.           .animation({ curve: Curves.springMotion(this.response, this.dampingFraction) })
30.       }
31.       .layoutWeight(1)
33.       Column({ space: 10 }) {
34.         Text(".animation({ curve: Curves.springMotion(" + this.response.toString() + ", " +
35.         this.dampingFraction.toString() + ") })")
37.         Row({ space: 10 }) {
38.           Text("response")
39.             .fontWeight(FontWeight.Bold)
40.           TextInput({ text: this.response.toString() })
41.             .selectAll(true)
42.             .onChange((a) => {
43.               if (a == "") {
44.                 return;
45.               }
46.               let new_value = Number.parseFloat(a);
47.               this.response = new_value
48.             })
49.             .layoutWeight(1)
50.         }
52.         Text("当 dampingFraction = 0 的时候动画的时长")
53.           .margin({ bottom: 10 })
55.         Row({ space: 10 }) {
56.           Text("dampingFraction")
57.             .fontWeight(FontWeight.Bold)
58.           TextInput({ text: this.dampingFraction.toString() })
59.             .selectAll(true)
60.             .onChange((a) => {
61.               if (a == "") {
62.                 return;
63.               }
64.               let new_value = Number.parseFloat(a);
65.               this.dampingFraction = new_value;
66.             })
67.             .layoutWeight(1)
68.         }
70.         Text("[0，1) 值越小越弹，0 时一直弹")
71.         Text("1 临界，也就是普通的渐缓")
72.         Text("(1, ＋∞) 值越大渐缓越明显")
73.           .margin({ bottom: 10 })
75.         Button("ε=( o｀ω′)ノ")
76.           .type(ButtonType.Capsule)
77.           .width("100%")
78.           .onClick(() => {
79.             if (this.went_to_the_right) {
80.               this.align_rules = this.align_left;
81.             } else {
82.               this.align_rules = this.align_right;
83.             }
84.             this.went_to_the_right = !this.went_to_the_right;
85.           })
86.       }
87.       .alignItems(HorizontalAlign.Start)
88.       .width("100%")
89.     }
90.     .padding({ left: 20, right: 20 })
91.   }
92. }

复制代码

从 .animation() 开始

这个秘密的属性可以为险些全部组件的属性变化创造连贯的动画。
在这个例子中，我们设置了一个 Text（(๑´ﻌ｀๑)）和一个按钮（ε=( o｀ω′)ノ）。在点击按钮之后会来回切换（Toggle）Text 组件的对齐方式（左对齐 ←→ 右对齐）。
没有 .animation() 的时候是这样的：

添加 .animation() ：

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

复制代码

关键参数阐明：

{duration: 动画的持续时间，单位毫秒, delay: 动画开始的耽误，单位毫秒, curve: 动画曲线，决定了动画的表现效果（渐慢、先快后慢、险些匀速、……）} 

值得一提的是，在 curve: 这一栏中，除了输入 Curve 预置的几个（比较古板）的曲线以外，还可以通过 Curves 库构造其他自定义的曲线。这篇文章即将介绍的便是 Curves.curveMotion() 函数，可以用来创造一个具有弹性的动画。
正片：Curves.springMotion

利用前需要先导入：

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

复制代码

关键参数阐明

在本例中写出来长这样：

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

复制代码

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）

2 秒时长，无弹性

0.55 秒周期，一直弹

后话

感谢你读到这里！这是 Liny 正式撰写的第一篇 HarmonyOS NEXT 开发笔记，可能存在诸多不敷，也可能掠过诸多内容。还望诸位开发者同学／同志海涵！如有疏漏，也请业内前辈大佬斧正。
鸿蒙生态的建设任重道远，(～o￣3￣)～ 在一起，就可以！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。