imported>InternetArchiveBot：补救21个来源，并将0个来源标记为失效。) #IABot (v2.0.8.7

2022-05-18T14:25:18Z

补救21个来源，并将0个来源标记为失效。) #IABot (v2.0.8.7

新页面

{{not|速度|双威伟乐城}}
{{NoteTA|G1=IT}}
{{Infobox software
| name = Velocity
| author = Julian Shapiro
| latest release version = 1.4.3<ref>{{cite web |author=julianshapiro |url=https://github.com/julianshapiro/velocity/blob/master/README.md |title=velocity/README.md at master · julianshapiro/velocity · GitHub |publisher=Github.com |date= |accessdate=2017-03-17 |archive-date=2019-02-18 |archive-url=https://web.archive.org/web/20190218073236/https://github.com/julianshapiro/velocity/blob/master/README.md }}</ref>
| latest release date = 2017年2月16日<ref>{{cite web |url=https://github.com/julianshapiro/velocity/commits/master/package.json |title=History for package.json - julianshapiro/velocity · GitHub |publisher=Github.com |date= |accessdate=2017-03-17 |archive-date=2019-02-18 |archive-url=https://web.archive.org/web/20190218073236/https://github.com/julianshapiro/velocity/commits/master/package.json }}</ref>
| programming language = [[JavaScript]]
| operating system = [[跨平台]]
| platform = See [[Browser support]]
| status = Active
| genre = [[JavaScript函式庫]]、[[动画]]
| license = [[MIT許可證|MIT]]<ref name="github1">{{cite web |author=julianshapiro |url=https://github.com/julianshapiro/velocity/blob/master/LICENSE.md |title=velocity/LICENSE.md at master · julianshapiro/velocity · GitHub |publisher=Github.com |date=2014-10-09 |accessdate=2016-01-20 |archive-date=2018-10-01 |archive-url=https://web.archive.org/web/20181001173837/https://github.com/julianshapiro/velocity/blob/master/LICENSE.md }}</ref>
| website = {{URL|http://velocityjs.org}}
}}
'''Velocity'''是一个[[跨平台]]的[[JavaScript函式庫|JavaScript库]]，旨在简化网站动画的[[動態網頁|客户端脚本]]。<ref name="davidwalsh1">{{Cite web |url=http://davidwalsh.name/intro-javascript-animation |title=存档副本 |access-date=2018-06-02 |archive-date=2021-08-12 |archive-url=https://web.archive.org/web/20210812224417/https://davidwalsh.name/intro-javascript-animation }}</ref> Velocity是[[自由及开放源代码软件|自由、开源软件]]，用[[MIT許可證]]授权。<ref name="github1"/> 它是最流行的开源Web动画引擎。<ref>{{cite web |url=https://www.forbes.com/sites/alextaub/2015/06/18/major-contributor-to-open-source-technologies-julian-shapiro-pulls-back-the-curtains-on-saas-usage/ |title=Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage |publisher=Forbes.com |date= |accessdate=2016-01-20 |archive-date=2021-10-10 |archive-url=https://web.archive.org/web/20211010211720/https://www.forbes.com/sites/alextaub/2015/06/18/major-contributor-to-open-source-technologies-julian-shapiro-pulls-back-the-curtains-on-saas-usage/ }}</ref>

Velocity的语法旨在让为[[HTML]]和[[可縮放向量圖形|SVG]]元素创建复杂动画变得更加容易。<ref>{{cite web |url=http://www.studiowolf.com/blog/velocity-js-for-designers/ |title=Velocity.js for designers |publisher=Studio Wolf |date= |accessdate=2016-01-20 |archive-url=https://web.archive.org/web/20160306060754/https://www.studiowolf.com/blog/velocity-js-for-designers/ |archive-date=2016-03-06 |dead-url=yes }}</ref> Velocity除了在工作流程有上优势外，还提供了与基于[[层叠样式表|CSS]]的动画相媲美的动画性能。<ref name="davidwalsh2">{{Cite web |url=http://davidwalsh.name/css-js-animation |title=存档副本 |access-date=2018-06-02 |archive-date=2022-05-13 |archive-url=https://web.archive.org/web/20220513011515/https://davidwalsh.name/css-js-animation }}</ref> Velocity通过维护动画状态的内部缓存并最小化“布局[[Thrashing (computer science)|抖动]]”来实现其性能，这是[[网页浏览器]]在以较快速度进行视觉更新时所经历的不良行为。<ref name="davidwalsh2"/> 总而言之，其工作流程和性能优势使得Velocity能够用于复杂的动画编程，这些编程可以集成到网络和移动应用程序中。<ref>{{cite web |url=http://www.orbitinformatics.com/underrated-animation-engine-velocity-powerhouse-javascript-libraries/ |title=Velocity, the Powerhouse of JavaScript Libraries |access-date=2018-06-02 |archive-date=2020-11-09 |archive-url=https://web.archive.org/web/20201109030150/http://www.orbitinformatics.com/underrated-animation-engine-velocity-powerhouse-javascript-libraries/ }}</ref> 其广泛的浏览器和设备支持使其成为必须支持低功耗设备的大型企业分布的理想选择。<ref>{{cite web |author=Julian Shapiro |url=http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ |title=Incredibly Fast UI Animation Using Velocity.js |publisher=Sitepoint.com |date=2014-06-16 |accessdate=2016-01-20 |archive-date=2022-05-11 |archive-url=https://web.archive.org/web/20220511102553/https://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ }}</ref>

Velocity被用于驱动许多著名网站的用户界面，包括[[優步]]、[[三星集团|三星]]、[[WhatsApp]]、[[Tumblr]]、[[宏達國際電子|HTC]]、[[马自达]]和[[Microsoft Windows]]。<ref>{{Cite web |url=http://libscore.com/#$.Velocity |title=存档副本 |accessdate=2018-06-02 |archive-date=2016-03-14 |archive-url=https://web.archive.org/web/20160314070157/http://libscore.com/#$.Velocity |dead-url=no }}</ref> 它是代码托管服务[[GitHub]]上最受欢迎的项目之一。<ref>{{cite web|url=https://github.com/search?p=19&q=stars%3A%3E1&s=stars&type=Repositories |title=Search · stars:>1 · GitHub |publisher=Github.com |date= |accessdate=2016-01-20}}</ref> 2015年，Velocity被[[The Net Awards]]提名为“年度开源项目”。<ref>{{cite web |url=https://thenetawards.com/vote/open-source/velocity-js/ |title=Shortlist The Net Awards 2015 Celebrating the best in web design and development |publisher=Thenetawards.com |date= |accessdate=2016-01-20 |archive-url=https://web.archive.org/web/20160304035120/https://thenetawards.com/vote/open-source/velocity-js/ |archive-date=2016-03-04 |dead-url=yes }}</ref>

==功能==
Velocity的功能包括：<ref name="davidwalsh1"/>
* 浏览器窗口和元素滚动
* 独立于[[jQuery]]框架<ref>{{cite web |url=http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ |title=Animating Without jQuery – Smashing Magazine |publisher=Smashingmagazine.com |date=2014-09-04 |accessdate=2016-01-20 |archive-date=2015-06-26 |archive-url=https://web.archive.org/web/20150626100142/http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ }}</ref>
* 动画逆转（撤消前一个动画）和动画循环
* [[可縮放向量圖形|SVG]]元素动画<ref>{{Cite web |url=http://davidwalsh.name/svg-animation |title=存档副本 |access-date=2018-06-02 |archive-date=2022-05-08 |archive-url=https://web.archive.org/web/20220508032914/https://davidwalsh.name/svg-animation }}</ref>
* [[网页颜色|RGB]]与[[网页颜色|hex]]颜色动画
* [[层叠样式表|CSS]] transform属性动画
* 通过Velocity的UI Pack预先创建动画效果<ref>{{cite web |author= |url=http://www.webdesignermag.co.uk/use-velocity-js-to-apply-slick-app-like-motion-effects/ |title=Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer |publisher=Webdesignermag.co.uk |date=2015-01-21 |accessdate=2016-01-20 |archive-date=2016-07-08 |archive-url=https://web.archive.org/web/20160708222928/http://www.webdesignermag.co.uk/use-velocity-js-to-apply-slick-app-like-motion-effects/ }}</ref>
* 弹簧释放类型的基于物理学的运动
* 集成[[Future与promise]]

===浏览器支持===
Velocity支持所有主流桌面浏览器（[[Firefox]]、[[Google Chrome]]、[[Safari]]）以及[[iOS]]和[[Android]]移动操作系统。它可以支持到[[Internet Explorer]] 8和[[Android]] 2.3。<ref>{{cite web|url=http://julian.com/research/velocity/ |title=Velocity.js |publisher=Julian.com |date= |accessdate=2016-01-20}}</ref>

==用法==

===引入Velocity===
Velocity库是一个包含所有核心功能的JavaScript文件。它可以通过链接到本地副本或从公共服务器（如[[MaxCDN]]的[[jsDelivr]]和[[CloudFlare|Cloudflare]]的[http://www.cdnjs.com/ CDNjs] {{Wayback|url=http://www.cdnjs.com/ |date=20110125232824 }}）提供的许多副本中的一个包含在网页中。

<syntaxhighlight lang=html5>
<script src="velocity.min.js"></script>
</syntaxhighlight>

直接从内容交付网络中包含Velocity也是可能的。（以//开头的链接是[[统一资源定位符|协议相对URL]]）

<syntaxhighlight lang=html5>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
</syntaxhighlight>

===使用方式===

Velocity有两种使用方式：
* <code lang="jQuery">$.Velocity</code>函数，这是一个从[[jQuery]]根对象扩展的[[工厂方法]]。此方法使用原始[[文档对象模型|DOM]]元素而不是[[jQuery]]封装的元素进行动画处理。这是在没有jQuery的情况下使用Velocity的方式。
* <code lang="jQuery">$element.velocity()</code>函数。当页面上有jQuery时，用这种方式来给jQuery元素添加元素。

Velocity中的动画调用包括提供需要附加动画的元素、一个指定哪些[[层叠样式表|CSS]]属性需要附加动画的“动画属性映射”，还有一个可选的“options对象”来指定动画的设置（例如“duration”）。

===参数===

Velocity接受一个或多个参数。第一个参数可以是预定义的Velocity命令的名称（''scroll''或''reverse''），也可以是要进行动画的CSS属性的对象：

<syntaxhighlight lang=javascript>
// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });
</syntaxhighlight>

第二个参数是可选的，是一个对象。它用于指定动画选项，如持续时间（duration）、缓动（easing）和完成（complete）（动画完成后执行的任意函数）：

<syntaxhighlight lang=javascript>
// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });
</syntaxhighlight>

===链接===

要用Velocity创建一系列连续的动画，就要让目标[[jQuery]]元素对象一个接一个地调用''velocity()''：

<syntaxhighlight lang=javascript>
$element
.velocity({ height: 300 }, { duration: 1000 })
// Continue on to this animation once the previous one has completed
.velocity({ top: 200 }, { duration: 600 })
// And once more...
.velocity({ opacity: 0 }, { duration: 200 });
</syntaxhighlight>

===滚动和逆转===

滚动的话，就要在第一个参数传''scroll'' — 代替典型的CSS属性映射：

<syntaxhighlight lang=javascript>
// Scroll with a duration of 750ms
$element.velocity("scroll", { duration: 750 });
</syntaxhighlight>

浏览器随后会向下滚动到Velocity被调用的元素的顶部边缘。

动画逆转，就要在第一个参数传''reverse''：

<syntaxhighlight lang=javascript>
// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");
</syntaxhighlight>

Velocity的''reverse''命令默认是针对之前一个调用的。如果传新的参数的话，就会扩展前一个动画（改变其option）：

<syntaxhighlight lang=javascript>
$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });
</syntaxhighlight>

==历史==
Velocity由Julian Shapiro开发，旨在解决缺乏高性能和面向设计者的[[JavaScript]]动画库的问题。<ref>{{cite web |last=Team |first=Awwwards |url=http://www.awwwards.com/interview-with-julian-shapiro.html |title=Interview with Julian Shapiro |publisher=Awwwards.com |date= |accessdate=2016-01-20 |archive-date=2021-04-17 |archive-url=https://web.archive.org/web/20210417052948/https://www.awwwards.com/interview-with-julian-shapiro.html }}</ref><ref>{{cite web |last=Shapiro |first=Julian |url=https://hacks.mozilla.org/2014/05/open-source-marketing-with-velocityjs/ |title=Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog |publisher=Hacks.mozilla.org |date=2014-05-21 |accessdate=2016-01-20 |archive-date=2021-08-27 |archive-url=https://web.archive.org/web/20210827235746/https://hacks.mozilla.org/2014/05/open-source-marketing-with-velocityjs/ }}</ref> [[Stripe]]是一家颇受欢迎的以[[網頁開發者|Web开发人员]]为中心的互联网技术公司，为Shapiro提供经济上的资助，让他可以继续专职开发Velocity。<ref>{{cite web |author=Greg Brockman |url=https://stripe.com/blog/open-source-retreat-grantees |title=Open-Source Retreat grantees |publisher=Stripe.com |date=2014-06-06 |accessdate=2016-01-20 |archive-date=2021-06-22 |archive-url=https://web.archive.org/web/20210622183635/https://stripe.com/blog/open-source-retreat-grantees }}</ref>

Velocity内部动画引擎性能较高，对重新推广基于JavaScript的网络动画起到了积极作用；这个领域在之前由于基于CSS的动画的出现而一度失去人们的关注，因为基于CSS的动画在速度上超越了对动画缺乏关注的以前一些JavaScript库。<ref>{{cite web |author=Aurelio De Rosa |url=http://www.sitepoint.com/easily-improving-jquery-animations/ |title=Easily Improving jQuery Animations |publisher=Sitepoint.com |date=2014-06-23 |accessdate=2016-01-20 |archive-date=2021-05-17 |archive-url=https://web.archive.org/web/20210517043140/https://www.sitepoint.com/easily-improving-jquery-animations/ }}</ref>

2014年9月，Shapiro发布了Velocity Motion Designer，这是一个在现成的网站上设计动画的工具，可以实时导出生成的动画代码，以便在[[集成开发环境|IDE]]中随后使用。<ref>{{cite web |author=Remix this video |url=https://www.youtube.com/watch?v=7IxhIMIdkPs |title=Velocity Motion Designer: Overview |publisher=YouTube |date=2014-09-06 |accessdate=2016-01-20 |archive-date=2021-07-22 |archive-url=https://web.archive.org/web/20210722161952/https://www.youtube.com/watch?v=7IxhIMIdkPs }}</ref> 2015年3月，[[Peachpit]]发布了Shapiro的《使用JavaScript的网页动画》（Web Animation using JavaScript）一书，该书教导了使用Velocity开发网页动画的入门和高级原则。<ref>{{citation needed|date=December 2016}}</ref> 截至2015年中期，Velocity继续由Shapiro专职开发和维护。<ref>{{Cite web |url=https://github.com/julianshapiro/velocity/graphs/contributors |title=存档副本 |access-date=2018-06-02 |archive-date=2020-10-31 |archive-url=https://web.archive.org/web/20201031063509/https://github.com/julianshapiro/velocity/graphs/contributors }}</ref>

Velocity除了在专业企业环境中的使用外，它还广泛用于[[網頁程式設計|Web开发]]实验和初学者练习。

==参见==
{{Portal|free software}}
* [[D3.js]]
* [[Raphaël (JavaScript library)|Raphaël]]
* [[Three.js]]
* [[jQuery]]

==延伸阅读==
* [http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ Animating without jQuery] {{Wayback|url=http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ |date=20150626100142 }}
* [http://www.creativebloq.com/web-design/use-velocity-add-animations-61515280/ How to use Velocity to easily add animations] {{Wayback|url=http://www.creativebloq.com/web-design/use-velocity-add-animations-61515280/ |date=20210227002832 }}
* [http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ Fast UI animation using Velocity.js] {{Wayback|url=http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ |date=20220511102553 }}

==外部链接==
* {{Official website|//velocityjs.org}}
* [https://web.archive.org/web/20171220233443/https://codepen.io/collection/tIjGb/ Velocity demo gallery]

==参考文献==

{{Reflist}}

[[Category:JavaScript函式庫]]
[[Category:AJAX]]
[[Category:使用MIT许可证的软件]]
[[Category:2014年软件]]
[[Category:用JavaScript編程的自由軟體]]

Velocity - 版本历史

imported>InternetArchiveBot：​补救21个来源，并将0个来源标记为失效。) #IABot (v2.0.8.7

imported>InternetArchiveBot：补救21个来源，并将0个来源标记为失效。) #IABot (v2.0.8.7