恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
正弦表达式 Math.sin( )
0.0°
2018-03-27 原创文章 经验/观点 举报 7208 16 27 0

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

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


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

...

肢解了 sin


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

下面播放解剖现场。


一、原型

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

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

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

Image title

核心参数:

频率 ω,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)

Image title

掐时间看,慢慢急。

6.28s!终于跑完一轮。

Image title

Image title

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

那么,这个时间看不顺眼,咋办?

不慌,技术性调整:


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


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

Image title

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


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。

Image title

Image title

【注】虚线:f = 1


3.可长可短——幅度

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

召唤 a,令


a = 1.5;

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


更 High 了,整体拉伸 1.5 倍

Image title

Image title

【注】虚线:a = 1


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


4.摩擦摩擦

魔鬼的步伐华丽登场。

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


召唤阻力参数:

d = 2;


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


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

Image title

Image title

【注】虚线: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)

Image title

Image title

duang~duang~duang~duang~duang~duang~啪唧(´・ω・`)∠)

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


复杂一点的拟合:

sin(a)*sin(b)

Image title

Image title

取出 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 随时间等比递增)

Image title

Image title

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


a - - 

幅度递减至 0

Image title

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

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

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


小结

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

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

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


三、应用实例


渐强渐弱

Image title


空间轨迹

Image title




波形

Image title




拟合

Image title


更新:2018-03-27

收藏

16人已收藏

Jerlin

Live Curious

  • 38

    作品

  • 890

    粉丝

  • 177

    关注

  • circle wave 表达式动画
  • Starry Night 表达式动画实验
  • AE 表达式应用——萤火虫
  • 用户体验设计要素:移动应用中的动态微交互

    猜你喜欢

      2018-03-27 原创文章 经验/观点 举报 7208 16 27 0

      正弦表达式 Math.sin( )

      0.0°

      你确定要举报正弦表达式 Math.sin( )

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年03月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      27
      16
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录