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))
If you have any questions, please contact me.