nanotween - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/helpers.js

@@ -1,1 +0,1 @@
-var ntHelpers=function(n){return n.yoyo=function(n){return n.on("step",function(){n.reverse().set(0),n.bus.emit("yoyo",n.state.reversed)}),n},n.fromTo=function n(t,o,c){return function(u){u.convert(function(u){return"object"==typeof t?Object.keys(t).reduce(function(c,u){c[u]=n(t[u],o[u])},{}):(c||function(n,t,o){return n+(t-n)*o})(t,o,u)})}},n.Chain=function(n){var t=this,o={start:[],stop:[],step:[],update:[],complete:[]};t.current=0,t.tweens=n,t.on=function(n,t){return o[n].push(t),this},t.start=function(){t.stop(),n[0].start()},t.stop=function(){n[t.current].stop()},t.play=function(){n[t.current].play()},t.pause=function(){n[t.current].pause()},n[0].on("start",function(){o.start.forEach(function(n){n()})}),n[n.length-1].on("complete",function(){o.complete.forEach(function(n){n()})}),n.forEach(function(c,u){c.on("start",function(){t.current=u}).on("stop",function(){t.current=0,o.stop.forEach(function(n){n()})}).on("play",function(n){o.play.forEach(function(t){t(n,u)})}).on("pause",function(n){o.pause.forEach(function(t){t(n,u)})}).on("update",function(n){o.update.forEach(function(t){t(n,u)})}).on("complete",function(){u!==n.length-1&&(n[u+1].start(),o.step.forEach(function(n){n(u)}))})})},n.Group=function(n){var t=this;Object.keys(n[0]).forEach(function(o){"function"==typeof n[0][o]&&(t[o]=function(){var c=arguments;return n.forEach(function(n){n[o].apply(n,c)}),t})}),t.tweens=n},n}({});
+var ntHelpers=function(t){return t.yoyo=function(t,n){return t.on("step",function(){t.reverse(),t.state.repeats=n.repeats-t.state.repeats-1,t.bus.emit("yoyo",t.state.reversed)}),t},t.fromTo=function t(n,o,e){return function(c){c.convert(function(c){return"object"==typeof n?Object.keys(n).reduce(function(e,c){e[c]=t(n[c],o[c])},{}):(e||function(t,n,o){return t+(n-t)*o})(n,o,c)})}},t.Chain=function(t){var n=this,o={start:[],stop:[],step:[],update:[],complete:[]};n.current=0,n.tweens=t,n.on=function(t,n){return o[t].push(n),this},n.start=function(){n.stop(),t[0].start()},n.stop=function(){t[n.current].stop()},n.play=function(){t[n.current].play()},n.pause=function(){t[n.current].pause()},t[0].on("start",function(){o.start.forEach(function(t){t()})}),t[t.length-1].on("complete",function(){o.complete.forEach(function(t){t()})}),t.forEach(function(e,c){e.on("start",function(){n.current=c}).on("stop",function(){n.current=0,o.stop.forEach(function(t){t()})}).on("play",function(t){o.play.forEach(function(n){n(t,c)})}).on("pause",function(t){o.pause.forEach(function(n){n(t,c)})}).on("update",function(t){o.update.forEach(function(n){n(t,c)})}).on("complete",function(){c!==t.length-1&&(t[c+1].start(),o.step.forEach(function(t){t(c)}))})})},t.Group=function(t){var n=this;Object.keys(t[0]).forEach(function(o){"function"==typeof t[0][o]&&(n[o]=function(){var e=arguments;return t.forEach(function(t){t[o].apply(t,e)}),n})}),n.tweens=t},t}({});

dist/index.js

