插值
-
假如我们知道起点(start) 、终点(end)和持续的时间(duration), 假如匀速的话,很容易计算某时你的位置
image.png
通过以上公式 可以算出速度(v= 距离 / 时间),然后知道当前时间(t1)就可以算出当前位置。
动画的插值算法类似这种
let pAniamation = CABasicAnimation(keyPath: "position")
pAniamation.fromValue = CGPoint(x: 248, y: 186)
pAniamation.toValue = CGPoint(x: 248, y: 300)
pAniamation.duration = 2.0
我们通过指定 fromValue toValue 和 duration 就可以通过默认的timing function 算出每个时间点的位置
d = e - s
v = (e -s ) / t
c = s + ((e - s )/t * t1)
c = s + (e - s) * (t1 / t)
set p = t1 / t (时间的比率)
c = s + (e - s) *p
这是在匀速下 我们知道p 就可以算出当前位置了。
定义两个概念
- 时间变化率 =当前时间 / 总时间 用符号 pt = t1 / t
- 距离变化率 =当前距离 / 总距离 用符号 pd = c / d
类比以上公式 距离变化率 * 总距离 加 起点 等于 当前距离
c = s + (e - s ) * pd
知道pd 就可以算出每时每刻的位置
我们不知道 pd。 pd是需要我们计算的, 但我们知道pt 知道当前时间
假设pd和pt之间的关系是 pd = f(pt)
则上述公式变为 c = s + (e - s ) * f(pt)
只要找出 pd 与 pt 的关系就好
幸运的是 这个关系你可以指定,不需要求解。
如果 pd = pt
image.png
如果 pd = pt * pt
image.png
不同的timingfunction 代表 pd 与 pt 的不同函数