velocity.js_使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery）

最新推荐文章于 2024-04-15 09:45:11 发布

dingshi7798

最新推荐文章于 2024-04-15 09:45:11 发布

阅读量184

点赞数

文章标签： python java javascript js 人工智能 ViewUI

原文链接：https://www.sitepoint.com/how-to-use-velocity-js-without-jquery/

版权

velocity.js

以Velopity速度启动和运行Velocity.js（无需jQuery）

我要特别感谢James Hibbard和Velocity背后的开发人员对本文的审阅。 还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。

在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（Julian Shapiro）提供的快速而强大JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网站更具交互性和用户友好性。所有这些都无需使用jQuery，仅使用普通JavaScript。

这是“ 超越CSS：动态DOM动画库 ”系列中的第三篇文章。

这是我已经介绍的内容：

使用Anime.js对DOM进行动画处理将介绍如何在网络上最好地使用动画，以及何时可以考虑使用JavaScript动画库而不是仅CSS动画。然后重点介绍Anime.js，这是一个免费的轻量级JavaScript动画库
带有KUTE.js的有趣动画效果向您介绍了KUTE.js，这是一个免费的功能丰富JavaScript动画库。

您可以使用Velocity.js制作动画

Velocity.js是一个功能强大的库，使DOM触手可及！它可以动画：

CSS动画属性的数值，包括颜色
变身
SVG属性
相对于页面或页面内部容器元素的滚动事件
淡入淡出和幻灯片动画。

通常，Velocity一次为一个数字属性值设置动画。例如，如果您想同时沿X和Y坐标平移元素，则不能使用诸如translate['10px', '15px'] 。相反，您应该将translate属性与其相应的轴一起使用，如下所示： translateX: '10px', translateY: '15px' 。有一项功能称为forcefeeding ，Velocity可让您同时指定两个值。我将在本文后面介绍强制进给。

选件

Velocity的options对象使您在制作动画时具有很大的灵活性。

这是您将在本文的演示中看到的选项列表：

持续时间 ：每个动画持续多长时间。持续时间的度量单位是毫秒
缓动：Velocity支持大多数jQuery UI缓动类型，CSS3缓动，即“缓动”，“缓入”，“缓动”和“缓入”，贝塞尔曲线，阶梯缓动，甚至凉爽的弹簧物理。您可以播放此演示，以查看实际的“弹簧物理”选项
循环：动画应重复多少次。如果将此选项设置为true ，它将无限期运行
延迟：动画开始前要等待多长时间。

完整的选项列表可在Velocity的docs页面上找到。

句法

如果您是jQuery用户，则Velocity.js可让您轻松完成工作。实际上，Velocity具有与jQuery相同的API。开始：

下载速度，包括它在网页上，并更换jQuery的所有实例$.animate()与$.velocity()

Velocity.js文件

但是，您不需要jQuery即可使用Velocity，并且您不会在本文的演示中使用jQuery。语法将与包含jQuery时使用的语法有所不同。看起来是这样的：

Velocity(element, {property: value}, {option: optionValue});

要将另一个动画链接到同一元素上，只需在上一个动画之后添加另一个Velocity调用即可：

Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});

要将动画同时应用于多个元素，只需将所有元素缓存到一个变量中，然后对该变量调用Velocity，而无需编写自己的循环。例如：

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});

您可以使用px ， % ， rem ， em ， vw/vh和deg 。如果您不添加单位，则Velocity会为您假设一个合适的单位，通常为px 。

Velocity还支持通过+ ， – ， *和/进行的运算以及相对数学运算，方法是在每个运算符之后添加一个等号（ = ），例如'+=3em'

Velocity.js强制进给：传递初始值

您可以使用以下语法自行设置它，而不是让Velocity.js查询DOM来获取元素的初始值：

Velocity(element, {
  translateX: [endValue, startValue],
  backgroundColor: [endValue, easing, startValue]
}, {
  //options here
});

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

