Principle-基础篇 第1期 黏性小动画

第一期

对于新手来说,快速学习的方法就是做简单的练习让自己快速熟悉软件和进入状态。如何临摹一个动画呢,首先观看动画,眼睛扑捉到他的几次关键跳转,然后分析它的初始状态和结束状态,最后关注小的细节就是中间状态。

然后女,打开软件,对着例子先自己尝试做,自己尝试解决问题,最后真的不OK我们再来看源文件分析。

例子

这个例子包含的所有原件,肉眼可见的几个:

1.两个长方形

2.一个梯形+一个小三角形(仔细可以看出最后的三角形是两个图形拼接起来的)

3.文案PAUSE

4.文案PLAY

分析之后可以动手做了

几个重点:

1.图形A变到图形B的时候,图层名字必须是一样的,一样的,一样的。。

2.command+D原地复制,这个快捷键会用到很多次。

3.变化前和变化后的图层名字,数量相同。

恩,可以开始啦。

第一步新建一个新的文件,快键键command+N。然后修改文件名以及保存位置,把画板背景颜色改成黑色。

01

第二步在画板上新建图形,刚才总结过的几个图形,不过这里的动画其实是遮挡动画,所以一共需要6个原件来制作这个动画。

1

所有组件摆放位置及图层关系如下:

下面调整各组件开始时的状态,上下遮挡与背景融为一体,这样视觉上就看不到上下遮挡了。

开始时状态

开始时PLAY文案是看不到的,所以这里调整他的透明度为0。


遮挡


文案


文案

左右两个矩形为颜色大小相同的两个矩形。

结束时状态

下面要制作结束时的状态了,图形结束后是三角形。PLAY透明度变成100。结束时的效果主要靠两个上下遮挡。

首先复制一个画板,点击artboard 1,选中后快捷键command+D原地复制一个新的画板。


复制后


画板2,就是结束状态的画板,所以这里需要调整画板2中各图层状态。

首先三角形是两个拼接在一起的两个矩形,调整两个矩形状态如下,一长一短两个矩形。


长方形

然后调整文案的状态,PLAY的透明度为100,PAUSE透明度改为0。


文案透明度

重点来了,在这里改调整上下两个遮挡的位置,首先是旋转的操作,选中上方遮挡,按着command键和鼠标左键配合旋转,两个遮挡旋转角度相同方向相反,都是向内旋转,旋转后如下。


遮挡

最后,细节调整,例如文案的左右滑动。文案滑动依然用到对齐。

第一个点击

开始和结束状态都做完了,就剩下一个步骤了!!点击画板1会出现一个闪电按钮,这里点击闪电后会有很多种交互方式,这里选择tap(就是点击),按住闪电不放发现会有一个箭头出现,让箭头指向画板2,第一个点击就完成了。

时间条

时间条调整

第一个点击

第一个点击完成后的动态。

第一个点击状态完整后,我们只是从暂停到开始,但点击开始会变成暂停,这是一个循环,所以还需要让他变回来。所以要从画板2回到画板1。同理,点击画板2的闪电指向画板1。这样我们的动画就完成了。


第二个点击

然后就是最后的效果了

两个点击

最后在演示框点击保存GIF就可以了。


思考一下,文案的左右滑动是怎样用对齐做得到的呢,我会在第2次的教程中解释。

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

推荐阅读更多精彩内容