requestAnimationFrame example

LeeMoonki · Dec 28, 2020 · ca80998 · ca80998
1 parent d73cde2
commit ca80998
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/note/requestAnimationFrame.html b/note/requestAnimationFrame.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+
+    <style>
+      #SomeElementYouWantToAnimate {
+        width: 50px;
+        height: 50px;
+        background-color: #ff0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="SomeElementYouWantToAnimate"></div>
+    <script type="text/javascript">
+      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);
+    </script>
+  </body>
+</html>
+