axure商城

Axure動畫教程之“水波漣漪”

學會一個小案例,是為了豐富我們的交互原型設計,您可以在此基礎上變換出層出不窮的效果!

最近在做一個視頻通話的項目,剛好需要連線效果,就設計了個“水波漣漪”的效果,先看一下演示。

演示地址:水波漣漪演示

 

效果大家看到了,很簡單,就是一個漣漪的加載效果;顏色將就看吧,不好看你自己調下。

 

開始畫原型

一、畫漣漪的波紋圈

1、首先畫四個原型,背景透明,邊框調到最粗,顏色白色,名稱隨意起;由大到小尺寸分別是100*100、80*80、60*60、40*40

此處我起名為c1、c2、c3、c4

 

2、然后將4個圓形的透明度由大到小依次調整為40%、60%、80%、100%

 

3、將4個圓形水平垂直居中

 

 

二、創建執行動畫的動態面板

1、從默認組件庫里,拖一個動態面板進來,尺寸調小一點,便于操作,給動態面板也起個名稱隨意

 

2、我們有4個圈要做動畫,我計算了一下波形的由隱藏到顯示再到隱藏的循環,來回正好需要8次,因此復制創建總共8個動態面板的狀態

 

3、接下來添加交互動作,每次切換狀態的時候依次從小圈到大圈顯示再隱藏,為了讓漣漪看起來由快到慢,這里的顯示動畫也將時間逐步增長處理

動作列表

 

操作步驟

 

三、完成封裝,添加全局執行命令

1、將剛剛創建的所有原件,全選編組,并且起個名稱便于操作

 

2、將其中4個圓形,設置為隱藏

 

3、最后給剛剛編的組,添加一個加載命令

這里的循環間隔時間越長,動畫速度越慢

 

ok了,F5看下效果吧!

原件提供給大家:https://pan.baidu.com/s/1_PkdSfz9SDi5MoJzzWrG5g??? 密碼:3njc

最后廣告一下,我的 “移動端快速原型組件庫” 包含移動端產品常用的各類布局交互組件,歡迎大家前去商城購買支持!

鏈接地址:https://www.axureshop.com/a/590.html

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

AxureRP中通過JS代碼改變文本框類型

2018-7-19 10:44:04

案例教程

Axure教程:和我一起設計簡書App

2018-8-1 14:48:51

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo