第23页
那么linear、ease-in、ease-out、ease-in-out的基本函数图像就变成了如下形式（如图3-5、图3-6、图3-7、图3-8所示）。
图3-5 linear的基本函数图像
图3-6 ease-in的基本函数图像
图3-7 ease-out的基本函数图像
图3-8 ease-in-out的基本函数图像
它们显然分别对应了从出发点匀速直线运动到终点、从出发点逐步加速运动到终点、从出发点逐步减速运动到终点和从出发点先加速后逐步减速到终点。
如果你能记住贝塞尔曲线表示式的几个已知点关系，而且能完全理解缓动函数图像，那么对于接下来学习各类交互图文、H5 动画、视频制作,你就有了非常扎实的动态理论基础知识。本书其后在提及缓动函数（包括展开表达式）说明已知点时，将不再具体解释。
部分缓动函数及其贝塞尔曲线公式如下。
easeInSine：cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine：cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine：cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad：cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad：cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad：cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic：cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic：cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic：cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart：ubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart：cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart：cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint：cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint：cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint：cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo：cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo：cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo：cubic-bezier(1, 0, 0, 1)
easeInCirc：cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc：cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc：cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack：cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack：cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack：cubic-bezier(0.68, -0.55, 0.265, 1.55)
cubic-bezier是能够快速自定义缓动贝塞尔曲线并将其导出的在线工具。
SVG交互图文设计
SVG交互图文设计作为由JZ多媒体解决方案与微信团队联合制定的一种微信图文交互排版，首次在图书中向运营者发布。
SVG拥有较久的技术发展过程，在新媒体领域尤其微信公众平台焕然新生，被誉为“新媒体排版中的最高殿堂”。目前，如腾讯、京东等电商品牌，奔驰、吉利、起亚等汽车品牌，VIVO、一加、华为等手机品牌，爱马仕等奢侈品品牌都已经发布过这种高阶微信公众平台交互图文设计，充分证明了其强大的新媒体品牌运营能力。
目前能深耕SVG交互的行业大咖，无不拥有交互设计师的头衔。因为SVG交互设计涉及创意、前端、排版、设计、交互和动画等技能，当你能习得它时，你就成了一名全栈新媒体人。
技术背景与发展历史
在以XML为主要本地框架的时代，SVG就已经诞生了。到了HTML时代，它进一步发光发热，在提高页面加载速度、优化页面视觉效果、解决页面交互设计方面都发挥了巨大作用。
从XML到HTML，SVG表现形态上的两大代表就是PPT和H5营销，前者是本地化展示的通用解决方案，后者是在线展示的当今最佳平台。而同时，它们共同基于CSS层叠样式完成渲染，当然XML对应CSS，HTML5对应CSS3。
不过在HTML刚出现的时候，习惯编辑XML的程序员并不完全适应HTML的写作规则，往往在HTML中写出XML的语句，因此具有兼容性的XHTML一度被大家广泛使用。SVG作为穿越XML和HTML的交互图像格式，语法上依然保留了大量XML框架下的CSS语言。这就是为何SVG虽然在微信公众平台交互式图文中也可以被书写进去，但具体写法和CSS3之间又存在诸多不同的缘故。
图3-9 CSS3和SVG中两种截然不同的书写
比如同样实现一个圆形结构，在CSS3和SVG中是截然不同的（如图3-9所示）。CSS中的圆本质上是一个圆角半径等于宽度圆角矩形，因而在视觉上被强制显示为圆形效果；SVG中的圆由明确的圆心、半径等直观参数组成，书写的样式元素也有所不同。我们依然可以认为，SVG是使用XML描述二维图形和绘图程序的语言。
2016年，笔者与微信团队合作，对微信公众平台图文框架内的SVG交互规则进行了白名单设定。白名单的意义在于优化SVG动画与交互在图文中的表现，剔除部分对图文打开形成过高运行压力的SVG效果。此后，各大第三方新媒体编辑器纷纷响应，依据笔者的白名单更新了一系列基础效果模板。
从画布开始创作
SVG的知识系统庞大而复杂，尤其在没有白名单之前，入门路径更是令人迷茫。虽然W3C在官网上早已公开SVG的全部技术细节，但是本书希望给读者提供一种更快的学习路径。接下来，请准备好必备的软件，尤其建议在Sublime Text或Dreamweaver等软件中开始我们的项目。
摊开一张画布
将SVG的交互设计想象成作画的过程。
作画的第一步，我们需要什么？自然是需要一块画布。所以我们遵从HTML的代码闭合规范，可以先写下如下代码，表示我们准备置放一个SVG画布。
不过现在，仅描述了存在一个画布，但是并没有说明画布的尺寸。以最直观的方式，我们可以通过高（Height）和宽（Width）定义画布的尺寸。