Velocity.js简明运用教程（中文版上）

2024年2月3日 171次阅读 来源: 蒙朦

本文翻译自https://www.sitepoint.com/how…

在本文中，我将引见Velocity.js，这是一个疾速，高性能的JavaScript动画引擎。当您浏览完一切的demo时，您能够运用Velocity.js建立本身的动画，并使您的网站更具互动性和用户友好性。本文所讲内容不运用jQuery。

Velocity.js功用概览

Velocity.js是一个功用强大的库，它将DOM置于你的指尖！它的动画涵盖：

  • CSS动画属性的数值，包括色彩

  • Transform（变更）

  • SVG属性

  • 转动事宜，相关于页面或页面中的容器元素

  • 淡入淡出动画

一般来说，Velocity一次能够操控一个数值属性值的动画。
比方，假如要沿X和Y坐标挪动元素，则不能运用translate['10px', '15px']。 相反，应当将translate属性与其响应的轴连系在一起，如：translateX：'10px'，translateY：'15px'。
Velocity有一个功用称为forcefeeding，它能够让你同时指定两个值。 将在本文背面引见这个功用。

设置项

Velocity的设置项在制造动画时赋予了相称的灵活性。

以下是本文的demo中将会看到的设置项：

  • Durantion：每一个动画延续的时刻，丈量单元为毫秒。

  • Easing：Velocity支撑大多数的easing范例。ease，ease-in，ease-out, ease-in-out，贝塞尔曲线，以至是很酷的物理弹簧结果。 能够在这个demo中检察弹簧结果：https://codepen.io/mengmengpr…。

  • Loop：动画应当反复的次数。假如将此选项设置为true，它将无限期运转。

  • Delay：动画最先之前的耽误时长。

悉数的设置项能够在Velocity的官网检察，此处也附上Velocity中文网站。

语法

假如你运用jQuery，Velocity.js能够轻松上手。 事实上，Velocity与jQuery具有雷同的API：
下载Velocity，引入你的项目，然后将$.animate()替换成$.velocity()

然则，你也能够不必jQuery来运用Velocity，而且本文中的demo也将不运用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。

forcefeeding功用：通报初始值

这个功用能够让你不必Velocity.js查询DOM以猎取元素的初始值，而运用以下语法自行设置：

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

在上面的代码中，translateX和backgroundColor离别设置了一个数组：

  • 第一个值代表动画的完毕状况。

  • 第二个值（可选）是特定属性的easing选项。

  • 第三个值等于指定动画的肇端状况。

你能够去这里浏览更细致的forcefeeding。

掌握Velocity.js动画

您能够运用以下语法住手，停息，反向以及恢复元素上的一切Velocity挪用：

  • 住手：Velocity(elem, 'stop')；

  • 停息：Velocity(elem, 'pause')；

  • 反向：Velocity(elem, 'reverse')；

  • 恢复：Velocity(elem, 'resume')；

依据这些基础指点，你能够最先进入一些现实的例子。

Demo: 掉落的小球

我们从一个由顶部落下的球最先。

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

Velocity(ball, {
    translateY: '200px'
}, {
    easing: [2000, 15],
    durantion: 3000
});

上面的代码挑选了一个class为ball的HTML元素，它在Y轴上挪动200px，延续3秒。跟着小球的着落不停加快，并在末了获得弹性。

你能够运用Velocity的弹簧结果疾速完成此功用，经由过程向velocity的easing选项通报一个数组：第一个数组项示意张力，第二个示意磨擦。
高张力值会增添总速率和波峰（默认值为500），较低的磨擦值会增添振动速率（默认值为20）。

为了好玩，我们让球的背景色彩从蓝色的初始值变成深色。 要设置背景色彩的初始值，您须要运用Velocity.js的forcefeeding：

Velocity(ball, {
    translateY: '130px',
    backgroundColor: ['#222', '#043d99']
}, {
    easing: [2000, 15],
    duration: '3000'
});

详细完成结果点此看看：
https://codepen.io/mengmengpr…

Demo：按钮掌握的弹簧小球

接下来的这个demo，目的是建立一个动画序列：

  • 小球从顶端落下

  • 当小球撞击地面的时刻款式有所挤压

  • 当小球反弹返来的时刻款式恢复一般

  • 这个动画会一向轮回

  • 你能够经由过程一个按钮掌握动画的轮回和住手

完成这类动画须要将林林总总的片断连在一起，并运用按钮来团体掌握它们的动画。

抱负的东西将是一个时刻表，它将涵盖一切的片断，并能够掌握一切片断的最先和完毕。Velocity.js没有原生的时刻轴，但有几个解决方案：

  • 运用Tweene – 这是一个动画代办，是一个能够运用许多Javascript动画库的包装器，包括Velocity.js。Tweene须要Velocity运用jQuery，本文未运用jQuery，所以暂不斟酌。

  • JavaScript的requestAnimationFrame()。这是一个原生API，用于在浏览器环境中运转任何腻滑，高效的动画，比方CSS，画布等。现在除了Opera Mini外，一切主流浏览器都支撑。

将片断分割成函数

为了坚持代码整齐，能够依据你须要的动画场景构建一个函数。 然后，只须要在主函数中挪用这些函数，主函数包括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箭头函数的示例。
每一个函数运用const关键字存储在常量中。假如须要在全部顺序中存储须要更新的值，请改用let。

能够看到，每一个功用都挪用了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()函数，我们须要把小球这个变量通报给函数：

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

注重，在这个点击函数的回调顶用了this关键字，这里的this指向被点击的按钮。假如运用箭头函数，this关键字将援用全局的window对象。简而言之，不要在动态上下文的回调函数中运用箭头函数。

为了让小球住手，须要一个新的函数:

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

在这里，你经由过程通报animationFrameId来挪用cancelAnimationFrame()，animationFrameId包括一个对小球轮回动画的援用。

住手动画的点击事宜：

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

风趣的是，挪用Velocity的stop()要领时用了一个分外的布尔值。这是消灭动画行列所必须的。假如你不必这个参数，点击住手按钮，球不会马上住手动画。等一切列队的Velocity挪用完成实行，它才会住手动画。

详细完成结果请看以下demo：
https://codepen.io/mengmengpr…

中文版下已出炉，点击这里直达。

    原文作者：蒙朦
    原文地址: https://segmentfault.com/a/1190000009151459
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