fixes #51. animate differences in fill/stroke color properties

Author: alexjlockwood

src/app/scripts/animation/AvdTarget.ts

@@ -1,20 +1,27 @@
 /**
  * The names of the currently supported animatable properties.
  */
-export type PropertyName = 'pathData' | 'rotation';
+export type PropertyName =
+  'pathData'
+  | 'rotation'
+  | 'fillColor'
+  | 'strokeColor'
+  | 'fillAlpha'
+  | 'strokeAlpha'
+  | 'strokeWidth';
 
 /**
  * The currently supported animatable value types.
  */
-export type ValueType = 'pathType' | 'floatType';
+export type ValueType = 'pathType' | 'floatType' | 'colorType';
 
 /**
  * An AvdTarget assigns a group of animations to a particular layer in the vector.
  */
 export class AvdTarget {
   constructor(
     public readonly layerId: string,
-    public readonly animation: AvdAnimation) { }
+    public readonly animations: AvdAnimation[]) { }
 }
 
 /**

src/app/scripts/parsers/AvdSerializer.ts

@@ -47,17 +47,29 @@ export function vectorLayerAnimationToAvdXmlString(
     animationNode.setAttribute('name', 'android:animation');
     targetNode.appendChild(animationNode);
 
-    const animation = target.animation;
-    const animatorNode = xmlDoc.createElement('objectAnimator');
-    animatorNode.setAttributeNS(XMLNS_NS, 'xmlns:android', ANDROID_NS);
-    animatorNode.setAttributeNS(ANDROID_NS, 'android:name', layerId);
-    animatorNode.setAttributeNS(ANDROID_NS, 'android:propertyName', animation.propertyName);
-    conditionalAttr(animatorNode, 'android:duration', animation.duration);
-    conditionalAttr(animatorNode, 'android:valueFrom', animation.valueFrom);
-    conditionalAttr(animatorNode, 'android:valueTo', animation.valueTo);
-    conditionalAttr(animatorNode, 'android:valueType', animation.valueType);
-    conditionalAttr(animatorNode, 'android:interpolator', animation.interpolator);
-    animationNode.appendChild(animatorNode);
+    const animations = target.animations;
+    let animationContainerNode = animationNode;
+    if (animations.length > 1) {
+      // <set> for multiple property animations on a single layer
+      animationContainerNode = xmlDoc.createElement('set');
+      animationContainerNode.setAttributeNS(XMLNS_NS, 'xmlns:android', ANDROID_NS);
+      animationNode.appendChild(animationContainerNode);
+    }
+
+    for (const animation of animations) {
+      const animatorNode = xmlDoc.createElement('objectAnimator');
+      if (animations.length === 1) {
+        animatorNode.setAttributeNS(XMLNS_NS, 'xmlns:android', ANDROID_NS);
+      }
+      animatorNode.setAttributeNS(XMLNS_NS, 'xmlns:android', ANDROID_NS);
+      animatorNode.setAttributeNS(ANDROID_NS, 'android:propertyName', animation.propertyName);
+      conditionalAttr(animatorNode, 'android:duration', animation.duration);
+      conditionalAttr(animatorNode, 'android:valueFrom', animation.valueFrom);
+      conditionalAttr(animatorNode, 'android:valueTo', animation.valueTo);
+      conditionalAttr(animatorNode, 'android:valueType', animation.valueType);
+      conditionalAttr(animatorNode, 'android:interpolator', animation.interpolator);
+      animationContainerNode.appendChild(animatorNode);
+    }
   }
 
   return serializeXmlNode(rootNode);

src/app/toolbar/toolbar.component.ts

@@ -4,7 +4,7 @@ import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import { LayerStateService, MorphabilityStatus } from '../services';
 import { CanvasType } from '../CanvasType';
 import { AvdSerializer, SvgSerializer } from '../scripts/parsers';
-import { AvdTarget, AvdAnimation } from '../scripts/animation';
+import { AvdTarget, AvdAnimation, ValueType, PropertyName } from '../scripts/animation';
 import { DialogService } from '../dialogs';
 import { AutoAwesome } from '../scripts/commands';
 import { AnimatorService } from '../services/animator.service';
@@ -142,13 +142,13 @@ export class ToolbarComponent implements OnInit {
     const duration = this.animatorService.getDuration();
     const interpolator = this.animatorService.getInterpolator();
     return new AvdTarget(startLayer.id,
-      new AvdAnimation(
+      [new AvdAnimation(
         fromValue.toString(),
         toValue.toString(),
         duration,
         interpolator.androidRef,
         'rotation',
-        'floatType'));
+        'floatType')]);
   }
 
   private createPathAvdTarget() {
@@ -158,14 +158,40 @@ export class ToolbarComponent implements OnInit {
     const toValue = endLayer.pathData.getPathString();
     const duration = this.animatorService.getDuration();
     const interpolator = this.animatorService.getInterpolator();
-    return new AvdTarget(startLayer.id,
-      new AvdAnimation(
-        fromValue,
-        toValue,
-        duration,
-        interpolator.androidRef,
+    const createAvdAnimation = (from: string, to: string, propertyName: PropertyName, valueType: ValueType) => {
+      return new AvdAnimation(from, to, duration, interpolator.androidRef, propertyName, valueType);
+    };
+    const avdAnimations: AvdAnimation[] = [];
+    avdAnimations.push(
+      createAvdAnimation(
+        startLayer.pathData.getPathString(),
+        endLayer.pathData.getPathString(),
         'pathData',
         'pathType'));
+    if (startLayer.fillColor && endLayer.fillColor && startLayer.fillColor !== endLayer.fillColor) {
+      avdAnimations.push(
+        createAvdAnimation(startLayer.fillColor, endLayer.fillColor, 'fillColor', 'colorType'));
+    }
+    if (startLayer.strokeColor && endLayer.strokeColor && startLayer.strokeColor !== endLayer.strokeColor) {
+      avdAnimations.push(
+        createAvdAnimation(startLayer.strokeColor, endLayer.strokeColor, 'strokeColor', 'colorType'));
+    }
+    if (startLayer.fillAlpha !== endLayer.fillAlpha) {
+      avdAnimations.push(
+        createAvdAnimation(
+          startLayer.fillAlpha.toString(), endLayer.fillAlpha.toString(), 'fillAlpha', 'floatType'));
+    }
+    if (startLayer.strokeAlpha !== endLayer.strokeAlpha) {
+      avdAnimations.push(
+        createAvdAnimation(
+          startLayer.strokeAlpha.toString(), endLayer.strokeAlpha.toString(), 'strokeAlpha', 'floatType'));
+    }
+    if (startLayer.strokeWidth !== endLayer.strokeWidth) {
+      avdAnimations.push(
+        createAvdAnimation(
+          startLayer.strokeWidth.toString(), endLayer.strokeWidth.toString(), 'strokeWidth', 'floatType'));
+    }
+    return new AvdTarget(startLayer.id, avdAnimations);
   }
 
   onDemoClick() {