突突突～科学的小车坐稳扶好。

本期将掀开正弦表达式的头盖骨，释放它风骚的灵魂。

经过一周的计算，我...失手了

...

肢解了 sin

魂拎出来了，干干净净，3 个核心参数。

下面播放解剖现场。

一、原型

正弦函数 f(x)=A*sin(ωx+φ)

返回 [-1,1] 间周期平滑变化的数值。

常用于表现周期循环运动，也是衰减运动的基础。

核心参数：

频率 ω，1 秒内完成周期性变化的次数，ω=1/T

周期 T，完成一次往返的时间，T=2π/ω

运动幅度 A，垂直方向最大偏移量

相位 φ，调整运动偏移，相对少用

原始形态简单粗暴 f(x) = sin(x)

具体表现为每 2π 秒一个周期的往返运动，幅度 [-1,1]

二、解剖

下面利用 AE 内置的「写入」获取曲线来分析。

sin 在Javascript 中记为 Math.sin( )

1.周期

令 Y 轴偏移量 s 等于：Math.sin(time)

掐时间看，慢慢急。

6.28s！终于跑完一轮。

原来 AE 默认用的弧度，2π 刚好溜达一圈。

那么，这个时间看不顺眼，咋办？

不慌，技术性调整：

周期归一——精确掌控时间的基础

value = Math.sin(2*Math.PI*time)

瞬间爽快了。一样的套路，任你使唤。

2s

value = Math.sin((2/2)*Math.PI*time)

6.9s

value = Math.sin((2/6.9)*Math.PI*time)

…

依此类推。

Math.sin(2*Math.PI*time) 可以说是所有常用正弦运动的核心，小本本记起来。

2.张弛有度——频率

重置完周期，来看频率控制。

一秒两个来回不够刺激？那就翻倍：

召唤 f，写上

f = 2;

value = Math.sin(f*2*Math.PI*time)

f = 2 可以简单理解为运动密度的 2 倍压缩。想要更松试试 0.5。

【注】虚线：f = 1

3.可长可短——幅度

好了，我们要开始做「有深度」的动画啦。

召唤 a，令

a = 1.5;

value = a * Math.sin(2*2*Math.PI*time)

更 High 了，整体拉伸 1.5 倍

【注】虚线：a = 1

现在，调整频率 f 和 幅度 a，基础的精确掌控小菜一碟。

4.摩擦摩擦

魔鬼的步伐华丽登场。

接下来就用阻力 (decay) 为动画的真实感加分～～～

召唤阻力参数：

d = 2;

将 sin(value) 除与一个随时间 (time) 暴增的数值e^(d*time),几秒下来，动惮不得：

Math.sin(4*time*Math.PI)/Math.exp(d*time)

【注】虚线：d = 0;//小哥我一点压力都没有（弥天大雾）

TIPS: Math.exp(x);//输出 e^x(自然常数 e 约为 2.71828)

再进一步，加个平面阻挡瞧瞧。整体取绝对值：

s = Math.sin(4*time*Math.PI)/Math.exp(decay*time);

Math.abs(s)

duang～duang～duang～duang～duang～duang～啪唧（´･ω･`）∠）

使用 length(value) 取长度值，也是等效的。

复杂一点的拟合：

sin(a)*sin(b)

取出 sin(x) 前1/2周期，由于是一个从 0—>a—>0 的平滑数值，作为乘积可模拟渐强渐弱的运动过程。

典型场景：

· 自然地加速再到静止

· 声纹拟合

· 曲线运动轨迹拟合

实验发现，乘与正态曲线也是等效的，有兴趣可以自行尝试：

amp = 40;

s1 = Math.sin(4 * time * 2 * Math.PI);

p = -1*Math.pow(Math.E*(2 * time - 1),2);

s2 = Math.pow(Math.E,p);

s = amp * s1 * s2;

f ++

f = time，从 0 随时间等比递增)

(´◓ω◓`)，好看多于实用吧？具体场景有待挖掘

a - - 

幅度递减至 0

Interesting，和阻力的表现殊途同归。

唯一的区别是收尾的时候，世界瞬间安静

常用的阻力表达式，实际上还有肉眼不可见的小气息，只是无限趋近于零。

小结

文中从 sin 函数的原理出发，归一化之后，逐步提取了核心参数来控制各种周期动画。

它们分别是：频率 f、幅度 a、阻力 d

希望各位可以吃透原理，为所欲为。

三、应用实例

渐强渐弱

空间轨迹

波形

拟合