renovations

2015-03-04 23:09:07 +03:00 · 2015-03-04 23:09:07 +03:00 · 951cf3f2ec
commit 951cf3f2ec
parent 05d35d0d16
152 changed files with 2527 additions and 2179 deletions
--- a/5-animation/3-js-animation/width.view/animate.js
+++ b/5-animation/3-js-animation/width.view/animate.js
@ -0,0 +1,20 @@
+function animate(options) {
+
+  var start = performance.now();
+
+  requestAnimationFrame(function animate(time) {
+    // timeFraction от 0 до 1
+    var timeFraction = (time - start) / options.duration;
+    if (timeFraction > 1) timeFraction = 1;
+
+    // текущее состояние анимации
+    var progress = options.timing(timeFraction)
+    
+    options.draw(progress);
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+
+  });
+}
--- a/5-animation/3-js-animation/width.view/index.html
+++ b/5-animation/3-js-animation/width.view/index.html
@ -1,13 +1,36 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-<link type="text/css" rel="stylesheet" href="animate.css">
-<script src="width.js"></script>
+  <meta charset="utf-8">
+  <style>
+    progress {
+      width: 5%;
+    }
+  </style>
+  <script src="animate.js"></script>
 </head>
 <body>

-<div onclick="stretch(this.children[0])" class="example_path">
-	<div class="example_block"></div>
-</div>
+
+<progress id="elem"></progress>
+
+<script>
+
+
+elem.onclick = function() {
+  animate({
+    duration: 1000,
+    timing: function(timeFraction) { 
+      return timeFraction; 
+    },
+    draw: function(progress) {
+      elem.style.width = progress * 100 + '%';
+    }
+  });
+};
+
+</script>
+
+
 </body>
 </html>