1. 畫好如下動(dòng)效草圖在Principle中，我們可以使用簡單幾步來實(shí)現(xiàn)彈性按鈕頁面跳轉(zhuǎn)。首先，按照我之前的教程【Principle教程】Principle入門如何快速畫好動(dòng)效草圖？的步驟，畫好以下動(dòng)

1. 畫好如下動(dòng)效草圖

在Principle中，我們可以使用簡單幾步來實(shí)現(xiàn)彈性按鈕頁面跳轉(zhuǎn)。首先，按照我之前的教程【Principle教程】Principle入門如何快速畫好動(dòng)效草圖？的步驟，畫好以下動(dòng)效草圖。

2. 添加按鈕跳轉(zhuǎn)交互

選中綠色按鈕，在右邊工具欄中找到一個(gè)閃電符號的按鈕，點(diǎn)擊它。然后選擇第一個(gè)選項(xiàng)"Tap"，這將在按鈕上生成一個(gè)箭頭。接下來，點(diǎn)擊第二個(gè)界面，表示點(diǎn)擊綠色按鈕時(shí)跳轉(zhuǎn)到第二個(gè)界面。

3. 添加返回按鈕跳轉(zhuǎn)

同樣地，點(diǎn)擊第二個(gè)界面中的紅色按鈕，然后再點(diǎn)擊第一個(gè)界面，表示點(diǎn)擊紅色按鈕時(shí)跳轉(zhuǎn)回第一個(gè)界面。

4. 查看動(dòng)畫元素

完成以上操作后，點(diǎn)擊上方的直線圖標(biāo)，將會顯示時(shí)間坐標(biāo)面板，其中記錄了所有動(dòng)畫元素。

5. 自動(dòng)生成過渡動(dòng)畫

在時(shí)間坐標(biāo)面板中，我們可以看到如果名稱保持一致，即使屬性發(fā)生變化，Principle也會自動(dòng)生成過渡動(dòng)畫。

6. 添加按鈕的彈性

為了讓按鈕具有彈性效果，找到按鈕所在圖層，在Center Y和Height屬性中選擇"spring"彈性曲線。

7. 預(yù)覽效果

將手機(jī)連接到電腦上，就可以預(yù)覽添加了彈性按鈕頁面跳轉(zhuǎn)的效果了。

結(jié)束語

如果你覺得這篇文章對你有幫助，請?jiān)谙路酵镀?、點(diǎn)贊、關(guān)注并留言。小編將定期分享更多有用的內(nèi)容。你的支持是我們繼續(xù)努力的動(dòng)力！謝謝！