使用SVG和anime.js构建弹性范围输入动画

2018年2月10日

在我们可以在任何UI中找到的所有迷人的web组件中，表单通常是最无聊的部分。在过去，只有一些文本输入元素，用户必须手动输入数据。然后随着HTML5的出现，事情有了很大的改进，因为出现了新的input类型，比如color、date和range等等。

虽然这些新型的input在功能上是可行的，但是我们可以说它们往往不能满足web应用程序的审美需求，于是出现了许多建议来替换这些元素，以获得更好的外观，并且在所有现代浏览器中看起来几乎是一样的。

在本教程中，我们将了解如何使用以下优雅的组件模拟range input的行为：

表的内容

这个原创动画，我们用它作为灵感，可以在Stan Yakusevich的this dribble shot中找到。

为了对其进行编码，我们将主要使用SVG来绘制path和anime.js来执行动画。

以上是我们的最终产品。让我们开始！

编写标记：HTML和SVG

接下来我们将看到我们将使用的主要HTML结构。请阅读评论，这样你就不会错过任何一个细节：

<!-- Wrapper for the range input slider -->
<div class="range__wrapper">
    <!-- The real input, it will be hidden, but updated properly with Javascript -->
    <!-- For a production usage, you may want to add a label and also put it inside a form -->
    <input class="range__input" type="range" min="30" max="70" value="64"/>

    <!-- All the other elements will go here -->
</div>

</div>

正如我们所看到的，我们的组件包含一个类型range的实际 input，我们将用Javascript正确地更新它。将这个input元素和我们的组件放入一个通用HTML表单中，允许我们在input时将输入值(连同其他表单数据)submit到服务器。

现在让我们来看看需要的SVG元素，为了更好地理解，我们进行了注释：

<!-- SVG elements -->
<svg class="range__slider" width="320px" height="480px" viewBox="0 0 320 480">
    <defs>
        <!-- Range marks symbol, it will be reused below -->
        <symbol id="range__marks" shape-rendering="crispEdges">
            <path class="range__marks__path" d="M 257 30 l 33 0"></path>
            <path class="range__marks__path" d="M 268 60 l 22 0"></path>
            <path class="range__marks__path" d="M 278 90 l 12 0"></path>
            <path class="range__marks__path" d="M 278 120 l 12 0"></path>
            <path class="range__marks__path" d="M 278 150 l 12 0"></path>
            <path class="range__marks__path" d="M 278 180 l 12 0"></path>
            <path class="range__marks__path" d="M 278 210 l 12 0"></path>
            <path class="range__marks__path" d="M 278 240 l 12 0"></path>
            <path class="range__marks__path" d="M 278 270 l 12 0"></path>
            <path class="range__marks__path" d="M 278 300 l 12 0"></path>
            <path class="range__marks__path" d="M 278 330 l 12 0"></path>
            <path class="range__marks__path" d="M 278 360 l 12 0"></path>
            <path class="range__marks__path" d="M 278 390 l 12 0"></path>
            <path class="range__marks__path" d="M 268 420 l 22 0"></path>
            <path class="range__marks__path" d="M 257 450 l 33 0"></path>
        </symbol>
        <!-- This clipPath element will allow us to hide/show the white marks properly -->
        <!-- The `path` used here is an exact copy of the `path` used for the slider below -->
        <clipPath id="range__slider__clip-path">
            <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
        </clipPath>
    </defs>
    <!-- Pink marks -->
    <use xlink:href="#range__marks" class="range__marks__pink"></use>
    <!-- Slider `path`, that will be morphed properly on user interaction -->
    <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
    <!-- Clipped white marks -->
    <use xlink:href="#range__marks" class="range__marks__white" clip-path="url(#range__slider__clip-path)"></use>
</svg>

<defs>

</symbol>

</clipPath>

</defs>

</svg>

如果这是您第一次使用SVG path元素，或者您不了解它们是如何工作的，那么您可以在MDN的这个优秀教程中了解更多。

最后，我们需要另一段代码来显示原始动画中出现的值和文本：

<!-- Range values -->
<div class="range__values">
    <div class="range__value range__value--top">
        <!-- This element will be updated in the way: `100 - inputValue` -->
        <span class="range__value__number range__value__number--top"></span>
        <!-- Some text for the `top` value -->
        <span class="range__value__text range__value__text--top">
            <span>Points</span>
            <span>You Need</span>
        </span>
    </div>
    <div class="range__value range__value--bottom">
        <!-- This element will be updated with the `inputValue` -->
        <span class="range__value__number range__value__number--bottom"></span>
        <!-- Some text for the `bottom` value -->
        <span class="range__value__text range__value__text--bottom">
            <span>Points</span>
            <span>You Have</span>
        </span>
    </div>
