<small>
工具
- Sketch
- Principle
- PhotoShop
</small>
一、使用Sketch搭建畫面
完整界面效果
小技巧
<small>用圖形和圖片組合得到圓角圖片
- 選擇一個圖形袁稽，設置透明度為零评姨；
- 添加圖片旅薄，并置于頂層；
- 同時選中圖形和圖片北专，右鍵菜單點擊Group Section垄开；
- 選擇圖形右鍵Mask雏赦；
</small>
步驟圖
效果圖
<small> 畫面一定要層次分明恰响，明確各個部分的組合趣钱，一個清晰、明了的畫面結構胚宦，避免添加動效時畫面錯亂的問題首有。</small>*
二、使用Principle生成動效
導入文件
選擇手勢并實現(xiàn)頁面跳轉
編輯動效
<small>這里簡單介紹大概的操作區(qū)域枢劝，之后的教程可以參考原作者的詳細教程「視頻」</small>
完成后可以進行錄制操作保存為gif或視頻
錄制
三井联、使用PhotoShop將動畫嵌入圖片
簡單步驟
- 導入背景圖；
- 新建視頻組您旁，并導入視頻烙常；
- 微調(diào)位置；
- 保存為web適用的格式鹤盒，預設設置為gif军掂；
- 完成，保存html和圖片昨悼；
<small>「 時間軸調(diào)出方式：菜單欄[窗口-時間軸] 」</small>
下面為圖文
導入背景圖
新建視頻組
導入視頻
位置微調(diào)
保存
相關鏈接
<small>