在这种情况下，您传递了两个（可选为三个）项目的数组：

第一项是动画最终状态的值
第二个可选项是应用于该特定属性的缓动选项
补间的开始状态 ，即在动画开始时为该特定属性显式设置的值，是数组中的最后一项 。

您可以在Velocity的docs上阅读有关强制进给的更多信息。

控制Velocity.js动画

您可以使用以下语法停止，暂停，撤消和恢复元素上的所有Velocity调用：

停止： Velocity(elem, 'stop');
暂停： Velocity(elem, 'pause');
反转： Velocity(elem, 'reverse');
恢复： Velocity(elem, 'resume');

掌握了这些基本说明后，您就可以开始研究一些实际示例了。

演示：落球

从页面顶部落下一个简单的球开始。

const ball = document.querySelector('.ball');

Velocity(ball, {
  translateY: '130px'
}, {
  easing: [1000, 20],
  duration: 2000
});

上面的代码选择一个类为.ballHTML元素，并在2秒钟内沿Y轴将其平移130px（仅出于演示目的，否则我建议使用更短的持续时间），并随着其下落而加速，并在结束。

您可以使用Velocity spring physics作为缓动选项的数组值快速实现此目的：第一个数组项表示张力，第二个数组项表示摩擦力 。 较高的张力值会增加总速度和弹性（默认值为500）， 较低的摩擦值会增加最终的振动速度（默认值为20）。

有趣的是，使球的背景色从蓝色的初始值变为深色的动画。要设置背景色的初始值，您需要使用Velocity.js forcefeed ：

Velocity(ball, {
  translateY: '130px',
  //array items: endValue, startValuebackgroundColor : ['#222', '#043d99']
}, {
  //options here
});

这就是Velocity.js的基本实现。玩下面的代码：

请参阅CodePen上的SitePoint （ @SitePoint ）的Velocity.js提供的Pen Simple下降球。

演示：按钮控制的弹跳球

对于下一个演示，目标是创建以下动画序列：

球从顶部掉落
撞到地面时看起来有点压扁
弹起后会恢复其自然形状
这个动画不断循环
单击按钮即可停止并重新启动循环动画。

要实现这种动画，需要将多个补间串联在一起，并使用按钮来整体控制其动画。

理想的工具是一个时间表，该时间表应包含所有补间，并可以控制所有补间的开始和结束时间。 Velocity.js没有本地时间轴，但是您有两个选择：

使用Tweene-这是一个动画代理 ，即可以与许多JavaScript动画库（包括Velocity.js）一起使用的包装器。我已经尝试过这条路线，但是不幸的是，Tweene希望Velocity可以与jQuery一起使用，在这里情况并非如此。也许您可以调整Tweene的代码，但这并不理想
诉诸JavaScript requestAnimationFrame() ，在撰写本文时，除Opera Mini以外的所有主要浏览器均支持该功能。这是一个本机API，用于在浏览器环境中运行任何类型的平滑，高性能的动画，例如CSS，canvas等，这是每次需要这种功能时都会在这里使用的方法。

将补间分割为不同的功能

为了保持代码的清洁，可以为所需的动画场景构建一个函数。然后，您将在我称为master函数的内部调用这些函数，其中master函数包含requestAnimationFrame()方法。

这是代码：

const changeBallPosition = (elem, propVal, easingVal, durationVal) => {
  Velocity(elem, {
    translateY: propVal
  }, {
    easing: easingVal,
    duration: durationVal
  });
};

const changeBallWidth = (elem, propVal, easingVal, durationVal) => {
  Velocity(elem, {
    scaleX: propVal
  }, {
    easing: easingVal,
    duration: durationVal
  });
};

上面的代码段包含有关如何编写ES6箭头函数的示例。您需要摆脱关键字function ，而在括号后使用粗箭头符号（ => ）。

