Support animating filters

tropy · May 16, 2020 · 22c9fc4 · 22c9fc4
1 parent 4793930
commit 22c9fc4
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/src/components/esper/container.js b/src/components/esper/container.js
@@ -284,7 +284,7 @@ class EsperContainer extends React.Component {
       ...EsperPanel.defaultProps
     }
 
-    this.esper.adjust(state)
+    this.esper.filter(state)
     this.setState(state)
     this.focus()
     this.handleImageChange()
@@ -402,7 +402,7 @@ class EsperContainer extends React.Component {
   }
 
   handleFilterChange = (opts) => {
-    this.esper.adjust({ ...this.state, ...opts })
+    this.esper.filter({ ...this.state, ...opts })
     this.setState(opts)
     this.handleImageChange()
   }

diff --git a/src/esper/index.js b/src/esper/index.js
@@ -126,7 +126,7 @@ class Esper extends EventEmitter {
       // Subtle: race conditions because of async loading!
       // The first sync must not override other syncs, coming
       // in while the photo is still loading.
-      let tmp = this.photo = new Photo(props.photo)
+      let tmp = this.photo = new Photo(props.photo, state)
       this.sync(props, state, 0)
 
       try {
@@ -175,10 +175,16 @@ class Esper extends EventEmitter {
 
       photo.fixate(photo.toGlobal(next.pivot, null, true), false)
 
-      if (next.rotation !== photo.rotation && props.mode === MODE.ZOOM) {
+      let rotate = next.rotation !== photo.rotation
+
+      if (rotate && props.mode === MODE.ZOOM) {
         setIntermediatePosition(next, photo, this.app.screen)
       }
 
+      this.filter(state, {
+        duration: rotate ? duration * 2 : duration
+      })
+
       this.move(next, {
         duration,
         skipConstrain: true,
@@ -189,9 +195,6 @@ class Esper extends EventEmitter {
               fixate: props.mode === MODE.ZOOM
             })
           }
-
-          // TODO animate
-          this.adjust(state)
         }
       })
 
@@ -200,7 +203,7 @@ class Esper extends EventEmitter {
       this.photo.scale.set(mirror ? -zoom : zoom, zoom)
       this.photo.pivot.copyFrom(next.pivot)
       this.photo.position.copyFrom(next)
-      this.adjust(state)
+      this.filter(state)
     }
   }
 
@@ -321,18 +324,6 @@ class Esper extends EventEmitter {
   }
 
 
-  adjust(opts) {
-    this.photo
-      .brightness(opts.brightness)
-      .contrast(opts.contrast)
-      .hue(opts.hue)
-      .negative(opts.negative)
-      .saturation(opts.saturation)
-      .sharpen(opts.sharpen)
-
-    this.render()
-  }
-
   animate(thing, scope, { stop, complete, done } = {}) {
     let tween = new TWEEN.Tween(thing, this.tweens)
       .easing(TWEEN.Easing.Cubic.InOut)
@@ -369,6 +360,24 @@ class Esper extends EventEmitter {
       .start()
   }
 
+  filter(next, { duration = 0, ...opts } = {}) {
+    if (duration > 0) {
+      let { photo } = this
+
+      this
+        .animate(photo.current, 'filter', opts)
+        .to(next, duration)
+        .onUpdate((m) => {
+          photo.filter(m)
+        })
+        .start()
+
+    } else {
+      this.photo.filter(next)
+      this.render()
+    }
+  }
+
   load(url) {
     return new Promise((resolve, reject) => {
 

diff --git a/src/esper/photo.js b/src/esper/photo.js
@@ -38,6 +38,8 @@ class Photo extends Container {
       new ColorMatrixFilter()
     ]
 
+    this.current = {}
+
     this.handleResolutionChange()
 
     this.selections = new SelectionLayer()
@@ -146,6 +148,28 @@ class Photo extends Container {
     }
   }
 
+  filter({
+    brightness = 0,
+    contrast = 0,
+    hue = 0,
+    negative = false,
+    saturation = 0,
+    sharpen = 0
+  } = {}) {
+    this.brightness(brightness)
+    this.current.brightness = brightness
+    this.contrast(contrast)
+    this.current.contrast = contrast
+    this.hue(hue)
+    this.current.hue = hue
+    this.negative(negative)
+    this.current.negative = negative
+    this.saturation(saturation)
+    this.current.saturation = saturation
+    this.sharpen(sharpen)
+    this.current.sharpen = sharpen
+  }
+
   brightness(value = 0) {
     if (value >= 0) {
       this.adjust.brightness = 1 + value / 100