@@ -1,1 +0,1 @@
-var NanoTween=function(){var e,t=(function(e){(e.exports=function(){this.events={}}).prototype={on:function(e,t){return(e=this.events[e]=this.events[e]||[]).push(t),function(){e.splice(e.indexOf(t)>>>0,1)}},emit:function(e){var t=this.events[e];if(t&&t[0]){var n=t.slice.call(arguments,1);t.slice().map(function(e){e.apply(this,n)})}}}}(e={exports:{}},e.exports),e.exports),n=0,s=[];function r(){var e=this,n={delay:0,repeats:1,duration:0,easing:function(e){return e},converters:[]};function r(){return{progress:e.state.progress,value:e.state.value,remaining:e.state.repeats+1,completed:n.repeats-e.state.repeats-1}}function i(t){e.state.progress=t;var s=n.easing;s.reverse=s.reverse||s;var r=e.state.reversed?1-s.reverse(e.state.progress):s(e.state.progress);e.state.value=n.converters.reduce(function(e,t){return t(e)},r),e.bus.emit("update",e.state.value)}e.state={id:s.length,isRunning:!1,isRemoved:!1,current:void 0,progress:0,reversed:!1,repeats:0},e.bus=new t,s.push(e),e.use=function(t){return t(e),e},e.easing=function(t){return n.easing=t,e},e.duration=function(t){return n.duration=t,e},e.delay=function(t){return n.delay=t,e},e.repeat=function(t){return n.repeats=t,e},e.reverse=function(t){return e.state.reversed=void 0!==t?t:!e.state.reversed,e.state.progress=1-e.state.progress,e},e.on=function(t,n){return e.bus.on(t,n),e},e.convert=function(t){return n.converters.push(t),e},e.set=function(t){if(t>1){var n=Math.floor(t);if(e.complete(n),!e.state.isRunning)return;i(t-n)}else i(t);return e},e.tick=function(t){e.set(e.state.progress+t/n.duration)},e.start=function(){return e._i=setTimeout(function(){e.set(0),e.state.repeats=n.repeats-1,e.state.isRunning=!0,e.bus.emit("start")},n.delay),e},e.stop=function(){return e.set(1),e.state.repeats=0,e.state.isRunning=!1,e.bus.emit("stop"),e},e.remove=function(){e.state.isRemoved||(s.splice(s.findIndex(function(t){return e.state.id===t.state.id}),1),e.state.isRemoved=!0)},e.complete=function(t){i(1);for(var n=e.state.repeats<t,s=n?e.state.repeats:t;s>0;)e.state.repeats--,e.bus.emit("step",s),s--;return n&&(e.state.isRunning=!1,e.bus.emit("complete")),e},e.play=function(){return e.state.isRunning=!0,e.bus.emit("play",r()),e},e.pause=function(){return e.state.isRunning=!1,e.bus.emit("pause",r()),e}}return r.update=function(e){document.hidden||(s.forEach(function(t){t.state.isRunning&&t.tick(e-n)}),n=e)},r}();
+var NanoTween=function(){var e,t=(function(e){(e.exports=function(){this.events={}}).prototype={on:function(e,t){return(e=this.events[e]=this.events[e]||[]).push(t),function(){e.splice(e.indexOf(t)>>>0,1)}},emit:function(e){var t=this.events[e];if(t&&t[0]){var s=t.slice.call(arguments,1);t.slice().map(function(e){e.apply(this,s)})}}}}(e={exports:{}},e.exports),e.exports),s=0,n=[];function r(){var e=this,s={delay:0,repeats:1,duration:0,easing:function(e){return e},converters:[]};function r(t){var n={progress:e.state.progress,progressMatched:e.state.progressMatched,value:e.state.value,remaining:e.state.repeats,completed:s.repeats-e.state.repeats};return n.completedTime=n.completed*s.duration+s.duration*(t?n.progress-1:n.progress),n.remainingTime=s.repeats*s.duration-n.completedTime,n}function i(t){e.state.progress=t,e.state.progressMatched=e.state.reversed?1-(s.easing.reverse||s.easing)(e.state.progress):s.easing(e.state.progress)}function a(t,n){i(t),e.state.value=s.converters.reduce(function(t,s){return s(t,e.state.progressMatched)},e.state.progressMatched),e.bus.emit("update",e.state.value,r(n))}e.state={id:n.length,isRunning:!1,isRemoved:!1,progress:0,progressMatched:0,reversed:!1,repeats:0},e.bus=new t,n.push(e),e.use=function(t){return t(e,s),e},e.easing=function(t){return s.easing=t,e},e.duration=function(t){return s.duration=t,e},e.delay=function(t){return s.delay=t,e},e.repeat=function(t){return s.repeats=t,e},e.reverse=function(t){return e.state.reversed=void 0!==t?t:!e.state.reversed,i(1-e.state.progress),e.state.isRunning&&(e.bus.emit("reverse",r(),e.state.isRunning),e.state.repeats=s.repeats-e.state.repeats-1),e},e.on=function(t,s){return e.bus.on(t,s),e},e.convert=function(t){return s.converters.push(t),e},e.set=function(t){if(t>1){var s=Math.floor(t);if(e.complete(s),!e.state.isRunning)return;a(t-s)}else a(t);return e},e.tick=function(t){e.set(e.state.progress+t/s.duration)},e.start=function(){return e._i=setTimeout(function(){e.state.repeats=s.repeats,e.set(0),e.state.isRunning=!0,e.bus.emit("start")},s.delay),e},e.stop=function(){return e.set(1),e.state.repeats=0,e.state.isRunning=!1,e.bus.emit("stop"),e},e.remove=function(){e.state.isRemoved||(n.splice(n.findIndex(function(t){return e.state.id===t.state.id}),1),e.state.isRemoved=!0)},e.complete=function(t){for(var s=e.state.repeats<=t,n=s?e.state.repeats:t;n>0;)e.state.repeats--,a(1,!0),e.bus.emit("step",n,r()),n--;return s&&(e.state.isRunning=!1,e.bus.emit("complete")),e},e.play=function(){return e.state.isRunning=!0,e.bus.emit("play",r()),e},e.pause=function(){return e.state.isRunning=!1,e.bus.emit("pause",r()),e}}return r.update=function(e){document.hidden||(n.forEach(function(t){t.state.isRunning&&t.tick(e-s)}),s=e)},r}();

