旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI大牛教你-Drivers的使用
UI大牛教你-Drivers的使用
時間:2018-02-23來源:lb577.com點擊量:作者:吳冬冬
時間:2018-02-23點擊量:作者:吳冬冬

首先上個我做的demo,看看這個功能有多強大。這本文中也會教大家如何去制作一個簡單的demo,通過demo可以很快的了解到本文所要學(xué)習(xí)的內(nèi)容。此demo源文件在文章末尾。第一步:我們新建一個矩形,設(shè)置成水平Drag屬性,同時打開頂部的Drivers;

principle_07

 

此demo源文件在文章末尾

 

Drivers含義:

 

principle_02

看我做份封面圖,做過動畫的都知道,這是幾個“關(guān)鍵幀”的圖像,也是Principle的Drivers圖標(biāo),作者的意圖是這個功能是一個設(shè)置關(guān)鍵幀的功能。

我這里理解成“驅(qū)動器”,當(dāng)一個物件(組)是Drag、Scroll、Page時,此物件(組)的位移可以驅(qū)動物件的屬性改變,可以改變自身屬性,也可以改變其他物件屬性。屬性改變的程度和范圍,就是由“關(guān)鍵幀”決定的。

 

我們來做一個簡單的demo來看一下

第一步:我們新建一個矩形,設(shè)置成水平Drag屬性,同時打開頂部的Drivers;

如圖:

principle_01

畫板大?。?00*300

 

第二步:選中我們建立的矩形 ,點擊Drivers窗口中那個藍色“ ”號,彈窗中選“Height”:

principle_03

(選擇“Height”的意思是:圖中矩形“Layer”水平位置可以決定“Layer”(他自己)的“Height”屬性的值)

 

第三步:將坐標(biāo)軸從200的位置拖到0的位置,并點擊“增加關(guān)鍵幀”的那個“ ”號;

principle_04

(拖動坐標(biāo)軸時,矩形會隨之移動的)

 

第四步:將矩形“Layer”的高度“Height”值設(shè)置為200,并垂直居中;

principle_05

 

動畫效果如下:

principle_06

 

這樣我們就做到了前面所說的定義:“當(dāng)一個物件(組)是Drag、Scroll、Page時,此物件(組)的位移可以驅(qū)動物件的屬性改變,可以改變自身屬性,也可以改變其他物件屬性。”

相關(guān)文章--《AI產(chǎn)品經(jīng)理體系系統(tǒng)總結(jié)





 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2021/ lb577.com 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc