AE折纸动画UI动效设计

这是一个AE折纸动画,实际上做UI动效设计的同学也会学到这一部分。这里帕克园长分享一下制作方法。

总体来说,我们把这个N字分成三个笔画,分别用三个图层加上蒙版进行模仿。

工具/原料

after effects

方法/步骤

打开AE ,点击新建合成按钮。

新建合成,预设改为HDTV 1920 25

在合成空白处右键点击,选择新建----纯色图层。

纯色图层颜色选择偏暗的红色。

红色图层创建完成。

在红色图层被选中的情况下,双击AE上方的矩形工具,为红色图层添加蒙版。

展开红色图层左侧的小三角,会看到图层添加了蒙版属性。

将鼠标切换为选择工具,框选蒙版左侧的两个点,按住键盘上有箭头,对蒙版的两个点向右移动。

同样,将左侧、上下的蒙版进行调整,如图。

选择AE上方的锚点工具,按住ctrl键,将纯色图层的锚点移动到红色形状的下方中间位置。鼠标改为选择工具。

复制红色图层。将新复制的图层移动到右侧,当作N的右边笔画。

再次复制红色图层,展开新图层的蒙版属性,选择蒙版路径,使用AE选择工具将图形上面两个路径点移动到N的左侧笔画上端对齐。

放大画面,确认笔画对齐。

使用AE锚点移动工具,将N的斜笔画的锚点移动到上方,与上方笔画起点的中间对齐。

将所有图层后面添加上立方体盒子,它们就具有了三维属性。

为N的左侧笔画添加X轴关键帧旋转动画。开头将N的左边笔画旋转到水平放置的状态。

同样,为后面两个笔画制作X轴旋转动画。

最终完成整个动画的制作。

AI助手