的功能被存储在使用恒定的 const关键字。如果不跳得太深，可以说您无法更新常量的值。如果您需要存储需要在整个程序中进行更新的值，请使用let代替。要了解更多信息， ES6让 Wes Bos的VS const变量读起来很棒。

如您所见，每个函数都包含一个Velocity调用，该调用使球执行特定的运动。注意，要移动球并更改其宽度，代码不会分别更改CSS top和width属性值。而是，它更改了translate和scale属性的值，从而带来了性能更高的动画。

这是计时器的主要功能。在这里，您可以调用上面的函数：

let animationFrameID;

const launchBall = (elem) => {
  changeBallPosition(elem, '130px', 'easeInQuart', 300);
  changeBallWidth(elem, 1.2, 'linear', 50);
  changeBallWidth(elem, 1, 'linear', 50);
  changeBallPosition(elem, '-10px', 'easeOutQuart', 300);
  changeBallWidth(elem, 1, 'linear', 50);
  animationFrameID = requestAnimationFrame(
    () => {
      launchBall(elem);
    });
};

注意全局animationFrameID变量。在代码的稍后部分，您将需要此变量来使用cancelAnimationFrame()停止动画，所以请继续！

要使球运动，请通过调用launchBall()函数并将ball参数传递给Play按钮来处理“ 播放”按钮的click事件：

btnPlay.addEventListener('click', function() {
  launchBall(ball);
  this.disabled = true;
  btnStop.disabled = false;
});

请注意，这一次您如何使用function关键字编写处理click事件的回调。之所以如此，是因为您正在使用this关键字来引用所单击的按钮，即this.disabled = true; 。如果使用箭头功能，则this关键字将引用全局window对象，这将导致错误并阻止您获得所需的结果。简而言之，不要在带有动态上下文的回调函数中使用箭头函数。

触发动画后，您不需要用户继续单击“ 播放”按钮，因此下一行代码将禁用它，同时启用“ 停止”按钮，以便用户可以随时停止动画。

要停球，您需要一个新功能：

const removeAnimFrame = () => {
  if (animationFrameID) {
    cancelAnimationFrame(animationFrameID);
  }
}

在这里，您通过传递animationFrameID 来放置对cancelAnimationFrame()的调用，您还记得，该cancelAnimationFrame()包含对球的循环动画的引用。

最后，这是处理“ 停止”按钮的click事件的方式：

btnStop.addEventListener('click', function() {
  removeAnimFrame();
  Velocity(ball, 'stop', true);
  this.disabled = true;
  btnPlay.disabled = false;
});

这段代码：

删除循环动画
调用Velocity(ball, 'stop', true); 停止动画
禁用播放按钮
并恢复“ 停止”按钮的功能。

代码中有趣的一点是调用Velocity.js stop()方法以及一个附加的布尔值（true或false）。这是清除动画队列所必需的。如果忽略该参数并单击“ 停止”按钮，则球将不会立即停止动画。仅当所有排队的Velocity调用完成执行后，它才会停止动画处理（请参阅Velocity.js文档中Stop部分中的Clearing Animation Queue ）。

观看演示以查看整个代码：

见笔与速度控制JS反弹球由SitePoint（ @SitePoint上） CodePen 。

滚动动画

使用Velocity.js，您可以快速实现垂直和水平滚动动画。滚动可以相对于整个页面或一个包含元素。无论哪种方式，您总是在要滚动到view的元素上调用Velocity 。

下面的演示使用两个链接：单击顶部链接将容器滚动到最后一部分，单击底部链接将容器滚动到第一部分。

由于两个链接的滚动动作相同，因此为避免重复两次相同的代码，请将其组织为一个函数。看起来是这样的：

const scrolling = (element, container, direction) => {
  let offsetDistance = 0;
  direction === 'up' ? offsetDistance = -200 : 200;
   //velocity call
   Velocity(element, 'scroll', {
    container: container,  
    duration: 500, 
    offset: offsetDistance, 
    easing: 'ease-out'
  }); 
};

