Полоса хода холста с эффектом отскока

0

Отказы Пример с div

Изменение div.style.width с вашими данными холста .. max с максимальным значением и duration ..

requestAnimationframe является 60fps так 3000ms/60 дает количество кадров.

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/

ПОЛНАЯ КАРТИНА версия

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

добавить этого нужно просто холст и установить ширину & высота

<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);

если у вас есть какие-либо вопросы, просто спросите.

источник

2014-02-01 14:56:32 cocco

+0

Спасибо, я нашел это: http://stackoverflow.com/questions/7465052/animated-canvas-arc-with-easing Пробовал объединить мой код с вашим, но это, вероятно, сложно для меня. – zdenda204

+0

посмотреть версию холста – cocco

+0

Спасибо, я редактирую мой код, это лучше, чем раньше :) Но у меня проблемы с процентами и скоростью анимации ... JSFiddle - http://jsfiddle.net/zdenda204/sL5cQ/12/ – zdenda204

0

Вы можете добиться эффекта отскока, оживляя ничью, используя tweening с уравнением ослабления.

Tween.js простой Lib для обработки: https://github.com/sole/tween.js/

Вы использовали бы это что-то вроде этого:

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();

источник

2014-02-01 14:08:46 imcg

+0

Но я не хочу Экстерн библиотеки. – zdenda204

0

Используйте эту суть, чтобы получить функцию смягчения https://gist.github.com/dezinezync/5487119 также проверить http://gizma.com/easing/

источник

2014-02-01 14:26:13

0

<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>

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

написать этот код в ваш HTML

источник

2015-10-07 11:13:36

Полоса хода холста с эффектом отскока

ответ

Смежные вопросы