Question

我有一个canvas元素，表示项目的资金进度。在一些非常善良的SO的帮助下，我们已经设法完成了它的核心，但我仍然在努力应用最后的润色。

您可以在此处查看我目前所拥有的内容：https://jsfiddle.net/r36cuj3h/

然而，我现在要做的是随着进度环的变化增加中心的数字，但是，非常重要，我希望它能顺利地增加两个数字（如果可能的话，以毫秒为单位）。而且，为了增加另一个复杂功能，我想在动画和数字中应用缓动。谁能想到办法做到这一点？

这是我的代码：

＆＃13;

$(document).ready(function(){

    // Convert degrees to radians
    function convertToRadians(degrees){
        return degrees * (Math.PI/180);
    }

    // Create map to convert percentage to radians
    function map(value, minIn, maxIn, minOut, maxOut){
        return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
    }

    // Get the canvas
    var canvas = document.getElementById('progress');
    var context = canvas.getContext('2d');
    // Set the funding amounts
    var maxFunding = 150000;
    var fundingRaisedValue = 120000;
    var fundingRaisedPercent = Math.round((fundingRaisedValue/maxFunding) * 100);
    var t = 0;

    // Set the value of the progress ring
    function setProgressValue(percent,value){
        // Set the size of the ring
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var sections = 6;
        var radius = 94;
        // Begin the circle
        context.beginPath();
        context.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(percent, 0, 100, 90, 450)), false);
        // Create the gradient
        var gradient = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
        gradient.addColorStop(0, '#D95FF6');
        gradient.addColorStop(0.3, '#D95FF6');
        gradient.addColorStop(0.7, '#4512CB');
        gradient.addColorStop(1, '#4512CB');
        // Set the stroke
        context.lineWidth = 22;
        context.strokeStyle = gradient;
        context.stroke();
    }

    // Animate the ring
    function animateProgressRing(){
        // If the the amount of raised funding is shown
        // then stop animating
        if(t > fundingRaisedPercent){
            stopAnimatingProgressRing();
        }
        // Clear the canvas and animate the ring
        context.clearRect(0, 0, canvas.width, canvas.height);
        setProgressValue(t,Math.round((t/100)*maxFunding));
        t++;
    }

    // Stop Animating Progress Ring
    function stopAnimatingProgressRing(){
        clearInterval(animateProgressRing);
    }

    var animateProgressRing = setInterval(animateProgressRing,10);
});

＆＃13;

html, body {
    background: #f5f5f5;
}
#compare_image {
    display:block;
    margin:100px auto 50px;
}
#progress_container {
    position: absolute;
    border-radius: 50%;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -120px;
    background: #D0D2D5;
    background: -moz-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0d2d5), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #d0d2d5 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d2d5', endColorstr='#ffffff', GradientType=0);
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
#progress_dial {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    z-index: 6;
}
#progress_shadow {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    z-index: 8;
}
#progress {
    position: absolute;
    margin: 8px;
    z-index: 7;
}
#progress_content {
    position: absolute;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 21px;
    background: #fafafb;
    background-image: url("//images.getbubbla.com/_index/bg-noise.png");
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafb), color-stop(100%, #e1e2e5));
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -moz-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -o-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -ms-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), linear-gradient(to bottom, #fafafb 0%, #e1e2e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafb', endColorstr='#e1e2e5', GradientType=0);
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    z-index: 9;
}
h1#progress_percentage {
    position: relative;
    margin: 35px 0 0 0;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
    display: block;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 60px;
    padding: 0;
    text-align: center;
    width: 170px;
}
h1#progress_percentage:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    text-shadow: none;
    top: 1px;
    left: 1px;
}
h2#progress_value {
    position: absolute;
    display: block;
    margin: -8px 0 0 0;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 18px;
    padding: 0;
    text-align: center;
    width: 170px;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
}
h2#progress_value:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    top: 1px;
    left: 1px;
    text-shadow: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_container">
    <svg id="progress_dial" width="212px" height="212px">
        <path d="M 0 106 C 0 47.4571 47.4571 0 106 0 C 164.5429 0 212 47.4571 212 106 C 212 164.5429 164.5429 212 106 212 C 47.4571 212 0 164.5429 0 106 Z" fill="#e0e1e5" />
        <path opacity="0.6" d="M 106.5 0.5 L 106.5 212.5 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 133.9519 3.9825 L 79.0822 208.7587 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.517 14.5719 L 53.517 198.1693 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.4704 31.4173 L 31.5637 181.3239 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.3157 53.3706 L 14.7183 159.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 208.9052 78.9358 L 4.1289 133.8054 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 212.517 106.3706 L 0.517 106.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 209.0346 133.8224 L 4.2583 78.9528 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.4451 159.3876 L 14.8478 53.3876 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.5998 181.341 L 31.6931 31.4343 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.6464 198.1863 L 53.6465 14.5889 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 134.0813 208.7758 L 79.2116 3.9995 " stroke="#ffffff" stroke-width="1" />
    </svg>
    <div id="progress_shadow">
        <div id="progress_content">
            <h1 id="progress_percentage" title="0%">0%</h1>
            <h2 id="progress_value" title="&pound;0">&pound;0</h2>
        </div>
    </div>
    <canvas id="progress" width="224" height="224"></canvas>
