Axure-涟漪动画效果

在原型设计中为了提高交互效果,并在很多实际应用中也需要用到一些原型动画效果使得整个产品看起来更加具有灵动性
今天在此制作了一个“水波涟漪”动画效果。具体步骤参照如下:

  1. 创建一个透明画布,在画布上分别创建四个圆,大小分别为100 * * 100,80 * 80,60 60,40 * 40。线宽最大,线段类型实线,边框颜色为渐变黄色。
  2. 分别设置这四个圆的不透明度从大到小分别为:40%,60%,80%,100%。
  3. 再来这个圆进行左右居中和上下居中.4。
    这里写图片描述
    从元件库中拖进一个动态面板,随便起一个名字,
    这里写图片描述
    5.我们需要对四个圈做动画,每个圈是两种状态:显示和隐藏,总是8次,所以我们需要来回复制8个动态面板的状态
    这里写图片描述
    .6 接下来就是交互动作,每次切换状态的时候依次从小圈到大圈显示在隐藏,为了让涟漪看起有层次感,即又快变慢,我们在设置时间间可以加上一些。即当动态面板的状态发生改变时:
    这里写图片描述
    这里写图片描述
    7.完成添加,最后将所有组件整合,最后起一个名字,
    这里写图片描述
    这里写图片描述
    8。最后将四个圆进行隐藏
    。9.最终在加一个交互用例
    这里写图片描述
    .10。OK,搞定,预览就可以看效果了。

猜你喜欢

转载自blog.csdn.net/liuhaiyan111/article/details/81272185
今日推荐