sketch制作Android动画,Sketch制作GIF动画--基础篇
前言
自从小tan上次出了一篇关于用Sketch制作自定义的APP下拉刷新GIF动画后,有不少小伙伴说期待出一篇关于Sketch制作GIF动画的详细教程。由于前段时间小tan都在忙于私人的家事,一直都没有及时的更新文章。正好趁着这举国同庆,作为技术宅的我们都在家里百无聊赖的时间里为大家走一波,献上大家期待已久的一篇文章。请叫我好先生!
使用sketch不仅能够制作静态的UI图,也能制作炫酷的GIF动图。这功劳还是要仰仗强大的AnimateMate插件。这边文章讲述了AnimateMate插件的安装和使用,并结合实践讲述了常用动画的基本使用,目的就是为了能让大家快速上手。下一遍文章将会讲述更高级的动画实现。
AnimateMate插件的安装
sketch有两种安装插件的方法,一种是传统的安装方式,即将插件解压后放到Plugins文件目录下,重启sketch即可。但是这种安装方法需要一个个的去找插件,非常麻烦。
我这里给大家介绍第二种安装插件的方法,就是先下载一个sketch插件管理工具sktch toolbox,通过sketch toolbox可以很方便的对插件进行安装和卸载,就像xcode下的Alcatraz一样。这里贴上sketch toolbox的下载地址。下载并安装后即可使用。打开sketch toolbox,然后搜索AimateMate插件,点击install即可安装,是不是很简单。
AnimateMate插件使用
1. 功能介绍
插件的功能还是比较简单明了的,AnimateMate总共提供了三种创建动画的方式,分别是Create Animateion(基本动画),Offect Animation(偏移动画),Random Animation(随机动画)。这里我们只讲解基本动画的使用,剩下两种会在接下来的进阶篇中进行讲解。
Create Animation:创建基本动画,包括Postion,Size,Transform,Opacity等属性的动画。
Edit Animation:编辑动画,对动画的属性值进行编辑。
Delete Animation:删除动画,如果动画不需要了,可以通过该功能进行删除。
Retrun Keyframe:返回某一刻的关键帧layer的状态,比如一个矩形第0个关键帧的横坐标为10,第10个关键帧的横坐标为100,那么我们返回这个矩形第0个关键帧的状态,此刻该矩形就会回到横坐标为10的位置。这样一个功能的好处就是方便查看各个关键帧的状态。
Reverse Keyframe:反转一个范围内关键帧的动画。比如从0到10这10个关键帧中一个矩形的动画是从横坐标为10变为100。那么反转这个矩形0到10关键帧之间的动画之后,该矩形的动画就变成了从横坐标为100变为10。一般这个功能比较少用到。
Export Animation:导出动画,选择对应的画板把动画导出。导出动画如果选择单个图层来导出,那么将只会导出这个图层的动画效果,其他图层的动画将被忽略,所以我们一般选择对应的画板来导出整个画板的动画。导出动画可以既可以导出png图片集合也可以导出gif动画。
2. 创建动画原理
AnimateMate创建基本动画只需要设置三个值,分别是Properties(属性值)、Keyframe Number(关键帧个数)、Easing Type(动画过度效果)。
Properties:属性的变化。AnimateMate支持Position(x和y)、Size(Width和Height)、Trasform(Rotate)、Opacity等属性的动画。
Keyframe Number:Keyframe Number即为关键帧的个数。关键帧的个数决定着动画执行的长短。
Easing Type:Easing Type即为动画过度效果。Easing是jQuery自定义动画用来设置动画过度效果的一个参数,在jQuery Easing Plugin中提供了像linearEase、easeOutExpo、easeOutBounce等30多种效果。AnimateMate插件同样也提供了所有的效果供大家使用,大家可以点击这里去看每一种easing的演示效果。
AnimateMate实践演示
1. Position动画
1.1 position动画最终实现的效果
position动画效果.gif
1.2 首先创建一个200x200的画板,命名为position,然后画一个大小为140x140的圆,命名为out_layer,填充颜色为#F6F6F6;Borders大小为6,颜色为#F4F7F8。再画一个大小为26x26大小的圆,命名为in_layer,填充颜色为白色。
创建画板和图层.png
1.3 选择in_layer,设置横坐标和纵坐标都为60,然后选择Plugins->AnimateMate->Create Animation
设置属性创建动画.png
1.4 创建第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
1.5 选择in_layer,设置横坐标为114,纵坐标都为60,然后选择Plugins->AnimateMate->Create Animation
设置属性创建动画.png
1.6 创建第10帧的动画(我总共设置了40帧动画,每一次转折为10个帧,如果你觉得10个帧运动太快,可以添加关键帧的个数)。keyframe Number为10,Easing Type保持默认值linearEase。
设置属性创建动画.png
1.7 选择in_layer,设置横坐标和纵坐标都为114,然后选择Plugins->AnimateMate->Create Animation
设置属性创建动画.png
1.8 创建第20帧的动画。keyframe Number为20,Easing Type保持默认值linearEase。
设置属性创建动画.png
1.9 选择in_layer,设置横坐标为60,纵坐标为114,然后选择Plugins->AnimateMate->Create Animation
设置属性创建动画.png
1.10 创建第30帧的动画。keyframe Number为30,Easing Type保持默认值linearEase。
设置属性创建动画.png
1.11 选择in_layer,设置横坐标和纵坐标都为60,然后选择Plugins->AnimateMate->Create Animation
设置属性创建动画.png
1.12 创建第40帧的动画。keyframe Number为40,Easing Type保持默认值linearEase。
设置属性创建动画.png
1.13 选中position画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
2. Size动画
2.1 size动画最终实现的效果
size动画的实现效果.gif
2.2 copy一份position画板,并命名为size。
copy画板并命名.png
2.3 选中in_layer,选择Plugins->AnimateMate->Delete Animation删除in_layer上的动画效果。
设置属性创建动画.png
2.4 选择in_layer,设置in_layer的大小为26x26。选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
2.5 创建第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
2.6 选择in_layer,设置in_layer的大小为75x75。选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
2.7 创建第30帧的动画。keyframe Number为30,Easing Type保持默认值linearEase。
设置属性创建动画.png
2.8 选中size画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
3. Transform动画
3.1 transform动画最终实现效果
transform动画实现效果.gif
3.2 copy一份position画板,命名为transform。
copy画板并命名.png
3.3 选中in_layer和out_layer建成组Group。
设置属性创建动画.png
3.4 选中Group,设置Rorate为0°,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
3.5 创建第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
3.6 选中Group,设置Rorate为359°,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
3.7 创建第40帧的动画。keyframe Number为40,Easing Type保持默认值linearEase。
设置属性创建动画.png
3.8 选中transform画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
4. Opacity动画
4.1 opacity动画最终实现效果
opacity动画实现效果.gif
4.2 copy一份size画板,命名为opacity。
copy画板并命名.png
4.3 选中in_layer,设置其Opacity为100%,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
4.4 创建第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
4.5 选中in_layer,设置其Opacity为20%,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
4.6 创建第30帧的动画。keyframe Number为30,Easing Type保持默认值linearEase。
设置属性创建动画.png
4.7 选中opacity画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
5. 组合动画
以上所有的动画中都是单个图层在进行动画,那么问题来了,当我们要设置多个图层一起进行动画该如何处理。
有两种情况,一种是多个图层之间做的动画是相同的;一种是多个图层之间做的动画是不同的。
当多个图层所做的动画是相同的时候,那么我们在设置动画的时候可以同时选中多个图层。当多个图层所做的动画不相同时,比如我要让两个圆一个做放大动画一个做缩小动画,那么我们就可以分别对这两个圆设置动画即可。
5.1 group动画的最终实现效果
group动画实现效果.gif
5.2 copy一份position画板,命名为group。将in_layer放到中间位置,设置其填充颜色为红色。
copy画板并命名.png
5.3 选择in_layer,设置其大小为26x26,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
5.4 创建in_layer的第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
5.5 选择in_layer,设置其大小为70x70,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
5.6 创建in_layer的第20帧的动画。keyframe Number为20,Easing Type保持默认值linearEase。
设置属性创建动画.png
5.7 选择out_layer,设置其大小为140x140,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
5.8 创建out_layer的第0帧的动画。keyframe Number为0,Easing Type保持默认值linearEase。
设置属性创建动画.png
5.9 选择out_layer,设置其大小为78x78,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
5.10 创建out_layer的第20帧的动画。keyframe Number为20,Easing Type保持默认值linearEase。
设置属性创建动画.png
5.11 选中group画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
6. Easing Type的使用
给我们的动画设置合理的easing type可以让我们的动画更富有新意,更接近真实。比如我们要制作一个弹簧的动画,那么单单只靠线性过度效果是无法实现的,借助easing type中的easeOutElastic过度效果则可以轻松实现。
6.1 easing动画的最终实现效果
easing动画实现效果.gif
6.2 copy一份position画板,命名为easing。将in_layer放到中间位置。
copy画板并命名.png
6.3 选择in_layer,设置其大小为26x26,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
6.4 创建第0帧的动画。keyframe Number为0,Easing Type设置为easeOutElastic。
设置属性创建动画.png
6.5 选择in_layer,设置其大小为75x75,选择Plugins->AnimateMate->Create Animation。
设置属性创建动画.png
6.6 创建第30帧的动画。keyframe Number为30,Easing Type这里可以随意设置。
设置属性创建动画.png
6.7 选中easing画板,选择Plugins->AnimateMate->Export Animation导出动画即可。
总结
本篇文章讲述了AnimateMate插件制作GIF动画的原理和功能介绍,并结合实际讲述了常见属性动画的实现和Easing Type的使用,目的是让大家能够快速上手。记住一点,动画的制作方法是很简单的,缺乏的还是想象力。不过AnimateMate制作动画也是有其局限性的,对于非线性动画AnimateMate还是无能为力的。下一篇文章将会讲述一些更高级的动画实现以及在使用AnimateMate制作动画过程中可能会遇到的一些问题。
这里我把文中所有的 sketch源文件 也提供出来,供大家参考。有什么问题可以在评论区贴出来,也可以微博私信我。祝大家节日愉快。
sketch制作Android动画,Sketch制作GIF动画--基础篇相关推荐
- 深入探索 Android 网络优化(二、网络优化基础篇)下
前言 成为一名优秀的Android开发,需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样~. 思维大图大纲 八.移动网络 用 2G 看 txt,用 3G 看 jpg,用 4G 看 avi ...
- 深入探索 Android 网络优化(二、网络优化基础篇)上
前言 成为一名优秀的Android开发,需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样~. 思维大图大纲 一.为什么要进行网络优化? 等待网络是我们 App 最大的性能瓶颈,再怎么优化 ...
- sketch生成android布局,Sketch新功能——智能分布 Smart Layout
从2019年九月到2020年二月的半年中,Sketch 经历了高密度的更新节奏,从58版本一路更新到了62版本,一些已有功能得到了优化和补充,也有一些全新的大功能,今天马克笔设计留学的Muzi老师来说 ...
- Android歌词制作,Android动感歌词制作器(支持翻译和音译歌词)
引言 之前PC版本已经实现了动感歌词.翻译歌词和音译歌词的制作,便想着找个时间,把PC版本的功能移植到Android手机平台上面.经过一周的努力,终于实现了,界面虽然简陋,但是大部分的功能已经实现.为 ...
- 【android免root脚本制作】总览Auto.js开发小结——基础篇
Auto.js是什么 Auto.js是一款写脚本,ui界面,运行脚本,制作简单安卓app的一体式软件.并且是全开源的免费APP,类似于按键精灵,而且本软件有全部按键精灵的功能,还有其他例如控件操作等, ...
- sketch生成android布局,Sketch一键生成自适应按钮及布局Compo
提取码:0czh 安装 下载并解压 Compo.zip 双击 Compo.sketchplugin 完成安装 使用 选中目标图层 执行 Plugins > Compo > Create C ...
- 计算机ppt制作教案,全国计算机一级B考试基础篇制作人徐守威PPT教案学习.pptx
文档介绍: 会计学 1 全国计算机一级B考试基础篇制作人徐守威 第一章 计算机基础知识 计 算 机 的 发 展 数据在计算机中的表示 计 算 机 硬 件 的 组 成 微 型 计 算 机 的 组 成 软 ...
- Android 使用dagger2进行依赖注入(基础篇)
0. 前言 Dagger2是首个使用生成代码实现完整依赖注入的框架,极大减少了使用者的编码负担, 本文主要介绍如何使用dagger2进行依赖注入.如果你不还不了解依赖注入,请看这一篇. 1. 简单的依 ...
- 深入探索 Android 网络优化(二、网络优化基础篇,android编程基础教程
3.BDP(Bandwidth-delay product,带宽延迟积) 接收窗口(rwnd)会随每次 ACK 一起发送,而 拥塞窗口(cwnd)则由发送端根据拥塞控制和预防算法动态调整. 无论发送端 ...
- Android从0开始写直播 基础篇 第4章
今天开始写服务器了 由于我根本不会写服务器 前两天搞什么tomcat累了半死 没搞出来. 最终决定使用mina框架 实在是太简单这个框架 直接上图 mina逻辑尽在此图 简单介绍下 mina就 ...
最新文章
- Android端IM应用中的@人功能实现:仿微博、QQ、微信,零入侵、高可扩展
- 如何从官方渠道下载Spring MVC所需jar包
- mysql 恢复root用户_mysql误删root用户恢复方案
- Python中抓网页的小陷阱
- Java Servlet API中的forward()方法和redirect()方法的区别
- 计算机专业小三门要求,最新小三门选科要求有啥变化?附对比表
- 如何在Linux中找到您的IP地址
- Kafka : WARN Error while fetching metadata with correlation id xx : {=UNKNOWN_TOPIC_OR_PARTITION}
- NSLayoutConstraint 使用详解 VFL使用介绍
- 《Java技术》第七次作业计科1501赵健宇
- 评测网站的十个指标!
- dirsearch命令组合参考
- cad户型图练习_我的房子我做主 篇一:技多不压身—业内人士手把手教你学会用CAD绘制户型图...
- 数据结构21:递归可视化(谢尔宾斯基三角形)
- 管理学之父德鲁克:目标管理的八要素和七步骤
- VBA实现批量图片格式转换
- linux命令整理(三)
- 兼容android 6.0以上获取设备编号等权限
- HashMap、ConcurrentHashMap原理分析
- 食堂自助点餐系统NABCD
热门文章
- Calendar时间操作类获取周一到周末
- NOIP2016模拟 星际争霸(二分)
- Android 模拟点击、滑动、返回
- 元宇宙基础设施五层级模型的关系作用与实力。
- 技校计算机专业自我鉴定,关于技校计算机专业的自我鉴定
- 新闻资讯博客小程序源码/支持微信、QQ、百度小程序/支持流量主
- Android 输入法框架流程整理
- 速达软件商品流通企业解决方案
- RK3588S Android12 旋转系统图像
- go: no such tool “compile“(一次糟糕体验)