Canvas circle progress bar with bounce effect

Question

I have this code. How I can make bounce effect as here? http://themeforest.net/item/cloud-admin-bootstrap-3-responsive-dashboard/full_screen_preview/6069264

score 0 · Answer 1 · answered Feb 01 '14 at 14:08

You can achieve a bounce effect by animating the draw using tweening with an easing equation.

Tween.js is a simple lib for handling this: https://github.com/sole/tween.js/

You would use it something like this:

var duration = 1000,
    startValue = 0,
    endValue = 100;

var tween = new TWEEN.Tween({x: startValue})
    .to({ x: endValue }, duration)
    .onUpdate(function() {
        animate(this.x);
    })
    .easing(TWEEN.Easing.Bounce.Out)
    .start();

But i don't want extern libraries. – zdenda204 Feb 01 '14 at 14:12 — zdenda204, Feb 01 '14 at 14:12

score 0 · Answer 2 · answered Feb 01 '14 at 14:26

0

Use this gist to get an easing function https://gist.github.com/dezinezync/5487119 also check out http://gizma.com/easing/

answered Feb 01 '14 at 14:26

cocco · Accepted Answer · 2014-02-01T15:15:26.840

Bounce example with a div

Change div.style.width with your canvas data.. max with the max value and the duration ..

requestAnimationframe is 60fps so 3000ms/60 gives you the number of frames.

function bounceOut(k){
 return k<1/2.75?
 7.5625*k*k:k<2/2.75?
 7.5625*(k-=1.5/2.75)*k+.75:k<2.5/2.75?
 7.5625*(k-=2.25/2.75)*k+.9375:
 7.5625*(k-=2.625/2.75)*k+.984375
}
function animate(){
 div.style.width=(bounceOut(current/duration)*max|0)+'px';
 ++current>duration||(a=webkitRequestAnimationFrame(animate));
}
var div=document.getElementsByTagName('div')[0],
    duration=3000/60|0,
    current=0,
    max=500;
var a=webkitRequestAnimationFrame(animate);

Demo

http://jsfiddle.net/vL7Mp/1/

FULL CANVAS version

http://jsfiddle.net/vL7Mp/2/

jsut add a canvas and set the width & height

<canvas width="128" height="128"></canvas>

js

function animateC(p,C,K){
var c=C.getContext("2d"),
x=C.width/2,
r=x-(x/4),
s=(-90/180)*Math.PI,
p=p||0,
e=(((p*360|0)-90)/180)*Math.PI;
c.clearRect(0,0,C.width,C.height);
c.fillStyle=K;
c.textAlign='center'; 
c.font='bold '+(x/2)+'px Arial';
c.fillText(p*100|0,x,x+(x/5));
c.beginPath();
c.arc(x,x,r,s,e);
c.lineWidth=x/2;
c.strokeStyle=K;
c.stroke();
}

function bounceOut(k){
 return k<1/2.75?
 7.5625*k*k:k<2/2.75?
 7.5625*(k-=1.5/2.75)*k+.75:k<2.5/2.75?
 7.5625*(k-=2.25/2.75)*k+.9375:
 7.5625*(k-=2.625/2.75)*k+.984375
}
function animate(){
 animateC(bounceOut(current/duration),canvas,'rgba(127,227,127,0.3)');
 ++current>duration||(a=webkitRequestAnimationFrame(animate));
}
var canvas=document.getElementsByTagName('canvas')[0],
    duration=6000/60|0,
    current=0,
    max=500,
    a=webkitRequestAnimationFrame(animate);

if you have any questions just ask.

Thanks, i found this: http://stackoverflow.com/questions/7465052/animated-canvas-arc-with-easing A tried combine my code with your, but it's probably hard for me. — zdenda204, Feb 01 '14 at 15:07
Thank you, I edit my code it's more better then before :) But I have problem with percents and with speed of animations... JSFiddle is http://jsfiddle.net/zdenda204/sL5cQ/12/ — zdenda204, Feb 01 '14 at 16:02
yes you have to much parameters that slow down your code... to have higher performance you need less data inside the animation function. — cocco, Feb 01 '14 at 16:18
So, I edit it but it's still slow. I don't want make you busy, but can you do it? When I tried RequestAnimationFrame, it was worse :( — zdenda204, Feb 01 '14 at 16:24

score 0 · Answer 4 · answered Oct 07 '15 at 11:13

<html>
<head>
<title> two ball game</title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<body>
<canvas id="canvas" width="852" height= "521" style= "border:5px solid grey ;" margin = right >
</canvas>
<script>

var x = 1;
var y = 1;
var dx = 2;
var dy = 1;
var ctx;
var WIDTH; 
var HEIGHT;

init();
function circle(x,y,r) {
ctx.beginPath();
ctx.fillStyle="blue";
ctx.arc(x, y, 8, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
  ctx = $('#canvas')[0].getContext("2d");
  WIDTH = $("#canvas").width()
  HEIGHT = $("#canvas").height()
  return setInterval(draw, 10);
}

function draw() {
  clear();
  circle(x, y, 10);

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}


</script>
</body>
</html>

/****************************************************************\

write this code in your html

Canvas circle progress bar with bounce effect

4 Answers4