使用anime.js实现拖拉滑动式数字步进选择控件

Stepper Iteration with Anime JS

h5, animejs, stepper

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2231
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var blockAnimeAdd, countAnimePlus = anime.timeline(),
    countAnimeMinus = anime.timeline();
var offset = 130;
var direction;
var dur = 2000;
var count = parseInt($('.active').text());

$(document).on('mousedown', '.stepper', function() {
    currentPos = mousePos;

draggable = true;
    blockAnime.pause();

if ($('.first').hasClass('active')) {
        $('.first').removeClass('active').addClass('next');
        $('.second').removeClass('next').addClass('active');
    } else if ($('.second').hasClass('active')) {
        $('.second').removeClass('active').addClass('next');
        $('.first').removeClass('next').addClass('active');
    }

if (direction == 'plus') {
        countAnimePlus.pause();
    }

if (direction == 'minus') {
        countAnimeMinus.pause();
    }

})

$(document).on("mousemove", function(event) {
    mousePos = event.pageY;

if (draggable) {
        position = mousePos - currentPos;
        $('.stepper').css('transform', 'translateY(' + position / 2 + 'px)');
    }

if (position <= (offset * -1) && draggable) {
        center();
        count++;
        plus();
    }

if (position >= offset && draggable) {
        center();
        count--;
        minus();
    }
});

$(document).on("mouseup", function(event) {
    if (draggable) {
        center();
    }
});

function center() {
    draggable = false;
    blockAnime = anime({
        targets: '.stepper',
        duration: dur,
        translateY: 0,
    });
}

function plus() {
    direction = 'plus';
    countAnimePlus = anime.timeline();

$('.next').text(count).css('transform', 'translateY(-100px) translateX(-50%)');

countAnimePlus.add({
            targets: '.active',
            translateY: 100,
            translateX: '-50%',
            duration: dur,
        })
        .add({
            targets: '.next',
            translateY: 0,
            translateX: '-50%',
            duration: dur,
            offset: '-=' + dur,
        });
}

function minus() {
    direction = 'minus';
    countAnimeMinus = anime.timeline();

$('.next').text(count).css('transform', 'translateY(100px) translateX(-50%)');
    console.log(count)

countAnimeMinus.add({
            targets: '.active',
            translateY: -100,
            translateX: '-50%',
            duration: dur,
        })
        .add({
            targets: '.next',
            translateY: 0,
            translateX: '-50%',
            duration: 1500,
            offset: '-=' + dur,
        });
}

center();
plus();
setTimeout(() => {
    $('.hide').removeClass('hide');
}, 300);

编译

CSS

html,
body {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #231F20;
    font-size: 20px;
    background: #FFF3F5;
}
.wrap {
    position: relative;
    margin-left: 65px;
    margin-top: 65px;
}
.stepper {
    margin-top: -65px;
    margin-left: -65px;
    width: 30px;
    height: 30px;
    background: #FF4957;
    cursor: pointer;
    width: 130px;
    height: 130px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 64px;
    position: relative;
    box-shadow: -1px 57px 80px -17px rgba(255, 73, 87, 0.25);
    overflow: hidden;
    z-index: 2;
}
.stepper span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 28px;
    left: 50%;
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
}
.stepper span.active {
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
}
.stepper span.hide {
    opacity: 0;
}
.arrow-top {
    position: absolute;
    top: -120px;
    left: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 50px;
}
.arrow-bottom {
    position: absolute;
    bottom: -57px;
    left: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 50px;
}
.github {
    width: 40px;
    height: 40px;
    background: url(http://alikinvv.github.io/github.svg) no-repeat center;
    position: fixed;
    bottom: 40px;
    right: 40px;
    -webkit-animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
    animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
}
@-webkit-keyframes github {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes github {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.desc {
    position: absolute;
    top: 40px;
    left: 40px;
    color: #ffbac1;
}

HTML

Stepper Iteration with Anime JS

h5, animejs, stepper

编辑器支持Emmet

快捷键

Stepper Iteration with Anime JS

h5, animejs, stepper

使用Anime.js实现的图像网格揭开动效

使用anime.js和SVG实现的列表项删除破碎玻璃特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：