使用SVG制作手表形状的滑块控件

SVG Pod / Watch Slider

svg, slider

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    mainSVG = select('.mainSVG'),
    track = select('#track'),
    wholeGroup = select('#wholeGroup'),
    dragRing = select('#dragRing'),
    dotGroup = select('#dotGroup'),
    topRing = select('#topRing'),
    bgRing = select('#bgRing'),
    bgRingCenter = select('#bgRingCenter'),
    dragLabel = select('#dragLabel'),
    ringLabel = select('#ringLabel'),
    step = 60,
    podInitX = 0,
    numItems = 9,
    currentId

TweenMax.set('svg', {
    visibility: 'visible'
})

function makeDots() {

for (var i = 0; i < numItems; i++) {
        var dot = select('#pageDot').cloneNode(true);
        dotGroup.appendChild(dot);
        TweenMax.set(dot, {
            attr: {
                cx: step * i
            },
            className: 'pageDot',
            id: "pageDot" + i
        })
    }

TweenMax.set(track, {
        attr: {
            x1: 0,
            x2: (numItems - 1) * step
        }
    })
    Draggable.create(dragRing, {
        type: 'x',
        bounds: {
            minX: 0,
            maxX: (numItems - 1) * step
        },
        liveSnap: function(endValue) {

return Math.round(endValue / step) * step;
        },
        onDrag: throwUpdate,
        onPress: onPress,
        onRelease: onRelease,
        overshootTolerance: 0.5,
        cursor: 'pointer'
    })

TweenMax.set(wholeGroup, {
        x: (800 / 2) - (wholeGroup.getBBox().width / 2)
    })

}

function throwUpdate() {
    TweenMax.staggerTo([topRing, bgRing, bgRingCenter], 1, {
        attr: {
            cx: dragRing._gsTransform.x
        },
        ease: Elastic.easeOut.config(1.8, 0.8)
    }, 0.005)

currentId = Math.round(dragRing._gsTransform.x / step);

TweenMax.staggerTo('.pageDot', 0.4, {
        cycle: {
            attr: function(i) {
                return (i != currentId) ? {
                    r: 10
                } : {
                    r: 20
                }
            },
            fill: function(i) {
                return (i != currentId) ? '#4CAF50' : '#E8F5E9'
            }
        },
        onUpdate: updateUI
    }, 0.005)

updateUI();
}

function onPress() {
    TweenMax.to(bgRing, 1, {
        attr: {
            cy: 230,
            r: 40
        },
        ease: Elastic.easeOut.config(0.98, 0.85),
        onUpdate: updateUI
    })
    TweenMax.to(bgRingCenter, 1, {
        attr: {
            cy: 230,
            r: 25
        },
        ease: Elastic.easeOut.config(1, 0.75)

})

TweenMax.to(dragLabel, 0.3, {
        scale: 0,
        transformOrigin: '50% 50%'
    })

TweenMax.to(topRing, 0.3, {
        attr: {
            r: 0
        }

})

}

function onRelease() {
    TweenMax.to(bgRing, 0.3, {
        attr: {
            cy: 300,
            r: 50
        },
        //strokeWidth:40,
        //fill:'#2E7D32',
        ease: Power3.easeOut,
        onUpdate: updateUI
    })

TweenMax.to(bgRingCenter, 0.3, {
        attr: {
            cy: 300,
            r: 0
        },
        ease: Power3.easeOut
    })

TweenMax.to(dragLabel, 0.3, {
        scale: 1,
        transformOrigin: '50% 50%'
    })

TweenMax.to(topRing, 0.83, {
        attr: {
            r: 35
        },
        ease: Elastic.easeOut.config(1, 0.87)
    })

}

function updateUI() {

TweenMax.to(ringLabel, 0.01, {
        attr: {
            x: Number(bgRing.getAttribute('cx')),
            y: Number(bgRing.getAttribute('cy')) + 10
        }

})

dragLabel.textContent = currentId + 1;
    ringLabel.textContent = currentId + 1;
}

document.body.onclick = function(e) {

var target = e.target;
    var className = target.getAttribute('class');

if (className) {

var posX = target.getAttribute('cx') - podInitX;

TweenMax.to(dragRing, 0.26, {
            x: posX,
            onUpdate: throwUpdate
        })
    }
}

makeDots();

//make it go to an initial dot
var initId = Math.floor(numItems / 2);
var initDot = selectAll('.pageDot')[initId];
document.body.onclick({
    target: initDot
});

编译

CSS

HTML

</defs>
    <g id="wholeGroup">
        <g filter="url(#goo)">
            <circle id="bgRing" fill="#2E7D32" stroke="#2E7D32" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="50" />

</g>

SVG Pod / Watch Slider

svg, slider

编辑器支持Emmet

快捷键

SVG Pod / Watch Slider

svg, slider

使用SVG和CSS3制作的纸飞机飘摇页面背景动画

使用Vue和GSAP实现的柱状图动画图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：