Question

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

Answer 1

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

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

Answer 2

使用此要点获得缓动功能https://gist.github.com/dezinezync/5487119还可以查看http://gizma.com/easing/

Answer 3

带有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/

完整的CANVAS版本

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

jsut添加画布并设置宽度＆amp;高度

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

如果您有任何问题，请询问。

Answer 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

中写下这段代码

画布圈进度条具有弹跳效果

4 个答案: