在原型设计中,我们也常常需要做一些简单的动画效果。如何才能够完成呢?本文将从三个方面进行梳理,希望对你有帮助。
工作中发现,在原型设计当中,偶尔需要做一些简单的动画效果。毕竟动态相较于静态,往往更加引人注目。就好比电商页面当中,抢红包的悬浮球常常也是动态展示。那么,今天就一起来做一个跳动的动画吧。
一、实现效果
二、实现原理
过程很简单:小球往上弹起,到达指定位置就下落,回到原点的时候继续弹起。
先给小球添加交互【载入时】,触发小球从位置一运动到位置二;
有了第一步的触发,我们就可以添加交互【移动时】,在这个事件下,一共有两个情形。情形一:小球在位置二,我们要让他返回位置一;情形二:小球在位置一的时候,我们就让他回到位置二。这样循环往复,就实现了小球的跳动效果。
三、实现步骤
1.小球原始坐标为(123,110),打开交互编辑器,添加事件【载入时】,添加动作【移动】,设置【动作】让小球从坐标(124,110)移动到(124,100);
2.小球到达坐标(124,100)后,添加事件【移动时】,从图示位置添加两个情形;
3.在情形一下,添加条件:如果y值=100(因为小球移动过程中只在y轴上发生移动,所以这里条件只需满足y的值为100);
4.[[This,y]]不用手动输入哦,直接点击fx,【插入变量或函数】就可以找到啦,如图:
5.条件设置好之后,就继续添加动作【移动】,把小球从位置二移动到位置一;
6.在情形二下,添加条件:如果y值=100。同理,添加动作【移动】,把小球从位置一移动到位置二;
7.记得所有移动的动作都要设置动画的时间哦,不然你的小球就会瞬间转移,看不到效果啦。
碎碎念:第一次发文,尽量把过程讲得详细一点点,欢迎大家一起交流呀,文中要是有什么错误还望各路大神指出~
本文由 @酱心萝卜 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于CC0协议
给作者打赏,鼓励TA抓紧创作!赞赏
3人打赏