01 初识UI动效 013之前先动脑——如何提炼
1.1 认识UI 014
1.1.1 UI 操作系统的发展简介 014
1.1.2 UED 团队的构成与介绍 017
1.1.3 UI 的应用领域分析 018
1.1.4 UI 设计师的自我修养 025
1.2 认识UI 动效 028
1.2.1 孕育中的UI 动效 029
1.2.2 UI 动效行业的现状与发展 030
1.2.3 UI 动效的应用领域分析 032
1.2.4 让设计有意义地存在 037
1.3 如何玩转UI 动效 038
1.3.1 系统设备的准备 038
1.3.2 我的切身学习体会 039
1.3.3 螺旋提升计划 040
1.3.4 建造你的灵感弹药库 042
1.3.5 如何正确看待“审美” 044
1.3.6 嘿!你着什么急 044
1.4 UI 动效制作的工具介绍 045
1.4.1 二维/ 原型类动画工具 045
1.4.2 3D 类动画工具 049
1.4.3 After Effects 052
02 动手之前先动脑——如何提炼你的设计思维 055
2.1 全局考量 056
2.1.1 设计师和美工,仅一步之遥 056
2.1.2 “先整体后局部”的思考程序 057
2.1.3 美观,不代表一定优质 058
2.1.4 设计该有温度 059
2.2 如何构思你的动效方案 059
2.2.1 你真的懂得如何去“看”吗 060
2.2.2 绘制你的动画分镜头 062
2.2.3 可行性评估 065
2.2.4 可拓展性和pin牌感 066
2.2.5 构思期间的进展同步 066
2.3 思维导图构建和灵感提炼 067
2.3.1 什么是思维导图 067
2.3.2 如何绘制你的思维导图 071
2.3.3 养成灵感提炼的习惯 072
03 教你如何快速玩转After Effects——五大学习阶段全修炼073
3.1 半小时,熟悉After Effects 系统的基本操作 074
3.1.1 认识After Effects 的基本面板 074
3.1.2 如何将PSD 文件导入After Effects 075
3.1.3 如何将AI 文件导入After Effects 077
3.1.4 如何将Sketch 文件导入After Effects 080
3.1.5 新建工程文件与相关参数设置 083
3.1.6 顶部工具栏的认识 084
3.1.7 图层编辑区域的介绍 084
3.1.8 红条出现,别慌 087
3.2 一小时,熟悉界面基本操作技巧 088
3.2.1 新建固态层(Solid Layer) 088
3.2.2 “嵌套”功能的使用 089
3.2.3 创建“父子关联” 090
3.2.4 SHY 和 SOLO 091
3.2.5 关于“MASK”( 遮罩)功能的介绍 094
3.2.6 3D Layer(3D 层) 099
3.2.7 实战:After Effects 摄像机的操作 101
3.3 两小时,学会形状图层的运用 101
3.3.1 如何创建Shape Layer 102
3.3.2 Contents 属性的使用 103
3.3.3 关于路径图形的创建 114
3.3.4 Anchor Point(图层轴心点) 115
3.3.5 如何创建文字层 116
3.3.6 Null Object( 空对象) 的创建和使用 117
3.3.7 “木偶图钉”工具的使用 118
3.3.8 图层的复制、截断和去首尾处理 120
3.4 一小时,让你的UI 动起来 122
3.4.1 帧与关键帧 122
3.4.2 关键帧的创建与使用 123
3.4.3 曲线动画效果的制作 126
3.5 聊聊渲染 130
3.5.1 After Effects 渲染面板的介绍 130
3.5.2 不同的渲染输出方式介绍 132
04 动效大爆炸——H5动效的实现方式与Material Design动画 135
4.1 了解HTML5 136
4.1.1 什么是HTML5 136
4.1.2 前端工程师的介绍 138
4.1.3 动画实现大揭秘1:原生动画 139
4.1.4 动画实现大揭秘2:CSS3 动画 145
4.1.5 动画实现大揭秘3:CSS2 + JavaScript 149
4.1.6 动画实现大揭秘4:Canvas + SVG 150
4.1.7 动画实现大揭秘5:WebGL 154
4.1.8 动画实现大揭秘6:另辟蹊径 156
4.2 Material Design 动画,你必须要知道的 160
4.2.1 什么是Material Design 动画 160
4.2.2 影响Material Design 动画的客观属性 161
4.2.3 Material Design 的动画表现形式 163
4.2.4 Material Design 动画设计的注意事项 168
05 游戏有外挂,动效有脚本——不同动效插件的介绍与使用方法 173
5.1 概述 174
5.2 Shape Fusion(融合效果脚本插件) 174
5.2.1 Shape Fusion 的安装与加载方法 175
5.2.2 Shape Fusion 的使用与操作流程 176
5.3 Mt. Mograph Motion(图形动画脚本插件)178
5.3.1 面板区域的介绍 179
5.3.2 动画命令的介绍 180
5.4 Bodymovin(After Effects 动画转HTML5的脚本插件) 185
5.4.1 关于Lottie 工具的介绍 186
5.4.2 Bodymovin 的安装与加载方式 186
5.4.3 如何在Bodymovin 中完成动画的渲染输出 189
06 手把手教你玩动效——动效制作方法的视频全解析 193
6.1 概述 194
6.2 基础篇 194
6.2.1 水波纹加载动画 195
6.2.2 界面构成五部曲 196
6.2.3 LOGO 诞生记 197
6.2.4 圆环波普棉花糖 198
6.2.5 线体ICON 变形计 199
6.2.6 水滴融合Loading(有插件+ 无插件双实现版本)200
6.2.7 灵动的文字百叶窗 201
6.2.8 生长的自行车 202
6.2.9 液态流体的LOGO 203
6.3 进阶篇 204
6.3.1 图形切割 204
6.3.2 2D 卡通的爆炸LOGO 206
6.3.3 电击的LOGO 207
6.3.4 动感涂鸦字体LOGO 208
6.3.5 HUD 炫动光环 209
6.4 Gao级篇 210
6.4.1 Hologram 全息手表演示动效 211
6.4.2 QQ 会员15 周年加速特权篇动效方案 212
6.4.3 粒子LOGO 动画 21313
07 踏上不归路,就请坚持到底 215
7.1 自学,究jing有多难 216
7.2 关于Performance Flow(演绎过程) 220
7.3 我的个人学习建议 222
后记 224
· · · · · · (
收起)
0 有用 芝士 2020-03-01 22:19:50
一星书
0 有用 Ashitaka 2019-01-22 23:44:08
读一读了解下大体行情哇
0 有用 剧本上不是这么 2020-02-23 15:09:27
从PC时代到移动互联网时代的UI发展; 从思维构建到落地实现的设计方法; 从软件分析到交互体验的动效知识; 从功能讲解到视频实战的AE手册, 这是老毕的个人分享,也是UI动效知识的大爆炸。
1 有用 Yeyubei 2019-05-26 23:53:09
坑逼啊,还不如介绍Ae的工具书,全书基本无干货,前面一堆大牛推荐,他们不看吗瞎眼吗,初级动效水平的也都不用看了 浪费时间
0 有用 HsrgY 2020-02-10 16:07:40
看站酷上有大大推荐于是入手,但是全书很水,基本就是带你了解了一下ae界面然后弄了几个动效制作视频,看这个不如去b站看教程
0 有用 芝士 2020-03-01 22:19:50
一星书
0 有用 剧本上不是这么 2020-02-23 15:09:27
从PC时代到移动互联网时代的UI发展; 从思维构建到落地实现的设计方法; 从软件分析到交互体验的动效知识; 从功能讲解到视频实战的AE手册, 这是老毕的个人分享,也是UI动效知识的大爆炸。
0 有用 HsrgY 2020-02-10 16:07:40
看站酷上有大大推荐于是入手,但是全书很水,基本就是带你了解了一下ae界面然后弄了几个动效制作视频,看这个不如去b站看教程
0 有用 2/1 2019-07-25 19:32:07
这书真的很水,不知道这个作者其它能力怎么样,只是想说,如果能以书来评价作者能力,那么给1星真的足够了,内容讲的真的很浅。。
1 有用 Yeyubei 2019-05-26 23:53:09
坑逼啊,还不如介绍Ae的工具书,全书基本无干货,前面一堆大牛推荐,他们不看吗瞎眼吗,初级动效水平的也都不用看了 浪费时间