陌北默

第四节中我们讲到了模仿饿了么动画,其中有一个动作是鸭梨从“底部弹出—到达最高点—-下降至最低点”,这是一个典型的【抛物线运动】

那么如何实现我们这个动作呢?

源文件地址:https://pan.baidu.com/s/1Begv0Zy4gR5q0QuL3kW7Gg

 

其中重点是两个方向上的动作分解:

  • 一个是在横轴(x)上物体保持匀速运动,就是水平方向上的速度不变。
  • 一个是在纵轴(y)上物体匀减速(达到最高前)和匀加速(达到最高后)运动。

 

Principle中有一个控制速度的面板(如下图)

软件预设了很多动作,但是y轴上的匀加速和匀减速是没有的,需要大家自己调价。我们看到面板中有两组XY的值,看到的那条线是一条贝塞尔曲线,两个点的位置可以决定贝塞尔曲线的形态,类似PS的钢笔工具锚点的两个手柄。具体贝塞尔曲线什么概念可以百度到。

 

曲线的形态如何决定物体在该方向的速度呢?

答:曲线上各个点的【切线曲率】*【物体位移的距离】/【运动时间】就是该物体在整个运动时间内的速度变化。

在【物体位移的距离】/【运动时间】固定的情况下,就只有(曲线上各个点的【切线曲率】)来决定运动速度了。

(切线曲率概念请大家百度吧,这里就不讲数学了)

详细的理解可以参照我给出的源文件中曲率和速度去理解。

抛物线上升阶段的速度曲线

根据我们的理论,上图的起点位置的速度最大,终点的速度为0。

我想在速度的控制上大家应该很清楚了,后面如果有理论还是不清晰的,欢迎大家留言,我会不定期的更新Principle教程。

 

原文地址:紫豆子设计站(公众号)

作者:紫豆子

2018010415150492921111

转载请注明:学UI网 » Principle如何实现抛物线运动?

登录收藏
 
你可能喜欢的:
神奇移动 | 三分钟如何做一个交互动效神奇移动 | 三分钟如何做一个交互动效
如何通过缓动曲线形成自身动效风格?如何通过缓动曲线形成自身动效风格?
动效教程 | 5 分钟制作微信浮窗动效动效教程 | 5 分钟制作微信浮窗动效
如何用Principle制作:APP卡片翻页动效如何用Principle制作:APP卡片翻页动效
Principle教程进阶精讲- Drivers 的使用Principle教程进阶精讲- Drivers 的使用
Principle精讲——Scroll、Drag、Page区分Principle精讲——Scroll、Drag、Page区分
手把手教你安装Principle手把手教你安装Principle
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
Principle软件介绍及教程合集!Principle软件介绍及教程合集!
五天Principle从入门到精通05-复现淘票票高保真原型五天Principle从入门到精通05-复现淘票票高保真原型