印象里这篇的内容不是我自己写的,应该是从哪里摘录的,但我当时忘记备注作者了,若作者看到还望提醒一下
Figma 动效曲线参数与各平台应用参考
原始参数提取自 figma 客户端,各平台使用参考源自个人建议,水平有限如有不妥请海涵、望提醒
<table>
<tr>
<td>**Easing**</td>
<td>**Property**</td>
<td>**CSS**</td>
<td>**Android**</td>
<td>**iOS**</td>
</tr>
<tr>
<td>Linear</td>
<td>\[0, 0, 1, 1\]</td>
<td>linear</td>
<td>LinearInterpolator()</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: 1, y: 1), animations: \{\})</td>
</tr>
<tr>
<td>Ease in</td>
<td>\[0.42, 0, 1, 1\]</td>
<td>ease-in</td>
<td>PathInterpolatorCompat.create(0.42f, 0f, 1f, 1f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.42, y: 0), controlPoint2: CGPoint(x: 1, y: 1), animations: \{\})</td>
</tr>
<tr>
<td>Ease out</td>
<td>\[0, 0, 0.58, 1\]</td>
<td>ease-out</td>
<td>PathInterpolatorCompat.create(0f, 0f, 0.58f, 1f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: 0.58, y: 1), animations: \{\})</td>
</tr>
<tr>
<td>Ease in and out</td>
<td>\[0.42, 0, 0.58, 1\]</td>
<td>ease-in-out</td>
<td>PathInterpolatorCompat.create(0.42f, 0f, 0.58f, 1f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.42, y: 0), controlPoint2: CGPoint(x: 0.58, y: 1), animations: \{\})</td>
</tr>
<tr>
<td>Ease in back</td>
<td>\[0.3, -0.05, 0.7, -0.5\]</td>
<td>cubic-bezier(0.3, -0.05, 0.7, -0.5)</td>
<td>PathInterpolatorCompat.create(0.3f, -0.05f, 0.7f, -0.5f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.3, y: -0.05), controlPoint2: CGPoint(x: 0.7, y: -0.5), animations: \{\})</td>
</tr>
<tr>
<td>Ease out back</td>
<td>\[0.45, 1.45, 0.8, 1\]</td>
<td>cubic-bezier(0.45, 1.45, 0.8, 1)</td>
<td>PathInterpolatorCompat.create(0.45f, 1.45f, 0.8f, 1f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.45, y: 1.45), controlPoint2: CGPoint(x: 0.8, y: 1), animations: \{\})</td>
</tr>
<tr>
<td>Ease in and out back</td>
<td>\[0.7, -0.4, 0.4, 1.4\]</td>
<td>cubic-bezier(0.7, -0.4, 0.4, 1.4)</td>
<td>PathInterpolatorCompat.create(0.7f, -0.4f, 0.4f, 1.4f)</td>
<td>UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.7, y: -0.4), controlPoint2: CGPoint(x: 0.4, y: 1.4), animations: \{\})</td>
</tr>
<tr>
<td>Custom bezier (model)</td>
<td>\[x1, y1, x2, y2\]</td>
<td>[cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)(x1, x2, x3, x4)</td>
<td>[PathInterpolatorCompat](https://developer.android.com/reference/androidx/core/view/animation/PathInterpolatorCompat).create(x1, x2, x3, x4)</td>
<td>[UIViewPropertyAnimator](https://developer.apple.com/documentation/uikit/uiviewpropertyanimator)(duration: duration, controlPoint1: CGPoint(x: x1, y: y1), controlPoint2: CGPoint(x: x2, y: y2), animations: \{\})</td>
</tr>
<tr>
<td>Gentle</td>
<td>\[1, 100, 15, 0\]</td>
<td></td>
<td>SpringForce spring = new SpringForce(0).setDampingRatio(0.750).setStiffness(100); springAnimation.setSpring(spring).setStartVelocity(0);</td>
<td>UISpringTimingParameters(mass: 1, stiffness: 100, damping: 15, initialVelocity: CGVector(dx: 0.0, dy: 0.0))</td>
</tr>
<tr>
<td>Quick</td>
<td>\[1, 300, 20, 0\]</td>
<td></td>
<td>SpringForce spring = new SpringForce(0).setDampingRatio(0.577).setStiffness(300); springAnimation.setSpring(spring).setStartVelocity(0);</td>
<td>UISpringTimingParameters(mass: 1, stiffness: 300, damping: 20, initialVelocity: CGVector(dx: 0.0, dy: 0.0))</td>
</tr>
<tr>
<td>Bouncy</td>
<td>\[1, 600, 15, 0\]</td>
<td></td>
<td>SpringForce spring = new SpringForce(0).setDampingRatio(0.306).setStiffness(600); springAnimation.setSpring(spring).setStartVelocity(0);</td>
<td>UISpringTimingParameters(mass: 1, stiffness: 600, damping: 15, initialVelocity: CGVector(dx: 0.0, dy: 0.0))</td>
</tr>
<tr>
<td>Slow</td>
<td>\[1, 80, 20, 0\]</td>
<td></td>
<td>SpringForce spring = new SpringForce(0).setDampingRatio(1.118).setStiffness(80); springAnimation.setSpring(spring).setStartVelocity(0);</td>
<td>UISpringTimingParameters(mass: 1, stiffness: 80, damping: 20, initialVelocity: CGVector(dx: 0.0, dy: 0.0))</td>
</tr>
<tr>
<td>Custom spring (model)</td>
<td>\[mass, stiffness, damping, velocity\]</td>
<td></td>
<td>dampingRatio = damping / (2 \* Math.sqrt (mass \* stiffness));
SpringForce spring = new SpringForce(0).setDampingRatio(dampingRatio).setStiffness(stiffness); [springAnimation](https://developer.android.com/reference/androidx/dynamicanimation/animation/SpringAnimation).setSpring(spring).setStartVelocity(velocity);</td>
<td>[UISpringTimingParameters](https://developer.apple.com/documentation/uikit/uispringtimingparameters)(mass: mass, stiffness: stiffness, damping: damping, initialVelocity: CGVector(dx: velocity, dy: velocity))</td>
</tr>
</table>