element参数代表要滚动到视图中的元素，在这种情况下，第一部分或最后一部分，取决于滚动方向
方向存储在direction参数中，其功能由三元运算符的工作方式确定。特别是：如果direction值为'up'（ direction === 'up' ? ），则offsetDistance值为-200px，这会将页面移动到要滚动到视图中的元素上方200px（ offsetDistance = -200 ），否则offsetDistance的值将为200px（ : 200 ），这会将页面滚动到要滚动到视图中的元素下方200px处。 offsetDistance参数将存储Velocity的offset选项属性的值，该值使您可以将目标滚动位置偏移指定量（以像素为单位）
因为演示中的滚动与浏览器窗口无关，而是与包含元素有关，所以Velocity调用需要该信息，该信息在上面的代码中存储在container参数中。也正因为如此，将contains元素CSS position属性设置为relative ， absolute或fixed ； static不起作用。

最后，您可以通过调用上面的函数来处理相关链接上的click事件。例如，要滚动到最后一部分，您的事件处理程序可能看起来像这样：

Link.addEventListener('click', (e) => {
  e.preventDefault();
  scrolling(lastSection, scrollerContainer, 'down');
});

这是完整的代码：

请参阅CodePen上的SitePoint （ @SitePoint ）使用Velocity.js滚动的笔页面。

SVG动画

Velocity可以为具有单个数字值的任何属性设置动画，包括应用于SVGCSS属性和SVG特定的属性，例如fill ， stroke ， stroke-width ， stroke-color ， rx ， ry等。

有关Velocity.js可以制作动画的SVG属性的完整列表，请查看SVG动画上的Velocity文档。

下面的演示显示了一条微笑鱼的SVG图像。气泡淡入淡出，每隔几秒钟眨眼一次。如果单击“ 播放”按钮，鱼将移至其容器的左侧，消失，返回并转身。

错误警报 ：很遗憾，IE / Edge浏览器不支持CSS转换，并且Velocity不提供此错误的兼容性修复。因此，该演示在这些浏览器中无法正常运行。

使您的SVG图像准备好动画

在编写任何代码之前，请确保已准备好使用Velocity.js对SVG图像进行动画处理。

将类别或ID属性添加到您计划进行动画处理的SVG的各个部分。这将使您轻松定位JavaScript中的这些部分
如果要整体上对某些元素进行动画处理，请将thos元素包装在<g></g>标记内，并拍打class属性或ID属性，以便在JavaScript代码中轻松操作
简化和优化您的图形。

Velocity.jsJavaScript代码

再次将大多数代码打包到函数中，以提高灵活性和减少重复。

例如，这是移动鱼的函数：

const moveFish = (elem, moveBy, initialPos, btn, bool = false) => {
  Velocity(elem, {
  translateX: [moveBy, initialPos]
}, {
    duration: 5000,
    easing: 'linear',
    complete: () => {
      if(bool) {
        btn.disabled = false;
      }
    }
  });
};

SVG动画的语法与动画HTML元素没有什么不同。这是上面的代码更详细地执行的操作：

该代码对元素进行Velocity调用，并使用强制进给来设置translateX属性的值，该值确定元素的最终位置和初始位置。以后调用此函数时，将为element参数提供的参数将是对SVG鱼的引用
仅在整个动画结束后，才利用Velocity.js内置的complete（）方法激活“ 播放”按钮。这是为了防止用户在动画过程中反复按下按钮，否则会建立动画队列
动画结束并再次激活“ 播放”按钮后，用户可以根据需要选择重播动画。此功能通过bool参数起作用。如果值bool为真时moveFish()函数被调用时，本地Velocity.js内完整（）方法moveFish()在动画结束火灾和重新激活按钮
最后，请注意另一个ES6特定功能，即默认参数 。设置默认值，在这种情况下为bool = false ，并且在调用moveFish()时可以选择省略相应的参数，因为设置为默认值的设置将自动应用 。或者，您可以通过显式输入参数来更改默认值。要实际操作，请注意下一部分代码，其中包含对上面函数的调用。

