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

![最终效果](http://upload-images.jianshu.io/upload_images/1764519-200ce3fe89f68251.gif?imageMogr2/auto-orient/strip %7CimageView2/2/w/500)


工具

  • Sketch
  • Principle
  • PhotoShop

一、使用Sketch搭建画面

卡片弹跳动效 — 临摹练习「择天记」_第1张图片
完整界面效果

小技巧

用图形和图片组合得到圆角图片

  1. 选择一个图形,设置透明度为零;
  2. 添加图片,并置于顶层;
  3. 同时选中图形和图片,右键菜单点击Group Section;
  4. 选择图形右键Mask;
卡片弹跳动效 — 临摹练习「择天记」_第2张图片
步骤图
卡片弹跳动效 — 临摹练习「择天记」_第3张图片
效果图

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

二、使用Principle生成动效

卡片弹跳动效 — 临摹练习「择天记」_第4张图片
导入文件
卡片弹跳动效 — 临摹练习「择天记」_第5张图片
选择手势并实现页面跳转
卡片弹跳动效 — 临摹练习「择天记」_第6张图片
编辑动效

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

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

卡片弹跳动效 — 临摹练习「择天记」_第7张图片
录制

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

简单步骤

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

「 时间轴调出方式:菜单栏[窗口-时间轴] 」

下面为图文

卡片弹跳动效 — 临摹练习「择天记」_第8张图片
导入背景图
卡片弹跳动效 — 临摹练习「择天记」_第9张图片
新建视频组
卡片弹跳动效 — 临摹练习「择天记」_第10张图片
导入视频
卡片弹跳动效 — 临摹练习「择天记」_第11张图片
位置微调
卡片弹跳动效 — 临摹练习「择天记」_第12张图片
保存

相关链接

  • 千图网
  • 我的临摹作品

你可能感兴趣的:(卡片弹跳动效 — 临摹练习「择天记」)