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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
一起来制作,学习AE动效
0.0°
2016-04-09 原创文章 教程 举报 9798 85 70 13

在给公司做引导动画自己的一个想法。通过UFO 方式去引导告诉用户一个功能。

大家好,写在最前面的,鄙人刚刚入职动效半年吧(静态也做,主要是动态那些事),刚刚完成一件大事,心情贼好,于是写了一个教程。这个案例是关于工作内容的一个引导的动画,不过因为是强制性引导被pass了。下次加油 ,干巴爹:D。第一次发表东西不好的地方还请见谅\(≧▽≦)/。


先让我们看看这个动画带完整效果的。

http://v.youku.com/v_show/id_XMTQ4Nzk3MDMzNg==.html?from=y1.7-1.2


OK !进入教程。

1 当然是先思考问题,大致上是通过一个脑暴,然后大家说说自己的想法。然后我觉得可以用一个UFO可以表现那个功能的引导。接着我就开始寻思画UFO,然后就开始了逛追博之旅啦。

找的参照物           自己模仿的做了一个。

这个就是我在追博上找的源,不要介意啊,楼主只是一个动态设计师,在PS拟物化那方面并不具备优势。然后就找了3个  ,觉得那个下面的最喜欢就看着画了。

这种东西如何画楼主是没有资格教大家的,拟物大家都肯定比我在行啦。吧唧吧唧 继续往下走。


2.其实,下方那个图已经表达了楼主的当时思考的内容,大致就是被飞碟掳走一些ICON,然后把新发现也拉出来了。目的是就是引导用户这里有一个功能是能提供APP的哟。咱们继续 ,记得放入AE中要进行智能对象的操作,不然材质那些东西带不过去哟。\(≧▽≦)/


3.导入AE当中,这些都是基本操作就不一一赘述了(记得带材质的转智能对象哦)。


然后大家下一个帅气点的BG ,楼主的当时用的是默认的壁纸,但是后来觉得不合适就换成了一个夜空。如上图吧。将飞碟预合成放入即可。


4首先楼主的想法是,不能做一个平面的直来直去的那样,太呆了,毕竟天空那么大,可以任你飞哦,所以我就想着通过各种手法给人一种飞来飞去的赶脚。O(∩_∩)O哈哈~所以这里要利用路径去画 尽可能那种赶脚。我的灵感参考~

Image title


然后我就想着 我的飞碟也不能直来直去的飞,太傻了我也得做的有转弯的赶脚和天空空旷的赶脚。于是 你看到的是这样的。

                                   


5在空中飞出去再飞进来利用了一个小技巧,就是圆做路径,然后让飞碟沿着这个圆(路径进行飞)

                                                         

然后用圆做路径其实这个圆的路径点是可以自己移动的,so你移动根据你想要的感觉来,我想表达的就是从外面飞进来->飞出去->飞进来->发现想要的icon->飞走。具体实现方法是

“将mask或路径paste到运动物体的position属性中就可以了,记住copy时选中mask或路径的shape属性,关键帧是自动添加的,很方便怎样让物体沿路径运动?选择路径,拷贝其SHAPE属性。选择需要动画的POSTIION属性,粘贴即可”引用百度知道。


6 在飞到正中间的时候飞碟停下来了,切记不是很生硬的停下来,不是光按f9就完事了,而是应该有种急刹车的感觉,一方面这样符合告诉运动的物体停下来的赶脚,另外一方面是给人一种“飞碟因为某些特别的原因而停下来  对下文进行提示。”O(∩_∩)O。仔细看那视频2S那里,有个急刹车的感觉。


7然后紧接着出现感叹号变现出惊奇,这个地方的感叹号选择个好看点的,这样更加有趣更加有漫画的赶脚。

                                              

然后放射性光纤就出来啦,这里没使用直接变黄然后黄色光纤,而是利用类似快门的赶脚,一闪一闪,然后光纤照下来了,这里的放射光纤是在PS中就画好了的,在AE中就直接用了蒙版,调整蒙版大小。

                                  



8按照参考图,放射光纤下来了,肯定是想吸走某些东西,大部分电影是人类,畜生,等带回去研究,但是我这里是为了公司一个“发现”功能,所以是App Icon。

在这里使用了一个插件,他的名字叫duik。一般情况下是用来做骨骼动画的,不过我这里用的是他的弹性功能。为什么要用呢?因为我懒得做弹性,插件生成的也自然。 这里的弹性主要是用于 发现的那条横线以及“发现“的文字。仔细看视频会发现在被飞碟吸上去的时候,会有来回回弹(右下角的的spring),之所以这么做是想把这个发现功能给引出来,顺便再吸走几个icon让用户知道这里有App并且外星人都喜欢哟。 


                                     


9 然后icon不规则的上去呗,app 的R ,P  ,S ,都改改 然后时间上自己调调,这里可以使用这个插件。(手动也可以哦 )。

                                                                       


10在做这一块的时候我想起来一件事,就是奥特曼没电的时候总是很牛逼,所以在icon被吸上去后我做了一个外发光给UFO的玻璃。(这个在GIF中看不到的),这样给人感觉也更好,UFO吸到了好东西,

                                                                             


11然后继续是一个起跑的那种倾倒姿势,别问我为什么 ,tom猫和jerry中tom每次抓jerry起跑都是这样的。冲出去啦。yes。



这个小的动画就完成鸟。希望大家喜欢。巴拉巴拉   断断续续写了1周。

第一次写教程不好的地方请指正。阿里嘎多。


Image title










更新:2016-04-09

收藏

85人已收藏

大宝蛋

dabaodan0622

  • 24

    作品

  • 2551

    粉丝

  • 202

    关注

  • 启封的秘籍-19/20SHOWCASE
  • 滴滴国际化 - 巴西99出行司机钱包
  • 滴滴国际化设计图鉴
  • DiDi Global Driver Wallet 改版复盘
相关标签
UI动效UFOAE

    猜你喜欢

      2016-04-09 原创文章 教程 举报 9798 85 70 13

      一起来制作,学习AE动效

      0.0°

      你确定要举报一起来制作,学习AE动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年03月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      70
      85
      13

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

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

      登录

      手机号

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

      登录
      第三方账号登录