← Back to blog

Figma 动效曲线参数与各平台应用参考

Figma 动效曲线参数与各平台应用参考

Figma 动效曲线参数与各平台应用参考

印象里这篇的内容不是我自己写的,应该是从哪里摘录的,但我当时忘记备注作者了,若作者看到还望提醒一下

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>