</div>

＆＃13;

奖金功能

对于那些感觉很聪明的人，我还想将我目前在#progress_shadow元素上的内部阴影应用到画布中创建的弧，因为这样可以防止它覆盖灰色表盘背景。这可能吗？

#progress_shadow {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    z-index: 8;
}

Answer 1

与OP讨论后，我们选择使用第三方补间和动画库greensocks lite。代码

$(document).ready(function(){

    // Convert degrees to radians
    function convertToRadians(degrees){
        return degrees * (Math.PI/180);
    }

    // Create map to convert percentage to radians
    function map(value, minIn, maxIn, minOut, maxOut){
        return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
    }

    // Get the canvas
    var canvas = document.getElementById('progress');
    var context = canvas.getContext('2d');
    // Set the funding amounts
    var maxFunding = 150000;
    var fundingRaisedValue = 127060;
    var fundingRaisedPercent = Math.round((fundingRaisedValue/maxFunding) * 100);
    var t = 0;

    // Set the value of the progress ring
    function setProgressValue(percent,value){
        // Set the size of the ring
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var sections = 6;
        var radius = 94;
        // Begin the circle
        context.beginPath();
        context.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(percent, 0, 100, 90, 450)), false);
        // Create the gradient
        var gradient = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
        gradient.addColorStop(0, '#D95FF6');
        gradient.addColorStop(0.3, '#D95FF6');
        gradient.addColorStop(0.7, '#4512CB');
        gradient.addColorStop(1, '#4512CB');
        // Set the stroke
        context.lineWidth = 22;
        context.strokeStyle = gradient;
        context.stroke();
    }

    // Animate the ring
	var progress = {p:0};
    function animateProgressRing(){
        context.clearRect(0, 0, canvas.width, canvas.height);
        t = progress.p*100/maxFunding;
        setProgressValue(t,Math.round((t/100)));
        $("#progress_percentage").html(Math.round(t)+"%");
        $("#progress_percentage").attr('title',Math.round(t)+"%");
    	$("#progress_value").html("&pound;"+Math.round(t*maxFunding/100));
    	$("#progress_value").attr('title',"£"+Math.round(t*maxFunding/100));
    }
    var tween = TweenLite.to(progress, 2, {p:fundingRaisedValue, onUpdate:animateProgressRing, ease: Power2.easeInOut});
});

html, body {
    background: #f5f5f5;
}
#compare_image {
    display:block;
    margin:100px auto 50px;
}
#progress_container {
    position: absolute;
    border-radius: 50%;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -120px;
    background: #D0D2D5;
    background: -moz-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0d2d5), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #d0d2d5 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d2d5', endColorstr='#ffffff', GradientType=0);
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
#progress_dial {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    z-index: 6;
}
#progress_shadow {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    z-index: 8;
}
#progress {
    position: absolute;
    margin: 8px;
    z-index: 7;
}
#progress_content {
    position: absolute;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 21px;
    background: #fafafb;
    background-image: url("//images.getbubbla.com/_index/bg-noise.png");
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafb), color-stop(100%, #e1e2e5));
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -moz-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -o-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -ms-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), linear-gradient(to bottom, #fafafb 0%, #e1e2e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafb', endColorstr='#e1e2e5', GradientType=0);
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    z-index: 9;
}
h1#progress_percentage {
    position: relative;
    margin: 35px 0 0 0;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
    display: block;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 60px;
    padding: 0;
    text-align: center;
    width: 170px;
}
h1#progress_percentage:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    text-shadow: none;
    top: 1px;
    left: 1px;
}
h2#progress_value {
    position: absolute;
    display: block;
    margin: -8px 0 0 0;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 18px;
    padding: 0;
    text-align: center;
    width: 170px;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
}
h2#progress_value:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    top: 1px;
    left: 1px;
    text-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

