Sketch49更新了link功能，但是中間幀補(bǔ)齊才是 Principle 相比于 Sketch新版功能的優(yōu)勢(shì)所在。

寫(xiě)在前面的話：

Sketch49 正式發(fā)布了，在新的版本中加入了期待已久的 ?Link(鏈接) ?功能，目前僅支持點(diǎn)擊跳轉(zhuǎn)指定頁(yè)面。關(guān)于這個(gè)功能，已經(jīng)有很多文章寫(xiě)了，我也不再贅述了。

有一部分人開(kāi)始唱衰 Flinto、Principle 等交互工具(包括我自己)，但是就目前來(lái)說(shuō)，Principle 等工具還是有不可替代的價(jià)值的：單頁(yè)面聯(lián)動(dòng)及多頁(yè)面動(dòng)效補(bǔ)幀。

今天主要講講單頁(yè)面聯(lián)動(dòng)和多頁(yè)面動(dòng)效原理。

首先上個(gè)圖，單頁(yè)面聯(lián)動(dòng)是怎樣的：

圖1：當(dāng)你操作頁(yè)面中的一個(gè)元素時(shí)，其他的元素會(huì)同時(shí)動(dòng)起來(lái)

單頁(yè)面聯(lián)動(dòng)效果原理：

監(jiān)聽(tīng)頁(yè)面中的 A元素的 X 軸或者 Y 軸位置的變化，如：當(dāng) A元素從 X 軸位置發(fā)生變化時(shí)，B元素的屬性同時(shí)發(fā)生變化。

如圖1：當(dāng)列表中列表左右滑動(dòng)時(shí)( X 軸位移)：

1、導(dǎo)航欄的小黃塊在同時(shí)左右滑動(dòng)( X 軸位移)

2、『產(chǎn)品經(jīng)理』、『UI設(shè)計(jì)師』不透明度在發(fā)生變化

PPS：想要執(zhí)行聯(lián)動(dòng)操作時(shí)，頁(yè)面中必須有一個(gè)元素設(shè)置了『Drag：拖拽』、『Page：頁(yè)面』、『Scroll：滾動(dòng)』任意效果。

聯(lián)動(dòng)效果時(shí)，可設(shè)置的屬性有以下幾種：

聯(lián)動(dòng)效果的種類(lèi)

案例：

當(dāng)頁(yè)面中『主動(dòng)塊』左右滑動(dòng)時(shí)，『聯(lián)動(dòng)塊』的半徑發(fā)生變化

第一步、準(zhǔn)備兩個(gè)塊

第二步、給主動(dòng)塊設(shè)置 X 軸(水平方向)的滾動(dòng)效果

設(shè)置滾動(dòng)效果后，主動(dòng)塊會(huì)自動(dòng)創(chuàng)建一個(gè)文件夾(原因看上一篇文章)。

當(dāng)你設(shè)置完主動(dòng)塊的滾動(dòng)效果后，頂部欄不發(fā)生變化，點(diǎn)擊頂部欄『聯(lián)動(dòng)』按鈕，會(huì)展開(kāi)一個(gè)界面。

設(shè)置滾動(dòng)前：啥也沒(méi)有

設(shè)置滾動(dòng)后：多出一個(gè)『主動(dòng)塊-組』X軸變化(水平位移)的監(jiān)聽(tīng)條

這個(gè)條的作用，你點(diǎn)擊『0』對(duì)應(yīng)的塊，左右拖動(dòng)，會(huì)發(fā)現(xiàn)，『主動(dòng)塊』也在左右滑動(dòng)。

注：動(dòng)的不是『主動(dòng)塊-組』，設(shè)定滾動(dòng)效果時(shí)，動(dòng)的都是文件夾內(nèi)部的元素。

正式的來(lái)了

第三步、設(shè)定聯(lián)動(dòng)塊的需要變化的屬性

1、點(diǎn)擊選中聯(lián)動(dòng)塊(一定要選中聯(lián)動(dòng)塊)

2、聯(lián)動(dòng)區(qū)域會(huì)出現(xiàn)一欄名為『聯(lián)動(dòng)塊』的條目，點(diǎn)擊 + 號(hào)

3、在彈出框中選擇『半徑』(我們要設(shè)置的是半徑變化)

設(shè)置完成后，頁(yè)面會(huì)多出一個(gè)『聯(lián)動(dòng)塊』的條目，并且有一個(gè)半徑的屬性。

這里的意思是：當(dāng)主動(dòng)塊的 X軸 位移為0時(shí)，聯(lián)動(dòng)塊的圓角(半徑)為 0。

第四步、關(guān)聯(lián)

聯(lián)動(dòng)區(qū)之前有個(gè)『0』的塊，點(diǎn)擊拖動(dòng)到 80 的位置，你會(huì)發(fā)現(xiàn)，畫(huà)面中的『主動(dòng)塊』向左移動(dòng)了 80。

這個(gè)操作代表，當(dāng)主動(dòng)塊向左移動(dòng) 80 的距離。

拖動(dòng)到80后，選中『聯(lián)動(dòng)塊』設(shè)置聯(lián)動(dòng)塊的圓角屬性值為：40；

整個(gè)操作帶來(lái)的結(jié)果就是：當(dāng)主動(dòng)塊向左移動(dòng) 80 時(shí)，聯(lián)動(dòng)塊的圓角會(huì)從 0 變成 40。

注：整個(gè)過(guò)程不是瞬間的，而是緩慢變化的，Principle會(huì)自動(dòng)幫你補(bǔ)齊從0到80的過(guò)程中，圓角是如何變化的。

如果要向右滑動(dòng)，設(shè)置負(fù)值即可。

總結(jié)：

當(dāng)頁(yè)面中的『主動(dòng)塊』發(fā)生 X軸或 Y軸的相對(duì)運(yùn)動(dòng)時(shí)(即X或Y的值發(fā)生變化)，其他元素(設(shè)置后變?yōu)椤郝?lián)動(dòng)塊』)可以監(jiān)聽(tīng)該變化，并且設(shè)定聯(lián)動(dòng)塊的屬性變化。

下一篇：多頁(yè)面跳轉(zhuǎn)動(dòng)效原理

簡(jiǎn)單先說(shuō)下多頁(yè)面原理：多頁(yè)面動(dòng)效產(chǎn)生的原因是，兩個(gè)頁(yè)面中都有一個(gè)文件名稱(chēng)叫做『小方塊』，但是他們有些屬性不同，比如：在 A頁(yè)面『小方塊』的X軸的位置是80，在B頁(yè)面『小方塊』的位置是100，那么當(dāng)頁(yè)面從A跳到B時(shí)，小方塊就會(huì)發(fā)生位移，且這個(gè)位移是平緩的，這是因?yàn)镻rinciple會(huì)幫你補(bǔ)齊中間漏掉的變化效果。

中間幀補(bǔ)齊是 Principle 相比于 Sketch新版功能的優(yōu)勢(shì)所在。

總結(jié)

以上是生活随笔為你收集整理的principle导出html5,让Principle成为生产力工具（二）单页面中的联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。