diff options
Diffstat (limited to 'files/it/web/api/window/requestanimationframe/index.html')
| -rw-r--r-- | files/it/web/api/window/requestanimationframe/index.html | 115 |
1 files changed, 0 insertions, 115 deletions
diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html deleted file mode 100644 index f3c835b671..0000000000 --- a/files/it/web/api/window/requestanimationframe/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: window.requestAnimationFrame() -slug: Web/API/Window/requestAnimationFrame -tags: - - API - - Animations - - Animazioni - - DOM - - DOM Reference - - Drawing - - Graphics - - Performance - - Reference - - Window - - requestAnimationFrame -translation_of: Web/API/window/requestAnimationFrame ---- -<div>{{APIRef}}</div> - -<div>Il metodo <strong><code>window.requestAnimationFrame()</code></strong>indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.</div> - -<div> </div> - -<div class="note"><strong>Nota:</strong> la funzione di callback deve chiamare a sua volta <code>requestAnimationFrame() </code>se vuoi animare un'altro frame alla successiva azione di render del browser.</div> - -<p>Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.<br> - L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.</p> - -<p>Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di <code>requestAnimationFrame()</code><br> - Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.<br> - Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).</p> - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<pre class="syntaxbox">window.requestAnimationFrame(callback); -</pre> - -<h3 id="Parameters" name="Parameters">Parametri</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.<br> - La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui <code>requestAnimationFrame()</code> inizia la sua esecuzione.</dd> -</dl> - -<h3 id="Valori_di_ritorno">Valori di ritorno</h3> - -<p>Un valore intero di tipo <code>long</code>, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da rimuovere/cancellare la callback dalla coda di richieste da eseguire.</p> - -<h2 id="Notes" name="Notes">Esempio</h2> - -<pre class="brush: js">var start = null; -var element = document.getElementById('SomeElementYouWantToAnimate'); -element.style.position = 'absolute'; - -function step(timestamp) { - if (!start) start = timestamp; - var progress = timestamp - start; - element.style.left = Math.min(progress / 10, 200) + 'px'; - if (progress < 2000) { - window.requestAnimationFrame(step); - } -} - -window.requestAnimationFrame(step); -</pre> - -<h2 id="Specification" name="Specification">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> - <p>Nessun cambiamento. Sostituisce il precedente.</p> - </td> - </tr> - <tr> - <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> - <td>{{Spec2('RequestAnimationFrame')}}</td> - <td> - <p>Definizione iniziale</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_del_Browser">Compatibilità del Browser</h2> - -<div> - - -<p>{{Compat("api.Window.requestAnimationFrame")}}</p> -</div> - -<h2 id="See_also" name="See_also">Leggi anche</h2> - -<ul> - <li>{{domxref("Window.mozAnimationStartTime")}}</li> - <li>{{domxref("Window.cancelAnimationFrame()")}}</li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> - <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> - <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> - <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> - <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> -</ul> |