Figma 动效曲线参数与各平台应用参考
date
Dec 17, 2021
slug
figma-animation-and-other
status
Published
tags
animation
codesign
summary
Figma 动效曲线参数与各平台应用参考
type
Post
印象里这篇的内容不是我自己写的，应该是从哪里摘录的，但我当时忘记备注作者了，若作者看到还望提醒一下
Figma 动效曲线参数与各平台应用参考
原始参数提取自 figma 客户端，各平台使用参考源自个人建议，水平有限如有不妥请海涵、望提醒
Easing | Property | CSS | Android | iOS |
Linear | [0, 0, 1, 1] | linear | LinearInterpolator() | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: 1, y: 1), animations: {}) |
Ease in | [0.42, 0, 1, 1] | ease-in | PathInterpolatorCompat.create(0.42f, 0f, 1f, 1f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.42, y: 0), controlPoint2: CGPoint(x: 1, y: 1), animations: {}) |
Ease out | [0, 0, 0.58, 1] | ease-out | PathInterpolatorCompat.create(0f, 0f, 0.58f, 1f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: 0.58, y: 1), animations: {}) |
Ease in and out | [0.42, 0, 0.58, 1] | ease-in-out | PathInterpolatorCompat.create(0.42f, 0f, 0.58f, 1f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.42, y: 0), controlPoint2: CGPoint(x: 0.58, y: 1), animations: {}) |
Ease in back | [0.3, -0.05, 0.7, -0.5] | cubic-bezier(0.3, -0.05, 0.7, -0.5) | PathInterpolatorCompat.create(0.3f, -0.05f, 0.7f, -0.5f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.3, y: -0.05), controlPoint2: CGPoint(x: 0.7, y: -0.5), animations: {}) |
Ease out back | [0.45, 1.45, 0.8, 1] | cubic-bezier(0.45, 1.45, 0.8, 1) | PathInterpolatorCompat.create(0.45f, 1.45f, 0.8f, 1f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.45, y: 1.45), controlPoint2: CGPoint(x: 0.8, y: 1), animations: {}) |
Ease in and out back | [0.7, -0.4, 0.4, 1.4] | cubic-bezier(0.7, -0.4, 0.4, 1.4) | PathInterpolatorCompat.create(0.7f, -0.4f, 0.4f, 1.4f) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: 0.7, y: -0.4), controlPoint2: CGPoint(x: 0.4, y: 1.4), animations: {}) |
Custom bezier (model) | [x1, y1, x2, y2] | cubic-bezier(x1, x2, x3, x4) | PathInterpolatorCompat.create(x1, x2, x3, x4) | UIViewPropertyAnimator(duration: duration, controlPoint1: CGPoint(x: x1, y: y1), controlPoint2: CGPoint(x: x2, y: y2), animations: {}) |
Gentle | [1, 100, 15, 0] | ㅤ | SpringForce spring = new SpringForce(0).setDampingRatio(0.750).setStiffness(100); springAnimation.setSpring(spring).setStartVelocity(0); | UISpringTimingParameters(mass: 1, stiffness: 100, damping: 15, initialVelocity: CGVector(dx: 0.0, dy: 0.0)) |
Quick | [1, 300, 20, 0] | ㅤ | SpringForce spring = new SpringForce(0).setDampingRatio(0.577).setStiffness(300); springAnimation.setSpring(spring).setStartVelocity(0); | UISpringTimingParameters(mass: 1, stiffness: 300, damping: 20, initialVelocity: CGVector(dx: 0.0, dy: 0.0)) |
Bouncy | [1, 600, 15, 0] | ㅤ | SpringForce spring = new SpringForce(0).setDampingRatio(0.306).setStiffness(600); springAnimation.setSpring(spring).setStartVelocity(0); | UISpringTimingParameters(mass: 1, stiffness: 600, damping: 15, initialVelocity: CGVector(dx: 0.0, dy: 0.0)) |
Slow | [1, 80, 20, 0] | ㅤ | SpringForce spring = new SpringForce(0).setDampingRatio(1.118).setStiffness(80); springAnimation.setSpring(spring).setStartVelocity(0); | UISpringTimingParameters(mass: 1, stiffness: 80, damping: 20, initialVelocity: CGVector(dx: 0.0, dy: 0.0)) |
Custom spring (model) | [mass, stiffness, damping, velocity] | ㅤ | dampingRatio = damping / (2 * Math.sqrt (mass * stiffness));
SpringForce spring = new SpringForce(0).setDampingRatio(dampingRatio).setStiffness(stiffness); springAnimation.setSpring(spring).setStartVelocity(velocity); | UISpringTimingParameters(mass: mass, stiffness: stiffness, damping: damping, initialVelocity: CGVector(dx: velocity, dy: velocity)) |