<div id="progress_container">
    <svg id="progress_dial" width="212px" height="212px">
        <path d="M 0 106 C 0 47.4571 47.4571 0 106 0 C 164.5429 0 212 47.4571 212 106 C 212 164.5429 164.5429 212 106 212 C 47.4571 212 0 164.5429 0 106 Z" fill="#e0e1e5" />
        <path opacity="0.6" d="M 106.5 0.5 L 106.5 212.5 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 133.9519 3.9825 L 79.0822 208.7587 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.517 14.5719 L 53.517 198.1693 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.4704 31.4173 L 31.5637 181.3239 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.3157 53.3706 L 14.7183 159.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 208.9052 78.9358 L 4.1289 133.8054 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 212.517 106.3706 L 0.517 106.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 209.0346 133.8224 L 4.2583 78.9528 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.4451 159.3876 L 14.8478 53.3876 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.5998 181.341 L 31.6931 31.4343 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.6464 198.1863 L 53.6465 14.5889 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 134.0813 208.7758 L 79.2116 3.9995 " stroke="#ffffff" stroke-width="1" />
    </svg>
    <div id="progress_shadow">
        <div id="progress_content">
            <h1 id="progress_percentage" title="0%">0%</h1>
            <h2 id="progress_value" title="&pound;0">&pound;0</h2>
        </div>
    </div>
    <canvas id="progress" width="224" height="224"></canvas>
</div>

Answer 2

$(document).ready(function(){

    // Convert degrees to radians
    function convertToRadians(degrees){
        return degrees * (Math.PI/180);
    }

    // Create map to convert percentage to radians
    function map(value, minIn, maxIn, minOut, maxOut){
        return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
    }

    // Get the canvas
    var canvas = document.getElementById('progress');
    var context = canvas.getContext('2d');
    // Set the funding amounts
    var maxFunding = 150000;
    var fundingRaisedValue = 120000;
    var fundingRaisedPercent = Math.round((fundingRaisedValue/maxFunding) * 100);
    var t = 0,t2=0;

    // Set the value of the progress ring
    function setProgressValue(percent,value){
        // Set the size of the ring
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var sections = 6;
        var radius = 94;
        // Begin the circle
        context.beginPath();
        context.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(percent, 0, 100, 90, 450)), false);
        // Create the gradient
        var gradient = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
        gradient.addColorStop(0, '#D95FF6');
        gradient.addColorStop(0.3, '#D95FF6');
        gradient.addColorStop(0.7, '#4512CB');
        gradient.addColorStop(1, '#4512CB');
        // Set the stroke
        context.lineWidth = 22;
        context.strokeStyle = gradient;
        context.stroke();
    }

    // Animate the ring
    function animateProgressRing(){
        // If the the amount of raised funding is shown
        // then stop animating
        if(t >= fundingRaisedPercent){
			$('#progress_value').text('£'+(fundingRaisedValue));
            stopAnimatingProgressRing();
        }
        // Clear the canvas and animate the ring
        context.clearRect(0, 0, canvas.width, canvas.height);
        setProgressValue(t,Math.round((t/100)*maxFunding));
        t++;
		
		$('#progress_percentage').text(t+'%');
		t2=t;
    }

    // Stop Animating Progress Ring
    function stopAnimatingProgressRing(){
        clearInterval(animateProgressRing);
		 clearInterval(anotherAmountProcessing);
    }
	
	 // Animate the ring
    function animateNumber(){
        var displayfunds = fundingRaisedValue/fundingRaisedPercent * t2;
		if(displayfunds<=fundingRaisedValue)
			$('#progress_value').text('£'+Math.ceil(displayfunds));
		t2+=timers[1]/timers[0];
    }

   
	var timers = [30,5];
    var animateProgressRing = setInterval(animateProgressRing,timers[0]);
	var anotherAmountProcessing = setInterval(animateNumber,timers[1]);
});

