iOS 动画之美(一)

iOS开发笔记-动画进阶开篇


大萌哥哥.png

前言:

我是一名刚工作半年的新手,目前在一家外包公司工作,因为公司项目比较多,短短半年已经参与了好几个项目了,在这个这个过程中我学会了很多,进步了很多,同时也发现了我参与的所有项目都有着一个很严重的问题,几乎没有任何交互动画,大部分操作会让用户体验十分生硬。这样的app并不完美,我开始体会到动画的重要性,在 Teamtreehouse Motion Design 我学到了很多关于动画的知识,今天开始分享给大家。

一、什么是动画

1、起源

首先来说说动画的起源,据说目前的动画是基于1981年 迪士尼动画 所提出的动画的12个基本原则实现的,12个原则如下

Squash and Stretch, Anticipation, Staging, Straight Ahead & Pose-to-Pose, Follow-Through and Overlapping Action, Slow In and Slow Out, Arcs, Secondary Action, Timing, Exaggeration, Solid Drawing and Appeal.

下面为了让大家了解这些原则,我找了一个包含显示12个原则的视频给大家,可以看一下,简书不能放视频只能放链接了。。》

https://vimeo.com/93206523

看完视频相信大家也对各种动画效果有了一个初步的了解继续往下看。

2、动画的三大要点(这段摘至 Motion Design

  • 1、Transition(过渡)类似于页面的切换,控件的显示和消失的过程中要有的一个平滑过渡效果,平稳的过度,可以减轻用户对于陌生界面的精神负担。
  • 2、Focus(焦点)将用户的注意力集中到一个非常重要或者最近更新特定部分,特别是需要用户立即操作的元素。
  • 3、Delight(愉悦)将本来司空见惯的操作用一种意想不到的效果展示给用户。

让我们浏览一些动画的例子,分析他们为什么存在,以及在什么情况下使用。

2、iOS动画效果

  • 1、 iOS 系统日历效果


    iOS calendar.gif

    这是iOS7之后的自带日历app,在年切换到月的过程不不是简单的跳转,而是增加了过渡的特效,一个简单的过渡可以引导用户的视觉状态给人一种特别明显的层级关系,因为这不是简单的导航控制器的切换,而是从一个大的层次通过动画放大到一个更深层次细节次,用户真正得到的是他们在数据中更深层次的感受。

  • 2、iOS系统通话界面


    call.gif

当有新的来电时,绿色的接听按钮旋转和过渡为红色,所以它可以成为接听按钮。类似的过渡发生在你在拨打一个电话时,点击绿色呼叫按钮,这里有焦点的元素。

  • 3、Facebook Paper 动画效果(个人最喜欢的一个,十分炫酷!!)


    paper.gif

Facebook Paper 所有的界面切换动画都使用了各种二维或者三维效果。这得益于Facebook 自家的Facebook Pop 动画框架,现在已经开源了,后期我会对Pop框架的使用简单的讲解(还没有深入研究。。)。

Facebook Pop Github 地址
https://github.com/facebook/pop

  • 4、某音乐播放器界面
music.gif

这是一个很有趣的动画效果有木有?每一个控制器都采用各种不同的效果来显示每个UI控件。每首歌在列表以动画的方式从屏幕中显示出来,使用一个简单的iOS导航push/pop的方式,让人舍不得关掉这个app。在这个动画中的关键在于,屏幕没有移动,但是所有的屏幕上的控件都在移动。创建一个这样的效果,每一个UI控件的起始时间要稍微错开,这种类型的动画效果后面的一个demo中又讲到。

是不是觉得狂拽酷炫??,不要被表象吓到,接下来的几天我会通过几个通俗易懂的demo来教大家实现类似的动画效果(包括iOS系统自带的动画框架和Facebook开源的动画框架POP

第一篇到此结束,第二篇文章就要进入正题啦我会着重讲解动画的各种属性和性能方面的知识,敬请期待,更新中!!!


iOS 动画之美(二)


本文素材摘自 CAPPTIVATE.co,Teamtreehouse

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

推荐阅读更多精彩内容