用principle可以實(shí)現(xiàn)在手機(jī)端實(shí)時(shí)交互

2018-07-23 7086 2

本次教程是principle的晉階篇!

或者說是動(dòng)效demo的教程更貼切。因?yàn)樵趯?shí)現(xiàn)一款動(dòng)效的時(shí)候常常用到的不止一款軟件。今天的案例三合一,用到了AE PS等軟件配合principle去實(shí)現(xiàn)交互動(dòng)效。我認(rèn)為教程文章跟去網(wǎng)上自己看教程的區(qū)別在于??梢苑窒砦业慕?jīng)驗(yàn),思考,而不是單純教給大家一些軟件的操作,那樣做出來文章毫無疑義。希望特別是新手,能夠舉一反三做出自己的原創(chuàng)。但是在原創(chuàng)之前你需要大量瀏覽。需要理解動(dòng)效的規(guī)律。運(yùn)動(dòng)的曲線。你需要知道現(xiàn)在最好的動(dòng)效做成什么樣。在ui中的動(dòng)效,要盡量遵從ios跟Android的規(guī)范.


 

這個(gè)案例需要注意錄屏?xí)r的細(xì)節(jié),畫板調(diào)大點(diǎn),背景調(diào)成白色。錄制的時(shí)候不要錄制到卡片到邊緣,不然會(huì)出現(xiàn)穿幫。利用app實(shí)時(shí)預(yù)覽pp的動(dòng)效并且可以高保真交互。在進(jìn)入燈頁面的時(shí)候給燈圖片本身一個(gè)可以拖拽屬性(drag)跟調(diào)解頁面切換的屬性(page)一樣。

懸浮demo。

這個(gè)動(dòng)效利用drivers滑動(dòng)老司機(jī)切換頁面。切換的同時(shí)背景顏色有變化。如文章初篇中講到到頁面切換。

在配合tap點(diǎn)擊事件跳轉(zhuǎn)到其它頁面。頁面切換后手表有個(gè)旋轉(zhuǎn)跟位移的變化。神奇移動(dòng)。

這個(gè)動(dòng)效在進(jìn)入數(shù)據(jù)頁面的時(shí)候,圖表從右邊到左自動(dòng)進(jìn)場(chǎng)的一個(gè)demo,用到的是pp中的auto,頁面自動(dòng)跳轉(zhuǎn)。把圖表做的很長,這時(shí)候畫板就起到了一個(gè)蒙板的作用。就形成了這種障眼法。


 

很多同學(xué)說炫酷的動(dòng)效為什么在應(yīng)用中見不到。這不就是模擬的探探的交互嗎。利用dervers老司機(jī)切換頁面,切換的時(shí)候卡片旋轉(zhuǎn),位移。其它元素透明度跟位置的變化讓整個(gè)交互豐富與和諧。

tap點(diǎn)擊,圖片放大 位移。

這個(gè)跟上面類似探探的案例相同。只不過把老司機(jī)橫向移動(dòng)改成了縱向,那么給元素在drivers軸上添加效果的時(shí)候就不是x屬性了,應(yīng)該是y。還是那句話,舉一反三~帶著思考去創(chuàng)新吧。


 


53
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