</div>

<span>Points</span>

</span>

</div>

<span>Points</span>

</span>

</div>

如您所见，如果遵循注释，HTML代码非常容易理解。现在我们来看看这些样式。

添加样式

我们将开始对wrapper元素进行样式化

.range__wrapper {
  user-select: none; // disable user selection, for better drag &amp; drop

  // More code for basic styling and centering...
}

.range__wrapper {

user-select: none; // disable user selection, for better drag & drop

// More code for basic styling and centering...

}

正如您所看到的，除了实现正确外观和以元素为中心的基本样式之外，我们还禁用了用户在组件中选择任何内容的能力。这一点非常重要，因为我们将实现“拖放”类型的交互，因此如果我们允许“选择”功能，就可以获得意外的行为。

接下来我们将隐藏实际的input元素，并正确定位svg (.range__slider)元素：

// Hide the `input`
.range__input {
  display: none;
}

// Position the SVG root element
.range__slider {
  position: absolute;
  left: 0;
  top: 0;
}

// Hide the `input`

.range__input {

display: none;

}

// Position the SVG root element

.range__slider {

position: absolute;

left: 0;

top: 0;

}

为了给SVG元素上色，我们使用以下代码：

// Slider color
.range__slider__path {
  fill: #FF4B81;
}

// Styles for marks
.range__marks__path {
  fill: none;
  stroke: inherit;
  stroke-width: 1px;
}

// Stroke color for the `pink` marks
.range__marks__pink {
  stroke: #FF4B81;
}

// Stroke color for the `white` marks
.range__marks__white {
  stroke: white;
}

// Slider color

.range__slider__path {

fill: #FF4B81;

}

// Styles for marks

.range__marks__path {

fill: none;

stroke: inherit;

stroke-width: 1px;

}

// Stroke color for the `pink` marks

.range__marks__pink {

stroke: #FF4B81;

}

// Stroke color for the `white` marks

.range__marks__white {

stroke: white;

}

现在我们来看看这些值的主要样式。在这里，transform-origin在保持数字与文本按照期望的方式对齐方面扮演了重要的角色，就像在原始动画中一样。

// Positioning the container for values, it will be translated with Javascript
.range__values {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

// These `transform-origin` values will keep the numbers in the desired position as they are scaled
.range__value__number--top {
  transform-origin: 100% 100%; // bottom-right corner
}
.range__value__number--bottom {
  transform-origin: 100% 0; // top-right corner
}

// More basic styles for the values...

// Positioning the container for values, it will be translated with Javascript

.range__values {

position: absolute;

left: 0;

top: 0;

width: 100%;

}

// These `transform-origin` values will keep the numbers in the desired position as they are scaled

.range__value__number--top {

transform-origin: 100% 100%; // bottom-right corner

}

.range__value__number--bottom {

transform-origin: 100% 0; // top-right corner

}

// More basic styles for the values...

添加与Javascript的交互

现在是时候添加互动了，开始制作动画并享受其中的乐趣了:)

首先，让我们看看模拟拖放功能、侦听相应事件、执行数学工作和执行动画所需的代码。请注意，我们没有包含全部代码，只包含理解行为的基本部分。

// Handle `mousedown` and `touchstart` events, saving data about mouse position
function mouseDown(e) {
    mouseY = mouseInitialY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
    rangeWrapperLeft = rangeWrapper.getBoundingClientRect().left;
}

// Handle `mousemove` and `touchmove` events, calculating values to morph the slider `path` and translate values properly
function mouseMove(e) {
    if (mouseY) {
        // ... Some code for maths ...
        // After doing maths, update the value
        updateValue();
    }
}

// Handle `mouseup`, `mouseleave` and `touchend` events
function mouseUp() {
    // Trigger elastic animation in case `y` value has changed
    if (mouseDy) {
        elasticRelease();
    }
    // Reset values
    mouseY = mouseDy = 0;
}

// Events listeners
rangeWrapper.addEventListener('mousedown', mouseDown);
rangeWrapper.addEventListener('touchstart', mouseDown);
rangeWrapper.addEventListener('mousemove', mouseMove);
rangeWrapper.addEventListener('touchmove', mouseMove);
rangeWrapper.addEventListener('mouseup', mouseUp);
rangeWrapper.addEventListener('mouseleave', mouseUp);
rangeWrapper.addEventListener('touchend', mouseUp);

