内容提要

这是一本关于UI动效制作技法的教程，主要介绍在UI设计完成后，如何使用After Effects来制作动效。

全书内容以After Effects为基础，以UI设计成品为素材，通过技法讲解和实例操作的形式介绍了常见UI动效的制作方法，包括认识UI动效、After Effects动效制作基础、UI组件动效、常见的UI动效、常用的动效制作脚本和电动车助手App动效实现等内容。为了帮助读者快速掌握UI动效制作技法，本书实例遵循“UI组件小效果→常见的UI效果→全套UI效果”的模式进行讲解。

本书可供UI动效制作初学者、UI设计师阅读和学习，也可作为高等院校数字艺术类、UI设计类相关专业的教材。

精彩案例展示

实例：制作实现功能变换的按钮

教学视频 实例：制作实现功能变换的按钮.mp4

学习目标 掌握PSD文件的导入方式、图层的变换操作和“阴影”效果的运用

第62页

实例：制作萌趣生动的开关

教学视频 实例：制作萌趣生动的开关.mp4

学习目标 掌握“位置”参数的设置方法和父级图层的运用

第67页

实例：制作列表的出现效果

教学视频 实例：制作列表的出现效果.mp4

学习目标 熟悉列表的运动原理和嵌套合成的运用

第78页

实例：制作查看相册图片效果

教学视频 实例：制作查看相册图片效果.mp4

学习目标 熟悉嵌套合成的使用技巧和运用方式，以及父级图层的使用方法

第83页

实例：制作列表页的毛玻璃效果

教学视频 实例：制作列表页的毛玻璃效果.mp4

学习目标“高斯模糊”效果的使用、预合成结合蒙版的运用和蒙版的准确设置

第80页

实例：制作图文卡片的展开动效

教学视频 实例：制作图文卡片的展开动效.mp4

学习目标 蒙版、父级图层、“阴影”效果和形状变化的综合使用

第86页

实例：制作拥有视差效果的轮播图

教学视频 实例：制作拥有视差效果的轮播图.mp4

学习目标 熟悉形状图层和“添加标记”命令的使用，以及多个合成的拼接方法

第90页

实例：制作LOGO的切片动效

教学视频 实例：制作LOGO的切片动效.mp4

学习目标 掌握“时间置换”效果与预合成嵌套的运用

第102页

实例：制作科技感旋转球体

教学视频 实例：制作科技感旋转球体.mp4

学习目标 掌握“CC Sphere”效果及“内阴影”“外发光”图层样式的运用

第105页

实例：制作水波纹加载球动效

教学视频 实例：制作水波纹加载球动效.mp4

学习目标 掌握“无线电波”“置换图”“高斯模糊”效果与合成嵌套的运用

第107页

实例：制作“高大上”的金属效果动效

教学视频 实例：制作“高大上”的金属效果动效.mp4

学习目标 掌握“动态拼贴”“CC Blobbylize”“勾画”效果的运用，以及“摄像机”功能的运用

第111页

实例：制作卡片式轮播图动效

教学视频 实例：制作卡片式轮播图动效.mp4

学习目标 了解复杂的合成嵌套，及其结合循环动画的运用

第120页

实例：制作酷炫的电流加载动效

教学视频 实例：制作酷炫的电流加载动效.mp4

学习目标 掌握“描边”“发光”“湍流置换”效果和“高级闪电”特效的运用，以及预合成的使用技巧

第123页

实例：制作有重力感的绳子动效

第132页

教学视频 实例：制作有重力感的绳子动效.mp4

学习目标 使用不同方法，通过路径、“操控点工具”和Motion 2插件制作绳子动效，并掌握多个父级图层的关联运用方法

实例：制作在睡觉的猫

教学视频 实例：制作在睡觉的猫.mp4

学习目标 掌握“钢笔工具”的使用技巧及其制作动画的方法，使用插件Auto Crop裁切合成尺寸

第140页

实例：制作“萌萌哒”小球的果冻动画

教学视频 实例：制作“萌萌哒”小球的果冻动画.mp4

学习目标 利用“高斯模糊”和“简单阻塞工具”效果实现“果冻”效果，使用形状图形配合极坐标来制作动画