Velocity.js简明教程（中文版下）

时间 2019-11-08

标签 velocity.js velocity 简明教程中文版栏目 JavaScript 繁體版

原文原文链接

滚动动画

使用Velocity.js，你能够快速实现垂直和水平滚动动画。滚动能够与整个页面或元素相关。不管哪一种方式，都要在即将滚动到视图中的元素上调用Velocity。html

下面的demo使用两个连接：点击顶部连接将容器滚动到最后一部分，单击底部连接将容器滚动到第一部分。git

因为两个连接的滚动动做相同，为避免写重复的代码，将其组织成一个函数：github

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中指的是第一个部分或最后一个部分，具体取决于滚动的方向。segmentfault
滚动的方向存储在direction中。若是值为'up'，那么offsetDistance的值为-200px，即滚动到相对当前element向上偏移200px的位置，不然offsetDistance的值将为200px。offsetDistance将为Velocity的offset属性存储一个值，能够将目标滚动位置偏移指定的量。api
由于demo中的滚动不是相对于浏览器窗口，而是容器元素，上面的代码将这个信息存储在container参数中。由于这样，将容器元素CSS的position属性设置为relative，absolute或fixed不起做用。浏览器

最后，经过调用上面的函数来处理相关连接上的点击事件。例如，要滚动到最后一部分，您的事件处理函数可能以下所示：svg

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。
昨天发布的上半部分被官博分享了，很开心，之后会继续分享高质量文章的。喜欢的话能够关注我或者个人微博，谢谢支持！