恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Principle-基础篇 第1期 暂停小动画
0.0°
2017-10-10 原创文章 教程 举报 3193 15 10 2

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

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

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

1.两个长方形

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

3.文案PAUSE

4.文案PLAY

分析之后可以动手做了




几个重点:

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

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

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


恩,可以开始啦。


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


Image title

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

Image title

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

Image title

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

开始时状态

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

Image title

文案各状态

Image title

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

结束时状态

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

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


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

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

Image title

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

Image title


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

Image title

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

第一个点击

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


Image title

时间条调整

Image title


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

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

然后就是最后的效果了

Image title

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

Image title


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





更新:2017-10-10

下载
收藏

15人已收藏

鳟鱼诗人

冲鸭!冲鸭!冲········

  • 17

    作品

  • 157

    粉丝

  • 229

    关注

  • 最实用的二维码换色
  • iPhoneX设计指南
  • Principle-UI设计师必会的软件(不定期更新)
  • AI制作水晶球
相关标签

    猜你喜欢

      2017-10-10 原创文章 教程 举报 3193 15 10 2

      Principle-基础篇 第1期 暂停小动画

      0.0°

      你确定要举报Principle-基础篇 第1期 暂停小动画

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年10月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      15
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录