1

アニメーション化された円がある HTML-5 キャンバスがあります。以下の JS コードを参照してください。

function doFirst(){
   canvas = document.getElementById('myCanvas');
   context = canvas.getContext('2d');
   centerX = canvas.width / 4;
   centerY = canvas.height / 4;
   radius = 20;    
   dy=4;
   drawCircle(centerX,centerY,radius);
   myVar=setInterval(moveCirc,40);      
}

function moveCirc(){                
context.clearRect(0,0,canvas.width,canvas.height);
drawCircle(centerX,centerY,radius);
centerY+=dy;
if(centerY>canvas.height-50)
  clearInterval(myVar);     
}

function drawCircle(x,y,r){     
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.fillStyle = 'blue';
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.stroke();
context.fill();
}
window.addEventListener("load",doFirst,false);

ユーザーがマウスを円の上に持ってくるたびに、アニメーションが一時停止し、メッセージが表示されるようにします。ユーザーがマウスを円の外に移動すると、一時停止したポイントからアニメーションが再開され、メッセージが消えるはずです。この機能を実現するために私を助けてください。

4

1 に答える 1

0

css3 アニメーションを使用している場合は 、マウスオーバーで css プロパティを変更します

-webkit-animation-play-state: to pausedアニメーション を一時停止します。

その時点からアニメーションを再開するには、css プロパティを変更します。

-webkit-animation-play-state:実行中 へ

ソース: http://css-infos.net/property/-webkit-animation-play-state

注: Webkit ベースのブラウザーの場合は" -webkit "。Mozilla の場合は「-moz 」 、オペラの場合は「 -o 」などを使用します。

于 2013-02-04T07:46:00.437 に答える