Merge branch 'v1.1.2'

juliangarnier · Oct 26, 2016 · 1226b12 · 1226b12
2 parents 87f4e72 + 9d10462
commit 1226b12
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 19 deletions.
diff --git a/anime.js b/anime.js
@@ -1,5 +1,5 @@
 /*
- * Anime v1.1.1
+ * Anime v1.1.2
  * http://anime-js.com
  * JavaScript animation engine
  * Copyright (c) 2016 Julian Garnier
@@ -22,7 +22,7 @@
   }
 }(this, function () {
 
-  var version = '1.1.1';
+  var version = '1.1.2';
 
   // Defaults
 
@@ -394,6 +394,10 @@
     if (tweens.length) return Math.max.apply(Math, tweens.map(function(tween){ return tween.totalDuration; }));
   }
 
+  var getTweensDelay = function(tweens) {
+    if (tweens.length) return Math.min.apply(Math, tweens.map(function(tween){ return tween.delay; }));
+  }
+
   // will-change
 
   var getWillChange = function(anim) {
@@ -499,7 +503,6 @@
         anim.animatables[t].target.style[transform] = transforms[t].join(' ');
       }
     }
-    if (anim.settings.update) anim.settings.update(anim);
   }
 
   // Animation
@@ -511,6 +514,7 @@
     anim.properties = getProperties(params, anim.settings);
     anim.tweens = getTweens(anim.animatables, anim.properties);
     anim.duration = getTweensDuration(anim.tweens) || params.duration;
+    anim.delay = getTweensDelay(anim.tweens) || params.delay;
     anim.currentTime = 0;
     anim.progress = 0;
     anim.ended = false;
@@ -547,7 +551,10 @@
       time.current = Math.min(Math.max(time.last + now - time.start, 0), anim.duration);
       setAnimationProgress(anim, time.current);
       var s = anim.settings;
-      if (s.begin && time.current >= s.delay) { s.begin(anim); s.begin = undefined; };
+      if (time.current >= anim.delay) {
+        if (s.begin) s.begin(anim); s.begin = undefined;
+        if (s.update) s.update(anim);
+      }
       if (time.current >= anim.duration) {
         if (s.loop) {
           time.start = now;

diff --git a/anime.min.js b/anime.min.js
diff --git a/examples/colors.html b/examples/colors.html
@@ -33,6 +33,7 @@
     color: white;
     line-height: 10vw;
     text-align: center;
+    background-color: #FF324A;
   }
 
 </style>
@@ -48,20 +49,26 @@
     var hex = anime({
       targets: '.hex',
       backgroundColor: '#319BFF',
-      duration: 2000,
-      loop: true
+      duration: 5000,
+      loop: true,
+      direction: 'alternate',
+      easing: 'easeOutQuad'
     });
     var rgb = anime({
       targets: '.rgb',
       backgroundColor: 'rgb(49,155,255)',
-      duration: 2000,
-      loop: true
+      duration: 5000,
+      loop: true,
+      direction: 'alternate',
+      easing: 'easeOutQuad'
     });
     var hsl = anime({
       targets: '.hsl',
       backgroundColor: 'hsl(210,100%,60%)',
-      duration: 2000,
-      loop: true
+      duration: 5000,
+      loop: true,
+      direction: 'alternate',
+      easing: 'easeOutQuad'
     });
   </script>
 </body>

diff --git a/examples/functions-as-timing-values.html b/examples/functions-as-timing-values.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>anime.js</title>
+  <meta charset="utf-8">
+  <link rel="icon" type="image/png" href="img/favicon.png" />
+  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
+  <link href="css/styles.css" rel="stylesheet">
+</head>
+<style>
+
+  section {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 15rem;
+    height: 5rem;
+    background-color: #FF324A;
+  }
+
+  div {
+    width: 4rem;
+    height: 4rem;
+    margin: auto;
+    background: #FFF;
+  }
+
+  .begin {
+    background-color: #FFFF99;
+  }
+
+  .update div {
+    background-color: #206EFF;
+  }
+
+  .complete div {
+    background-color: #31FFA6;
+  }
+
+</style>
+</head>
+<body>
+  <section>
+    <div></div>
+    <div></div>
+    <div></div>
+  </section>
+  <script src="../anime.js"></script>
+  <script>
+
+  var sectionEl = document.querySelector('section');
+
+  function delayFunc() {
+    console.log('BEGIN');
+    sectionEl.classList.add('begin');
+  }
+
+  function updateFunc() {
+    console.log('UPDATE');
+    sectionEl.classList.add('update');
+  }
+
+  function completeFunc() {
+    console.log('COMPLETE');
+    sectionEl.classList.add('complete');
+  }
+
+  anime({
+    targets: 'div',
+    translateY: 100,
+    scale: 1.5,
+    rotate: {
+      value: 360,
+      duration: function(el, i) { return 2000 + (i * 500) },
+      delay: function(el, i) { return 2000 + (i * 500) },
+      easing: 'easeOutQuad',
+    },
+    delay: function(el, i) { return 1000 + (i * 500); },
+    duration: function(el, i) { return 1000 + (i * 500); },
+    begin: delayFunc,
+    update: updateFunc,
+    complete: completeFunc
+  });
+
+  </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animejs",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "JavaScript animation engine",
   "main": "anime.js",
   "repository": {