AAA教育

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

此demo源文件在文章末尾

Drivers含義：

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

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

我們來做一個(gè)簡(jiǎn)單的demo來看一下

第一步：我們新建一個(gè)矩形，設(shè)置成水平Drag屬性，同時(shí)打開頂部的Drivers；

如圖：

畫板大?。?00*300

第二步：選中我們建立的矩形 ，點(diǎn)擊Drivers窗口中那個(gè)藍(lán)色“ ”號(hào)，彈窗中選“Height”：

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

第三步：將坐標(biāo)軸從200的位置拖到0的位置，并點(diǎn)擊“增加關(guān)鍵幀”的那個(gè)“ ”號(hào)；

（拖動(dòng)坐標(biāo)軸時(shí)，矩形會(huì)隨之移動(dòng)的）

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

動(dòng)畫效果如下：

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

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