具有弹跳效果的画布圆形进度条答案

【问题标题】：Canvas circle progress bar with bounce effect具有弹跳效果的画布圆形进度条
【发布时间】：2023-04-02 05:10:01
【问题描述】：

我有this 代码。我怎样才能像这里一样制作弹跳效果？ http://themeforest.net/item/cloud-admin-bootstrap-3-responsive-dashboard/full_screen_preview/6069264

【问题讨论】：

标签： javascript animation geometry effect bounce

【解决方案1】：

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

演示

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

全画布版

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

只需要添加一个画布并设置宽度和高度

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

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

如果您有任何问题，请尽管提出。

【讨论】：

谢谢，我发现了这个：stackoverflow.com/questions/7465052/… 尝试将我的代码与您的代码结合起来，但这对我来说可能很难。
查看画布版本
谢谢，我编辑了我的代码，它比以前更好:) 但是我对百分比和动画速度有疑问... JSFiddle 是jsfiddle.net/zdenda204/sL5cQ/12
是的，你必须有很多参数会减慢你的代码速度......要获得更高的性能，你需要在动画函数中使用更少的数据。
所以，我编辑了它，但它仍然很慢。我不想让你忙，但你能做到吗？当我尝试 RequestAnimationFrame 时，情况更糟:(

【解决方案2】：

您可以通过使用带有缓动方程的补间动画绘制动画来实现反弹效果。

Tween.js 是一个用于处理此问题的简单库：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();

【讨论】：

但我不想要外部库。

【解决方案3】：

使用这个要点来获得一个缓动函数https://gist.github.com/dezinezync/5487119 也可以查看http://gizma.com/easing/

【讨论】：

【解决方案4】：

<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 中写下这段代码

【讨论】：