网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
1.使用springCurve
springCurve的接口为:
springCurve(velocity: number, mass: number, stiffness: number, damping: number)
- velocity:初速度是指物体在某一瞬间的速度,通常使用符号v0表示。
- mass:弹簧系统的质量(m)是指整个弹簧系统的质量,包括弹簧本身的质量以及弹簧上的附加物体的质量。
- stiffness:弹簧系统的刚度(k)是指弹簧的弹性系数,表示弹簧单位伸长或压缩时所产生的力的大小。刚度越大,弹簧的伸长或压缩程度对应的力就越大。
- damping:阻尼(d)是指弹簧系统中存在的阻碍物体振动的阻力。阻尼可以分为无阻尼、欠阻尼和过阻尼三种情况。无阻尼情况下,弹簧系统会进行自由振动;欠阻尼情况下,弹簧系统会有振幅逐渐减小的振动;过阻尼情况下,弹簧系统会有更加缓慢的振动。
案例:
import curves from ‘@ohos.curves’;
@Entry
@Component
struct SpringTest {
@State translateX: number = 0;
private jumpWithSpeed(speed: number) {
this.translateX = -1;
animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 1, 1.2) }, () => {
// 以指定初速度进行x方向的平移的弹簧动画
this.translateX = 0;
})
}
build() {
Column() {
Button(“button”)
.fontSize(14)
.width(100)
.height(50)
.margin(30)
.translate({ x: this.translateX })
Row({space:50}) {
Button(“jump 50”).fontSize(14)
.onClick(() => {
// 以初速度50的弹簧曲线进行平移
this.jumpWithSpeed(50);
})
Button(“jump 200”).fontSize(14)
.onClick(() => {
// 以初速度200的弹簧曲线进行平移
this.jumpWithSpeed(200);
})
}.margin(30)
}.height(‘100%’).width(‘100%’)
}
}
2.使用springMotion和responsiveSpringMotion
springMotion和responsiveSpringMotion的接口为:
springMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
- response:弹簧自然振动周期是指在没有外力作用下,弹簧系统从一个极限位置到达另一个极限位置所需要的时间。它可以用公式T =
2π√(m/k)来计算,其中T表示自然振动周期,m表示弹簧系统的质量,k表示弹簧的刚度。 - dampingFraction:阻尼系数是指弹簧系统中阻尼的大小,用符号β表示。它可以分为三种情况:无阻尼(β = 0),欠阻尼(β < 2√(mk)),过阻尼(β > 2√(mk))。阻尼系数越大,弹簧系统的振动越快地衰减。
- overlapDuration:弹性动画衔接时长是指在动画制作中,两个物体之间由于弹性作用而发生的变形或运动的过程中所需要的时间。这个时长可以通过调整动画的帧率和物体的弹性特性来控制,使得动画看起来更加流畅和自然。
import curves from ‘@ohos.curves’;
@Entry
@Component
struct SpringMotionTest {
@State positionX: number = 100;
@State positionY: number = 100;
diameter: number = 50;
build() {
Column() {
Row() {
Circle({ width: this.diameter, height: this.diameter })
.fill(Color.Blue)
.position({ x: this.positionX, y: this.positionY })
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Move) {
// 跟手过程,使用responsiveSpringMotion曲线
animateTo({ curve: curves.responsiveSpringMotion() }, () => {
// 减去半径,以使球的中心运动到手指位置
this.positionX = event.touches[0].screenX - this.diameter / 2;
this.positionY = event.touches[0].screenY - this.diameter / 2;
console.info(move, animateTo x:${this.positionX}, y:${this.positionY}
);
})
} else if (event.type === TouchType.Up) {
// 离手时,使用springMotion曲线
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
f00ff254613a03fab5e56a57acb)**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!