0

誰かがそのキャンバスで私を少し助けてくれますか、私はそれを学んでいて、rが100になると0アニメーションに戻る円を作ることができません つまり、ある種のズーム画像です。

私は次のように円を描きます。

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
</script>

半径が 100 に達するとすぐに 0 に戻り、その後再び 100 に戻ります。

ありがとう

4

1 に答える 1

2

数学正弦関数を見てください http://www.digitalmedia.cz/shared/clanky/438/graf.gif

その値が に行き、 と の間の角度で に戻ることを利用しましょう1。00PI

var period = 500; // [miliseconds]
var linearMod = Date.now() % period / period; // this goes from 0 to 1
var mod = Math.sin(linearMod * Math.PI); // and here with simple easing we create 
                                         // bouncing
var r = someRadius * mod;                // voila

このアプローチを使用すると、よりダイナミックに感じる単純な正弦曲線のイージングも得られます。

これはあなたのためのちょっとしたフィドルですhttp://jsfiddle.net/rezoner/6acF9/

時間をベースlinearModにする必要はありません。スライダー コントロールなどに割り当てることができます。

于 2013-01-22T11:01:02.100 に答える