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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
教大家做个贪吃蛇的效果呗
0.0°
2019-01-18 原创文章 教程 举报 2914 3 5 0

时隔两年,又来写教程了。希望大家喜欢。对了,根据之前的留言,说我封面太丑了。于是,稍微加强了下。(笑)

  emm..怎么说呢,2年里发生了很多事情。最近得空有点闲心,正好帮朋友做了个贪吃蛇的动画,觉得有点意思,于是准备整理一下写成教程分享给大家。顺便教大家一下做动画的大致流程。


  有天,友人找到我说:“兄弟,帮我做个动画呗。”

  “哦,好啊。什么样的?”

  “贪吃蛇。”

  “emmm...好吧。”(内心疯狂发怵)

  贪吃蛇这个东西自从没用Nokia之后,就再也没碰过了。这么古董级的东西,到底咋搞啊。

  好吧,先找参考吧。当然,度娘并不能给我什么满意的答案。于是在fanzui的边缘疯狂试探,去油管上找到了一些可以参考的内容。参考如下



Image title

Image title

如参考所示,一个复古的贪吃蛇的动画,需要具有两个基本要素:

1.像素化的画面风格

2.低帧率显示风格。

好了。我们来思考一下怎么搞这个动画吧。

首先,我们得模拟出一个完全由方格像素组成的空间,去模拟贪吃蛇行径路线上的基底。ok,我们开始吧。


建立shapelayer,然后建立了一个20PX大小的小方块


然后我们对这个小方块进行复制,以模拟贪吃蛇游戏的行径空间。

这里我们使用到的是shaperlayer的复制功能



点击这个Add边上的小三角,可以得到Repeater变形器。

OK,我们来看看Repeater变形器的基本参数。



Repeater变形器的使用方式广泛,有很多MG动画的复杂繁复的几何组成形体都可以通过这个命令来做到。

我们先用第一个Repeater来重复制作小方块的横向位移克隆体。当我们想要制作纵向克隆体的时候,我们需要第二个Repeater来制作纵向的克隆体(这个很重要,别妄图在一个Repeater上面做到,别问我怎么知道的,泪~)

好了,我们通过调整位移缩放等简单的变换属性能够得到了一个基本的小方块矩阵。


这样,基本的基底就完成了。之后就可以制作蛇了。

我使用的方法是在这个图层上面多增加一个Shapelayer,通过遮罩关系的处理方式来制作小蛇的身体,这样只要路径经过的地方,就能够被现实出一个个格子来。如果你们想到了其他的实现方式,可以留言告诉我,实现的方式应该有很多种。



ok,通过在shapelayer上面画Path的方式,我们建立了一条让小蛇通过的轨道路径。至于遮罩关系的处理,我就不做赘述了,只要让路径的stroke宽度恰好覆盖住基底的小方块就ok了。

下面是重点

----------------------------------------重点分割线--------------------------------------


同样的,我们在Add小三角出找到一个变形器叫做Trimpath(中文好像叫做修剪路径)


我们用start和End来控制小蛇的长度 使用Offset 来控制小蛇跑多久的时间长短。这样就能得到一条基本的沿着行径路径移动的小蛇。


然后我们通过遮罩关系,链接下层的格子矩阵图层和小蛇的路径。便得到一条奔腾的贪吃蛇。


搞定了。然后我们只需要为这个小蛇添加背景做一些美化的工作和在行径路径上放置一些吞食的食物,Key上一些关键帧,就可以搞定一个基本的小蛇在吞食食物的动画了。


基本动画完成,大家可以播放一下,会发现这个小蛇活动异常流畅。等一下!!!这不是我们要的效果,我们要的是低帧率的表现动画。所以。我们要怎么办呢?


-----------------------------基本动作做完了 来做效果吧--------------------------------

我们将现在所有的图层Pre-compos,做成一个预合成。


把所有的图层都做进一个合成了哦。马上要见证奇迹的时刻了。


Image title

右键合成,我们能够找到一个time的标签,然后在菜单中找到Enable time Remapping(时间重映射)命令。


我们在时间线上面会多出来两个小的关键帧,这就表明我们映射成功了(只要操作正确,不存在失败的问题。)

下面我们按住Alt键在Time Remap的关键帧按钮上面点击一下,为我们的TimeRemap添加一个表达式。


然后我们只要把后面的这个timeRemap改成TimeRemap*N(N这个系数完全取决于你个人的喜好),解释一下这个表达式的意思。所谓的TimeRemap*N就是每隔多少帧取一帧播放的意思,也就是说*1就是每帧都播放,*2就是每隔一帧播放一帧,*3就是每隔2帧播放一帧,以此类推。我在这里键入的是TimeRemap*3.

然后你会发现你的动画变短了,后半截基本是黑的,或者是定帧不动的。别方!这就对了!


右键点击TimeRemap在帧辅助选项里面选择Convert Expression to Keyframes(将表达式的结果烘焙到关键帧上,这么翻译有点繁琐,但是表意是正确的,不知道中文版用的是啥翻译,没了解过。)


所有的帧都烘焙到了时间轴上面了。然后我们删除表达式中的Timeremap*3的表达式(为什么呢?因为有表达式,它会进行二次计算。)找出我们动画的最后一帧,然后把所有没有用的帧都删掉,全选我们有用的关键帧。


按住Alt键拖动整体的关键帧到整段动画本来应该有的末尾。


然后右键关键帧选择Toggle Hold Keyframe(切换固定关键帧?着实不知道怎么翻译了。求野生字幕菌)




播放一下。我们的动画就完成了。是不是敲简单!!

Image title

好了。码完字了。可以回家了。

桥豆麻袋!!!

我好像忘记了一个事情,对了。就像素质感的问题。这个其实超级简单,只要选中这个合成在效果器里面找到CC ballaction 点击添加就可以了。

好了。这下真的没有了。

不知道什么时候能再给大家写教程呢,实在太懒了,2019年,我一定要把17年残留的,和18年未完成的教程都给大家好好写写呢!(Flag立的太好了)


好啦,欢迎加入QQ群交流(时过境迁,群主我已经交给我朋友啦,我只是群里的一个闲散小儿。)

QQ群号:466176202






更新:2019-01-18

收藏

3人已收藏

Rmixlink

无眠养猫人

  • 19

    作品

  • 196

    粉丝

  • 51

    关注

  • 【教程】手把手的教你如何入门Aftereffects
  • 翻译了一个国外的教程,希望大家喜欢
  • 用AE做简单的猫尾巴骨骼动画
  • 来教大家做个简单的翻书效果吧【决心不做年更的博主】
相关标签
教程

    猜你喜欢

      2019-01-18 原创文章 教程 举报 2914 3 5 0

      教大家做个贪吃蛇的效果呗

      0.0°

      你确定要举报教大家做个贪吃蛇的效果呗

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年01月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      3
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录