封面
版权信息
内容提要
精彩案例展示
前言
导读
资源与支持
第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的使用方法
5.3 图形动画脚本——Motion 2
5.3.1 快速调整中心点或速率曲线
5.3.2 快速实现动效的操作工具
5.3.3 其他脚本菜单
5.4 模拟触控点脚本——Touch Point Pro
5.4.1 Touch Point Pro的安装
5.4.2 Touch Point Pro的使用方法
第6章 电动车助手App动效实现
6.1 设计介绍
6.2 制作车辆状态的展示动效
6.2.1 车辆状态的卡片样式
6.2.2 车辆状态的仪表盘
6.2.3 电池使用状态的卡片样式
6.2.4 天气状态的卡片样式
6.2.5 承载所有卡片的合成
6.2.6 完整效果
6.3 制作车辆控制后的车辆状态详情的展示动效
6.3.1 车辆控制状态
6.3.2 车辆状态详情
6.3.3 展示动效
6.4 制作界面合并与界面演示介绍的动效
6.4.1 界面合并
6.4.2 界面演示介绍
更新时间:2021-11-03 16:38:46