diff --git a/apps/tests/ui/animation/animation-tests.ts b/apps/tests/ui/animation/animation-tests.ts
index dd4b831cb..a27a35c2c 100644
--- a/apps/tests/ui/animation/animation-tests.ts
+++ b/apps/tests/ui/animation/animation-tests.ts
@@ -15,10 +15,10 @@ import animation = require("ui/animation");
// ```
//
-export var test_AnimatingProperties = function (done) {
+export var test_AnimatingProperties = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -64,10 +64,10 @@ export var test_AnimatingProperties = function (done) {
//
}
-export var test_CancellingAnimation = function (done) {
+export var test_CancellingAnimation = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -83,7 +83,7 @@ export var test_CancellingAnimation = function (done) {
//
// # Cancelling animation
// ``` JavaScript
- var animation1 = label.createAnimation({ translate: { x: 100, y: 100}, duration: 500 });
+ var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 500 });
animation1.play()
.then(() => {
////console.log("Animation finished");
@@ -109,10 +109,10 @@ export var test_CancellingAnimation = function (done) {
//
}
-export var test_CancellingAnimate = function (done) {
+export var test_CancellingAnimate = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -153,10 +153,10 @@ export var test_CancellingAnimate = function (done) {
//
}
-export var test_ChainingAnimations = function (done) {
+export var test_ChainingAnimations = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -198,10 +198,10 @@ export var test_ChainingAnimations = function (done) {
//
}
-export var test_ReusingAnimations = function (done) {
+export var test_ReusingAnimations = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -245,12 +245,12 @@ export var test_ReusingAnimations = function (done) {
//
}
-export var test_AnimatingMultipleViews = function (done) {
+export var test_AnimatingMultipleViews = function(done) {
var mainPage: pageModule.Page;
var label1: labelModule.Label;
var label2: labelModule.Label;
var label3: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label1 = new labelModule.Label();
label1.text = "label1";
label2 = new labelModule.Label();
@@ -299,10 +299,10 @@ export var test_AnimatingMultipleViews = function (done) {
//
}
-export var test_AnimateOpacity = function (done) {
+export var test_AnimateOpacity = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -327,10 +327,82 @@ export var test_AnimateOpacity = function (done) {
});
}
-export var test_AnimateBackgroundColor = function (done) {
+export var test_AnimateOpacity_ShouldThrow_IfNotNumber = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ opacity: "0.75" });
+ }, "Setting opacity to a non number should throw.");
+ });
+}
+
+export var test_AnimateDelay_ShouldThrow_IfNotNumber = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ delay: "1" });
+ }, "Setting delay to a non number should throw.");
+ });
+}
+
+export var test_AnimateDuration_ShouldThrow_IfNotNumber = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ duration: "1" });
+ }, "Setting duration to a non number should throw.");
+ });
+}
+
+export var test_AnimateIterations_ShouldThrow_IfNotNumber = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ iterations: "1" });
+ }, "Setting iterations to a non number should throw.");
+ });
+}
+
+export var test_AnimateRotate_ShouldThrow_IfNotNumber = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ rotate: "1" });
+ }, "Setting rotate to a non number should throw.");
+ });
+}
+
+export var test_AnimateScale_ShouldThrow_IfNotPair = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ scale: "1" });
+ }, "Setting scale to a non Pair should throw.");
+ });
+}
+
+export var test_AnimateTranslate_ShouldThrow_IfNotPair = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ translate: "1" });
+ }, "Setting translate to a non Pair should throw.");
+ });
+}
+
+export var test_AnimateBackgroundColor_ShouldThrow_IfNotValidColorStringOrColor = () => {
+ var label = new labelModule.Label();
+ helper.buildUIAndRunTest(label, (views: Array) => {
+ TKUnit.assertThrows(() => {
+ label.animate({ backgroundColor: "test" });
+ }, "Setting backgroundColor to a not valid color string or Color should throw.");
+ });
+}
+
+export var test_AnimateBackgroundColor = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -356,10 +428,41 @@ export var test_AnimateBackgroundColor = function (done) {
});
}
-export var test_AnimateTranslate = function (done) {
+export var test_AnimateBackgroundColor_FromString = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
+ label = new labelModule.Label();
+ label.text = "label";
+ var stackLayout = new stackLayoutModule.StackLayout();
+ stackLayout.addChild(label);
+ mainPage = new pageModule.Page();
+ mainPage.content = stackLayout;
+ return mainPage;
+ };
+
+ helper.navigate(pageFactory);
+ TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+ var expected = "Red";
+ var clr = new colorModule.Color(expected);
+
+ label.animate({ backgroundColor: expected })
+ .then(() => {
+ TKUnit.assert(label.backgroundColor.equals(clr));
+ helper.goBack();
+ done();
+ })
+ .catch((e) => {
+ helper.goBack();
+ done(e);
+ });
+}
+
+export var test_AnimateTranslate = function(done) {
+ var mainPage: pageModule.Page;
+ var label: labelModule.Label;
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -386,10 +489,10 @@ export var test_AnimateTranslate = function (done) {
});
}
-export var test_AnimateScale = function (done) {
+export var test_AnimateScale = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -404,8 +507,8 @@ export var test_AnimateScale = function (done) {
label.animate({ scale: { x: 2, y: 3 } })
.then(() => {
- TKUnit.assertEqual(label.scaleX, 2,"label.scaleX");
- TKUnit.assertEqual(label.scaleY, 3,"label.scaleY");
+ TKUnit.assertEqual(label.scaleX, 2, "label.scaleX");
+ TKUnit.assertEqual(label.scaleY, 3, "label.scaleY");
assertIOSNativeTransformIsCorrect(label);
helper.goBack();
done();
@@ -416,10 +519,10 @@ export var test_AnimateScale = function (done) {
});
}
-export var test_AnimateRotate = function (done) {
+export var test_AnimateRotate = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -445,10 +548,10 @@ export var test_AnimateRotate = function (done) {
});
}
-export var test_AnimateTranslateScaleAndRotateSimultaneously = function (done) {
+export var test_AnimateTranslateScaleAndRotateSimultaneously = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -482,10 +585,10 @@ export var test_AnimateTranslateScaleAndRotateSimultaneously = function (done) {
});
}
-export var test_AnimateTranslateScaleAndRotateSequentially = function (done) {
+export var test_AnimateTranslateScaleAndRotateSequentially = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -529,10 +632,10 @@ export var test_AnimateTranslateScaleAndRotateSequentially = function (done) {
});
}
-export var test_AnimationsAreAlwaysPlayed = function (done) {
+export var test_AnimationsAreAlwaysPlayed = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -565,10 +668,10 @@ export var test_AnimationsAreAlwaysPlayed = function (done) {
});
}
-export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function (done) {
+export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
@@ -595,10 +698,10 @@ export var test_PlayPromiseIsResolvedWhenAnimationFinishes = function (done) {
});
}
-export var test_PlayPromiseIsRejectedWhenAnimationIsCancelled = function (done) {
+export var test_PlayPromiseIsRejectedWhenAnimationIsCancelled = function(done) {
var mainPage: pageModule.Page;
var label: labelModule.Label;
- var pageFactory = function (): pageModule.Page {
+ var pageFactory = function(): pageModule.Page {
label = new labelModule.Label();
label.text = "label";
var stackLayout = new stackLayoutModule.StackLayout();
diff --git a/ui/animation/animation-common.ts b/ui/animation/animation-common.ts
index 24d67aab3..534fb2439 100644
--- a/ui/animation/animation-common.ts
+++ b/ui/animation/animation-common.ts
@@ -1,5 +1,7 @@
import definition = require("ui/animation");
import viewModule = require("ui/core/view");
+import colorModule = require("color");
+import types = require("utils/types");
import * as traceModule from "trace";
var trace: typeof traceModule;
@@ -46,8 +48,8 @@ export class CubicBezierAnimationCurve implements definition.CubicBezierAnimatio
// We didn't want to actually modify Promise; as the cancel() is ONLY valid for animations "Promise"
export class AnimationPromise implements definition.AnimationPromise {
public cancel(): void { /* Do Nothing */ }
- public then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();}
- public catch(onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();}
+ public then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise(); }
+ public catch(onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise(); }
}
export class Animation implements definition.Animation {
@@ -139,11 +141,32 @@ export class Animation implements definition.Animation {
this._reject(new Error("Animation cancelled."));
}
- private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array {
+ private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array {
if (!animationDefinition.target) {
throw new Error("No animation target specified.");
}
+ for (let item in animationDefinition) {
+ if (!types.isDefined(animationDefinition[item])) {
+ continue;
+ }
+
+ if ((item === Properties.opacity ||
+ item === Properties.rotate ||
+ item === "duration" ||
+ item === "delay" ||
+ item === "iterations") && !types.isNumber(animationDefinition[item])) {
+ throw new Error(`Property ${item} must be valid number. Value: ${animationDefinition[item]}`);
+ } else if ((item === Properties.scale ||
+ item === Properties.translate) &&
+ (!types.isNumber((animationDefinition[item]).x) ||
+ !types.isNumber((animationDefinition[item]).y))) {
+ throw new Error(`Property ${item} must be valid Pair. Value: ${animationDefinition[item]}`);
+ } else if (item === Properties.backgroundColor && !colorModule.Color.isValid(animationDefinition.backgroundColor)) {
+ throw new Error(`Property ${item} must be valid color. Value: ${animationDefinition[item]}`);
+ }
+ }
+
var propertyAnimations = new Array();
// opacity
@@ -164,7 +187,8 @@ export class Animation implements definition.Animation {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.backgroundColor,
- value: animationDefinition.backgroundColor,
+ value: types.isString(animationDefinition.backgroundColor) ?
+ new colorModule.Color(animationDefinition.backgroundColor) : animationDefinition.backgroundColor,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,