खोज…
वाक्य - विन्यास
- window.requestAnimationFrame ( कॉलबैक );
- window.webkitRequestAnimationFrame ( कॉलबैक );
- window.mozRequestAnimationFrame ( कॉलबैक );
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
| वापस कॉल करें | "एक पैरामीटर जो किसी फ़ंक्शन को कॉल करने के लिए निर्दिष्ट करता है जब यह आपके अगले प्रतिनिधि के लिए एनीमेशन को अपडेट करने का समय है।" ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
टिप्पणियों
जब यह DOM तत्वों को द्रवित करने की बात आती है, तो हम निम्नलिखित CSS बदलावों तक सीमित हैं:
- स्थिति -
transform: translate (npx, npx); - स्केल -
transform: scale(n); - स्थिति -
transform: rotate(ndeg); - विकल्प -
opacity: 0;
हालांकि, इनका उपयोग करने की कोई गारंटी नहीं है कि आपके एनिमेशन तरल होंगे, क्योंकि यह ब्राउज़र को नए paint चक्र शुरू करने का कारण बनता है, फिर चाहे जो भी हो। असल में, paint को अक्षम रूप से बनाया जाता है और आपका एनीमेशन "जानकी" दिखता है क्योंकि फ्रेम प्रति सेकंड (एफपीएस) ग्रस्त है।
सुगम-संभव डोम एनिमेशन की गारंटी देने के लिए, ऊपर दिए गए CSS बदलावों के साथ requestAnimationFrame का उपयोग किया जाना चाहिए।
यह काम करता है, इसका कारण यह है क्योंकि requestAnimationFrame एपीआई ब्राउज़र को यह requestAnimationFrame है कि आप अगले paint चक्र पर एक एनीमेशन चाहते हैं, क्योंकि जब एक गैर-आरएएफ एनीमेशन कहा जाता है तो एक नए पेंट चक्र को बाध्य करने के लिए क्या हो रहा है , इसे बाधित करने का विरोध किया जाता है ।
| संदर्भ | यूआरएल |
|---|---|
| क्या है जान? | http://jankfree.org/ |
| उच्च प्रदर्शन एनिमेशन | http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ । |
| रेल | https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en |
| क्रिटिकल रेंडरिंग पाथ का विश्लेषण | https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en |
| प्रदर्शन का प्रतिपादन | https://developers.google.com/web/fundamentals/performance/rendering/?hl=en |
| पेंट टाइम्स का विश्लेषण | https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en |
| पेंट की अड़चनों की पहचान करना | https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en |
तत्व में फीका करने के लिए requestAnimationFrame का उपयोग करें
- JsFiddle देखें : https://jsfiddle.net/HimmatChahal/jb5trg67/
- नीचे + कॉपी करने योग्य कोड :
<html>
<body>
<h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
<script>
// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 2.0 * 1000;
// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime=-1.0;
// Function to render current frame (whatever frame that may be)
function render(currTime) {
var head1 = document.getElementsByTagName('h1')[0];
// How opaque should head1 be? Its fade started at currTime=0.
// Over FADE_DURATION ms, opacity goes from 0 to 1
var opacity = (currTime/FADE_DURATION);
head1.style.opacity = opacity;
}
// Function to
function eachFrame() {
// Time that animation has been running (in ms)
// Uncomment the console.log function to view how quickly
// the timeRunning updates its value (may affect performance)
var timeRunning = (new Date()).getTime() - startTime;
//console.log('var timeRunning = '+timeRunning+'ms');
if (startTime < 0) {
// This branch: executes for the first frame only.
// it sets the startTime, then renders at currTime = 0.0
startTime = (new Date()).getTime();
render(0.0);
} else if (timeRunning < FADE_DURATION) {
// This branch: renders every frame, other than the 1st frame,
// with the new timeRunning value.
render(timeRunning);
} else {
return;
}
// Now we're done rendering one frame.
// So we make a request to the browser to execute the next
// animation frame, and the browser optimizes the rest.
// This happens very rapidly, as you can see in the console.log();
window.requestAnimationFrame(eachFrame);
};
// start the animation
window.requestAnimationFrame(eachFrame);
</script>
</body>
</html>
एक एनीमेशन रद्द करना
requestAnimationFrame लिए एक कॉल रद्द करने के लिए, आपको उस आईडी की आवश्यकता होती है, जब इसे अंतिम बार बुलाया गया था। यह वह पैरामीटर है जिसका उपयोग आप cancelAnimationFrame लिए cancelAnimationFrame । निम्नलिखित उदाहरण कुछ काल्पनिक एनीमेशन शुरू करता है फिर एक सेकंड के बाद इसे रोक देता है।
// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
// do some animation
// request next frame
start();
}
// pauses the animation
function pause() {
// pass in the id returned from the last call to requestAnimationFrame
cancelAnimationFrame(requestId);
}
// begin the animation
function start() {
// store the id returned from requestAnimationFrame
requestId = requestAnimationFrame(draw);
}
// begin now
start();
// after a second, pause the animation
setTimeout(pause,1000);
अनुकूलता बनाए रखना
बेशक, जावास्क्रिप्ट जावास्क्रिप्ट में ज्यादातर चीजें पसंद हैं, आप बस इस तथ्य पर भरोसा नहीं कर सकते हैं कि हर जगह सब कुछ समान होगा। इस स्थिति में, requestAnimationFrame कुछ प्लेटफार्मों पर एक उपसर्ग हो सकता है और इसे अलग-अलग नाम दिया जाता है, जैसे webkitRequestAnimationFrame । सौभाग्य से, सभी ज्ञात अंतरों को समूहित करने का एक बहुत आसान तरीका है जो 1 फ़ंक्शन तक मौजूद हो सकता है:
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
ध्यान दें कि अंतिम विकल्प (जो कोई मौजूदा समर्थन नहीं मिलने पर भरता है) को cancelAnimationFrame नहीं किया जाएगा। हालांकि, एक कुशल पॉलीफ़िल लिखा गया था जो इसे ठीक करता है।