iOS用Sketch制作APP下拉刷新的GIF动画

前言

中秋三天就这么睡过去了~~这也不能怪我,听说深圳连飞机都吹跑了,吓死宝宝了。
节假日一过总会留下后遗症,但是为了钱途,咱们是要挺直腰杆,接着敲代码。。

一、用Sketch结合MJRefresh来自定义刷新动画

今天分享一下iOS关于自定义下拉刷新动画的实现。我们平时看到很多APP的下拉刷新都是菊花在转的样式,因为很多APP都是用MJRefresh默认下拉刷新来实现的。但是,我们也会看到不少APP的下拉刷新很有特色,像美团、分期乐、喵播等等。

他们的刷新样式同样是用MJRefresh来实现的,MJRefresh有一个类MJRefreshGifHeader,自定义这个类可以将GIF图片集合制作成下拉刷新的动画。但是他的前提是得制作出一个GIF图片集合。

在我的上一篇文章iOS工程师Mac上的必备软件中我介绍了一款UI软件Sketch。这个软件相信大多数人都接触过(如果你还不会用,那么可以看我的上一篇文章,里面有教程链接)。这个软件不仅能够做静态的UI图,还能做动态的GIF图。前段时间我尝试用Sketch做一个GIF动画,无意间被我发现了一个很好用的插件AnimateMate,这个插件使用javaScript写的,但这不影响我们的使用,关于这个插件的使用可以去这个网站看视频AnimateMate视频教程。我们用Sketch ToolBox安装完插件之后就可以使用了。

这里我以分期乐的刷新动画为例进行讲解。这个是最后集成到项目中的效果:

最终效果图.gif

下面我就分两个大的步骤来给大家讲解一下如何让自己的APP有一个专属的下拉刷新动画 :

1. 用Sketch制作GIF动画
2. 用MJRefreshGifHeader来集成下拉刷新动画

二、用Sketch制作GIF动画

1. Sketch安装插件AnimateMate
2. 打开Sketch新建一个画板,命名为refresh,把你要画的图形放到画布上
新建画布.png
3. 接下来是按照图形把分期乐的猫头鹰画出来

先分析一下这个猫头鹰:

1.先用钢笔工具把头和脸的形状画出来,再进行贝兹曲线变形
2.用铅笔工具把头发画出来
3.鼻子就是两个三角形
4.眼睛就是三个圆
5.翅膀就是一个矩形弄成圆角
6.身体就是三个圆
7.脚是三个矩形组成的
  1. 选择钢笔工具


    选择贝兹曲线.png
  2. 用钢笔工具沿着头部描7个点,最后重合第1个点和第7个点重合


    用钢笔工具描点.png
  3. 对线条进行编辑


    选中线条点击Edit.png
  4. 分别选中第3个点和第6个点进行贝兹曲线变形


    头部进行贝兹曲线变形.png
  5. 接下来再用同样的方式把脸部的关键点描出来


    用钢笔工具把脸部的关键点描出来.png
  6. 对脸部的第2、5、7这三个点进行贝兹曲线变形


    对脸部进行贝兹曲线变形.png
  7. 把眼睛和鼻子画出来


    画鼻子和眼睛.png
  8. 用一个矩形把翅膀画出来


    画翅膀.png
  9. 改变翅膀的圆角为100


    修改翅膀圆角.png
  10. 用三个圆把身体画出来


    .画身体png
  11. 用6个矩形把脚画出来


    画脚.png
  12. 接下来就是头发了,头发我们用铅笔工具直接画出来,铅笔工具不好把握,有一点偏差也没事


    用铅笔画头发.png

    画出头发.png
  13. 最后把下面的图形移到旁边,用取色的方式对各个部位填充颜色,然后把边界都去掉(注意图层的位置,如果遮挡住了,通过移动图层来使其摆放在正确的图层)


    我下面图片移开.png
  14. 这样就把猫头鹰给画出来,接下来就是制作动画。


    最终画出来的图形.png
4. 用AnimationMate来制作动画
  1. 先把整个猫头鹰按照比例调整到宽为56的大小,画板调整到宽高都为60的大小


    修改猫头鹰大小和画布大小.png
  2. 将眼睛的黑色部分和大白色的圆建成一个组


    合并成组.png
  3. 选中所有图层->plugins->AnimateMate->Creat Animateion


    创建动画1.png
  4. 创建第0帧的动画。KeyframeNumber为0,EasingType动画类型为线性动画linearEase。


    创建动画2.png
  5. 改变eye_right和eye_left的Transform为359°


    创建动画3.png
  6. 选中所有图层->plugins->AnimateMate->Creat Animateion,我们让这个猫头鹰的眼睛从0°旋转到359°分成20个关键帧。KeyframeNumber为20,EasyingType为线性动画linearEase,点击OK。


    创建动画4.png
  7. 选中refresh图层->plugins->ExportAnimation导出动画


    导出动画1.png
  8. 可以看到,这里我们可以导出GIF Aniamtion动图,也可以直接导出20个PNG图片。我们都勾选上,然后给导出的GIF图和PNG图填一个前缀名字fenqile_refresh。选择导出出到fenqile_refresh文件夹


    导出动画2.png
  9. 导出之后的结果为下图所示。有20张png图片和一个gif动图。


    最后导出的结果.png
  10. 用浏览器打开gif动图可以看到最终实现的效果。


    最终实现的效果.gif

至此用Sketch就把这个GIF动图给制作完成了,接下来就是要用MJRefresh来自定义下拉刷新样式了

三、用MJRefreshGifHeader来自定义下拉刷新样式

  1. 将20个png图片导入到Xcode工程


    将图片导入工程.png
  2. 创建一个类CustomRefreshGifHeader继承自MJRefreshGifHeader

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)
    }
}

3.给TableView添加下拉刷新

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 = CustomRefreshGifHeader.init { 
            // loading data
        }
}

总结
Sketch不仅能够制作UI图,也能制作GIF动画。我这里只是举了个例子,使用AnimationMate这个插件来做GIF动画真的很方便,但也有很多局限性。目前这款插件只能做一些线性的动画效果,像 PositionSizeTransformOpacity等。如果要做一些比较复杂的动画那用AnimationMate就不太合适了。
这篇文章没有重点讲解AnimationMate的其他使用。接下来我会出一篇关于这个插件的详细使用教程。

马上来为你的APP制作炫酷的刷新动画吧,说不定你们老板会给你涨工资呢~~。

喜欢的话可以点个赞。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,551评论 4 58
  • 其实我想写这封信很久了,与其说是一封信不如说只是我,你们的女儿的一封独白。因为我不指望你们能收到能阅读。我想把这封...
    无奈山谷阅读 485评论 0 1
  • 又是这个时间,已经习惯了晚睡。曾经的神经衰弱,似乎更严重了,可又有什么关系,睡着了才更煎熬。 耳机里是自己喜欢的歌...
    安安董阅读 457评论 0 2
  • 如果情人节当初被翻译成爱人节,恐怕如今的舆论就不会像这样的暧昧。 现在有种现象,人们都觉得男人有了情人并不是件不耻...
    千寻凌霄阅读 320评论 0 2