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

iOS 动画之美（一）