更新时间:2021-11-03 16:38:46
封面
版权信息
内容提要
精彩案例展示
前言
导读
资源与支持
第1章 UI动效初相识
1.1 UI简介
1.1.1 什么是UI
1.1.2 发展现状及未来
1.1.3 UI的应用领域
1.1.4 什么才是优秀的UI
1.2 UI动效
1.2.1 UI动效很重要
1.2.2 UI动效的设计原则
1.2.3 UI动效制作的要点
1.2.4 过渡效果
1.2.5 自定义动画
第2章 After Effects动效制作基础
2.1 认识After Effects界面
2.1.1 认识基本的面板
2.1.2 工具栏中常用的工具
2.1.3 导入素材的方法
2.1.4 导入PSD/AI/Sketch文件的方法
2.1.5 出现红条提示的处理方法
2.2 认识合成
2.2.1 新建合成
2.2.2 合成的设置和操作
2.2.3 合成的嵌套功能
2.3 学习基本操作技巧
2.3.1 蒙版
2.3.2 轨道遮罩
2.3.3 父级关联
2.3.4 其他图层操作
2.4 图层类型和效果预设
2.4.1 视频和音频图层
2.4.2 文本图层
2.4.3 纯色图层
2.4.4 灯光图层
2.4.5 摄像机图层
2.4.6 空对象图层
2.4.7 形状图层
2.4.8 调整图层
2.4.9 3D图层
2.4.10 效果和预设的添加与使用
2.5 渲染与导出
2.5.1 设置需要渲染的工作区域
2.5.2 渲染队列的常用设置
2.5.3 使用Adobe Media Encoder导出
实例:制作一个3D切换效果的幻灯片
第3章 从基本组件开始学习制作
3.1 按钮(Button)与开关(Switch)
3.1.1 学习各类按钮动效
实例:制作单击按钮时的涟漪效果
实例:制作实现功能变换的按钮
3.1.2 有趣的开关
实例:制作常规的开关操作动效
实例:制作萌趣生动的开关
3.2 菜单(Menu)
实例:制作弹出式菜单
实例:制作分层菜单
3.3 列表(List)
实例:制作列表的出现效果
实例:制作列表页的毛玻璃效果
3.4 卡片(Card)和轮播图(Carousel)
3.4.1 卡片
实例:制作查看相册图片效果
实例:制作图文卡片的展开动效
3.4.2 轮播图
实例:制作拥有视差效果的轮播图
3.5 加载(Loading)和进度条(Progress)
3.5.1 基础的加载动效
实例:实现Material Design风格加载动效
3.5.2 基础的进度条动效
实例:制作快速实现进度圈动效
第4章 将动效运用在UI设计中
4.1 制作灵动的UI特效
实例:制作LOGO的切片动效
实例:制作科技感旋转球体
实例:制作水波纹加载球动效
实例:制作“高大上”的金属效果动效
实例:制作生动有趣的图标
4.2 打造个性化的UI组件
实例:制作卡片式轮播图动效
实例:制作酷炫的电流加载动效
实例:制作液态效果的下拉刷新动效
实例:制作有重力感的绳子动效
4.3 生动的插画动效
实例:制作在睡觉的猫
实例:制作“萌萌哒”小球的果冻动画
实例:制作夜空中飞入云层的飞机
第5章 常用的动效制作脚本
5.1 导出Lottie动画的扩展脚本——Bodymovin
5.1.1 Lottie概述
5.1.2 Bodymovin的安装与相关设置
5.1.3 Bodymovin的使用方法
5.2 形状融合脚本——Shape Fusion
5.2.1 Shape Fusion的安装
5.2.2 Shape Fusion的使用方法