卡片弹跳动效 — 临摹练习「择天记」


<small>
工具

• Sketch
• Principle
• PhotoShop
  </small>

一、使用Sketch搭建画面

完整界面效果

小技巧

<small>用图形和图片组合得到圆角图片

1. 选择一个图形，设置透明度为零；
2. 添加图片，并置于顶层；
3. 同时选中图形和图片，右键菜单点击Group Section；
4. 选择图形右键Mask；
   </small>

步骤图 效果图

<small> 画面一定要层次分明，明确各个部分的组合，一个清晰、明了的画面结构，避免添加动效时画面错乱的问题。</small>*

二、使用Principle生成动效

导入文件 选择手势并实现页面跳转 编辑动效

<small>这里简单介绍大概的操作区域，之后的教程可以参考原作者的详细教程「视频」</small>

完成后可以进行录制操作保存为gif或视频

录制

三、使用PhotoShop将动画嵌入图片

简单步骤

1. 导入背景图；
2. 新建视频组，并导入视频；
3. 微调位置；
4. 保存为web适用的格式，预设设置为gif；
5. 完成，保存html和图片；

<small>「 时间轴调出方式：菜单栏[窗口-时间轴] 」</small>

下面为图文

导入背景图 新建视频组 导入视频 位置微调 保存

相关链接

<small>

• 千图网
• 我的临摹作品
  </small>