ToB企服应用市场:ToB评测及商务社交产业平台

标题: GIF 案例，从 .animation() 到 Curves.springMotion｜鸿蒙动效笔记 01 [打印本页]
作者: 前进之路    时间: 2024-11-23 14:18
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4