GIF 案例，从 .animation() 到 Curves.springMotion｜鸿蒙动效笔记 01
在《鸿蒙动效基础课》这个系列企划中，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 })
}
} 从 .animation() 开始
这个秘密的属性可以为险些全部组件的属性变化创造连贯的动画。
在这个例子中，我们设置了一个 Text（(๑´ﻌ｀๑)）和一个按钮（ε=( o｀ω′)ノ）。在点击按钮之后会来回切换（Toggle）Text 组件的对齐方式（左对齐 ←→ 右对齐）。
没有 .animation() 的时候是这样的：
https://i-blog.csdnimg.cn/direct/ba68e4b7b53c427992faccd943e9059b.gif
添加 .animation() ：
.animation({ duration: 1000, delay: 1000, curve: Curve.ExtremeDeceleration })
关键参数阐明：
{duration: 动画的持续时间，单位毫秒, delay: 动画开始的耽误，单位毫秒, curve: 动画曲线，决定了动画的表现效果（渐慢、先快后慢、险些匀速、……）}
https://i-blog.csdnimg.cn/direct/c6ba4a4e07664c5c819c25fe0316df22.gif
值得一提的是，在 curve: 这一栏中，除了输入 Curve 预置的几个（比较古板）的曲线以外，还可以通过 Curves 库构造其他自定义的曲线。这篇文章即将介绍的便是 Curves.curveMotion() 函数，可以用来创造一个具有弹性的动画。
正片：Curves.springMotion
利用前需要先导入：
import Curves from '@ohos.curves'; 关键参数阐明
在本例中写出来长这样：
.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）
https://i-blog.csdnimg.cn/direct/7f4e665cab604ef7bf25fcc1e4fc975c.gif
2 秒时长，无弹性
https://i-blog.csdnimg.cn/direct/8d1c2af1bf3743478fc8e9f4b8eeb8f7.gif
0.55 秒周期，一直弹
https://i-blog.csdnimg.cn/direct/ad16d1bad1c14ee9a82596de56bb8926.gif
后话
感谢你读到这里！这是 Liny 正式撰写的第一篇 HarmonyOS NEXT 开发笔记，可能存在诸多不敷，也可能掠过诸多内容。还望诸位开发者同学／同志海涵！如有疏漏，也请业内前辈大佬斧正。
鸿蒙生态的建设任重道远，(～o￣3￣)～ 在一起，就可以！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]