<small>
工具
- Sketch
- Principle
- PhotoShop
</small>
一、使用Sketch搭建画面
完整界面效果
小技巧
<small>用图形和图片组合得到圆角图片
- 选择一个图形，设置透明度为零；
- 添加图片，并置于顶层；
- 同时选中图形和图片，右键菜单点击Group Section；
- 选择图形右键Mask；
</small>
步骤图
效果图
<small> 画面一定要层次分明，明确各个部分的组合，一个清晰、明了的画面结构，避免添加动效时画面错乱的问题。</small>*
二、使用Principle生成动效
导入文件
选择手势并实现页面跳转
编辑动效
<small>这里简单介绍大概的操作区域，之后的教程可以参考原作者的详细教程「视频」</small>
完成后可以进行录制操作保存为gif或视频
录制
三、使用PhotoShop将动画嵌入图片
简单步骤
- 导入背景图；
- 新建视频组，并导入视频；
- 微调位置；
- 保存为web适用的格式，预设设置为gif；
- 完成，保存html和图片；
<small>「 时间轴调出方式：菜单栏[窗口-时间轴] 」</small>
下面为图文
导入背景图
新建视频组
导入视频
位置微调
保存
相关链接
<small>
