iOS用Sketch制作APP下拉刷新的GIF动画
zouyang
8年前
<p><strong>前言</strong></p> <p>中秋三天就这么睡过去了~~这也不能怪我，听说深圳连飞机都吹跑了，吓死宝宝了。</p> <p>节假日一过总会留下后遗症，但是为了钱途，咱们是要挺直腰杆，接着敲代码。。</p> <h2><strong>一、用Sketch结合MJRefresh来自定义刷新动画</strong></h2> <p>今天分享一下iOS关于自定义下拉刷新动画的实现。我们平时看到很多APP的下拉刷新都是菊花在转的样式，因为很多APP都是用 MJRefresh 默认下拉刷新来实现的。但是，我们也会看到不少APP的下拉刷新很有特色，像 <strong>美团、分期乐、喵播</strong> 等等。</p> <p>他们的刷新样式同样是用 MJRefresh 来实现的， MJRefresh 有一个类 MJRefreshGifHeader ，自定义这个类可以将GIF图片集合制作成下拉刷新的动画。但是他的前提是得制作出一个GIF图片集合。</p> <p>这个软件不仅能够做静态的UI图，还能做动态的GIF图。前段时间我尝试用Sketch做一个GIF动画，无意间被我发现了一个很好用的插件 <a href="/misc/goto?guid=4959716303678936605" rel="nofollow,noindex">AnimateMate</a> ，这个插件使用javaScript写的，但这不影响我们的使用，关于这个插件的使用可以去这个网站看视频 AnimateMate视频教程 。我们用Sketch ToolBox安装完插件之后就可以使用了。</p> <p>这里我以分期乐的刷新动画为例进行讲解。这个是最后集成到项目中的效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a4758a5894bf7e7b223e174ee1d2fe2a.gif"></p> <p style="text-align:center">最终效果图.gif</p> <p>下面我就分两个大的步骤来给大家讲解一下如何让自己的APP有一个专属的下拉刷新动画（当然，如果动画比较复杂的用CoreAnimation会更简单，这里介绍的只是图片比较复杂，但动画比较简单的）:</p> <pre> <code class="language-objectivec">1. 用Sketch制作GIF动画 2. 用MJRefreshGifHeader来集成下拉刷新动画</code></pre> <h2><strong>二、用Sketch制作GIF动画</strong></h2> <p><strong>1. Sketch安装插件 <a href="/misc/goto?guid=4959716303678936605" rel="nofollow,noindex">AnimateMate</a></strong></p> <p><strong>2. 打开Sketch新建一个画板，命名为refresh，把你要画的图形放到画布上</strong></p> <p><img src="https://simg.open-open.com/show/57bd7c7a43eee5518ee7b2f768569fce.png"></p> <p style="text-align:center">新建画布.png</p> <p><strong>3. 接下来是按照图形把分期乐的猫头鹰画出来</strong></p> <p>先分析一下这个猫头鹰：</p> <pre> <code class="language-objectivec">1.先用钢笔工具把头和脸的形状画出来，再进行贝兹曲线变形 2.用铅笔工具把头发画出来 3.鼻子就是两个三角形 4.眼睛就是三个圆 5.翅膀就是一个矩形弄成圆角 6.身体就是三个圆 7.脚是三个矩形组成的</code></pre> <ol> <li style="text-align:center"> <p style="text-align:left">选择钢笔工具</p> <img src="https://simg.open-open.com/show/a28aff4b7044b9590bcbc14c73e22b36.png"> <p>选择贝兹曲线.png</p> </li> <li style="text-align:center"> <p style="text-align:left">用钢笔工具沿着头部描7个点，最后重合第1个点和第7个点重合</p> <img src="https://simg.open-open.com/show/fc80878e9f589acd67840cbda4b515d8.png"> <p>用钢笔工具描点.png</p> </li> <li style="text-align:center"> <p style="text-align:left">对线条进行编辑</p> <img src="https://simg.open-open.com/show/14905ad228b0178cac5c630fefff3ab6.png"> <p>选中线条点击Edit.png</p> </li> <li style="text-align:center"> <p style="text-align:left">分别选中第3个点和第6个点进行贝兹曲线变形</p> <img src="https://simg.open-open.com/show/b950da85b6234ec831713ef75f1dde62.png"> <p>头部进行贝兹曲线变形.png</p> </li> <li style="text-align:center"> <p style="text-align:left">接下来再用同样的方式把脸部的关键点描出来</p> <img src="https://simg.open-open.com/show/0a7038f7b57e6d7f5bb310ecc40a500c.png"> <p>用钢笔工具把脸部的关键点描出来.png</p> </li> <li style="text-align:center"> <p style="text-align:left">对脸部的第2、5、7这三个点进行贝兹曲线变形</p> <img src="https://simg.open-open.com/show/e3365cf270471e9904cf670cc03ef9e1.png"> <p>对脸部进行贝兹曲线变形.png</p> </li> <li style="text-align:center"> <p style="text-align:left">把眼睛和鼻子画出来</p> <img src="https://simg.open-open.com/show/e6e87fc136606870044f19627a052aaf.png"> <p>画鼻子和眼睛.png</p> </li> <li style="text-align:center"> <p style="text-align:left">用一个矩形把翅膀画出来</p> <img src="https://simg.open-open.com/show/958c408d5db498a6a74febb7f1302b4b.png"> <p>画翅膀.png</p> </li> <li style="text-align:center"> <p style="text-align:left">改变翅膀的圆角为100</p> <img src="https://simg.open-open.com/show/f2bdbbde1cb8b167e73406257a683403.png"> <p>修改翅膀圆角.png</p> </li> <li style="text-align:center"> <p style="text-align:left">用三个圆把身体画出来</p> <img src="https://simg.open-open.com/show/5f8cb32c74f2946b5c09e12322bb8788.png"> <p>.画身体png</p> </li> <li style="text-align:center"> <p style="text-align:left">用6个矩形把脚画出来</p> <img src="https://simg.open-open.com/show/0fc8b54fb1ba4218c2b4360f5c0d0e6a.png"> <p>画脚.png</p> </li> <li style="text-align:center"> <p style="text-align:left">接下来就是头发了，头发我们用铅笔工具直接画出来，铅笔工具不好把握，有一点偏差也没事</p> <img src="https://simg.open-open.com/show/493178c1db3afa2899730a64e07096a2.png"> <p>用铅笔画头发.png</p> <img src="https://simg.open-open.com/show/8ab1fd3c0d4c2b637a44e9c7a4b5183e.png"> <p>画出头发.png</p> </li> <li style="text-align:center"> <p style="text-align:left">最后把下面的图形移到旁边，用取色的方式对各个部位填充颜色，然后把边界都去掉（注意图层的位置，如果遮挡住了，通过移动图层来使其摆放在正确的图层）</p> <img src="https://simg.open-open.com/show/f0c64bab207e563269cb009d8b5bbbed.png"> <p>我下面图片移开.png</p> </li> <li style="text-align:center"> <p style="text-align:left">这样就把猫头鹰给画出来，接下来就是制作动画。</p> <img src="https://simg.open-open.com/show/0095d13092fca777a4e896040c66bca1.png"> <p>最终画出来的图形.png</p> </li> </ol> <p><strong>4. 用AnimationMate来制作动画</strong></p> <ol> <li style="text-align:center"> <p style="text-align:left">先把整个猫头鹰按照比例调整到宽为56的大小，画板调整到宽高都为60的大小</p> <img src="https://simg.open-open.com/show/960d8c8e81a48c33a950bfaea8499c79.png"> <p>修改猫头鹰大小和画布大小.png</p> </li> <li style="text-align:center"> <p style="text-align:left">将眼睛的黑色部分和大白色的圆建成一个组</p> <img src="https://simg.open-open.com/show/d7b80cd51c8046befb0df1a7b0efc625.png"> <p>合并成组.png</p> </li> <li style="text-align:center"> <p style="text-align:left">选中所有图层->plugins->AnimateMate->Creat Animateion</p> <img src="https://simg.open-open.com/show/d2f1758ce3b3c7ef20d68351ec3fd35b.png"> <p>创建动画1.png</p> </li> <li style="text-align:center"> <p style="text-align:left">创建第0帧的动画。KeyframeNumber为0，EasingType动画类型为线性动画linearEase。</p> <img src="https://simg.open-open.com/show/7925824a5a8d3e6b5d1d28646dc96ae1.png"> <p>创建动画2.png</p> </li> <li style="text-align:center"> <p style="text-align:left">改变eye_right和eye_left的Transform为369°</p> <img src="https://simg.open-open.com/show/0f18f4c5cfc81b5e648966ad5179f621.png"> <p>创建动画3.png</p> </li> <li style="text-align:center"> <p style="text-align:left">选中所有图层->plugins->AnimateMate->Creat Animateion，我们让这个猫头鹰的眼睛从0°旋转到359°分成20个关键帧。KeyframeNumber为20，EasyingType为线性动画linearEase，点击OK。</p> <img src="https://simg.open-open.com/show/3119c4c2a3fb539df34cbb78ef18d85a.png"> <p>创建动画4.png</p> </li> <li> <p>选中refresh图层->plugins->ExportAnimation导出动画</p> <img src="https://simg.open-open.com/show/5bf010276cc4316f1d4cc6ace3dc8dd5.png"> <p style="text-align:center">导出动画1.png</p> </li> <li style="text-align:center"> <p style="text-align:left">可以看到，这里我们可以导出GIF Aniamtion动图，也可以直接导出20个PNG图片。我们都勾选上，然后给导出的GIF图和PNG图填一个前缀名字fenqile_refresh。选择导出出到fenqile_refresh文件夹</p> <img src="https://simg.open-open.com/show/daa6a67cae2523fe75d5f04ecfc5fdfa.png"> <p>导出动画2.png</p> </li> <li style="text-align:center"> <p style="text-align:left">导出之后的结果为下图所示。有20张png图片和一个gif动图。</p> <img src="https://simg.open-open.com/show/1916ea911641f918e258e55518594724.png"> <p>最后导出的结果.png</p> </li> <li style="text-align:center"> <p style="text-align:left">用浏览器打开gif动图可以看到最终实现的效果。</p> <img src="https://simg.open-open.com/show/eff4290f4c211b942c41e76053b8504c.gif"> <p>最终实现的效果.gif</p> </li> </ol> <p>至此用Sketch就把这个GIF动图给制作完成了，接下来就是要用 MJRefresh 来自定义下拉刷新样式了</p> <h2><strong>三、用MJRefreshGifHeader来自定义下拉刷新样式</strong></h2> <ol> <li style="text-align:center"> <p style="text-align:left">将20个png图片导入到Xcode工程</p> <img src="https://simg.open-open.com/show/9598dcf0467d4275a4ca66394245aa84.png"> <p>将图片导入工程.png</p> </li> <li> <p>创建一个类 <strong> CustomRefreshGifHeader </strong> 继承自 <strong> MJRefreshGifHeader </strong> 。</p> </li> </ol> <pre> <code class="language-objectivec">import UIKit import MJRefresh class CustomRefreshGifHeader: MJRefreshGifHeader { // MARK: 重写父类方法 /** 在这里做一些初始化配置（比如添加子控件） */ override func prepare() { super.prepare() var images = [UIImage]() for i in 0...20 { if i < 10 { images.append(UIImage.init(named: "fenqile_refresh_0\\\\(i)")!) }else { images.append(UIImage.init(named: "fenqile_refresh_\\\\(i)")!) } } self.setImages(images, duration: 1.2, forState: MJRefreshState.Refreshing) self.setImages([UIImage.init(named: "fenqile_refresh_00")!], forState: MJRefreshState.Pulling) self.setImages([UIImage.init(named: "fenqile_refresh_00")!], forState: MJRefreshState.Idle) self.lastUpdatedTimeLabel.hidden = true self.stateLabel.font = UIFont.systemFontOfSize(10) self.setTitle("释放即可刷新", forState: MJRefreshState.Pulling) self.setTitle("下拉刷新", forState: MJRefreshState.Idle) self.setTitle("刷新中", forState: MJRefreshState.Refreshing) } /** 在这里设置子控件的位置和尺寸 */ override func placeSubviews() { super.placeSubviews() self.gifView.contentMode = UIViewContentMode.Center self.gifView.frame = CGRect.init(x: 0, y: 4, width: self.mj_w, height: 34) self.stateLabel.frame = CGRect.init(x: 0, y: 40, width: self.mj_w, height: 14) } }</code></pre> <p>3.给TableView添加下拉刷新</p> <pre> <code class="language-objectivec">override func viewDidLoad() { super.viewDidLoad() tableView = UITableView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT), style: UITableViewStyle.Grouped) view.addSubview(tableView) tableView.mj_header = MBRefreshGifHeader.init { // loading data } }</code></pre> <p>总结</p> <p>Sketch不仅能够制作UI图，也能制作GIF动画。我这里只是举了个例子，使用AnimationMate这个插件来做GIF动画真的很方便，但也有很多局限性。目前这款插件只能做一些线性的动画效果，像 Position 、 Size 、 Transform 、 Opacity 等。如果要做一些比较复杂的动画那用AnimationMate就不太合适了。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/45022427cf96</p> <p> </p>