diff --git a/apps/tests/ui/animation/animation-tests.ts b/apps/tests/ui/animation/animation-tests.ts index e8342c87e..a7ffad6f6 100644 --- a/apps/tests/ui/animation/animation-tests.ts +++ b/apps/tests/ui/animation/animation-tests.ts @@ -44,62 +44,62 @@ export var test_AnimatingProperties = function (done) { curve: label.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1), }) .then(() => { - ////console.log("Animation finished."); - // - helper.goBack(); - done(); - // - }) + ////console.log("Animation finished."); + // + helper.goBack(); + done(); + // + }) .catch((e) => { - console.log(e.message); - // - helper.goBack(); - done(e); - // - }); + console.log(e.message); + // + helper.goBack(); + done(e); + // + }); // ``` // } export var test_CancellingAnimation = 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(); - stackLayout.addChild(label); - mainPage = new pageModule.Page(); - mainPage.content = stackLayout; - return mainPage; - }; + 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(); + stackLayout.addChild(label); + mainPage = new pageModule.Page(); + mainPage.content = stackLayout; + return mainPage; + }; - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); + helper.navigate(pageFactory); + TKUnit.waitUntilReady(() => { return label.isLoaded }); - // - // # Cancelling animation - // ``` JavaScript - var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } }); - animation1.play().finished - .then(() => { - ////console.log("Animation finished"); - // - helper.goBack(); - done(); - // - }) - .catch((e) => { - ////console.log("Animation cancelled"); - // - helper.goBack(); - done(); - // - }); - animation1.cancel(); - // ``` - // - } + // + // # Cancelling animation + // ``` JavaScript + var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } }); + animation1.play().finished + .then(() => { + ////console.log("Animation finished"); + // + helper.goBack(); + done(); + // + }) + .catch((e) => { + ////console.log("Animation cancelled"); + // + helper.goBack(); + done(); + // + }); + animation1.cancel(); + // ``` + // +} export var test_ChainingAnimations = function (done) { var mainPage: pageModule.Page; @@ -128,119 +128,119 @@ export var test_ChainingAnimations = function (done) { .then(() => label.animate({ rotate: 180 })) .then(() => label.animate({ rotate: 0 })) .then(() => { - ////console.log("Animation finished"); - // - helper.goBack(); - done(); - // - }) + ////console.log("Animation finished"); + // + helper.goBack(); + done(); + // + }) .catch((e) => { - console.log(e.message); - // - helper.goBack(); - done(e); - // - }); + console.log(e.message); + // + helper.goBack(); + done(e); + // + }); // ``` // } - export var test_ReusingAnimations = 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(); - stackLayout.addChild(label); - mainPage = new pageModule.Page(); - mainPage.content = stackLayout; - return mainPage; - }; +//export var test_ReusingAnimations = 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(); +// stackLayout.addChild(label); +// mainPage = new pageModule.Page(); +// mainPage.content = stackLayout; +// return mainPage; +// }; - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label.isLoaded }); +// helper.navigate(pageFactory); +// TKUnit.waitUntilReady(() => { return label.isLoaded }); - // - // # Reusing animations - // ``` JavaScript - var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } }); - var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } }); +// // +// // # Reusing animations +// // ``` JavaScript +// var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } }); +// var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } }); - animation1.play().finished - .then(() => animation1.play().finished) - .then(() => animation1.play().finished) - .then(() => animation2.play().finished) - .then(() => animation1.play().finished) - .then(() => animation2.play().finished) - .then(() => { - ////console.log("Animation finished"); - // - helper.goBack(); - done(); - // - }) - .catch((e) => { - console.log(e.message); - // - helper.goBack(); - done(e); - // - }); - // ``` - // - } +// animation1.play().finished +// .then(() => animation1.play().finished) +// .then(() => animation1.play().finished) +// .then(() => animation2.play().finished) +// .then(() => animation1.play().finished) +// .then(() => animation2.play().finished) +// .then(() => { +// ////console.log("Animation finished"); +// // +// helper.goBack(); +// done(); +// // +// }) +// .catch((e) => { +// console.log(e.message); +// // +// helper.goBack(); +// done(e); +// // +// }); +// // ``` +// // +//} - 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 { - label1 = new labelModule.Label(); - label1.text = "label1"; - label2 = new labelModule.Label(); - label2.text = "label2"; - label3 = new labelModule.Label(); - label3.text = "label3"; - var stackLayout = new stackLayoutModule.StackLayout(); - stackLayout.addChild(label1); - stackLayout.addChild(label2); - stackLayout.addChild(label3); - mainPage = new pageModule.Page(); - mainPage.content = stackLayout; - return mainPage; - }; - helper.navigate(pageFactory); - TKUnit.waitUntilReady(() => { return label1.isLoaded && label2.isLoaded }); +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 { + label1 = new labelModule.Label(); + label1.text = "label1"; + label2 = new labelModule.Label(); + label2.text = "label2"; + label3 = new labelModule.Label(); + label3.text = "label3"; + var stackLayout = new stackLayoutModule.StackLayout(); + stackLayout.addChild(label1); + stackLayout.addChild(label2); + stackLayout.addChild(label3); + mainPage = new pageModule.Page(); + mainPage.content = stackLayout; + return mainPage; + }; + helper.navigate(pageFactory); + TKUnit.waitUntilReady(() => { return label1.isLoaded && label2.isLoaded }); - // - // # Animating multiple views simultaneously - // ``` JavaScript - var animations: Array = [ - { target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 }, - { target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 }, - { target: label3, translate: { x: 200, y: 200 }, duration: 1000, delay: 666 }, - ]; - var a = new animation.Animation(animations); - a.play().finished - .then(() => { - ////console.log("Animations finished"); - // - helper.goBack(); - done(); - // - }) - .catch((e) => { - console.log(e.message); - // - helper.goBack(); - done(e); - // - }); - // ``` - // - } + // + // # Animating multiple views simultaneously + // ``` JavaScript + var animations: Array = [ + { target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 }, + { target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 }, + { target: label3, translate: { x: 200, y: 200 }, duration: 1000, delay: 666 }, + ]; + var a = new animation.Animation(animations); + a.play().finished + .then(() => { + ////console.log("Animations finished"); + // + helper.goBack(); + done(); + // + }) + .catch((e) => { + console.log(e.message); + // + helper.goBack(); + done(e); + // + }); + // ``` + // +} export var test_AnimateOpacity = function (done) { var mainPage: pageModule.Page; @@ -258,7 +258,7 @@ export var test_AnimateOpacity = function (done) { helper.navigate(pageFactory); TKUnit.waitUntilReady(() => { return label.isLoaded }); - label.animate({opacity: 0.75}) + label.animate({ opacity: 0.75 }) .then(() => { TKUnit.assert(label.opacity === 0.75); helper.goBack(); @@ -289,7 +289,7 @@ export var test_AnimateBackgroundColor = function (done) { label.animate({ backgroundColor: red }) .then(() => { - TKUnit.assert(label.backgroundColor.equals(red)); + TKUnit.assert(label.backgroundColor.equals(red)); helper.goBack(); done(); }) @@ -315,7 +315,7 @@ export var test_AnimateTranslate = function (done) { helper.navigate(pageFactory); TKUnit.waitUntilReady(() => { return label.isLoaded }); - label.animate({ translate: {x: 100, y: 200} }) + label.animate({ translate: { x: 100, y: 200 } }) .then(() => { TKUnit.assert(label.translateX === 100); TKUnit.assert(label.translateY === 200); @@ -384,3 +384,36 @@ export var test_AnimateRotate = function (done) { done(e); }); } + +export var test_AnimationsAreAlwaysPlayed = 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(); + stackLayout.addChild(label); + mainPage = new pageModule.Page(); + mainPage.content = stackLayout; + return mainPage; + }; + + helper.navigate(pageFactory); + TKUnit.waitUntilReady(() => { return label.isLoaded }); + + var animation1 = label.createAnimation({ opacity: 0 }); + var animation2 = label.createAnimation({ opacity: 1 }); + + animation1.play().finished + .then(() => animation2.play().finished) + .then(() => { + TKUnit.assert(label.opacity === 1, `Label opacity expected vaue is 1, actual value is ${label.opacity}.`); + helper.goBack(); + done(); + }) + .catch((e) => { + console.log(e.message); + helper.goBack(); + done(e); + }); +} diff --git a/ui/animation/animation.android.ts b/ui/animation/animation.android.ts index e3c8b06b2..817500d7c 100644 --- a/ui/animation/animation.android.ts +++ b/ui/animation/animation.android.ts @@ -148,84 +148,70 @@ export class Animation extends common.Animation implements definition.Animation case common.Properties.opacity: originalValue = nativeView.getAlpha(); - if (propertyAnimation.value !== propertyAnimation.target.opacity) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "alpha", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.opacity = propertyAnimation.value }); - propertyResetCallbacks.push(() => { nativeView.setAlpha(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "alpha", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.opacity = propertyAnimation.value }); + propertyResetCallbacks.push(() => { nativeView.setAlpha(originalValue); }); break; case common.Properties.backgroundColor: originalValue = nativeView.getBackground(); - if (!color.Color.equals(propertyAnimation.value, propertyAnimation.target.backgroundColor)) { - nativeArray = java.lang.reflect.Array.newInstance(java.lang.Object.class, 2); - nativeArray[0] = propertyAnimation.target.backgroundColor ? java.lang.Integer.valueOf((propertyAnimation.target.backgroundColor).argb) : java.lang.Integer.valueOf(-1); - nativeArray[1] = java.lang.Integer.valueOf((propertyAnimation.value).argb); - animator = android.animation.ValueAnimator.ofObject(argbEvaluator, nativeArray); - animator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({ - onAnimationUpdate(animator: android.animation.ValueAnimator) { - var argb = (animator.getAnimatedValue()).intValue(); - propertyAnimation.target.backgroundColor = new color.Color(argb); - } - })); + nativeArray = java.lang.reflect.Array.newInstance(java.lang.Object.class, 2); + nativeArray[0] = propertyAnimation.target.backgroundColor ? java.lang.Integer.valueOf((propertyAnimation.target.backgroundColor).argb) : java.lang.Integer.valueOf(-1); + nativeArray[1] = java.lang.Integer.valueOf((propertyAnimation.value).argb); + animator = android.animation.ValueAnimator.ofObject(argbEvaluator, nativeArray); + animator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({ + onAnimationUpdate(animator: android.animation.ValueAnimator) { + var argb = (animator.getAnimatedValue()).intValue(); + propertyAnimation.target.backgroundColor = new color.Color(argb); + } + })); - animators.push(animator); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.backgroundColor = propertyAnimation.value; }); - propertyResetCallbacks.push(() => { nativeView.setBackground(originalValue); }); - } + animators.push(animator); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.backgroundColor = propertyAnimation.value; }); + propertyResetCallbacks.push(() => { nativeView.setBackground(originalValue); }); break; case common.Properties.translate: originalValue = nativeView.getTranslationX(); - if (propertyAnimation.value.x * density !== originalValue) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value.x * density; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationX", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateX = propertyAnimation.value.x; }); - propertyResetCallbacks.push(() => { nativeView.setTranslationX(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value.x * density; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationX", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateX = propertyAnimation.value.x; }); + propertyResetCallbacks.push(() => { nativeView.setTranslationX(originalValue); }); originalValue = nativeView.getTranslationY(); - if (propertyAnimation.value.y * density !== originalValue) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value.y * density; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationY", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateY = propertyAnimation.value.y; }); - propertyResetCallbacks.push(() => { nativeView.setTranslationY(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value.y * density; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationY", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateY = propertyAnimation.value.y; }); + propertyResetCallbacks.push(() => { nativeView.setTranslationY(originalValue); }); break; case common.Properties.rotate: originalValue = nativeView.getRotation(); - if (propertyAnimation.value !== originalValue) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.rotate = propertyAnimation.value; }); - propertyResetCallbacks.push(() => { nativeView.setRotation(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.rotate = propertyAnimation.value; }); + propertyResetCallbacks.push(() => { nativeView.setRotation(originalValue); }); break; case common.Properties.scale: originalValue = nativeView.getScaleX(); - if (propertyAnimation.value.x !== originalValue) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value.x; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleX", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleX = propertyAnimation.value.x; }); - propertyResetCallbacks.push(() => { nativeView.setScaleX(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value.x; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleX", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleX = propertyAnimation.value.x; }); + propertyResetCallbacks.push(() => { nativeView.setScaleX(originalValue); }); originalValue = nativeView.getScaleY(); - if (propertyAnimation.value.y !== originalValue) { - nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); - nativeArray[0] = propertyAnimation.value.y; - animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleY", nativeArray)); - propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleY = propertyAnimation.value.y; }); - propertyResetCallbacks.push(() => { nativeView.setScaleY(originalValue); }); - } + nativeArray = java.lang.reflect.Array.newInstance(floatType, 1); + nativeArray[0] = propertyAnimation.value.y; + animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleY", nativeArray)); + propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleY = propertyAnimation.value.y; }); + propertyResetCallbacks.push(() => { nativeView.setScaleY(originalValue); }); break; default: