Sketch49更新了link功能，但是中間幀補齊才是 Principle 相比于 Sketch新版功能的優勢所在。

寫在前面的話：

Sketch49 正式發布了，在新的版本中加入了期待已久的 ?Link(鏈接) ?功能，目前僅支持點擊跳轉指定頁面。關于這個功能，已經有很多文章寫了，我也不再贅述了。

有一部分人開始唱衰 Flinto、Principle 等交互工具(包括我自己)，但是就目前來說，Principle 等工具還是有不可替代的價值的：單頁面聯動及多頁面動效補幀。

今天主要講講單頁面聯動和多頁面動效原理。

首先上個圖，單頁面聯動是怎樣的：

圖1：當你操作頁面中的一個元素時，其他的元素會同時動起來

單頁面聯動效果原理：

監聽頁面中的 A元素的 X 軸或者 Y 軸位置的變化，如：當 A元素從 X 軸位置發生變化時，B元素的屬性同時發生變化。

如圖1：當列表中列表左右滑動時( X 軸位移)：

1、導航欄的小黃塊在同時左右滑動( X 軸位移)

2、『產品經理』、『UI設計師』不透明度在發生變化

PPS：想要執行聯動操作時，頁面中必須有一個元素設置了『Drag：拖拽』、『Page：頁面』、『Scroll：滾動』任意效果。

聯動效果時，可設置的屬性有以下幾種：

聯動效果的種類

案例：

當頁面中『主動塊』左右滑動時，『聯動塊』的半徑發生變化

第一步、準備兩個塊

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

設置滾動效果后，主動塊會自動創建一個文件夾(原因看上一篇文章)。

當你設置完主動塊的滾動效果后，頂部欄不發生變化，點擊頂部欄『聯動』按鈕，會展開一個界面。

設置滾動前：啥也沒有

設置滾動后：多出一個『主動塊-組』X軸變化(水平位移)的監聽條

這個條的作用，你點擊『0』對應的塊，左右拖動，會發現，『主動塊』也在左右滑動。

注：動的不是『主動塊-組』，設定滾動效果時，動的都是文件夾內部的元素。

正式的來了

第三步、設定聯動塊的需要變化的屬性

1、點擊選中聯動塊(一定要選中聯動塊)

2、聯動區域會出現一欄名為『聯動塊』的條目，點擊 + 號

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

設置完成后，頁面會多出一個『聯動塊』的條目，并且有一個半徑的屬性。

這里的意思是：當主動塊的 X軸 位移為0時，聯動塊的圓角(半徑)為 0。

第四步、關聯

聯動區之前有個『0』的塊，點擊拖動到 80 的位置，你會發現，畫面中的『主動塊』向左移動了 80。

這個操作代表，當主動塊向左移動 80 的距離。

拖動到80后，選中『聯動塊』設置聯動塊的圓角屬性值為：40；

整個操作帶來的結果就是：當主動塊向左移動 80 時，聯動塊的圓角會從 0 變成 40。

注：整個過程不是瞬間的，而是緩慢變化的，Principle會自動幫你補齊從0到80的過程中，圓角是如何變化的。

如果要向右滑動，設置負值即可。

總結：

當頁面中的『主動塊』發生 X軸或 Y軸的相對運動時(即X或Y的值發生變化)，其他元素(設置后變為『聯動塊』)可以監聽該變化，并且設定聯動塊的屬性變化。

下一篇：多頁面跳轉動效原理

簡單先說下多頁面原理：多頁面動效產生的原因是，兩個頁面中都有一個文件名稱叫做『小方塊』，但是他們有些屬性不同，比如：在 A頁面『小方塊』的X軸的位置是80，在B頁面『小方塊』的位置是100，那么當頁面從A跳到B時，小方塊就會發生位移，且這個位移是平緩的，這是因為Principle會幫你補齊中間漏掉的變化效果。

中間幀補齊是 Principle 相比于 Sketch新版功能的優勢所在。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。