javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed animation value sync issues

Browse Source
This commit is contained in:
Tsvetan Raikov
2016-06-08 10:07:37 +03:00
parent 743a2efb4a
commit d810a779fe
7 changed files with 202 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
tns-core-modules/ui/animation/animation.android.ts
View File

@@ -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 = (<any>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 = (<any>Array).create(java.lang.Object, 2);
nativeArray[0] = propertyAnimation.target.backgroundColor ? java.lang.Integer.valueOf((<color.Color>propertyAnimation.target.backgroundColor).argb) : java.lang.Integer.valueOf(-1);
nativeArray[1] = java.lang.Integer.valueOf((<color.Color>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 = (<any>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 = <CacheLayerType>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);
}
}
}
}
}

60
tns-core-modules/ui/animation/animation.ios.ts
View File

@@ -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>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);

48
tns-core-modules/ui/animation/keyframe-animation.ts
View File

@@ -36,6 +36,7 @@ export class KeyframeAnimation {
private _isPlaying: boolean;
private _isForwards: boolean;
private _nativeAnimations: Array<animationModule.Animation>;
private _target: view.View;
public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo, valueSourceModifier: number) {
let animations = new Array<Object>();
@@ -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<animationModule.Animation>();
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<animationModule.Animation>();
this._isPlaying = false;
this._target = null;
this._resolve();
}
public _rejectAnimationFinishedPromise() {
this._nativeAnimations = new Array<animationModule.Animation>();
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);
}
}
}

30
tns-core-modules/ui/core/view-common.ts
View File

@@ -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 {

113
tns-core-modules/ui/core/view.android.ts
View File

@@ -29,30 +29,6 @@ function onIdPropertyChanged(data: dependencyObservable.PropertyChangeData) {
}
(<proxy.PropertyMetadata>viewCommon.View.idProperty.metadata).onSetNativeValue = onIdPropertyChanged;
function onTranslateXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._nativeView.setTranslationX(data.newValue * utils.layout.getDisplayDensity());
}
(<proxy.PropertyMetadata>viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTranslateXPropertyChanged;
function onTranslateYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._nativeView.setTranslationY(data.newValue * utils.layout.getDisplayDensity());
}
(<proxy.PropertyMetadata>viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTranslateYPropertyChanged;
function onScaleXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._nativeView.setScaleX(data.newValue);
}
(<proxy.PropertyMetadata>viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onScaleXPropertyChanged;
function onScaleYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._nativeView.setScaleY(data.newValue);
}
(<proxy.PropertyMetadata>viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onScaleYPropertyChanged;
function onOriginXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
org.nativescript.widgets.OriginPoint.setX((<View>data.object)._nativeView, data.newValue);
}
@@ -63,12 +39,6 @@ function onOriginYPropertyChanged(data: dependencyObservable.PropertyChangeData)
}
(<proxy.PropertyMetadata>viewCommon.View.originYProperty.metadata).onSetNativeValue = onOriginYPropertyChanged;
function onRotatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._nativeView.setRotation(data.newValue);
}
(<proxy.PropertyMetadata>viewCommon.View.rotateProperty.metadata).onSetNativeValue = onRotatePropertyChanged;
function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <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;
(<android.view.View>view._nativeView).setVisibility(androidValue);
@@ -498,7 +468,7 @@ export class ViewStyler implements style.Styler {
(<android.view.View>view._nativeView).setVisibility(android.view.View.VISIBLE);
}
//Opacity methods
// Opacity methods
private static setOpacityProperty(view: View, newValue: any) {
(<android.view.View>view._nativeView).setAlpha(float(newValue));
}
@@ -507,7 +477,7 @@ export class ViewStyler implements style.Styler {
(<android.view.View>view._nativeView).setAlpha(float(1.0));
}
//minWidth methods
// minWidth methods
private static setMinWidthProperty(view: View, newValue: any) {
(<android.view.View>view._nativeView).setMinimumWidth(Math.round(newValue * utils.layout.getDisplayDensity()));
}
@@ -516,7 +486,7 @@ export class ViewStyler implements style.Styler {
(<android.view.View>view._nativeView).setMinimumWidth(0);
}
//minHeight methods
// minHeight methods
private static setMinHeightProperty(view: View, newValue: any) {
(<android.view.View>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,

105
tns-core-modules/ui/core/view.ios.ts
View File

@@ -24,16 +24,6 @@ function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChan
}
(<proxy.PropertyMetadata>viewCommon.View.automationTextProperty.metadata).onSetNativeValue = onAutomationTextPropertyChanged;
function onTransfromPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <View>data.object;
view._updateNativeTransform();
}
(<proxy.PropertyMetadata>viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTransfromPropertyChanged;
(<proxy.PropertyMetadata>viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTransfromPropertyChanged;
(<proxy.PropertyMetadata>viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onTransfromPropertyChanged;
(<proxy.PropertyMetadata>viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onTransfromPropertyChanged;
(<proxy.PropertyMetadata>viewCommon.View.rotateProperty.metadata).onSetNativeValue = onTransfromPropertyChanged;
function onOriginPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <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 = <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 = <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 = <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) {
(<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) {
(<UIView>view._nativeView).layer.borderColor = (<UIColor>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) {
(<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 = (<UIView>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 = (<UIView>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 = (<UIView>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 = (<UIView>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 = (<UIView>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 = <UIView>view._nativeView;
if (nativeView) {

2
tns-core-modules/ui/styling/css-selector.ts
View File

@@ -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);