UI动效设计从入门到精通

　　动效是科技产品“情感化设计”的纽带，的动效设计在提升产品体验、用户黏性方面能够起到积极作用， 让产品充满生命力，使用户和界面之间产生情感的联系，从而提升用户体验。目前，动效已成为APP产品交互 设计和界面设计必不可少的元素之一。 本书是关于UI动效设计的实战教程图书，内容涵盖两种*典型、应用*广泛的动效应用端：移动端和Web端， 包括动效的作用、设计原则、分类、动效设计方法、动效典型制作软件及各类动效实例，其中，制作平台包 括After Effects、Android、Adobe Illustrator、 JavaScript、CSS3、DragonBones、Adobe Animate和 Cinema 4D等，动效实例包括基础动效、高级动效、3D动效等。 本书可作为UI设计等相关从业人员的参考手册，也可作为大中专院校设计相关专业的培训教程，还可作为广 大视觉设计和动效开发爱好者的拓展学习资料。

　　博士后、北京市高创名师、北京市教学名师、北京市专业创新团队带头人。2010年至今指导学生参加全国职业技能竞赛获得一等奖4项、二等奖5项，曾出版著作十余本，撰写发表论文几十篇，涉及EI检索论文3篇、国际会议论文5篇、核心期刊4篇，以及教育改革十余篇等。

动效基础知识 

11为什么要为APP设计动效/ 

12动效应用/ 

121移动APP动效/ 

122Web网站动效/ 

13移动APP动效设计/ 

131什么是移动APP的交互动 

效设计/ 

132移动APP动效的作用/ 

133移动APP动效设计原则/ 

134移动APP交互动效分类/ 

14Web网站动效设计/ 

141Web网站动效设计原则/ 

142动效网站设计欣赏/ 

15动效设计方法/ 

16动效制作软件/ 

161After Effects/ 

162Adobe Photoshop/ 

163Adobe Illustrator/ 

164Adobe Edge Animate/ 

165Adobe Animate CC/ 

166Quartz Composer/ 

167Principle/ 

168Framer/ 

169jQuery/ 

1610Origami/ 

1611Cinema 4D/ 

1612Flinto/ 

1613Hype / 

17动效设计流程/ 

18本章小结/ 

动效的分类和作用 

21基础动效/ 

211运动/ 

212放大和缩小/ 

213消失和出现/ 

214翻转/ 

215旋转/ 

216变形/ 

217变色/ 

22动效作用/ 

221使界面充满动感/ 

222系统状态动态提示/ 

223使界面友好有趣/ 

224流畅的过渡/ 

225界面元素的灵活隐藏和 

展示/ 

226增强操纵感/ 

227高效反馈/ 

228引导作用/ 

229创新体验/ 

23动效分类/ 

231视觉反馈动效/ 

232空间拓展动效/ 

233功能改变动效/ 

234层次结构交互动效/ 

235视觉提示动效/ 

236系统应用提示动效/ 

237趣味交互动效/ 

238转场动效/ 

24动效评判/ 

25本章小结/After Effects的应用 

31After Effects简介/ 

311After Effects软件及 

特点/ 

312After Effects CC工作 

界面/ 

313After Effects CC的 

合成/ 

314After Effects CC的图层/ 

315After Effects CC的 

渲染/ 

32After Effects CC 动画/ 

321关键帧动画/ 

322效果动画/ 

323蒙版动画/ 

324文字动画/ 

325表达式动画/ 

3263D动画/ 

33After Effects动画导出/ 

331导出为视频和图像 

序列/ 

332应用Bodymovin把After Effects 

动画转换成Web/Android/iOS 

原生动画/ 

333应用Lottie库实现Android/ 

iOS/Web加载After Effects 

动画/ 

34在Android中应用After Effects 

动画/ 

35在Web中应用After Effects 

动画/ 

36本章小结/ 

Android基础动画 

41绘图动画/ 

411Graphics类基础/ 

412Matrix类变换图片/ 

413绘制路径文字/ 

414绘制图片倒影/ 

415drawBitmapMesh实现图像 

扭曲/ 

42矢量动画/ 

421Android SVG动画/ 

422插值动画/ 

43Drawable动画/ 

431Drawable类/ 

432Drawable实现Frame动画 

效果/ 

433Drawable的高效用法/ 

44Tween补间动画/ 

45属性动画/ 

451Animator/ 

452ObjectAnimator/ 

453AnimatorSet/ 

46控件动画/ 

461图片滑动切换/ 

462图片手势放大缩小/ 

463PhotoView和ViewPager 

实现图片滑动和缩放/ 

464列表折叠/ 

47本章小结/ 

APP基本动效 

51滑动/ 

52缩放/ 

53展开折叠/ 

54横竖屏切换/ 

55堆叠切换/ 

56提示/ 

57图表/ 

571MPAndroidChart/ 

572HelloCharts/ 

573AChartEngine/ 

574XCLCharts/ 

575GraphView/ 

576HTML5数据图表/ 

58滑动删除/ 

59GitHub中优秀的开源动效 

项目/ 

510本章小结/ 

APP进阶动效 

61图标/ 

611PS打造相机图标/ 

612AI打造动感立体图标/ 

62导航和菜单动效/ 

621BottomTabBar实现导航 

动效/ 

622DrawerLayout和Navigation 

View实现Android策划 

菜单/ 

623jQuery和CSS3制作手风琴 

折叠菜单/ 

624jQuery和CSS3实现导航 

菜单/ 

63Loading动效/ 

631Android中进度条/ 

632Progress Wheel/ 

633AE制作水波纹 

Loading/ 

634AE插件Loadup轻松创建 

各式Loading进度条/ 

64手势动画/ 

641Android手势动画/ 

642点击波网页动画特效/ 

643AE手势动画库/ 

65文字动效/ 

651AI与AE打造漂亮字体 

动效/ 

652AE Saber插件制作字体 

动效/ 

653jQuery和CSS3实现彩色霓虹灯发光文字动效/ 

654网页SVG文字动效/ 

655AE Super Text Pack/ 

66AE Trapcode 插件/ 

661安装Trapcode/ 

662Trapcode Particular粒子 

特效/ 

663Trapcode 3D Stroke制作 

文字描边/ 

664Trapcode Mir制作变形 

动画/ 

67本章小结/ 

Android中的3D动画 

71Camera 3D动画实现/ 

711Camera 3D实现图片旋转 

动画/ 

712Roate3dAnimation实现旋转 

图片动画/ 

713Rotate3D实现3D旋转 

动画/ 

714Camera与Matrix实现3D 

立方体/ 

72OpenGL ES/ 

721OpenGL ES基础/ 

722在Android中使用OpenGL 

ES/ 

723Android中OpenGL ES 

基本操作/ 

724OpenGL ES实现彩色旋转 

的立方体/ 

73本章小结/ 

HTML5动画 

81HTML5动画简介/ 

811canvas元素结合 

JavaScript/ 

8