Motion Design for iOS(译文 2)

Animation Properties(译文)2

回顾上一部分所阐述的内容,如何从一个空白的画布实现一个漂亮的动画?这些动画效果是如何实现的?这些独特的属性和特征是如何从一个值变化到另外一个值?如果你想实现你脑海中的动画效果,你需要考虑在动画实施的过程中究竟发生了些什么,有哪些属性是被操纵着的。

  • 位置 屏幕上控件的X 和Y 坐标的改变
  • 透明度 屏幕上控件的透明度(从0.0 ~ 1.0)的变化
  • 缩放比例 控件相对于原始尺寸的大小。1.0 意味着控件是原始的宽高,0.5意味着控件的宽高只有原来的一半,0.0则意味着控件的宽度和高度都为0,但是不是说这个控件不存在,它仍然存在在当前坐标系里。2.0则意味着控件当前的比例是原始比例的2倍。

以上这3个属性是用户在设计iOS APP的时候主要调整的几个属性值。你可以通过改变这几个属性的值或者是交叉使用来达到意想不到的动画效果。
那么,拿位置、透明度、缩放比例这三个属性能做些什么呢?操纵这些数据又能在屏幕上实现什么效果呢?

位置——position

如果你想移动一个控件,就可以通过操纵他的position位置来实现这个效果。将一个控件向下移动意味着你在增加它自身的Y坐标值,因为坐标系的原点位于APP的左上角。如果你想将一个控件从屏幕底部移动到屏幕的中央位置,应该首先将控件的Y坐标值设置为比屏幕Y轴最大坐标值大的一个值,然后将Y值通过动画变为屏幕中间位置。

2.1.png

透明度


将控件的透明度从100%不透明——>一定的透明度,可以通过改变opaque或者是alpha属性来改变。这一属性可以很好的实现控件从跟背景很好的融合到完全凸显的一个状态的改变。如果你缓慢的将一个控件从屏幕上移除的话,控件的透明度会突然变到0.一般的会将透明度的变化动画和其它的属性一起使用来达到预期效果,例如:将一个控件从屏幕之外移动到屏幕中(position),并同时将透明度从0.0(透明)到(不透明)进行转换。

2.2.png

缩放比例


如果你想将一个控件变得更大或者更小(可以是两个维度的成比例的变化,也可以是在某个维度上的缩放变化),可以通过操纵控件的scale属性来达到这个效果。想创建一个模态的像iOS7原生的alertView一样的alert?只需要改变它的视觉比例,首先需要设置他的比例为1.3x(要比原始尺寸大),然后将比例变到1.0x(原始尺寸)并且透明度从0——>1.0,这样就可以实现。

2.3.png

既然我们已经介绍过在实际动画创作过程中应用广泛的属性,接下来我们就来实现一些案例效果。

在Jeff的地图动画效果中同时使用了位置、透明度和缩放比例这几个属性。

  • 最底层的界面缓慢的缩放并且降低了透明度,所以它才能够很平滑的缩放到底层。
  • 底涂层是从一个大于原始尺寸的比例以及一个0.0的opacity开始的,然后才变为原始尺寸并且将不透明度上升到1.0.并且位置上网上走了。

虽然这位置、透明度和缩放比例可以带给你一些比较好的动画效果,但在做动画效果的时候仍然可以同时使用其他的一些可以做动画的属性。在这里我们介绍一些在动画效果中经常使用的其它几个动画属性。

  • 颜色 你可以像CSS动画一样,实现颜色从一个值变换到另外一个值。而这个颜色则可以是字体、背景色或者是界面上的一个层。你可以在点击或者是在一个新的界面出现的时候实现颜色改变的效果。

  • 旋转 界面中的控件可以从0360°之间的任意角度开始,然后最后回到0°。旋转的角度通常是用弧度制来表示(02π),轻微的旋转可以让平淡的界面变得更加新引人,尤其是当你同时应用弹簧效果的时候。

  • 3D 对界面上的控件实现3D动画效果,也就是说控件是在三维角度进行运动,不是背向用户运动就是朝向用户旋转运动。而旋转角度也会像2D动画一样通过弧度制来进行表示。

构建动画

打比方说,动画是一座房子,那么你至少需要了解建造房屋的斧子、扳手等其他工具,你对动画的元素和工具很熟悉,也就是那些你想要拿来构建动画效果的属性。但是,知道这些并不足以使你创造出好的动画效果出来。

现在我们应该规划一下如何实现一个动画效果。

  • Item最初的属性是什么?是仅仅位于屏幕之后么?是完全透明的么?是不是缩放大一个极其微小的尺寸?很大么?
  • Item的最终状态的属性是怎样?现在是处于屏幕的中央么?是完全可见的么?已经旋转到一定角度了吗额?现在是否有一个不同的背景色了呢
  • 这个动画效果需要持续多长时间。
  • 动画发生的时候Item会产生什么样的变化?通常会有多个Item发生动画效果,一个紧接着另外一个。

对动画思路的思考和整理是一件很重要的事情。首先,这样可以让你将自己抽象画的动画效果形象的描述给其他人;然后,这样也可以使你意识到思路中的一些尚未解决问题;例如:Item2和Item1是否要同时开始动画效果啊,或者是是否要有一个缓慢的动画开始时间等之类的问题
也许你现在没有答案,但是只要你开始整理思路,这些答案就会慢慢出现。

时间意味着一切

忘了介绍一个重要的关键因素,一个在实现一些漂亮而且自然的动画的时候,一个很容易迷惑的问题,时间。动作发生和动画开始这个中间的时间。持续一个动画所花费的时间。一个动画发生到下一个动画切入中间的时间。
而且,动画的本质就是动画着的Item的属性随着时间在不停的发生改变。
最好的抓取动画的各个时间的状态以及带来的属性随时间的改变的最好的办法就是像下面的这张图一样。

2.4.png

这个表格代表了一个动画类型。Y轴代表的是发生动画的属性,在这里我们代表的是Item的缩放比例。在这个案例当中,我们的动画开始从0.0(不可见)到1.0(Item的最原始的比例);
水平坐标轴则表示的是从动画开始到结束的时间。绿色的线就表示在各个特定的时间当前Item的属性所在的一个状态。就像你看到的,这个线基本上是直的,也就是说属性的改变比率是一样的。这个例子当中,Item是在1秒钟的时间内,缩放比例线性的从0.0~1.0的。这就是所谓的线性动画.
Ease


2.5.png

Y轴表示的是需要进行动画的属性值,例如是一个Item的尺寸和位置变化。Y轴的底部的数值表示的是动画开始时候的初始值。而Y轴的最大值则表示的是动画结束的时候的属性的状态值。X轴表示的是这个动画总的持续的时间。而那条线则表示的是动画效果的各个阶段属性值的变化。

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

推荐阅读更多精彩内容