Animare un cerchio di tela per disegnare sul carico

OK Ciao.Animare un cerchio di tela per disegnare sul carico

Ho deciso di iniziare a utilizzare il canvas HTML per un piccolo progetto che ho.

Non c'è ancora un vero inizio. Sto imparando le basi del Canvas e voglio Animare un cerchio

<!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>

Ecco un violino http://jsfiddle.net/oskar/Aapn8/ di quello che sto cercando di realizzare. Non devo preoccuparmi dell'effetto "Bounce".

Ma fondamentalmente voglio disegnare sul caricamento della pagina e fermarmi all'angolo dell'arco desiderato Ecco il violino di ciò che ho creato finora.

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

Grazie

fonte

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

Fondamentalmente ho usato la stessa formula dal link dimostrativo che hai postato. Ho quindi aggiunto una funzione di animazione che, quando chiamata, aggiornerà il cerchio fino a raggiungere la percentuale finale desiderata.

L'animazione è continuamente chiamata da requestAnimationFrame questo è il modo preferito di fare qualsiasi tipo di animazione con tela. Ogni volta che animate viene chiamato, la percentuale corrente viene aumentata di uno, che viene quindi utilizzata per ridisegnare l'arco.

fonte

2013-03-28 22:24:50 Loktar

Grazie, che ce l'hai fatta ... Ho qualche problema con il mio browser: - [ – metalwings

La tua demo live non sembra avere alcun aggiornamento? Sembra lo stesso – Blackline

Ha dimenticato di aggiungere la funzione animata – metalwings

tre fasi:

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.

Non ci sono funzioni nel codice. Se non sai come fare le funzioni e li usa + ciò che è variabile globale è meglio leggere prima un tutorial di questo, ma in ogni caso cercherò di farvi un esempio :)

fonte

2013-03-28 21:35:32 metalwings

OK. se potessi aiutarmi con una specie di violino sarebbe fantastico. Sono uno sviluppatore HTML/CSS appena entrato in Canvas. Conosco vagamente le funzioni (da PHP). – Blackline

Ok, farò il violino quando ho finito :) Hmm ... Non conosco molto bene PHP, ma penso che sia così così allo stesso modo. La tela utilizza JavaScript e jQuery (che è come JavaScript) ... Spero di aver finito in 30 minuti :) – metalwings

Non vedo l'ora che i vostri violini oscillino. – Blackline

Animare un cerchio di tela per disegnare sul carico

risposta

Problemi correlati