Improved merge heuristics

Merge now normalizes keyframe values so that animations that define
keyframes that are within a specified delta of each other (e.g., 55% and
57.5%) can easily be merged. It normalizes the animation behavior a bit,
but should allow for a greater range of animations to be merged
together.

Author: Brandon Dail

demo/app.jsx

@@ -36,9 +36,12 @@ let aphroditeStyle = {
   },
 }
 
+window.animations = animations
+
 
 animations.tadaFlip = merge(animations.tada, animations.flip);
 animations.jelloFadeDown = merge(animations.fadeInDown, animations.jello);
+animations.flashSwing = merge(animations.jello, animations.bounce);
 
 const animationNames = [];
 

src/merge.js

@@ -1,6 +1,17 @@
 // flow
 import type { Animation, Keyframe, CSSValue } from './types';
 
+// Keyframes that bound an animation
+const boundryFrmes: { [frame: string]: boolean } = {
+  'from': true,
+  '0%': true,
+  'to': true,
+  '100%': true,
+}
+
+// The default allowed delta for keyframe distance
+const keyframeDistance = 10;
+
 /**
  * Merge lets you take two Animations and merge them together. It
  * iterates through each animation and merges each keyframe. It
@@ -14,33 +25,105 @@ import type { Animation, Keyframe, CSSValue } from './types';
  * import { merge, tada, flip } from 'react-effects';
  * const tadaFlip = merge(tada, flip);
  */
-export default function merge(a: Animation, b: Animation): Animation {
-  const merged: Animation = {};
-  // Copy all values from a
-  for (let frame in a) {
-    const sourceFrame: Keyframe = a[frame];
-    const targetFrame: Keyframe = b[frame];
-    const target: Keyframe = merged[frame] || (merged[frame] = {});
-    for (let cssValue: string in sourceFrame) {
-      if (cssValue === 'transform' && targetFrame && targetFrame[cssValue]) {
-        var transforms = [sourceFrame[cssValue], targetFrame[cssValue]]
-        target[cssValue] = transforms.filter(
-          transform => transform !== 'none'
-        )
-        .join(' ')
-        .trim();
+export default function merge(primary, secondary) {
+  // A map used to track the normalized frame value in cases where
+  // two animations contain frames that appear closely, but not exactly
+  // at the same time (e.g., 50% and 52%)
+  const normalizedFrames = {
+    'from': 'from',
+    '0%': 'from',
+    'to': 'to',
+    '100%': 'to',
+  };
+
+
+  // If we are dealing with an animation that appears to be
+  // a "boundry-specific" animation, meaning it only specifies
+  // a start and end position, we want to persist the start transform
+  // throughout.
+  let boundryTransform = null;
+  // We merge each frame into a new object and return it
+  const merged = {};
+  /* primary frame should control directional movement */
+  const primaryFrames = Object.keys(primary);
+  /* secondary frames should control orientation/size */
+  const secondaryFrames = Object.keys(secondary);
+
+  const normalizedPrimary = cacheNormalizedFrames(
+    primary,
+    normalizedFrames
+  );
+
+  const normalizedSecondary = cacheNormalizedFrames(
+    secondary,
+    normalizedFrames
+  );
+
+  // We parse a boundry transform from either the primary
+  // or secondary animation, if either look to be bounded.
+  // Primary animation is given precedence.
+  if (secondaryFrames.length <= 2) {
+    boundryTransform = parseBoundryTransform(
+      normalizedSecondary
+    );
+  } else if (primaryFrames.length <= 2) {
+    boundryTransform = parseBoundryTransform(
+      primaryFrames
+    );
+  }
+
+  // Iterate through all the cached, normalized animation frames.
+  for (let frame in normalizedFrames) {
+    const primaryFrame = normalizedPrimary[frame];
+    const secondaryFrame = normalizedSecondary[frame];
+    const target = merged[frame] || (merged[frame] = {});
+
+    for (let propertyName in primaryFrame) {
+      if (propertyName === 'transform' && secondaryFrame) {
+        // TODO we should only apply the boundry transform when we
+        // are in between boundry frames, not in them. We need to track
+        // what the actual start and end frame are.
+        target[propertyName] = mergeTransforms([
+          primaryFrame[propertyName],
+          secondaryFrame[propertyName],
+          boundryTransform
+        ]);
       } else {
-        target[cssValue] = sourceFrame[cssValue]
+        target[propertyName] = primaryFrame[propertyName];
+      }
+    }
+
+    for (let propertyName in secondaryFrame) {
+      if (!target[propertyName]) {
+        target[propertyName] = secondaryFrame[propertyName];
       }
     }
-  }
-  // Copy all values from b
-  for (let frame in b) {
-    const sourceFrame: Keyframe = b[frame];
-    const target: Keyframe = merged[frame] || (merged[frame] = {});
-    for (let cssValue in sourceFrame) {
-      target[cssValue] = target[cssValue] || sourceFrame[cssValue];
-    };
   }
   return merged;
 }
+
+function mergeTransforms(transforms) {
+  transforms = transforms.filter(
+    transform => transform && transform !== 'none'
+  )
+  transforms = transforms.join(' ');
+  return transforms.trim();
+}
+
+
+function parseBoundryTransform(animation) {
+  return animation.from && animation.from.transform;
+}
+
+
+function cacheNormalizedFrames(source, cache) {
+  const normalized = {};
+  for (let frame in source) {
+    const normalizedFrame = cache[frame] || (Math.round(
+      parseFloat(frame) / keyframeDistance
+    ) * keyframeDistance) + '%';
+    normalized[normalizedFrame] = source[frame];
+    cache[normalizedFrame] = normalizedFrame;
+  }
+  return normalized;
+}