回复
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
从 .animation() 开始
这个神秘的属性可以为几乎所有组件的属性变化创造连贯的动画。
在这个例子中，我们设置了一个 Text（(๑´ﻌ｀๑)）和一个按钮（ε=( o｀ω′)ノ）。在点击按钮之后会来回切换（Toggle）Text 组件的对齐方式（左对齐 ←→ 右对齐）。
没有 .animation() 的时候是这样的：
添加 .animation() ：
.animation({ duration: 1000, delay: 1000, curve: Curve.ExtremeDeceleration
关键参数说明：
{duration: 动画的持续时间，单位毫秒, delay: 动画开始的延迟，单位毫秒, curve: 动画曲线，决定了动画的表现效果（渐慢、先快后慢、几乎匀速、……）}
值得一提的是，在 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）
2 秒时长，无弹性
0.55 秒周期，一直弹
后话
感谢你读到这里！这是 Liny 正式撰写的第一篇 HarmonyOS NEXT 开发笔记，可能存在诸多不足，也可能掠过诸多内容。还望诸位开发者同学／同志海涵！如有疏漏，也请业内前辈大佬斧正。
鸿蒙生态的建设任重道远，(～o￣3￣)～ 在一起，就可以！
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
已于2024-10-10 19:50:52修改
赞
1
收藏
回复
相关推荐
