Web Animation Using Javascript part one
##第二章：Velocity.js动画## 在这一章，你将学到由Velocity.js提供的特性，指令，和选项。如果你熟悉基于jQuery的动画，那么你已经知道如何使用Velocity.js了；它的功能几乎和jQuery的$.animate()函数一模一样。 不过抛开你现有的知识，本章中对特性的井井有条的分类将会向你介绍动画引擎行为的细微差别。掌握这些细微差别将会帮助你从新手成为专业人士。即使你已经对jQuery动画和Velocity.js相当熟悉了，也给自己一个机会，快速浏览本章。你必定会发现一些你没意识到的可行之事。 ###JavaScript动画库类型### JavaScript动画库有很多类型。有些在浏览器中重现物理接触效果。有些使WebGL和Canvas动画更容易维护。有些专注于SVG动画。有些改善了UI动画————最后这种类型正是本书的重点。 两种广受欢迎的UI动画库是GSAP和Velocity。你将在本书中使用Velocity，因为它在MIT许可下是免费的，外加它拥有极其强大的功能以供编写整洁且富有表现力的动画代码。Velocity被很多知名站点使用，包括Tumblr，Gap，还有Scribd。 噢，而且它是由本书的作者创造的！ ###安装jQuery和Velocity### 你可以从jQuery.com下载jQuery，从VelosityJS.org下载Velosity。在你的页面上使用它们——和任何JavaScript库一样——简单地把指向相应库文件的<script> </script> 标签放在你页面的</body>标签之前。如果你想链接预部署版本的库文件（而不是你电脑上的本地拷贝），你的代码看起来可能是这样： <html> <head>My Page</head> <body> My content. <script src=”//code.jquery.com/jquery-2.1.1.min.js”> </script> <script src=”//cdn.jsdelivr.net/velocity/1.1.0/ velocity.min.js”> </script> </body> </html> 当一起使用jQuery和Velocity时，在Velocity前引入jQuery。 这就对了！现在你已经准备好了。 ##使用Velocity:基础## 为了熟悉Velocity，我们将从基本的组件开始：参数，属性，值，和链式调用。因为jQuery几乎无所不在，看看Velocity和jQuery的关系也是有必要的。 ###Velocity和jQuery### Velocity可以独立于jQuery运行，但是二者可以一起使用。一般我们推荐这么做来获得jQuery的链式调用能力：当你已经使用jQuery预选择了一个元素，你可以调用.velocity()来拓展它从而施加动画效果： // 把jQuery元素对象赋值给一个变量 var $div = $(“div”); // 使用Velocity对元素施加动画 $div.velocity({ opacity: 0 }); 这种语法和jQuery自带的animate函数一模一样： $div.animate({ opacity: 0 }); 本书所有的例子都使用Velocity和jQuery的结合，因此可以使用这种语法。 ###参数### Velocity接收多个参数。第一个参数是一个映射CSS属性到其最终值的对象。属性及其接收值的类型直接与CSS中使用的相对应（如果你不熟悉基础的CSS属性，在读这段代码之前读一本HTML和CSS的介绍性书籍）： // 对元素施加动画使width变为“500px”，opacity变为1。 $element.velocity({ width: “500px”, opacity: 1 }); – Tip 在JavaScript中，如果你将要提供一个包含字母（而不是只有整数）的属性值，把属性值放在引号中。 你可以传递一个指定了动画选项的对象作为第二个参数。 $element.velocity({ width: “500px”, opacity: 1 }, { duration: 400, easing: “swing” }); 这里也有一个简写的参数语法：你可以使用逗号分隔语法，而不是传递一个包含选项的对象作为第二个参数。这要求以任何逗号分隔的顺序列出动画时长的值（接收一个整数），缓动模式（一个字符串），以及回调函数（一个函数）。（你一会将会学到这些选项的作用。）...