HTML5 SVG带拖拉操作手柄的环形图表盘

SVG Calculator Dial with GSAP，类似电话拨号的交互效果。

gsap, chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*  ==========================================================================
    Dial
    ========================================================================== */

var tCost = 8501373;
var hhCost = tCost * 0.5;;
var decreaseScale = 0.006; // per 1%
var savings;
var maxRotation = 179.6;
var rotationSnap = 360 / 100; // snap to 1% increments
var initEasing = Power4.easeInOut;
var $circOuter = $('.results__dial-outer');
var $circTrack = $('.results__dial-track');
var $trackPerc = $('.results__dial-track-perc');
var $dialMarkers = $('.results__dial-marker');
var $dialMarkerNums = $('.results__dial-percent-text text');
var $drag = $('.results__dial-drag');
var $dragPad = $('.results__dial-drag-pad');
var $dragPadHit = $('.results__dial-drag-hit');
var $dragLine = $('.results__dial-drag-line');
var $dragInner = $('.results__dial-drag-inner');
// var $precText = $('.results__dial-perc-text');
var $resultsText = $('.results__text');
var $perc = $('.results__dial-perc');
// var $effectText = $('.results__dial-effect');
// var $savingText = $('.results__dial-results');
var $saving = $('.results__dial-saving');
var dialTL = new TimelineMax();

TweenMax.set([$trackPerc, $circOuter, $circTrack], {
    transformOrigin: '50% 50%',
    drawSVG: '0% 0%'
});

TweenMax.set($drag, {
    transformOrigin: "50% 259", // set rotationY to the center of the dial
    rotation: 0
})

TweenMax.set($dialMarkers, {
    transformOrigin: "50% 209" // set rotationY to the center of the dial
        // rotation: 0
})

$dragPadHit.hover(
    function() {
        TweenMax.to($dragPad, 0.4, {
            transformOrigin: "center center",
            scale: 1.2,
            ease: Elastic.easeOut.config(0.9, 0.3)
        });
    },
    function() {
        TweenMax.to($dragPad, 0.2, {
            scale: 1
        });
    }
);

dialTL.to($circTrack, 0.8, {
    drawSVG: '0% 100%',
    ease: initEasing
})

.to($circOuter, 0.8, {
    drawSVG: '0% 100%',
    ease: initEasing
}, "-=0.6")

.staggerTo($dialMarkers, 0.8, {
    cycle: {
        rotation: function(i) {
            return 180 - 36 * i;
        }
    },
    ease: Power2.easeOut
}, 0.1, "-=0.4")

.staggerFrom($dialMarkerNums, 0.8, {
    autoAlpha: 0,
    x: 20,
    ease: Power2.easeOut
}, 0.1, "-=0.6")

.from($dragLine, 0.3, {
    scaleY: 0,
    transformOrigin: "0% 100%",
    ease: Power2.easeIn
}, "-=1.2")

.from($dragInner, 0.5, {
    scale: 0,
    y: 20,
    transformOrigin: "center center",
    ease: Elastic.easeOut.config(0.9, 0.3)
}, "-=0.9")

.staggerFrom($resultsText, 0.8, {
    autoAlpha: 0,
    y: 20,
    ease: Power2.easeOut
}, 0.1, "-=1.4")

.to($trackPerc, 0.8, {
    drawSVG: '0% 10%', // animate to the default 10%
    ease: initEasing
}, "-=0.4")

.to($drag, 0.8, {
    rotation: 36, // animate to the default 10%
    ease: initEasing,
    onUpdate: function() {
        dragUpdate();
    }
}, "-=1.0");

Draggable.create($drag, {
    type: "rotation",
    throwProps: true,
    bounds: {
        maxRotation: maxRotation,
        minRotation: 0
    },
    snap: function(endValue) {
        return Math.round(endValue / rotationSnap) * rotationSnap;
    },
    onDrag: dragUpdate,
    onThrowUpdate: dragUpdate
})

console.clear();

编译

CSS

/*  ==========================================================================
    Variables etc
    ========================================================================== */

body,
.results__dial-percent-text text {
    font-family: "proxima-nova", sans-serif;
    font-style: normal;
    font-weight: 400;
}
.results__dial-perc-text,
.results__dial-results,
.results__dial-perc,
.results__dial-saving {
    font-family: "proxima-nova", sans-serif;
    font-style: normal;
    font-weight: 700;
}
/*  ==========================================================================
    General
    ========================================================================== */

body {
    background-image: -webkit-linear-gradient(110deg, #008996 0%, #092a30 100%);
    background-image: linear-gradient(340deg, #008996 0%, #092a30 100%);
    -webkit-font-feature-settings: "kern" 1, "liga" 1, 'lnum' 1;
    font-feature-settings: "kern" 1, "liga" 1, 'lnum' 1;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
}
/*  ==========================================================================
    Dial
    ========================================================================== */

.results__dial text,
.results__dial tspan {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*  Percentage Markers
    ========================================================================== */

.results__dial-percent-text text {
    -webkit-font-smoothing: subpixel-antialiased;
}
/*  Text
    ========================================================================== */

.results__dial-perc-text,
.results__dial-results {
    -webkit-font-feature-settings: "tnum" 1;
    font-feature-settings: "tnum" 1;
    text-anchor: middle;
}
.results__dial-perc-text,
.results__dial-results {
    font-size: 24px;
}
.results__dial-perc {
    text-anchor: middle;
    font-size: 48px;
    -webkit-font-smoothing: subpixel-antialiased;
}
.results__dial-saving {
    font-size: 48px;
    -webkit-font-smoothing: subpixel-antialiased;
}
/*  Dragger
    ========================================================================== */

.results__dial-drag-arrows,
.results__dial-drag-pad {
    pointer-events: none;
}
.results__dial-drag-hit {
    cursor: pointer;
}

HTML

</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js'></script>
<script src='/uploads/150601/ThrowPropsPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='/uploads/150501/DrawSVGPlugin.min.js'></script>

SVG Calculator Dial with GSAP，类似电话拨号的交互效果。

gsap, chart

编辑器支持Emmet

快捷键

SVG Calculator Dial with GSAP，类似电话拨号的交互效果。

gsap, chart

HTML5/SVG/TweenMax.js 台灯/办公桌 /电脑/键盘/咖啡杯延迟加载动画

HTML5 GSAP 会爆炸的雪花

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：