HarmonyOS7 弹簧弹性动画：Curve.FastOutSlowIn 实现弹性回弹效果

文章目录前言效果展示实现原理Curve.FastOutSlowIn圆角变化的形变效果代码详解状态变量动画组件弹簧右移弹簧回弹弹性缩放全部恢复真正的弹簧动画常见问题写在最后前言弹簧动画是一种物理感很强的动画效果——方块移动到目标位置后不是直接停住而是过冲一点再回弹像被弹簧拉过去一样。ArkUI 没有内置的物理弹簧引擎但通过选择合适的 Curve 曲线可以模拟出很接近弹簧效果的弹性动画。今天来聊Curve.FastOutSlowIn这个曲线在弹簧动画中的应用。效果展示一个蓝色方块通过按钮控制“弹簧右移”向右移动 80vp带弹性效果“弹簧回弹”回到原位带弹性效果“弹性缩放”缩放 变形方形变圆形“恢复”所有属性回到初始状态实现原理Curve.FastOutSlowInCurve.FastOutSlowIn的特点是快速出去慢慢回来。用在位移动画上表现为方块快速到达目标位置附近然后在目标位置附近晃一下才停稳。Curve运动特点弹性感Linear匀速无EaseOut先快后慢弱| FastOutSlowIn | 极快启动 极慢停止 | 中等 || Rhythm | 有节奏的过冲回弹 | 强 |FastOutSlowIn的弹性感不如Rhythm那么明显但更克制适合用在不需要太夸张的弹性场景中。圆角变化的形变效果.borderRadius(this.isPressed?40:12)当isPressed为true时圆角变为 4080x80 方块的一半即正圆。配合缩放动画方块在缩小的同时变成圆形视觉上像是被挤压变形了。代码详解状态变量EntryComponentstruct SpringBounceBox{StatespringX:number0StatespringScale:number1StateisPressed:booleanfalse// ...}三个状态变量水平位移、缩放比例、是否按下控制形变。动画组件Column().width(80).height(80).backgroundColor(#4D96FF).borderRadius(this.isPressed?40:12).scale({x:this.springScale,y:this.springScale}).translate({x:this.springX}).animation({duration:800,curve:Curve.FastOutSlowIn})声明式动画配置 800ms 的FastOutSlowIn曲线。位移、缩放、圆角变化都走这个曲线。弹簧右移Button(弹簧右移).onClick((){animateTo({duration:800,curve:Curve.FastOutSlowIn},(){this.springX80})})方块向右移动 80vp。FastOutSlowIn让运动过程快速到达 80vp 附近然后慢慢滑入最终位置。弹簧回弹Button(弹簧回弹).onClick((){animateTo({duration:800,curve:Curve.FastOutSlowIn},(){this.springX0})})回到 X0 的位置。同样有弹性效果回到中心位置时有轻微的回弹感。弹性缩放Button(弹性缩放).onClick((){this.isPressed!this.isPressedanimateTo({duration:600,curve:Curve.FastOutSlowIn},(){this.springScalethis.isPressed?0.5:1.2})})切换方块的状态按下缩小到 0.5 倍 变圆弹起放大到 1.2 倍 变方isPressed的切换在animateTo外面执行瞬切但borderRadius的变化因为有.animation()所以也是平滑过渡的。全部恢复Button(恢复).onClick((){this.isPressedfalseanimateTo({duration:800,curve:Curve.FastOutSlowIn},(){this.springX0this.springScale1})})位移归零、缩放归一、形状变回方形。三个属性同时走弹性过渡。真正的弹簧动画如果想要更真实的弹簧效果有明显的过冲和多次振荡ArkUI 提供了springMotion响应式弹簧动画import{springMotion}fromkit.ArkUIanimateTo({duration:1000,curve:springMotion(0.35,0.8)// damping, stiffness},(){this.springX80})springMotion接收两个参数damping阻尼0~1越大振荡越少stiffness刚度0~1越大弹簧越硬阻尼刚度效果0.30.5多次振荡弹性很强0.50.7适度弹性自然0.80.9轻微弹性稳重常见问题QFastOutSlowIn和Rhythm怎么选FastOutSlowIn是快到慢停没有明显的过冲Rhythm有节奏性的过冲回弹。如果你的场景是方块弹过去停住用FastOutSlowIn如果是点赞弹性放大用Rhythm。Q弹簧动画能用.animation()声明式写法吗可以但springMotion只能在animateTo里使用。.animation()只支持预定义的 Curve 枚举值。弹性动画的时长建议 600~1000ms。太短弹簧来不及振荡太长用户感觉拖泥带水。800ms 是一个不错的平衡点。写在最后弹簧动画的核心是选对 Curve 曲线。FastOutSlowIn提供了轻度弹性Rhythm提供了节奏弹性springMotion提供了物理弹簧。根据场景选择合适的曲线就能做出从稳重到活泼的各种弹性效果。