前端动画的开发一直是我所热衷探索与研究的内容，本文将描述什么是拟真的动画效果，目前所流行的 React 动画库，以及一些基于 framer-motion 动画库的 demos。
## 动画效果的真实体验 ### `timing-function` 的不足 说到拟真的的动画体验，本质是动画中的过渡动画带来的体感。通常情况开发一个前端动画，会使用 CSS transition 来实现，动画中的变量值（如 div 的位移或角度等）与时间的关系是三次贝塞尔曲线（cubic-bezier），即 `timing-function` 中常用的 `ease`, `ease-in`, `ease-out`, `ease-in-out` 等，或给三次贝塞尔曲线传入 4 个参数来控制曲线的形态。如下 
**但是，真实世界中，没有任何一个物体的运动是符合三次贝塞尔曲线的**。因为物体的运动受到自身的质量、阻力、弹力等因素有关，这也是为什么会诞生物理引擎。接下来一步一步讲讲弹簧阻尼系统中的运动。 ### 弹簧-阻尼系统中的运动 在很多 native 动画中，特别是 iOS 的系统动画中，可以感受到“拉动越小，回弹越小；拉动越大，回弹越大”的感受，这便是弹簧动画的效果  首先来看弹簧的受力情况，根据胡克定律得到如下公式： $$ F_s=-kX $$ $k$ 为弹簧劲度系数 考虑到阻力，$c$ 为摩擦系数，$v$ 为速度 $$ F_d=-cv $$ 弹簧上的合力则为： $$ F=F_s+F_d=-kX-cv $$ 再根据牛顿第二定律 $$ F=ma $$ 联立两个方程 $$ \begin{cases} F=-kX-cv \\ F=ma \end{cases} $$ 为了简单起见，我们假设质量值为 1（即 $m=1$）,这样就可以得到： $$ a=-kX-cv $$ $X$代表物体从其平衡位置开始移动。这就意味着，如果我们想从 $x=x$ 到 $x=1$，那么我们要每次移动 $x-1$ 才能到达那个指定位置（微分的思想）。 $$ X=x-1 $$ 得到运动方程 $$ a=-k(x-1)-cv $$ 接下来使用微分公式来计算出物体运动的位置和时间的关系 $$ x=f(t) $$ 根据位置计算速度 $$ v=\frac{dx}{dt}=f'(t) $$ 计算加速度 $$ a=\frac{dv}{dt}=f''(t) $$ 结合之前得出的运动方程 $$ \begin{cases} a=-k(x-1)-cv \\ \\ a=\dfrac{dv}{dt}=f''(t) \\ \\ v=\dfrac{dx}{dt}=f'(t) \\ \\ x=f(t) \end{cases} $$ 得出 $$ f''(t)=-k(f(t)-1)-cf'(t) $$ 接下来就是解这个微分方程了。 考虑一下边界条件，我们让块移动之前，块的位置假设在 $x=0$，也就是说块的初始位置是 $x=0$，初始时间是 $t=0$ $$ f(0)=0 $$ $$ f'(0)=0 $$ 再假设劲度系数 $k=180$，摩擦系数为 $c=12$ $$ \begin{cases} f(0) = 0 \\ f'(0) = 0 \\ f''(t) = -180(f(t) - 1) - 12f'(t) \end{cases} $$ 解方程的具体过程这里就不细讲了，而且有一个强大的搜索引擎 [WolframAlpha](https://www.wolframalpha.com/input/?i=f%280%29+%3D+0%3B+f%27%280%29+%3D+0%3B+f%27%27%28t%29+%3D+-180%28f%28t%29+-+1%29+-+12f%27%28t%29) 可以用来解各种微积分方程，将方程用以下的方式输入1
| f(0) = 0; f'(0) = 0; f''(t) = -180(f(t) - 1) - 12f'(t)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| import React from 'react'
import { motion } from 'framer-motion'
import './index.css'
function index() {
return (
<>
<div className="wrap">
<div className="title">零阻尼</div>
<motion.div
className="ball"
animate={{
x: 150,
transition: {
type: 'spring',
damping: 0,
},
}}
/>
</div>
<div className="wrap">
<div className="title">欠阻尼</div>
<motion.div
className="ball"
animate={{
x: 150,
transition: {
type: 'spring',
damping: 2,
},
}}
/>
</div>
<div className="wrap">
<div className="title">过阻尼</div>
<motion.div
className="ball"
animate={{
x: 150,
transition: {
type: 'spring',
damping: 100,
},
}}
/>
</div>
<div className="wrap">
<div className="title">临界阻尼</div>
<motion.div
className="ball"
animate={{
x: 150,
transition: {
type: 'spring',
damping: 17,
},
}}
/>
</div>
<br />
<br />
<br />
<button
type="button"
onClick={() => {
window.location.reload()
}}
>
reload this page
</button>
</>
)
}
export default index
|
1
2
3
4
5
6
7
| animate={{
x: 150,
transition: {
type: 'spring',
damping: 0,
},
}}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
function index() {
const [toggleShow, setToggleShow] = useState(true)
return (
<>
<br />
<br />
<button
onClick={() => {
setToggleShow((pre) => !pre)
}}
type="button"
>
toggleShow
</button>
<br />
<br />
<AnimatePresence>
{toggleShow && (
<motion.div
style={{
backgroundColor: '#ddd',
width: '50vw',
height: '80vw',
}}
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1, x: 100 }}
exit={{ opacity: 0, x: 0 }}
>
fadeInOut animation
</motion.div>
)}
</AnimatePresence>
</>
)
}
export default index
|
1
| exit={{ opacity: 0, x: 0 }}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| import React from 'react'
import { motion } from 'framer-motion'
import './index.css'
function index() {
return (
<div className="container">
<div
className="box"
style={{
width: '300px',
height: '500px',
}}
>
<motion.div
style={{ width: '44px', height: '44px' }}
className="ball"
drag
dragConstraints={{
top: -228,
bottom: 228,
left: -128,
right: 128,
}}
dragElastic={0.2}
/>
</div>
</div>
)
}
export default index
|
1
| transform: translate3d(128px, 228px, 0px);
|
前端弹性动画与 framer-motion 动画库初探
津公网安备 12011002021027号