helpers/yoyo.js

@@ -1,4 +0,5 @@
-export default function(self) {
+export default function(self, options) {
   self.on('step', function() {
-    self.reverse().set(0)
+    self.reverse()
+    self.state.repeats = options.repeats - self.state.repeats - 1
     self.bus.emit('yoyo', self.state.reversed)
@@ -5,0 +6,0 @@ })

index.js

@@ -19,22 +19,30 @@ import NanoEvents from 'nanoevents'
 
-  function remaining() {
-    return {
+  function remaining(end) {
+    var res = {
       progress: self.state.progress,
+      progressMatched: self.state.progressMatched,
       value: self.state.value,
-      remaining: self.state.repeats + 1,
-      completed: _options.repeats - self.state.repeats - 1
+      remaining: self.state.repeats,
+      completed: _options.repeats - self.state.repeats
     }
+    res.completedTime =
+      res.completed * _options.duration +
+      _options.duration * (end ? res.progress - 1 : res.progress)
+    res.remainingTime = _options.repeats * _options.duration - res.completedTime
+    return res
   }
 
-  function _rescale(progress) {
+  function processProgress(progress) {
     self.state.progress = progress
-    var easing = _options.easing
-    easing.reverse = easing.reverse || easing
-    var value = self.state.reversed
-      ? 1 - easing.reverse(self.state.progress)
-      : easing(self.state.progress)
+    self.state.progressMatched = self.state.reversed
+      ? 1 - (_options.easing.reverse || _options.easing)(self.state.progress)
+      : _options.easing(self.state.progress)
+  }
+
+  function _rescale(progress, end) {
+    processProgress(progress)
     self.state.value = _options.converters.reduce(function(res, cb) {
-      return cb(res)
-    }, value)
-    self.bus.emit('update', self.state.value)
+      return cb(res, self.state.progressMatched)
+    }, self.state.progressMatched)
+    self.bus.emit('update', self.state.value, remaining(end))
   }
@@ -46,4 +54,4 @@
     isRemoved: false,
-    current: void 0,
     progress: 0,
+    progressMatched: 0,
     reversed: false,
@@ -58,3 +66,3 @@ repeats: 0
   self.use = function(enhancer) {
-    enhancer(self)
+    enhancer(self, _options)
     return self
@@ -85,3 +93,7 @@ }
     self.state.reversed = val !== void 0 ? val : !self.state.reversed
-    self.state.progress = 1 - self.state.progress
+    processProgress(1 - self.state.progress)
+    if (self.state.isRunning) {
+      self.bus.emit('reverse', remaining(), self.state.isRunning)
+      self.state.repeats = _options.repeats - self.state.repeats - 1
+    }
     return self
@@ -118,4 +130,4 @@ }
     self._i = setTimeout(function() {
+      self.state.repeats = _options.repeats
       self.set(0)
-      self.state.repeats = _options.repeats - 1
       self.state.isRunning = true
@@ -147,8 +159,8 @@ self.bus.emit('start')
   self.complete = function(times) {
-    _rescale(1)
-    var isStop = self.state.repeats < times
+    var isStop = self.state.repeats <= times
     var ticks = isStop ? self.state.repeats : times
     while (ticks > 0) {
       self.state.repeats--
-      self.bus.emit('step', ticks)
+      _rescale(1, true)
+      self.bus.emit('step', ticks, remaining())
       ticks--
@@ -155,0 +167,0 @@ }

package.json

 {
   "name": "nanotween",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Tiny library for tweening",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # NanoTween
 
 ~1.5 KB is quite enough for full-featured and comfortable tweening  
-![image](https://user-images.githubusercontent.com/4208480/34852373-5c445774-f73f-11e7-9dba-9509b3cff954.png)
+![image](https://user-images.githubusercontent.com/4208480/34992412-34f0d6aa-fade-11e7-9352-111f39113387.png)
 
@@ -15,14 +15,14 @@ ## Is it small enough?
 -----------¦-------
-gsap       ¦ 37  KB
-moofx      ¦ 7.4 KB
-es6-tween  ¦ 6.0 KB
-animejs    ¦ 5.7 KB
-kute       ¦ 5.6 KB
-tweenr     ¦ 4.7 KB
-shifty     ¦ 4.2 KB
-kute       ¦ 3.4 KB
-tweenjs    ¦ 2.9 KB
-tweeno     ¦ 2.8 KB
-anim       ¦ 1.1 KB
-nanotween  ¦ 848 B
+gsap       ¦ 37.0 KB
+moofx      ¦  7.4 KB
+es6-tween  ¦  6.0 KB
+animejs    ¦  5.7 KB
+kute       ¦  5.6 KB
+tweenr     ¦  4.7 KB
+shifty     ¦  4.2 KB
+kute       ¦  3.4 KB
+tweenjs    ¦  2.9 KB
+tweeno     ¦  2.8 KB
+anim       ¦  1.1 KB
+nanotween  ¦  0.8 KB
 ```
@@ -37,2 +37,3 @@
 * You can start/stop, play/pause, reverse on-fly or force set tweening progress
+* Also has IIFE build to include as `<script>` file
 
@@ -48,2 +49,4 @@ ## Advantages
 
+### From NPM
+
 ```
@@ -54,5 +57,17 @@ npm install nanotween
 
+### From unpckg
+
+```
+<script src="https://unpkg.com/nanotween@0.5.0/dist/index.js"></script>
+<script src="https://unpkg.com/nanotween@0.5.0/dist/helpers.js"></script>
+<script src="https://unpkg.com/nanotween@0.5.0/dist/easings.js"></script>
+```
+
+`NanoTween` is available as is.
+Helpers are available in `ntHelpers` global variable, easings - in `ntEasings`.  
+If you don't need helpers or easings, you can include only core script.
+
 ## Complete guide
 
-You can find complete guide and more examples on **[Wiki](https://github.com/Kelin2025/nanotween/wiki)** page
+You can find complete guide and live demos on **[wiki](https://github.com/Kelin2025/nanotween/wiki)**
 
@@ -68,12 +83,14 @@ ## Countdown example
 // Start tweening process
-const animate = () => {
+const animate = time => {
   requestAnimationFrame(animate)
-  Nanotween.update()
+  NanoTween.update(time)
 }
-animate()
+animate(performance.now())
 
-// Some element and duration in seconds
-const el = document.getElementById('tween')
+// Duration in seconds
 const duration = 10
 
+// Element
+const el = document.getElementById('tween')
+
 // Create tween object
@@ -80,0 +97,0 @@ const tween = new NanoTween()

No alert changes

Improved metrics

Total package byte prevSize

27625

increased by6.09%

Lines of code

540

increased by2.47%

Number of lines in readme file

110

increased by18.28%

No dependency changes