要实现不同的移动动画，请使用master函数内部的不同参数多次调用moveFish() ，如下所示：

const play = () => { 
  moveFish(fish, '-1000', 0, btnPlay);
  moveFish(fish, 0, '-1000', btnPlay, true);
  //more functions here
};

请注意调用moveFish()的不同方式：第一次不带第五个参数，第二次不带第五个参数，其值为true 。在第一种情况下，第五个参数的值是编写moveFish()函数时提供的默认参数。

最后，只需在“ 播放”按钮的click事件上调用play()函数：

btnPlay.addEventListener('click', function() {
  this.disabled = true;
  play();
});

要观看动画的所有片段，请尝试以下演示，尽享乐趣。

请参阅CodePen上的SitePoint （ @SitePoint ）的带有Velocity.js的Pen SVG动画。

速度UI包

您可以使用Velocity UI Pack对Velocity.js进行补充，Velocity UI Pack是一个可以大大改善动画工作流程的插件。

您需要下载UI包并在主Velocity.js库下面引用它。

这个插件可以访问很酷的预先注册的效果，例如bounceIn / Out ， screwIn / Out ， fadeIn / Out等。您可以在UI Pack文档中查看可以立即使用的所有效果的列表。最重要的是，您还可以注册自己的自定义效果。

在下面的演示中，我使用Velocity.js UI Pack在提交后隐藏表单，并向用户显示成功图标。

这是隐藏表单的Velocity调用的样子（在hideForm()函数内部）：

Velocity(formEl,'transition.bounceUpOut', 500);

第一个参数是您要设置动画的元素，即这种情况下的形式
第二个参数是UI Pack的预注册效果之一 ，即bounceUpOut （效果分为过渡和标注，您可以在效果前加上适当的类别）
最后一个是动画的持续时间 。

请查看下面的演示以获取所有详细信息：

请参阅CodePen上带有 SitePoint（ @SitePoint ）的Velocity.js UI包的“钢笔动画”注册表单。

结论

在本文中，我介绍了Velocity.js，并展示了如何在没有jQuery依赖的情况下使用它。

我发现该库的语法直观且易于使用，对于那些熟悉jQuery库的人而言更是如此。文档非常详尽，并提供大量演示来说明每个功能。

以下是一些注意事项，与在不使用jQuery的情况下使用Velocity.js和SVG动画有关：

Velocity.js UI Pack公开了一个名为$.Velocity.RunSequence()的函数，该函数将多个Velocity调用合并为一个效果，您可以按名称进行引用。当处理更复杂的动画序列时，此功能将非常方便。不幸的是，如果没有jQuery，我无法使其正常运行
这样一个功能强大的库将从提供时间表中受益。使用Tweene本来可以是一个解决方案，但是同样，没有jQuery的Tweene和Velocity之间的集成也不是那么简单
在SVG上使用Velocity时，没有为IE / Edge浏览器提供对CSS转换的不支持的修复程序是我的一个限制因素。

该项目的开发人员将来很可能会解决以上问题。同时，请记住，Velocity.js是开源的。因此，如果您能想到任何增强功能或发现错误，则可以选择发送拉取请求或在GitHub上Velocity.js存储库的问题部分中留下评论。

您是否已将Velocity.js用于动画项目？ 您的经历如何？ 您想分享任何动画吗？ 使用下面的评论框告诉我们。

鸣谢：对于SVG演示，该图形是来自png的金鱼的改编版，特色图像由Unsplash提供，最后一个演示中的女摄影师图像由Gratisography提供

翻译自: https://www.sitepoint.com/how-to-use-velocity-js-without-jquery/

velocity.js

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
velocity.js_使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery）

velocity.js 我要特别感谢James Hibbard和Velocity背后的开发人员对本文的审阅。还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（Julian Shapiro）提供的快速而强大JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网...
复制链接

扫一扫