diff --git a/tns-core-modules/ui/animation/animation.android.ts b/tns-core-modules/ui/animation/animation.android.ts index 826621601..5f9eb5ec8 100644 --- a/tns-core-modules/ui/animation/animation.android.ts +++ b/tns-core-modules/ui/animation/animation.android.ts @@ -8,6 +8,7 @@ import enums = require("ui/enums"); import styleModule = require("ui/styling/style"); import lazy from "utils/lazy"; import { CacheLayerType } from "utils/utils"; +import dependencyObservable = require("ui/core/dependency-observable"); global.moduleMerge(common, exports); @@ -75,7 +76,7 @@ export class Animation extends common.Animation implements definition.Animation this._animatorSet.start(); return animationFinishedPromise; } - + public cancel(): void { super.cancel(); if (trace.enabled) { @@ -188,7 +189,7 @@ export class Animation extends common.Animation implements definition.Animation } } - let valueSource = this._valueSource; + let valueSource = this._valueSource !== undefined ? this._valueSource : dependencyObservable.ValueSource.Local; switch (propertyAnimation.property) { @@ -196,21 +197,18 @@ export class Animation extends common.Animation implements definition.Animation originalValue1 = nativeView.getAlpha(); nativeArray = (Array).create("float", 1); nativeArray[0] = propertyAnimation.value; - if (this._valueSource !== undefined) { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.style._setValue(styleModule.opacityProperty, propertyAnimation.value, valueSource); - })); - } - else { - propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = propertyAnimation.value; })); - } - propertyResetCallbacks.push(checkAnimation(() => { nativeView.setAlpha(originalValue1); })); + propertyUpdateCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.opacityProperty, propertyAnimation.value, valueSource); + })); + propertyResetCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.opacityProperty, originalValue1, valueSource); + })); animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "alpha", nativeArray)); break; case common.Properties.backgroundColor: ensureArgbEvaluator(); - originalValue1 = nativeView.getBackground(); + originalValue1 = propertyAnimation.target.backgroundColor; nativeArray = (Array).create(java.lang.Object, 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); @@ -222,16 +220,12 @@ export class Animation extends common.Animation implements definition.Animation } })); - if (this._valueSource !== undefined) { - let valueSource = this._valueSource; - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.style._setValue(styleModule.backgroundColorProperty, propertyAnimation.value, valueSource); - })); - } - else { - propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.backgroundColor = propertyAnimation.value; })); - } - propertyResetCallbacks.push(checkAnimation(() => { nativeView.setBackground(originalValue1); })); + propertyUpdateCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.backgroundColorProperty, propertyAnimation.value, valueSource); + })); + propertyResetCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.backgroundColorProperty, originalValue1, valueSource); + })); animators.push(animator); break; @@ -251,22 +245,14 @@ export class Animation extends common.Animation implements definition.Animation originalValue1 = nativeView.getTranslationX(); originalValue2 = nativeView.getTranslationY(); - if (this._valueSource !== undefined) { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.style._setValue(styleModule.translateXProperty, propertyAnimation.value.x, valueSource); - propertyAnimation.target.style._setValue(styleModule.translateYProperty, propertyAnimation.value.y, valueSource); - })); - } - else { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.translateX = propertyAnimation.value.x; - propertyAnimation.target.translateY = propertyAnimation.value.y; - })); - } + propertyUpdateCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.translateXProperty, propertyAnimation.value.x, valueSource); + propertyAnimation.target.style._setValue(styleModule.translateYProperty, propertyAnimation.value.y, valueSource); + })); propertyResetCallbacks.push(checkAnimation(() => { - nativeView.setTranslationX(originalValue1); - nativeView.setTranslationY(originalValue2); + propertyAnimation.target.style._setValue(styleModule.translateXProperty, originalValue1, valueSource); + propertyAnimation.target.style._setValue(styleModule.translateYProperty, originalValue2, valueSource); })); animatorSet = new android.animation.AnimatorSet(); @@ -291,22 +277,14 @@ export class Animation extends common.Animation implements definition.Animation originalValue1 = nativeView.getScaleX(); originalValue2 = nativeView.getScaleY(); - if (this._valueSource !== undefined) { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.style._setValue(styleModule.scaleXProperty, propertyAnimation.value.x, valueSource); - propertyAnimation.target.style._setValue(styleModule.scaleYProperty, propertyAnimation.value.y, valueSource); - })); - } - else { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.scaleX = propertyAnimation.value.x; - propertyAnimation.target.scaleY = propertyAnimation.value.y; - })); - } + propertyUpdateCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.scaleXProperty, propertyAnimation.value.x, valueSource); + propertyAnimation.target.style._setValue(styleModule.scaleYProperty, propertyAnimation.value.y, valueSource); + })); propertyResetCallbacks.push(checkAnimation(() => { - nativeView.setScaleY(originalValue1); - nativeView.setScaleY(originalValue2); + propertyAnimation.target.style._setValue(styleModule.scaleXProperty, originalValue1, valueSource); + propertyAnimation.target.style._setValue(styleModule.scaleYProperty, originalValue2, valueSource); })); animatorSet = new android.animation.AnimatorSet(); @@ -319,15 +297,12 @@ export class Animation extends common.Animation implements definition.Animation originalValue1 = nativeView.getRotation(); nativeArray = (Array).create("float", 1); nativeArray[0] = propertyAnimation.value; - if (this._valueSource !== undefined) { - propertyUpdateCallbacks.push(checkAnimation(() => { - propertyAnimation.target.style._setValue(styleModule.rotateProperty, propertyAnimation.value, valueSource); - })); - } - else { - propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.rotate = propertyAnimation.value; })); - } - propertyResetCallbacks.push(checkAnimation(() => { nativeView.setRotation(originalValue1); })); + propertyUpdateCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.rotateProperty, propertyAnimation.value, valueSource); + })); + propertyResetCallbacks.push(checkAnimation(() => { + propertyAnimation.target.style._setValue(styleModule.rotateProperty, originalValue1, valueSource); + })); animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray)); break; @@ -358,7 +333,7 @@ export class Animation extends common.Animation implements definition.Animation if (propertyAnimation.curve !== undefined) { animators[i].setInterpolator(propertyAnimation.curve); } - + if (trace.enabled) { trace.write("Animator created: " + animators[i], trace.categories.Animation); } @@ -372,7 +347,7 @@ export class Animation extends common.Animation implements definition.Animation private static _getAndroidRepeatCount(iterations: number): number { return (iterations === Number.POSITIVE_INFINITY) ? android.view.animation.Animation.INFINITE : iterations - 1; } - + private _enableHardwareAcceleration() { for (let i = 0, length = this._propertyAnimations.length; i < length; i++) { let cache = this._propertyAnimations[i].target._nativeView; @@ -381,7 +356,7 @@ export class Animation extends common.Animation implements definition.Animation if (layerType !== android.view.View.LAYER_TYPE_HARDWARE) { cache.layerType = layerType; cache.setLayerType(android.view.View.LAYER_TYPE_HARDWARE, null); - } + } } } } diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts index 91c7f7afc..23963f27c 100644 --- a/tns-core-modules/ui/animation/animation.ios.ts +++ b/tns-core-modules/ui/animation/animation.ios.ts @@ -44,10 +44,10 @@ class AnimationDelegateImpl extends NSObject { public nextAnimation: Function; private _finishedCallback: Function; - private _propertyAnimation: common.PropertyAnimation; + private _propertyAnimation: PropertyAnimationInfo; private _valueSource: number; - public static initWithFinishedCallback(finishedCallback: Function, propertyAnimation: common.PropertyAnimation, valueSource: number): AnimationDelegateImpl { + public static initWithFinishedCallback(finishedCallback: Function, propertyAnimation: PropertyAnimationInfo, valueSource: number): AnimationDelegateImpl { let delegate = AnimationDelegateImpl.new(); delegate._finishedCallback = finishedCallback; delegate._propertyAnimation = propertyAnimation; @@ -226,11 +226,15 @@ export class Animation extends common.Animation implements definition.Animation let tempRotate = animation.target.rotate * Math.PI / 180; let abs; + if (valueSource === undefined) { + valueSource = dependencyObservable.ValueSource.Local; + } + switch (animation.property) { case common.Properties.backgroundColor: animation._originalValue = animation.target.backgroundColor; animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.backgroundColorProperty, value, valueSource); + animation.target.style._setValue(style.backgroundColorProperty, value, valueSource); }; if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { originalValue = presentationLayer.backgroundColor; @@ -247,7 +251,7 @@ export class Animation extends common.Animation implements definition.Animation case common.Properties.opacity: animation._originalValue = animation.target.opacity; animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.opacityProperty, value, valueSource); + animation.target.style._setValue(style.opacityProperty, value, valueSource); }; if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { originalValue = presentationLayer.opacity; @@ -257,9 +261,9 @@ export class Animation extends common.Animation implements definition.Animation } break; case common.Properties.rotate: - animation._originalValue = animation.target.rotate; + animation._originalValue = animation.target.rotate !== undefined ? animation.target.rotate : 0; animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.rotateProperty, value, valueSource); + animation.target.style._setValue(style.rotateProperty, value, valueSource); }; propertyNameToAnimate = "transform.rotation"; if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { @@ -268,7 +272,8 @@ export class Animation extends common.Animation implements definition.Animation else { originalValue = nativeView.layer.valueForKeyPath("transform.rotation"); } - if (originalValue === 0 && animation.target.rotate !== 0 && Math.floor(value / 360) - value / 360 === 0) { + if (originalValue === 0 && animation.target.rotate !== undefined && + animation.target.rotate !== 0 && Math.floor(value / 360) - value / 360 === 0) { originalValue = animation.target.rotate * Math.PI / 180; } value = value * Math.PI / 180; @@ -280,8 +285,8 @@ export class Animation extends common.Animation implements definition.Animation case common.Properties.translate: animation._originalValue = { x: animation.target.translateX, y: animation.target.translateY }; animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.translateXProperty, value.x, valueSource); - animation.target._setValue(style.translateYProperty, value.y, valueSource); + animation.target.style._setValue(style.translateXProperty, value.x, valueSource); + animation.target.style._setValue(style.translateYProperty, value.y, valueSource); }; propertyNameToAnimate = "transform"; if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { @@ -294,33 +299,33 @@ export class Animation extends common.Animation implements definition.Animation break; case common.Properties.scale: animation._originalValue = { x: animation.target.scaleX, y: animation.target.scaleY }; - animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.scaleXProperty, value.x, valueSource); - animation.target._setValue(style.scaleYProperty, value.y, valueSource); + animation._propertyResetCallback = (value, valueSource) => { + animation.target.style._setValue(style.scaleXProperty, value.x, valueSource); + animation.target.style._setValue(style.scaleYProperty, value.y, valueSource); }; propertyNameToAnimate = "transform"; if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { - originalValue = NSValue.valueWithCATransform3D(presentationLayer.transform); + originalValue = NSValue.valueWithCATransform3D(presentationLayer.transform); } else { - originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform); + originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform); } value = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, value.x, value.y, 1)); break; case _transform: if (presentationLayer != null && valueSource !== dependencyObservable.ValueSource.Css) { - originalValue = NSValue.valueWithCATransform3D(presentationLayer.transform); + originalValue = NSValue.valueWithCATransform3D(presentationLayer.transform); } else { - originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform); + originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform); } animation._originalValue = { xs: animation.target.scaleX, ys: animation.target.scaleY, - xt: animation.target.translateX, yt: animation.target.translateY }; + xt: animation.target.translateX, yt: animation.target.translateY }; animation._propertyResetCallback = (value, valueSource) => { - animation.target._setValue(style.translateXProperty, value.xt, valueSource); - animation.target._setValue(style.translateYProperty, value.yt, valueSource); - animation.target._setValue(style.scaleXProperty, value.xs, valueSource); - animation.target._setValue(style.scaleYProperty, value.ys, valueSource); + animation.target.style._setValue(style.translateXProperty, value.xt, valueSource); + animation.target.style._setValue(style.translateYProperty, value.yt, valueSource); + animation.target.style._setValue(style.scaleXProperty, value.xs, valueSource); + animation.target.style._setValue(style.scaleYProperty, value.ys, valueSource); }; propertyNameToAnimate = "transform"; value = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation)); @@ -439,7 +444,7 @@ export class Animation extends common.Animation implements definition.Animation } break; } - }, function (finished:boolean) { + }, function (finished: boolean) { if (finished) { if (animation.property === _transform) { if (animation.value[common.Properties.translate] !== undefined) { @@ -595,9 +600,14 @@ export function _resolveAnimationCurve(curve: any): any { export function _getTransformMismatchErrorMessage(view: viewModule.View): string { // Order is important: translate, rotate, scale let result: CGAffineTransform = CGAffineTransformIdentity; - result = CGAffineTransformTranslate(result, view.translateX, view.translateY); - result = CGAffineTransformRotate(result, view.rotate * Math.PI / 180); - result = CGAffineTransformScale(result, view.scaleX, view.scaleY); + let translateX = view.translateX ? view.translateX : 0; + let translateY = view.translateY ? view.translateY : 0; + let scaleX = view.scaleX ? view.scaleX : 1; + let scaleY = view.scaleY ? view.scaleY : 1; + let rotate = view.rotate ? view.rotate : 0; + result = CGAffineTransformTranslate(result, translateX, translateY); + result = CGAffineTransformRotate(result, rotate * Math.PI / 180); + result = CGAffineTransformScale(result, scaleX, scaleY); let viewTransform = NSStringFromCGAffineTransform(result); let nativeTransform = NSStringFromCGAffineTransform(view._nativeView.transform); diff --git a/tns-core-modules/ui/animation/keyframe-animation.ts b/tns-core-modules/ui/animation/keyframe-animation.ts index b77a4ccb1..0461b5e56 100644 --- a/tns-core-modules/ui/animation/keyframe-animation.ts +++ b/tns-core-modules/ui/animation/keyframe-animation.ts @@ -36,6 +36,7 @@ export class KeyframeAnimation { private _isPlaying: boolean; private _isForwards: boolean; private _nativeAnimations: Array; + private _target: view.View; public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo, valueSourceModifier: number) { let animations = new Array(); @@ -109,6 +110,10 @@ export class KeyframeAnimation { animation.cancel(); } } + if (this._nativeAnimations.length > 0) { + let animation = this._nativeAnimations[0]; + this._resetAnimationValues(this._target, animation); + } this._rejectAnimationFinishedPromise(); } } @@ -125,6 +130,7 @@ export class KeyframeAnimation { this._isPlaying = true; this._nativeAnimations = new Array(); + this._target = view; if (this.delay !== 0) { let that = this; @@ -174,24 +180,7 @@ export class KeyframeAnimation { else { if (this._isForwards === false) { let animation = this.animations[this.animations.length - 1]; - let modifier = animation["valueSource"]; - if ("backgroundColor" in animation) { - view.style._resetValue(style.backgroundColorProperty, modifier); - } - if ("scale" in animation) { - view.style._resetValue(style.scaleXProperty, modifier); - view.style._resetValue(style.scaleYProperty, modifier); - } - if ("translate" in animation) { - view.style._resetValue(style.translateXProperty, modifier); - view.style._resetValue(style.translateYProperty, modifier); - } - if ("rotate" in animation) { - view.style._resetValue(style.rotateProperty, modifier); - } - if ("opacity" in animation) { - view.style._resetValue(style.opacityProperty, modifier); - } + this._resetAnimationValues(view, animation); } this._resolveAnimationFinishedPromise(); } @@ -210,12 +199,35 @@ export class KeyframeAnimation { public _resolveAnimationFinishedPromise() { this._nativeAnimations = new Array(); this._isPlaying = false; + this._target = null; this._resolve(); } public _rejectAnimationFinishedPromise() { this._nativeAnimations = new Array(); this._isPlaying = false; + this._target = null; this._reject(new Error("Animation cancelled.")); } + + private _resetAnimationValues(view: view.View, animation: Object) { + let modifier = animation["valueSource"]; + if ("backgroundColor" in animation) { + view.style._resetValue(style.backgroundColorProperty, modifier); + } + if ("scale" in animation) { + view.style._resetValue(style.scaleXProperty, modifier); + view.style._resetValue(style.scaleYProperty, modifier); + } + if ("translate" in animation) { + view.style._resetValue(style.translateXProperty, modifier); + view.style._resetValue(style.translateYProperty, modifier); + } + if ("rotate" in animation) { + view.style._resetValue(style.rotateProperty, modifier); + } + if ("opacity" in animation) { + view.style._resetValue(style.opacityProperty, modifier); + } + } } diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index 0ff1d431e..c7ce2f325 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -129,13 +129,8 @@ var cssClassProperty = new Property("cssClass", "View", new PropertyMetadata(und var classNameProperty = new Property("className", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)); var idProperty = new Property("id", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle)); var automationTextProperty = new Property("automationText", "View", new PropertyMetadata(undefined)); -var translateXProperty = new Property("translateX", "View", new PropertyMetadata(0)); -var translateYProperty = new Property("translateY", "View", new PropertyMetadata(0)); -var scaleXProperty = new Property("scaleX", "View", new PropertyMetadata(1)); -var scaleYProperty = new Property("scaleY", "View", new PropertyMetadata(1)); var originXProperty = new Property("originX", "View", new PropertyMetadata(0.5)); var originYProperty = new Property("originY", "View", new PropertyMetadata(0.5)); -var rotateProperty = new Property("rotate", "View", new PropertyMetadata(0)); var isEnabledProperty = new Property("isEnabled", "View", new PropertyMetadata(true)); var isUserInteractionEnabledProperty = new Property("isUserInteractionEnabled", "View", new PropertyMetadata(true)); @@ -147,13 +142,8 @@ export class View extends ProxyObject implements definition.View { public static idProperty = idProperty; public static cssClassProperty = cssClassProperty; public static classNameProperty = classNameProperty; - public static translateXProperty = translateXProperty; - public static translateYProperty = translateYProperty; - public static scaleXProperty = scaleXProperty; - public static scaleYProperty = scaleYProperty; public static originXProperty = originXProperty; public static originYProperty = originYProperty; - public static rotateProperty = rotateProperty; public static isEnabledProperty = isEnabledProperty; public static isUserInteractionEnabledProperty = isUserInteractionEnabledProperty; @@ -423,31 +413,31 @@ export class View extends ProxyObject implements definition.View { //END Style property shortcuts get translateX(): number { - return this._getValue(View.translateXProperty); + return this.style.translateX; } set translateX(value: number) { - this._setValue(View.translateXProperty, value); + this.style.translateX = value; } get translateY(): number { - return this._getValue(View.translateYProperty); + return this.style.translateY; } set translateY(value: number) { - this._setValue(View.translateYProperty, value); + this.style.translateY = value; } get scaleX(): number { - return this._getValue(View.scaleXProperty); + return this.style.scaleX; } set scaleX(value: number) { - this._setValue(View.scaleXProperty, value); + this.style.scaleX = value; } get scaleY(): number { - return this._getValue(View.scaleYProperty); + return this.style.scaleY; } set scaleY(value: number) { - this._setValue(View.scaleYProperty, value); + this.style.scaleY = value; } get originX(): number { @@ -465,10 +455,10 @@ export class View extends ProxyObject implements definition.View { } get rotate(): number { - return this._getValue(View.rotateProperty); + return this.style.rotate; } set rotate(value: number) { - this._setValue(View.rotateProperty, value); + this.style.rotate = value; } get isEnabled(): boolean { diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts index 8055476e1..ca6b8364c 100644 --- a/tns-core-modules/ui/core/view.android.ts +++ b/tns-core-modules/ui/core/view.android.ts @@ -29,30 +29,6 @@ function onIdPropertyChanged(data: dependencyObservable.PropertyChangeData) { } (viewCommon.View.idProperty.metadata).onSetNativeValue = onIdPropertyChanged; -function onTranslateXPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._nativeView.setTranslationX(data.newValue * utils.layout.getDisplayDensity()); -} -(viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTranslateXPropertyChanged; - -function onTranslateYPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._nativeView.setTranslationY(data.newValue * utils.layout.getDisplayDensity()); -} -(viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTranslateYPropertyChanged; - -function onScaleXPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._nativeView.setScaleX(data.newValue); -} -(viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onScaleXPropertyChanged; - -function onScaleYPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._nativeView.setScaleY(data.newValue); -} -(viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onScaleYPropertyChanged; - function onOriginXPropertyChanged(data: dependencyObservable.PropertyChangeData) { org.nativescript.widgets.OriginPoint.setX((data.object)._nativeView, data.newValue); } @@ -63,12 +39,6 @@ function onOriginYPropertyChanged(data: dependencyObservable.PropertyChangeData) } (viewCommon.View.originYProperty.metadata).onSetNativeValue = onOriginYPropertyChanged; -function onRotatePropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._nativeView.setRotation(data.newValue); -} -(viewCommon.View.rotateProperty.metadata).onSetNativeValue = onRotatePropertyChanged; - function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) { var view = data.object; view._nativeView.setEnabled(data.newValue); @@ -479,7 +449,7 @@ export class CustomLayoutView extends View implements viewDefinition.CustomLayou } export class ViewStyler implements style.Styler { - //Background and borders methods + // Background and borders methods private static setBackgroundBorderProperty(view: View, newValue: any, defaultValue?: any) { background.ad.onBackgroundOrBorderPropertyChanged(view); } @@ -488,7 +458,7 @@ export class ViewStyler implements style.Styler { background.ad.onBackgroundOrBorderPropertyChanged(view); } - //Visibility methods + // Visibility methods private static setVisibilityProperty(view: View, newValue: any) { var androidValue = (newValue === enums.Visibility.visible) ? android.view.View.VISIBLE : android.view.View.GONE; (view._nativeView).setVisibility(androidValue); @@ -498,7 +468,7 @@ export class ViewStyler implements style.Styler { (view._nativeView).setVisibility(android.view.View.VISIBLE); } - //Opacity methods + // Opacity methods private static setOpacityProperty(view: View, newValue: any) { (view._nativeView).setAlpha(float(newValue)); } @@ -507,7 +477,7 @@ export class ViewStyler implements style.Styler { (view._nativeView).setAlpha(float(1.0)); } - //minWidth methods + // minWidth methods private static setMinWidthProperty(view: View, newValue: any) { (view._nativeView).setMinimumWidth(Math.round(newValue * utils.layout.getDisplayDensity())); } @@ -516,7 +486,7 @@ export class ViewStyler implements style.Styler { (view._nativeView).setMinimumWidth(0); } - //minHeight methods + // minHeight methods private static setMinHeightProperty(view: View, newValue: any) { (view._nativeView).setMinimumHeight(Math.round(newValue * utils.layout.getDisplayDensity())); } @@ -647,69 +617,49 @@ export class ViewStyler implements style.Styler { // Rotate private static setRotateProperty(view: View, newValue: any) { - view.rotate = newValue; + view._nativeView.setRotation(newValue); } private static resetRotateProperty(view: View, nativeValue: any) { - view.rotate = nativeValue; + view._nativeView.setRotation(float(0)); } - private static getRotateProperty(view: View): any { - return view.rotate; - } - - //ScaleX + // ScaleX private static setScaleXProperty(view: View, newValue: any) { - view.scaleX = newValue; + view._nativeView.setScaleX(newValue); } private static resetScaleXProperty(view: View, nativeValue: any) { - view.scaleX = nativeValue; + view._nativeView.setScaleX(float(1.0)); } - private static getScaleXProperty(view: View): any { - return view.scaleX; - } - - //ScaleY + // ScaleY private static setScaleYProperty(view: View, newValue: any) { - view.scaleY = newValue; + view._nativeView.setScaleY(newValue); } private static resetScaleYProperty(view: View, nativeValue: any) { - view.scaleY = nativeValue; + view._nativeView.setScaleY(float(1.0)); } - private static getScaleYProperty(view: View): any { - return view.scaleY; - } - - //TranslateX + // TranslateX private static setTranslateXProperty(view: View, newValue: any) { - view.translateX = newValue; + view._nativeView.setTranslationX(newValue * utils.layout.getDisplayDensity()); } private static resetTranslateXProperty(view: View, nativeValue: any) { - view.translateX = nativeValue; + view._nativeView.setTranslationX(float(0)); } - private static getTranslateXProperty(view: View): any { - return view.translateX; - } - - //TranslateY + // TranslateY private static setTranslateYProperty(view: View, newValue: any) { - view.translateY = newValue; + view._nativeView.setTranslationY(newValue * utils.layout.getDisplayDensity()); } private static resetTranslateYProperty(view: View, nativeValue: any) { - view.translateY = nativeValue; + view._nativeView.setTranslationY(float(0)); } - private static getTranslateYProperty(view: View): any { - return view.translateY; - } - // z-index private static getZIndexProperty(view: View): any { return view.android.getZ ? view.android.getZ() : 0; @@ -718,7 +668,7 @@ export class ViewStyler implements style.Styler { private static setZIndexProperty(view: View, newValue: any) { if (view.android.setZ) { view.android.setZ(newValue); - + if(view.android instanceof android.widget.Button){ view.android.setStateListAnimator(null); } @@ -729,7 +679,7 @@ export class ViewStyler implements style.Styler { if (view.android.setZ) { view.android.setZ(nativeValue); } - } + } public static registerHandlers() { style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler( @@ -775,32 +725,27 @@ export class ViewStyler implements style.Styler { style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler( ViewStyler.setPaddingProperty, ViewStyler.resetPaddingProperty), "LayoutBase"); - - style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler( + + style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler( ViewStyler.setRotateProperty, - ViewStyler.resetRotateProperty, - ViewStyler.getRotateProperty)); + ViewStyler.resetRotateProperty)); style.registerHandler(style.scaleXProperty, new style.StylePropertyChangedHandler( ViewStyler.setScaleXProperty, - ViewStyler.resetScaleXProperty, - ViewStyler.getScaleXProperty)); + ViewStyler.resetScaleXProperty)); style.registerHandler(style.scaleYProperty, new style.StylePropertyChangedHandler( ViewStyler.setScaleYProperty, - ViewStyler.resetScaleYProperty, - ViewStyler.getScaleYProperty)); + ViewStyler.resetScaleYProperty)); style.registerHandler(style.translateXProperty, new style.StylePropertyChangedHandler( ViewStyler.setTranslateXProperty, - ViewStyler.resetTranslateXProperty, - ViewStyler.getTranslateXProperty)); + ViewStyler.resetTranslateXProperty)); style.registerHandler(style.translateYProperty, new style.StylePropertyChangedHandler( ViewStyler.setTranslateYProperty, - ViewStyler.resetTranslateYProperty, - ViewStyler.getTranslateYProperty)); - + ViewStyler.resetTranslateYProperty)); + style.registerHandler(style.zIndexProperty, new style.StylePropertyChangedHandler( ViewStyler.setZIndexProperty, ViewStyler.resetZIndexProperty, diff --git a/tns-core-modules/ui/core/view.ios.ts b/tns-core-modules/ui/core/view.ios.ts index c19bb386f..66179aae2 100644 --- a/tns-core-modules/ui/core/view.ios.ts +++ b/tns-core-modules/ui/core/view.ios.ts @@ -24,16 +24,6 @@ function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChan } (viewCommon.View.automationTextProperty.metadata).onSetNativeValue = onAutomationTextPropertyChanged; -function onTransfromPropertyChanged(data: dependencyObservable.PropertyChangeData) { - var view = data.object; - view._updateNativeTransform(); -} -(viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTransfromPropertyChanged; -(viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTransfromPropertyChanged; -(viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onTransfromPropertyChanged; -(viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onTransfromPropertyChanged; -(viewCommon.View.rotateProperty.metadata).onSetNativeValue = onTransfromPropertyChanged; - function onOriginPropertyChanged(data: dependencyObservable.PropertyChangeData) { var view = data.object; view._updateOriginPoint(); @@ -252,7 +242,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(pointInWindow.x), y: utils.layout.toDeviceIndependentPixels(pointInWindow.y), - } + }; } public getLocationOnScreen(): viewDefinition.Point { @@ -265,7 +255,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(pointOnScreen.x), y: utils.layout.toDeviceIndependentPixels(pointOnScreen.y), - } + }; } public getLocationRelativeTo(otherView: viewDefinition.View): viewDefinition.Point { @@ -280,7 +270,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(myPointInWindow.x - otherPointInWindow.x), y: utils.layout.toDeviceIndependentPixels(myPointInWindow.y - otherPointInWindow.y), - } + }; } private _onSizeChanged() { @@ -288,10 +278,15 @@ export class View extends viewCommon.View { } public _updateNativeTransform() { - var newTransform = CGAffineTransformIdentity; - newTransform = CGAffineTransformTranslate(newTransform, this.translateX, this.translateY); - newTransform = CGAffineTransformRotate(newTransform, this.rotate * Math.PI / 180); - newTransform = CGAffineTransformScale(newTransform, this.scaleX, this.scaleY); + let translateX = this.translateX || 0; + let translateY = this.translateY || 0; + let scaleX = this.scaleX || 1; + let scaleY = this.scaleY || 1; + let rotate = this.rotate || 0; + let newTransform = CGAffineTransformIdentity; + newTransform = CGAffineTransformTranslate(newTransform, translateX, translateY); + newTransform = CGAffineTransformRotate(newTransform, rotate * Math.PI / 180); + newTransform = CGAffineTransformScale(newTransform, scaleX, scaleY); if (!CGAffineTransformEqualToTransform(this._nativeView.transform, newTransform)) { this._nativeView.transform = newTransform; this._hasTransfrom = this._nativeView && !CGAffineTransformEqualToTransform(this._nativeView.transform, CGAffineTransformIdentity); @@ -377,7 +372,7 @@ export class CustomLayoutView extends View { } export class ViewStyler implements style.Styler { - //Background methods + // Background methods private static setBackgroundInternalProperty(view: View, newValue: any) { var nativeView: UIView = view._nativeView; if (nativeView) { @@ -408,7 +403,7 @@ export class ViewStyler implements style.Styler { return undefined; } - //Visibility methods + // Visibility methods private static setVisibilityProperty(view: View, newValue: any) { var nativeView: UIView = view._nativeView; if (nativeView) { @@ -423,7 +418,7 @@ export class ViewStyler implements style.Styler { } } - //Opacity methods + // Opacity methods private static setOpacityProperty(view: View, newValue: any) { var nativeView: UIView = view._nativeView; if (nativeView) { @@ -446,7 +441,7 @@ export class ViewStyler implements style.Styler { } } - //Border width methods + // Border width methods private static setBorderWidthProperty(view: View, newValue: any) { if (view._nativeView instanceof UIView) { (view._nativeView).layer.borderWidth = newValue; @@ -466,7 +461,7 @@ export class ViewStyler implements style.Styler { return 0; } - //Border color methods + // Border color methods private static setBorderColorProperty(view: View, newValue: any) { if (view._nativeView instanceof UIView && newValue instanceof UIColor) { (view._nativeView).layer.borderColor = (newValue).CGColor; @@ -486,7 +481,7 @@ export class ViewStyler implements style.Styler { return undefined; } - //Border radius methods + // Border radius methods private static setBorderRadiusProperty(view: View, newValue: any) { if (view._nativeView instanceof UIView) { (view._nativeView).layer.cornerRadius = newValue; @@ -509,70 +504,90 @@ export class ViewStyler implements style.Styler { // Rotate private static setRotateProperty(view: View, newValue: any) { - view.rotate = newValue; + view._updateNativeTransform(); } private static resetRotateProperty(view: View, nativeValue: any) { - view.rotate = nativeValue; + view._updateNativeTransform(); } private static getRotateProperty(view: View): any { - return view.rotate; + if (view._nativeView instanceof UIView) { + let t: CGAffineTransform = (view._nativeView).transform; + return Math.atan2(t.b, t.a); + } + return 0; } - //ScaleX + // ScaleX private static setScaleXProperty(view: View, newValue: any) { - view.scaleX = newValue; + view._updateNativeTransform(); } private static resetScaleXProperty(view: View, nativeValue: any) { - view.scaleX = nativeValue; + view._updateNativeTransform(); } private static getScaleXProperty(view: View): any { - return view.scaleX; + if (view._nativeView instanceof UIView) { + let t: CGAffineTransform = (view._nativeView).transform; + return Math.sqrt(t.a * t.a + t.c * t.c); + } + return 0; } - //ScaleY + // ScaleY private static setScaleYProperty(view: View, newValue: any) { - view.scaleY = newValue; + view._updateNativeTransform(); } private static resetScaleYProperty(view: View, nativeValue: any) { - view.scaleY = nativeValue; + view._updateNativeTransform(); } private static getScaleYProperty(view: View): any { - return view.scaleY; + if (view._nativeView instanceof UIView) { + let t: CGAffineTransform = (view._nativeView).transform; + return Math.sqrt(t.b * t.b + t.d * t.d); + } + return 0; } - //TranslateX + // TranslateX private static setTranslateXProperty(view: View, newValue: any) { - view.translateX = newValue; + view._updateNativeTransform(); } private static resetTranslateXProperty(view: View, nativeValue: any) { - view.translateX = nativeValue; + view._updateNativeTransform(); } private static getTranslateXProperty(view: View): any { - return view.translateX; + if (view._nativeView instanceof UIView) { + let t: CGAffineTransform = (view._nativeView).transform; + return t.tx; + } + return 0; } - //TranslateY + // TranslateY private static setTranslateYProperty(view: View, newValue: any) { - view.translateY = newValue; + view._updateNativeTransform(); } private static resetTranslateYProperty(view: View, nativeValue: any) { - view.translateY = nativeValue; + view._updateNativeTransform(); } private static getTranslateYProperty(view: View): any { - return view.translateY; + if (view._nativeView instanceof UIView) { + let t: CGAffineTransform = (view._nativeView).transform; + return t.ty; + } + return 0; } - //z-index + // z-index private static setZIndexProperty(view: View, newValue: any) { view.ios.layer.zPosition = newValue; } @@ -584,8 +599,8 @@ export class ViewStyler implements style.Styler { private static getZIndexProperty(view: View): any { return view.ios.layer.zPosition; } - - //Clip-path methods + + // Clip-path methods private static setClipPathProperty(view: View, newValue: any) { var nativeView: UIView = view._nativeView; if (nativeView) { diff --git a/tns-core-modules/ui/styling/css-selector.ts b/tns-core-modules/ui/styling/css-selector.ts index c2be6cf6b..a0bf0bbfd 100644 --- a/tns-core-modules/ui/styling/css-selector.ts +++ b/tns-core-modules/ui/styling/css-selector.ts @@ -66,6 +66,7 @@ export class CssSelector { } public apply(view: view.View, valueSourceModifier: number) { + view._unregisterAllAnimations(); let modifier = valueSourceModifier || this.valueSourceModifier; this.eachSetter((property, value) => { if (types.isString(property)) { @@ -92,7 +93,6 @@ export class CssSelector { } } }); - view._unregisterAllAnimations(); if (this.animations && view.isLoaded && view._nativeView !== undefined) { for (let animationInfo of this.animations) { let animation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo, modifier);