在原型设计中，我们也常常需要做一些简单的动画效果。如何才能够完成呢？本文将从三个方面进行梳理，希望对你有帮助。
工作中发现，在原型设计当中，偶尔需要做一些简单的动画效果。毕竟动态相较于静态，往往更加引人注目。就好比电商页面当中，抢红包的悬浮球常常也是动态展示。那么，今天就一起来做一个跳动的动画吧。
一、实现效果
二、实现原理
- 过程很简单：小球往上弹起，到达指定位置就下落，回到原点的时候继续弹起。
- 先给小球添加交互，触发小球从位置一运动到位置二；
- 有了第一步的触发，我们就可以添加交互，在这个事件下，一共有两个情形。情形一：小球在位置二，我们要让他返回位置一；情形二：小球在位置一的时候，我们就让他回到位置二。这样循环往复，就实现了小球的跳动效果。
三、实现步骤
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.记得所有移动的动作都要设置动画的时间哦，不然你的小球就会瞬间转移，看不到效果啦。
碎碎念：第一次发文，尽量把过程讲得详细一点点，欢迎大家一起交流呀，文中要是有什么错误还望各路大神指出~
最新文章
热门文章
猜你喜欢
