迁移转变动画
运用Velocity.js，你能够疾速完成垂直和程度迁移转变动画。迁移转变能够与全部页面或元素相干。不管哪一种体式格局，都要在行将迁移转变到视图中的元素上挪用Velocity。
下面的demo运用两个链接：点击顶部链接将容器迁移转变到末了一部份，单击底部链接将容器迁移转变到第一部份。
由于两个链接的迁移转变行动雷同，为防备写反复的代码，将其组织成一个函数：
const scrolling = (element, container, direction) => {
let offsetDistance = 0;
direction === 'up' ? offsetDistance = -200 : 200;
Velocity(element, 'scroll', {
container: container,
duration: 500,
offset: offsetDistance,
easing: 'ease-out'
});
};element代表要迁移转变到视图中的元素，在这个demo中指的是第一个部份或末了一个部份，详细取决于迁移转变的方向。迁移转变的方向存储在
direction中。假如值为’up’，那末offsetDistance的值为-200px，即迁移转变到相对当前element向上偏移200px的位置，不然offsetDistance的值将为200px。offsetDistance将为Velocity的offset属性存储一个值，能够将目的迁移转变位置偏移指定的量。由于demo中的迁移转变不是相对于阅读器窗口，而是容器元素，上面的代码将这个信息存储在
container参数中。由于如许，将容器元素CSS的position属性设置为relative，absolute或fixed不起作用。
末了，经由过程挪用上面的函数来处置惩罚相干链接上的点击事宜。 比方，要迁移转变到末了一部份，您的事宜处置惩罚函数能够以下所示：
Link.addEventListener('click', (e) => {
e.preventDefault();
scrolling(lastSection, scrollerContainer, 'down');
});详细完成结果以下：
https://codepen.io/mengmengpr…
SVG动画
Velocity能够用一个number值对任何属性举行动画处置惩罚，包含运用于SVG的CSS属性，比方fill，stroke，stroke-width，stroke-color，rx，ry等。
有关Velocity能够操控的SVG属性完全列表，能够去这里检察。
下面的demo显现了一条笑容鱼的SVG图象。气泡淡入淡出，眼睛每隔几秒钟闪灼一次。假如单击播放按钮，鱼将挪动到其容器的左边，消逝，返回并迁移转变。
Bug alert：不幸的是，IE/Edge阅读器不支撑CSS的transform，而且Velocity没有为此毛病供应兼容性修补顺序。 因而，demo在这些阅读器中没法一般事情。
让SVG图象预备动画
在编写任何代码之前，请确保你的SVG图象能够运用Velocity.js举行动画。
将
class或id添加到行将动画的SVG。假如要将某些元素作为一个团体举行动画，请将元素包含在
<g></g>标签中简化和优化你的图形。
运用Velocity.js
下面是挪动鱼的代码：
const moveFish = (elem, moveBy, initialPos, btn, bool = false) => {
Velocity(elem, {
translateX: [moveBy, initialPos]
}, {
duration: 5000,
easing: 'linear',
complete: () => {
if (bool) {
btn.disable = false;
}
}
});
};剖析上面的代码：
挪用Velocity，并运用
forcefeeding设置translateX属性的值，该值决议了元素的终究和初始位置。当稍后挪用此函数时，供应的elem参数将是对SVG鱼的援用。只要在全部动画完毕以后，才运用Velocity.js内置的
complete()要领来激活“播放”按钮。这是为了防备用户在动画过程当中反复按下按钮，这将构建动画行列。动画完成后，播放按钮再次激活，用户能够挑选重播动画。此功用经由过程
bool参数完成。我们还运用了一个ES6特征功用：默许参数，即代码中的
bool = false。当你挪用moveFish()时，你能够挑选不输入响应的参数，由于设置的默许值将自动运用。或许，你能够经由过程显式输入参数来变动默许值。
要完成差别的挪动动画，在主函数内运用差别的参数屡次挪用moveFish()，以下所示：
const play = () => {
moveFish(fish, '-1000', 0, btnPlay);
moveFish(fish, 0, '-1000', btnPlay, true);
//能够继承挪用
};注重你挪用moveFish()的差别体式格局：第一次没有第五个参数，第二次第五个参数的值为true。在第一种情况下，第五个参数的值是您在构建moveFish()函数时供应的默许参数。
末了，只需在最先按钮的click事宜上挪用上面的play()函数即可。
能够尝尝做出来的结果哦：
https://codepen.io/mengmengpr…
Velocity UI Pack
我们称之为UI包。你能够用它来补充Velocity.js，这是一个大大提高了动画事情流程的插件。
你须要下载UI Pack而且在援用Velocity.js以后援用它。
你能够在UI Pack文档中看到能够获得的一切结果的列表。另外，你还能够注册本身的自定义结果。
鄙人面的demo中，我运用UI Pack在提交后隐蔽表单，并向用户显现胜利图标。
这是Velocity隐蔽表单的要领：
Velocity(formEl, 'transition.bounceUpOut', 500);第一个参数是要操纵的元素，在这个demo中即为表单。
第二个参数是UI Pack中的一个预定义殊效。
第三个参数是动画时长。
下面是详细的结果：
https://codepen.io/mengmengpr…
更多材料
这里另有一些进修Velocity.js的材料：
来自译者：
这篇文章大抵引见了Velocity.js，在阅读完后引荐先大抵阅读一遍官方文档，然后再本身动手写demo。
昨天宣布的上半部份被官博分享了，很高兴，以后会继承分享高质量文章的。喜好的话能够关注我或许我的微博，感谢支撑！