html, body {
    background: #f5f5f5;
}
#compare_image {
    display:block;
    margin:100px auto 50px;
}
#progress_container {
    position: absolute;
    border-radius: 50%;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -120px;
    background: #D0D2D5;
    background: -moz-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0d2d5), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, #d0d2d5 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #d0d2d5 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d2d5', endColorstr='#ffffff', GradientType=0);
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
#progress_dial {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.2);
    z-index: 6;
}
#progress_shadow {
    position: absolute;
    border-radius: 50%;
    width: 212px;
    height: 212px;
    margin: 14px;
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
    z-index: 8;
}
#progress {
    position: absolute;
    margin: 8px;
    z-index: 7;
}
#progress_content {
    position: absolute;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 21px;
    background: #fafafb;
    background-image: url("//images.getbubbla.com/_index/bg-noise.png");
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafb), color-stop(100%, #e1e2e5));
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -webkit-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -moz-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -o-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), -ms-linear-gradient(top, #fafafb 0%, #e1e2e5 100%);
    background-image: url("//images.getbubbla.com/_index/bg-noise.png"), linear-gradient(to bottom, #fafafb 0%, #e1e2e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafb', endColorstr='#e1e2e5', GradientType=0);
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.5), 0px 0px 3px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 2px 1px rgba(32, 46, 61, 0.9), inset 0px 1px 3px 2px rgba(255,255,255,1);
    z-index: 9;
}
h1#progress_percentage {
    position: relative;
    margin: 35px 0 0 0;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
    display: block;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 60px;
    padding: 0;
    text-align: center;
    width: 170px;
}
h1#progress_percentage:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    text-shadow: none;
    top: 1px;
    left: 1px;
}
h2#progress_value {
    position: absolute;
    display: block;
    margin: -8px 0 0 0;
    color: #777;
    font-family:'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 18px;
    padding: 0;
    text-align: center;
    width: 170px;
    z-index:10;
    text-shadow: 0px 1px 1px #fff;
}
h2#progress_value:before {
    content: attr(title);
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    width: 170px;
    top: 1px;
    left: 1px;
    text-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_container">
    <svg id="progress_dial" width="212px" height="212px">
        <path d="M 0 106 C 0 47.4571 47.4571 0 106 0 C 164.5429 0 212 47.4571 212 106 C 212 164.5429 164.5429 212 106 212 C 47.4571 212 0 164.5429 0 106 Z" fill="#e0e1e5" />
        <path opacity="0.6" d="M 106.5 0.5 L 106.5 212.5 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 133.9519 3.9825 L 79.0822 208.7587 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.517 14.5719 L 53.517 198.1693 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.4704 31.4173 L 31.5637 181.3239 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.3157 53.3706 L 14.7183 159.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 208.9052 78.9358 L 4.1289 133.8054 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 212.517 106.3706 L 0.517 106.3706 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 209.0346 133.8224 L 4.2583 78.9528 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 198.4451 159.3876 L 14.8478 53.3876 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 181.5998 181.341 L 31.6931 31.4343 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 159.6464 198.1863 L 53.6465 14.5889 " stroke="#ffffff" stroke-width="1" />
        <path opacity="0.6" d="M 134.0813 208.7758 L 79.2116 3.9995 " stroke="#ffffff" stroke-width="1" />
    </svg>
    <div id="progress_shadow">
        <div id="progress_content">
            <h1 id="progress_percentage" title="">0%</h1>
            <h2 id="progress_value" title="">&pound;0</h2>
        </div>
    </div>
    <canvas id="progress" width="224" height="224"></canvas>
</div>

这是你需要的吗？？由于金额是一个较大的数字而添加了另一个处理金额的间隔，并添加了一个计时器数组，您可以选择对其进行编辑以控制宽松的持续时间var timers = [30,5]; 30：对于％值，对于金额值为5。 / p>

希望有所帮助

使用SetInterval添加缓动和增量值

奖金功能

2 个答案: