キャンバスサークルをアニメーション化して読み込み時に描画する

私は小さなプロジェクトでHTMLキャンバスを使用することに決めました。

実際の開始はまだありません。ここで私が達成しようとしているもののフィドルhttp://jsfiddle.net/oskar/Aapn8/がある私はちょうどキャンバスの基本を学んでいると私は

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     background: #222; 
     } 

    </style> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 75; 
     var startAngle = 1.5 * Math.PI; 
     var endAngle = 3.2 * Math.PI; 
     var counterClockwise = false; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 15; 
     // line color 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script> 
</body> 
</html>

円をアニメーションにしたいです。私は "バウンス"効果に戸惑うことはありません。

しかし、私は基本的にはページ上に描画し、弧の角度で停止することを望みますこれまでに作成したもののフィドルです。

http://jsfiddle.net/skerwin/uhVj6/

おかげ

出典

2013-03-28 Blackline

http://codepen.io/dcdev/pen/upjDy – davidcondrey

Live Demo

を作ってみるよ場合

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
           window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 



var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 85; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 10; 
context.strokeStyle = '#ad2323'; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.shadowBlur = 10; 
context.shadowColor = '#656565'; 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } 
} 

animate();

基本的に私が投稿したデモリンクから同じ式を使用しました。それから、呼び出されたときに円を更新して目的の終了パーセントに達するアニメーション関数を追加しました。

アニメーションは継続的にrequestAnimationFrameで呼び出されます。これは、キャンバスでアニメーションを行うのに好ましい方法です。 animateが呼び出されるたびに、現在のパーセント値が1だけ増加し、次にそれを使って円弧を再描画します。

出典

2013-03-28 22:24:50 Loktar

ありがとうございました。私のブラウザで： - [ – metalwings

あなたのライブデモは更新されていないようですか？それは同じように見える – Blackline

彼はアニメーション機能を追加するのを忘れた – metalwings

3つのステップ：

1) Make an "init" function which will assign the variables (they aren't in any 
function). 
2) Then use requestAnimationFrame, or setInterval with your 
drawing function you will create. 
3) In this "drawing/updating" function you're going to 
write your code to do the maths and then just animate the updated circle.

は、あなたのコード内の任意の関数がありません。あなたは、関数を作成し、それが最初にそのことについてのチュートリアルを読むことを勧めしますグローバル変数は+何にそれらを使用する方法がわからないけど、とにかく私はあなたの例:)

出典

2013-03-28 21:35:32 metalwings

OK。あなたが素晴らしいものになるような、ある種のフィドルで私を助けることができたら。私は、キャンバスに足を踏み入れるだけのHTML/CSS開発者です。私は関数を漠然と知っています（PHPから）。 – Blackline

いいえ、私が終わったらうんざりします:)うーん...私は非常に良いPHPを知らないが、私はそれがとても同じだと思う。キャンバスはJavaScriptとjQuery（JavaScriptのようなものです）を使用しています...私は30分で済むことを願っています:) – metalwings

私はあなたのフィドルメタルウィングを楽しみにしています。 – Blackline

キャンバスサークルをアニメーション化して読み込み時に描画する

答えて

関連する問題