// Handle `mousedown` and `touchstart` events, saving data about mouse position

function mouseDown(e) {

mouseY = mouseInitialY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;

rangeWrapperLeft = rangeWrapper.getBoundingClientRect().left;

}

// Handle `mousemove` and `touchmove` events, calculating values to morph the slider `path` and translate values properly

function mouseMove(e) {

if (mouseY) {

// ... Some code for maths ...

// After doing maths, update the value

updateValue();

}

// Handle `mouseup`, `mouseleave` and `touchend` events

function mouseUp() {

// Trigger elastic animation in case `y` value has changed

if (mouseDy) {

elasticRelease();

}

// Reset values

mouseY = mouseDy = 0;

}

// Events listeners

rangeWrapper.addEventListener('mousedown', mouseDown);

rangeWrapper.addEventListener('touchstart', mouseDown);

rangeWrapper.addEventListener('mousemove', mouseMove);

rangeWrapper.addEventListener('touchmove', mouseMove);

rangeWrapper.addEventListener('mouseup', mouseUp);

rangeWrapper.addEventListener('mouseleave', mouseUp);

rangeWrapper.addEventListener('touchend', mouseUp);

现在我们可以看一下updateValue函数。这个函数负责更新组件的值，并根据光标的位置移动滑块。为了更好地理解，我们详尽地评论了它的每一部分：

// Function to update the slider value
function updateValue() {
    // Clear animations if are still running
    anime.remove([rangeValues, rangeSliderPaths[0], rangeSliderPaths[1]]);

    // Calc the `input` value using the current `y`
    rangeValue = parseInt(currentY * max / rangeHeight);
    // Calc `scale` value for numbers
    scale = (rangeValue - rangeMin) / (rangeMax - rangeMin) * scaleMax;
    // Update `input` value
    rangeInput.value = rangeValue;
    // Update numbers values
    rangeValueNumberTop.innerText = max - rangeValue;
    rangeValueNumberBottom.innerText = rangeValue;
    // Translate range values
    rangeValues.style.transform = 'translateY(' + (rangeHeight - currentY) + 'px)';
    // Apply corresponding `scale` to numbers
    rangeValueNumberTop.style.transform = 'scale(' + (1 - scale) + ')';
    rangeValueNumberBottom.style.transform = 'scale(' + (1 - (scaleMax - scale)) + ')';

    // Some maths calc
    if (Math.abs(mouseDy) &lt; mouseDyLimit) {
        lastMouseDy = mouseDy;
    } else {
        lastMouseDy = mouseDy &lt; 0 ? -mouseDyLimit : mouseDyLimit;
    }

    // Calc the `newSliderY` value to build the slider `path`
    newSliderY = currentY + lastMouseDy / mouseDyFactor;
    if (newSliderY &lt; rangeMinY || newSliderY &gt; rangeMaxY) {
        newSliderY = newSliderY &lt; rangeMinY ? rangeMinY : rangeMaxY;
    }

    // Build `path` string and update `path` elements
    newPath = buildPath(lastMouseDy, rangeHeight - newSliderY);
    rangeSliderPaths[0].setAttribute('d', newPath);
    rangeSliderPaths[1].setAttribute('d', newPath);
}

// Function to update the slider value

function updateValue() {

// Clear animations if are still running

anime.remove([rangeValues, rangeSliderPaths[0], rangeSliderPaths[1]]);

// Calc the `input` value using the current `y`

rangeValue = parseInt(currentY * max / rangeHeight);

// Calc `scale` value for numbers

scale = (rangeValue - rangeMin) / (rangeMax - rangeMin) * scaleMax;

// Update `input` value

rangeInput.value = rangeValue;

// Update numbers values

rangeValueNumberTop.innerText = max - rangeValue;

rangeValueNumberBottom.innerText = rangeValue;

// Translate range values

rangeValues.style.transform = 'translateY(' + (rangeHeight - currentY) + 'px)';

// Apply corresponding `scale` to numbers

rangeValueNumberTop.style.transform = 'scale(' + (1 - scale) + ')';

rangeValueNumberBottom.style.transform = 'scale(' + (1 - (scaleMax - scale)) + ')';

// Some maths calc

if (Math.abs(mouseDy) < mouseDyLimit) {

lastMouseDy = mouseDy;

} else {

lastMouseDy = mouseDy < 0 ? -mouseDyLimit : mouseDyLimit;

}

// Calc the `newSliderY` value to build the slider `path`

newSliderY = currentY + lastMouseDy / mouseDyFactor;

if (newSliderY < rangeMinY || newSliderY > rangeMaxY) {

newSliderY = newSliderY < rangeMinY ? rangeMinY : rangeMaxY;

}

// Build `path` string and update `path` elements

newPath = buildPath(lastMouseDy, rangeHeight - newSliderY);

rangeSliderPaths[0].setAttribute('d', newPath);

rangeSliderPaths[1].setAttribute('d', newPath);

}

正如我们已经看到的，在前面的函数中有一个对buildPath函数的调用，这是组件中必不可少的一部分。这个函数将让我们为滑块建立path，给定以下参数：

dy: 自mousedown或touchstart事件以来，鼠标在y轴上移动的距离。
ty: y轴上path必须平移的距离。

它还使用mouseX值将曲线绘制到光标在x轴上的位置，并以String格式返回路径：

// Function to build the slider `path`, using the given `dy` and `ty` values
function buildPath(dy, ty) {
    return 'M 0 ' + ty + ' q ' + mouseX + ' ' + dy + ' 320 0 l 0 480 l -320 0 Z';
}

// Function to build the slider `path`, using the given `dy` and `ty` values

function buildPath(dy, ty) {

return 'M 0 ' + ty + ' q ' + mouseX + ' ' + dy + ' 320 0 l 0 480 l -320 0 Z';

}

最后，我们来看看如何实现有趣的弹性效果：

// Function to simulate the elastic behavior
function elasticRelease() {
    // Morph the paths to the opposite direction, to simulate a strong elasticity
    anime({
        targets: rangeSliderPaths,
        d: buildPath(-lastMouseDy * 1.3, rangeHeight - (currentY - lastMouseDy / mouseDyFactor)),
        duration: 150,
        easing: 'linear',
        complete: function () {
            // Morph the paths to the normal state, using the `elasticOut` easing function (default)
            anime({
                targets: rangeSliderPaths,
                d: buildPath(0, rangeHeight - currentY),
                duration: 4000,
                elasticity: 880
            });
        }
    });

    // Here will go a similar code to:
    // - Translate the values to the opposite direction, to simulate a strong elasticity
    // - Then, translate the values to the right position, using the `elasticOut` easing function (default)
}

// Function to simulate the elastic behavior

function elasticRelease() {

// Morph the paths to the opposite direction, to simulate a strong elasticity

anime({

targets: rangeSliderPaths,

d: buildPath(-lastMouseDy * 1.3, rangeHeight - (currentY - lastMouseDy / mouseDyFactor)),

duration: 150,

easing: 'linear',

complete: function () {

// Morph the paths to the normal state, using the `elasticOut` easing function (default)

anime({

targets: rangeSliderPaths,

d: buildPath(0, rangeHeight - currentY),

duration: 4000,

elasticity: 880

});

}

});

// Here will go a similar code to:

// - Translate the values to the opposite direction, to simulate a strong elasticity

// - Then, translate the values to the right position, using the `elasticOut` easing function (default)

}

如您所见，需要实现两个连续的动画，以达到夸张的弹性效果，类似于原始动画。这是因为使用elasticOut函数的单个动画是不够的。

计算上升的总和

And finally we are done!

我们开发了一个组件来模拟input类型range的行为，但效果令人印象深刻，类似于原始动画：

您可以检查最终结果，在code on Codepen上使用代码，或者在Github上获得完整的代码。

请注意，为了使本教程更有趣、更容易理解，我们没有在这里解释所使用的每一行代码。但是，您可以在Github repository中找到完整的代码。

我们衷心希望您喜欢本教程，并从中得到启发！

原文：https://scotch.io/tutorials/build-an-elastic-range-input-with-svg-and-animejs

anime.js, jquery, js, svg, 动画, 弹性

上一篇文章

Slider Revolution WordPress插件评论&如何指导

下一篇文章

常用的一些mysql/mariadb命令

使用SVG和anime.js构建弹性范围输入动画

表的内容

编写标记：HTML和SVG

添加样式

添加与Javascript的交互

计算上升的总和

相关文章

16个最好的CSS3过渡和动画教程

22个优秀的jQuery下拉菜单

25个jQuery瀑布流网页设计的强大例子

植物大战僵尸Javascript网页版

文章归档

分类目录

使用SVG和anime.js构建弹性范围输入动画

表的内容

相关文章

文章归档

分类目录

标签