mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(animation): support animating width/height properties (WIP) (#4917)
* feat(animation): support animating width/height properties - width/height can be specified in any valid PercentLength form that can be parsed. - make width/height properties be based on animatable CSS property. TODO: affectsLayout???? - add a few basic tests. Could probably use a few more? - fix a few null pointer exceptions in PercentLength helpers * test(ui): add animation examples to ui-tests-app - basic height animation - height animation in StackLayout - fix an issue where strings were not automatically converted to PercentLength when calling directly into `View.animate` * test(ui): cleanup and add summary/details layout example - use height transition to cover textview content. - when clicking on the summary view, animate the summary height up to a small header and show the text view. - fake animating the height on the textview by very subtly animating its translateY value while shrinking the header height. This tricks your mind into think that the text view is also vertically growing, even thought it's just slightly moving up along the Y axis. * test(ui): add animation curves test page - verify all built-in animation curve types work as expected. * test(ui): update animation curve example for multiple properties - add a segmented bar that allows choosing which properties to animate using the various curves. - interestingly, a whole bunch of properties fail with spring on iOS. - refactor width/height animations handlers to remove duplication on iOS. - implement proper spring animation for width/height on iOS. * test(ui): add stress example with 100 labels animating and fps meter - same curve/property selector as the curves example, but with 10x10 grid of items that stagger animate, and an FPS meter. - sadly it looks like width/height animations are considerably slower than the others when you have a bunch of them. I'm not sure that's entirely surprising since they interact with the layout system. - the better news is that even with the army example, my really old android 4 tablet manages ~30fps. On height/width animations from the curves example, the old tablet does fine with no noticeable FPS hit. * refactor: deduplicate existing droid width/height animations - stash to prep for replacing with LayoutTransition. * test(animation): unit tests for extent animation and PercentLength parse - update animation scaffold to allow specifying the parent stack layout height/width - test basic supported units, px, % - test basic percent length parser behaviors * chore: cleanup cruft and remove noise from diff - undo the import mangling that WebStorm helpfully applied - remove .editorconfig file - clean up in tests, remove cruft * chore: cleanup from review - more import changes * chore: remove .editorconfig
This commit is contained in:
Justin DuJardin
committed by
Svetoslav
Svetoslav
parent
4bcb9840c1
commit
57ed0cf405
@@ -182,7 +182,7 @@ export function install() {
|
||||
registerOnGlobalContext("Response", "fetch");
|
||||
|
||||
// check whether the 'android' namespace is exposed
|
||||
// if positive - the current device is an Android
|
||||
// if positive - the current device is an Android
|
||||
// so a custom implementation of the global 'console' object is attached.
|
||||
// otherwise do nothing on iOS - the NS runtime provides a native 'console' functionality.
|
||||
if ((<any>global).android) {
|
||||
|
||||
@@ -11,16 +11,19 @@ import { View } from "../core/view";
|
||||
// Types.
|
||||
import { Color } from "../../color";
|
||||
import { isEnabled as traceEnabled, write as traceWrite, categories as traceCategories } from "../../trace";
|
||||
import { PercentLength } from "../styling/style-properties";
|
||||
|
||||
export { Color, traceEnabled, traceWrite, traceCategories };
|
||||
export { AnimationPromise } from ".";
|
||||
|
||||
export module Properties {
|
||||
export var opacity = "opacity";
|
||||
export var backgroundColor = "backgroundColor";
|
||||
export var translate = "translate";
|
||||
export var rotate = "rotate";
|
||||
export var scale = "scale";
|
||||
export const opacity = "opacity";
|
||||
export const backgroundColor = "backgroundColor";
|
||||
export const translate = "translate";
|
||||
export const rotate = "rotate";
|
||||
export const scale = "scale";
|
||||
export const height = "height";
|
||||
export const width = "width";
|
||||
}
|
||||
|
||||
export interface PropertyAnimation {
|
||||
@@ -163,6 +166,9 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
|
||||
throw new Error(`Property ${item} must be valid Pair. Value: ${animationDefinition[item]}`);
|
||||
} else if (item === Properties.backgroundColor && !Color.isValid(animationDefinition.backgroundColor)) {
|
||||
throw new Error(`Property ${item} must be valid color. Value: ${animationDefinition[item]}`);
|
||||
} else if (item === Properties.width || item === Properties.height) {
|
||||
// Coerce input into a PercentLength object in case it's a string.
|
||||
animationDefinition[item] = PercentLength.parse(<any>animationDefinition[item]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -234,8 +240,34 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
|
||||
});
|
||||
}
|
||||
|
||||
// height
|
||||
if (animationDefinition.height !== undefined) {
|
||||
propertyAnimations.push({
|
||||
target: animationDefinition.target,
|
||||
property: Properties.height,
|
||||
value: animationDefinition.height,
|
||||
duration: animationDefinition.duration,
|
||||
delay: animationDefinition.delay,
|
||||
iterations: animationDefinition.iterations,
|
||||
curve: animationDefinition.curve
|
||||
});
|
||||
}
|
||||
|
||||
// width
|
||||
if (animationDefinition.width !== undefined) {
|
||||
propertyAnimations.push({
|
||||
target: animationDefinition.target,
|
||||
property: Properties.width,
|
||||
value: animationDefinition.width,
|
||||
duration: animationDefinition.duration,
|
||||
delay: animationDefinition.delay,
|
||||
iterations: animationDefinition.iterations,
|
||||
curve: animationDefinition.curve
|
||||
});
|
||||
}
|
||||
|
||||
if (propertyAnimations.length === 0) {
|
||||
throw new Error("No animation property specified.");
|
||||
throw new Error('No known animation properties specified');
|
||||
}
|
||||
|
||||
return propertyAnimations;
|
||||
@@ -252,4 +284,4 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
|
||||
curve: animation.curve
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,13 @@ import { View } from "../core/view";
|
||||
import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, Color, traceWrite, traceEnabled, traceCategories } from "./animation-common";
|
||||
import {
|
||||
opacityProperty, backgroundColorProperty, rotateProperty,
|
||||
translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
|
||||
translateXProperty, translateYProperty, scaleXProperty, scaleYProperty,
|
||||
heightProperty, widthProperty, PercentLength
|
||||
} from "../styling/style-properties";
|
||||
|
||||
import { layout } from "../../utils/utils";
|
||||
import lazy from "../../utils/lazy";
|
||||
|
||||
import * as platform from '../../platform';
|
||||
export * from "./animation-common";
|
||||
|
||||
interface AnimationDefinitionInternal extends AnimationDefinition {
|
||||
@@ -37,6 +38,8 @@ propertyKeys[Properties.opacity] = Symbol(keyPrefix + Properties.opacity);
|
||||
propertyKeys[Properties.rotate] = Symbol(keyPrefix + Properties.rotate);
|
||||
propertyKeys[Properties.scale] = Symbol(keyPrefix + Properties.scale);
|
||||
propertyKeys[Properties.translate] = Symbol(keyPrefix + Properties.translate);
|
||||
propertyKeys[Properties.height] = Symbol(keyPrefix + Properties.height);
|
||||
propertyKeys[Properties.width] = Symbol(keyPrefix + Properties.width);
|
||||
|
||||
export function _resolveAnimationCurve(curve: string | CubicBezierAnimationCurve | android.view.animation.Interpolator | android.view.animation.LinearInterpolator): android.view.animation.Interpolator {
|
||||
switch (curve) {
|
||||
@@ -195,7 +198,7 @@ export class Animation extends AnimationBase {
|
||||
}
|
||||
}
|
||||
|
||||
private _onAndroidAnimationCancel() { // tslint:disable-line
|
||||
private _onAndroidAnimationCancel() { // tslint:disable-line
|
||||
this._propertyResetCallbacks.forEach(v => v());
|
||||
this._rejectAnimationFinishedPromise();
|
||||
|
||||
@@ -301,7 +304,7 @@ export class Animation extends AnimationBase {
|
||||
} else {
|
||||
propertyAnimation.target.style[backgroundColorProperty.keyframe] = originalValue1;
|
||||
}
|
||||
|
||||
|
||||
if (propertyAnimation.target.nativeViewProtected && propertyAnimation.target[backgroundColorProperty.setNative]) {
|
||||
propertyAnimation.target[backgroundColorProperty.setNative](propertyAnimation.target.style.backgroundColor);
|
||||
}
|
||||
@@ -414,16 +417,55 @@ export class Animation extends AnimationBase {
|
||||
} else {
|
||||
propertyAnimation.target.style[rotateProperty.keyframe] = originalValue1;
|
||||
}
|
||||
|
||||
|
||||
if (propertyAnimation.target.nativeViewProtected) {
|
||||
propertyAnimation.target[rotateProperty.setNative](propertyAnimation.target.style.rotate);
|
||||
}
|
||||
}));
|
||||
animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray));
|
||||
break;
|
||||
case Properties.width:
|
||||
case Properties.height: {
|
||||
|
||||
const isVertical: boolean = propertyAnimation.property === 'height';
|
||||
const extentProperty = isVertical ? heightProperty : widthProperty;
|
||||
|
||||
extentProperty._initDefaultNativeValue(style);
|
||||
nativeArray = Array.create("float", 2);
|
||||
let toValue = propertyAnimation.value;
|
||||
let parent = propertyAnimation.target.parent as View;
|
||||
if (!parent) {
|
||||
throw new Error(`cannot animate ${propertyAnimation.property} on root view`);
|
||||
}
|
||||
const parentExtent: number = isVertical ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
|
||||
toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / platform.screen.mainScreen.scale;
|
||||
const nativeHeight: number = isVertical ? nativeView.getHeight() : nativeView.getWidth();
|
||||
const targetStyle: string = setLocal ? extentProperty.name : extentProperty.keyframe;
|
||||
originalValue1 = nativeHeight / platform.screen.mainScreen.scale;
|
||||
nativeArray[0] = originalValue1;
|
||||
nativeArray[1] = toValue;
|
||||
let extentAnimator = android.animation.ValueAnimator.ofFloat(nativeArray);
|
||||
extentAnimator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({
|
||||
onAnimationUpdate(animator: android.animation.ValueAnimator) {
|
||||
const argb = (<java.lang.Float>animator.getAnimatedValue()).floatValue();
|
||||
propertyAnimation.target.style[setLocal ? extentProperty.name : extentProperty.keyframe] = argb;
|
||||
}
|
||||
}));
|
||||
propertyUpdateCallbacks.push(checkAnimation(() => {
|
||||
propertyAnimation.target.style[targetStyle] = propertyAnimation.value;
|
||||
}));
|
||||
propertyResetCallbacks.push(checkAnimation(() => {
|
||||
propertyAnimation.target.style[targetStyle] = originalValue1;
|
||||
if (propertyAnimation.target.nativeViewProtected) {
|
||||
const setter = propertyAnimation.target[extentProperty.setNative];
|
||||
setter(propertyAnimation.target.style[propertyAnimation.property]);
|
||||
}
|
||||
}));
|
||||
animators.push(extentAnimator);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
throw new Error("Cannot animate " + propertyAnimation.property);
|
||||
throw new Error(`Animating property '${propertyAnimation.property}' is unsupported`);
|
||||
}
|
||||
|
||||
for (let i = 0, length = animators.length; i < length; i++) {
|
||||
|
||||
11
tns-core-modules/ui/animation/animation.d.ts
vendored
11
tns-core-modules/ui/animation/animation.d.ts
vendored
@@ -3,6 +3,7 @@
|
||||
*/ /** */
|
||||
|
||||
import { View, Color } from "../core/view";
|
||||
import {PercentLength} from '../styling/style-properties';
|
||||
|
||||
/**
|
||||
* Defines animation options for the View.animate method.
|
||||
@@ -33,6 +34,16 @@ export interface AnimationDefinition {
|
||||
*/
|
||||
scale?: Pair;
|
||||
|
||||
/**
|
||||
* Animates the height of a view.
|
||||
*/
|
||||
height?: PercentLength | string;
|
||||
|
||||
/**
|
||||
* Animates the width of a view.
|
||||
*/
|
||||
width?: PercentLength | string;
|
||||
|
||||
/**
|
||||
* Animates the rotate affine transform of the view. Value should be a number specifying the rotation amount in degrees.
|
||||
*/
|
||||
|
||||
@@ -4,10 +4,12 @@ import { View } from "../core/view";
|
||||
import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, traceWrite, traceEnabled, traceCategories } from "./animation-common";
|
||||
import {
|
||||
opacityProperty, backgroundColorProperty, rotateProperty,
|
||||
translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
|
||||
translateXProperty, translateYProperty, scaleXProperty, scaleYProperty,
|
||||
heightProperty, widthProperty, PercentLength
|
||||
} from "../styling/style-properties";
|
||||
|
||||
import { ios } from "../../utils/utils";
|
||||
import * as platform from "../../platform";
|
||||
|
||||
export * from "./animation-common";
|
||||
|
||||
@@ -84,6 +86,12 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
|
||||
targetStyle[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value;
|
||||
targetStyle[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value;
|
||||
break;
|
||||
case Properties.height:
|
||||
targetStyle[setLocal ? heightProperty.name : heightProperty.keyframe] = value;
|
||||
break;
|
||||
case Properties.width:
|
||||
targetStyle[setLocal ? widthProperty.name : widthProperty.keyframe] = value;
|
||||
break;
|
||||
case Properties.scale:
|
||||
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x === 0 ? 0.001 : value.x;
|
||||
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y === 0 ? 0.001 : value.y;
|
||||
@@ -262,8 +270,10 @@ export class Animation extends AnimationBase {
|
||||
|
||||
let nativeView = <UIView>animation.target.nativeViewProtected;
|
||||
let propertyNameToAnimate = animation.property;
|
||||
let value = animation.value;
|
||||
let originalValue;
|
||||
let toValue = animation.value;
|
||||
let fromValue;
|
||||
const parent = animation.target.parent as View;
|
||||
const screenScale: number = platform.screen.mainScreen.scale;
|
||||
|
||||
let tempRotate = (animation.target.rotate || 0) * Math.PI / 180;
|
||||
let abs;
|
||||
@@ -276,18 +286,18 @@ export class Animation extends AnimationBase {
|
||||
animation._propertyResetCallback = (value, valueSource) => {
|
||||
animation.target.style[setLocal ? backgroundColorProperty.name : backgroundColorProperty.keyframe] = value;
|
||||
};
|
||||
originalValue = nativeView.layer.backgroundColor;
|
||||
fromValue = nativeView.layer.backgroundColor;
|
||||
if (nativeView instanceof UILabel) {
|
||||
nativeView.setValueForKey(getter(UIColor, UIColor.clearColor), "backgroundColor");
|
||||
}
|
||||
value = value.CGColor;
|
||||
toValue = toValue.CGColor;
|
||||
break;
|
||||
case Properties.opacity:
|
||||
animation._originalValue = animation.target.opacity;
|
||||
animation._propertyResetCallback = (value, valueSource) => {
|
||||
animation.target.style[setLocal ? opacityProperty.name : opacityProperty.keyframe] = value;
|
||||
};
|
||||
originalValue = nativeView.layer.opacity;
|
||||
fromValue = nativeView.layer.opacity;
|
||||
break;
|
||||
case Properties.rotate:
|
||||
animation._originalValue = animation.target.rotate !== undefined ? animation.target.rotate : 0;
|
||||
@@ -295,44 +305,44 @@ export class Animation extends AnimationBase {
|
||||
animation.target.style[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value;
|
||||
};
|
||||
propertyNameToAnimate = "transform.rotation";
|
||||
originalValue = nativeView.layer.valueForKeyPath("transform.rotation");
|
||||
if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(value / 360) - value / 360 === 0) {
|
||||
originalValue = animation.target.rotate * Math.PI / 180;
|
||||
fromValue = nativeView.layer.valueForKeyPath("transform.rotation");
|
||||
if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
|
||||
fromValue = animation.target.rotate * Math.PI / 180;
|
||||
}
|
||||
value = value * Math.PI / 180;
|
||||
abs = fabs(originalValue - value);
|
||||
if (abs < 0.001 && originalValue !== tempRotate) {
|
||||
originalValue = tempRotate;
|
||||
toValue = toValue * Math.PI / 180;
|
||||
abs = fabs(fromValue - toValue);
|
||||
if (abs < 0.001 && fromValue !== tempRotate) {
|
||||
fromValue = tempRotate;
|
||||
}
|
||||
break;
|
||||
case Properties.translate:
|
||||
animation._originalValue = { x: animation.target.translateX, y: animation.target.translateY };
|
||||
animation._originalValue = {x: animation.target.translateX, y: animation.target.translateY};
|
||||
animation._propertyResetCallback = (value, valueSource) => {
|
||||
animation.target.style[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.x;
|
||||
animation.target.style[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.y;
|
||||
};
|
||||
propertyNameToAnimate = "transform";
|
||||
originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
value = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, value.x, value.y, 0));
|
||||
fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
toValue = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, toValue.x, toValue.y, 0));
|
||||
break;
|
||||
case Properties.scale:
|
||||
if (value.x === 0) {
|
||||
value.x = 0.001;
|
||||
if (toValue.x === 0) {
|
||||
toValue.x = 0.001;
|
||||
}
|
||||
if (value.y === 0) {
|
||||
value.y = 0.001;
|
||||
if (toValue.y === 0) {
|
||||
toValue.y = 0.001;
|
||||
}
|
||||
animation._originalValue = { x: animation.target.scaleX, y: animation.target.scaleY };
|
||||
animation._originalValue = {x: animation.target.scaleX, y: animation.target.scaleY};
|
||||
animation._propertyResetCallback = (value, valueSource) => {
|
||||
animation.target.style[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x;
|
||||
animation.target.style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y;
|
||||
};
|
||||
propertyNameToAnimate = "transform";
|
||||
originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
value = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, value.x, value.y, 1));
|
||||
fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
toValue = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, toValue.x, toValue.y, 1));
|
||||
break;
|
||||
case _transform:
|
||||
originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
|
||||
animation._originalValue = {
|
||||
xs: animation.target.scaleX, ys: animation.target.scaleY,
|
||||
xt: animation.target.translateX, yt: animation.target.translateY
|
||||
@@ -344,10 +354,33 @@ export class Animation extends AnimationBase {
|
||||
animation.target.style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.ys;
|
||||
};
|
||||
propertyNameToAnimate = "transform";
|
||||
value = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
|
||||
toValue = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
|
||||
break;
|
||||
case Properties.width:
|
||||
case Properties.height:
|
||||
const direction: string = animation.property;
|
||||
const isHeight: boolean = direction === 'height';
|
||||
propertyNameToAnimate = "bounds";
|
||||
if (!parent) {
|
||||
throw new Error(`cannot animate ${direction} on root view`);
|
||||
}
|
||||
const parentExtent: number = isHeight ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
|
||||
const asNumber = PercentLength.toDevicePixels(PercentLength.parse(toValue), parentExtent, parentExtent) / screenScale;
|
||||
let currentBounds = nativeView.layer.bounds;
|
||||
let extentX = isHeight ? currentBounds.size.width : asNumber;
|
||||
let extentY = isHeight ? asNumber : currentBounds.size.height;
|
||||
fromValue = NSValue.valueWithCGRect(currentBounds);
|
||||
toValue = NSValue.valueWithCGRect(
|
||||
CGRectMake(currentBounds.origin.x, currentBounds.origin.y, extentX, extentY)
|
||||
);
|
||||
animation._originalValue = animation.target.height;
|
||||
animation._propertyResetCallback = (value, valueSource) => {
|
||||
const prop = isHeight ? heightProperty : widthProperty;
|
||||
animation.target.style[setLocal ? prop.name : prop.keyframe] = value;
|
||||
};
|
||||
break;
|
||||
default:
|
||||
throw new Error("Cannot animate " + animation.property);
|
||||
throw new Error(`Animating property '${animation.property}' is unsupported`);
|
||||
}
|
||||
|
||||
let duration = 0.3;
|
||||
@@ -372,8 +405,8 @@ export class Animation extends AnimationBase {
|
||||
|
||||
return {
|
||||
propertyNameToAnimate: propertyNameToAnimate,
|
||||
fromValue: originalValue,
|
||||
toValue: value,
|
||||
fromValue: fromValue,
|
||||
toValue: toValue,
|
||||
duration: duration,
|
||||
repeatCount: repeatCount,
|
||||
delay: delay
|
||||
@@ -449,6 +482,14 @@ export class Animation extends AnimationBase {
|
||||
case Properties.opacity:
|
||||
animation.target.opacity = args.toValue;
|
||||
break;
|
||||
case Properties.height:
|
||||
case Properties.width:
|
||||
animation._originalValue = animation.target[animation.property];
|
||||
nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
|
||||
animation._propertyResetCallback = function (value) {
|
||||
animation.target[animation.property] = value;
|
||||
};
|
||||
break;
|
||||
case Properties.rotate:
|
||||
nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
|
||||
break;
|
||||
@@ -457,11 +498,11 @@ export class Animation extends AnimationBase {
|
||||
nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
|
||||
animation._propertyResetCallback = function (value) {
|
||||
nativeView.layer.transform = value;
|
||||
}
|
||||
};
|
||||
break;
|
||||
}
|
||||
}, function (finished: boolean) {
|
||||
if (finished) {
|
||||
}, function (animationDidFinish: boolean) {
|
||||
if (animationDidFinish) {
|
||||
if (animation.property === _transform) {
|
||||
if (animation.value[Properties.translate] !== undefined) {
|
||||
animation.target.translateX = animation.value[Properties.translate].x;
|
||||
@@ -479,10 +520,10 @@ export class Animation extends AnimationBase {
|
||||
}
|
||||
}
|
||||
if (finishedCallback) {
|
||||
let cancelled = !finished;
|
||||
let cancelled = !animationDidFinish;
|
||||
finishedCallback(cancelled);
|
||||
}
|
||||
if (finished && nextAnimation) {
|
||||
if (animationDidFinish && nextAnimation) {
|
||||
nextAnimation();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -19,7 +19,8 @@ import {
|
||||
backgroundColorProperty,
|
||||
scaleXProperty, scaleYProperty,
|
||||
translateXProperty, translateYProperty,
|
||||
rotateProperty, opacityProperty
|
||||
rotateProperty, opacityProperty,
|
||||
widthProperty, heightProperty, PercentLength
|
||||
} from "../styling/style-properties";
|
||||
|
||||
export class Keyframes implements KeyframesDefinition {
|
||||
@@ -60,6 +61,8 @@ interface Keyframe {
|
||||
translate?: { x: number, y: number };
|
||||
rotate?: number;
|
||||
opacity?: number;
|
||||
width?: PercentLength;
|
||||
height?: PercentLength;
|
||||
valueSource?: "keyframe" | "animation";
|
||||
duration?: number;
|
||||
curve?: any;
|
||||
@@ -207,6 +210,12 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
|
||||
if ("opacity" in animation) {
|
||||
view.style[opacityProperty.keyframe] = animation.opacity;
|
||||
}
|
||||
if ("height" in animation) {
|
||||
view.style[heightProperty.keyframe] = animation.height;
|
||||
}
|
||||
if ("width" in animation) {
|
||||
view.style[widthProperty.keyframe] = animation.width;
|
||||
}
|
||||
|
||||
setTimeout(() => this.animate(view, 1, iterations), 1);
|
||||
}
|
||||
@@ -271,5 +280,11 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
|
||||
if ("opacity" in animation) {
|
||||
view.style[opacityProperty.keyframe] = unsetValue;
|
||||
}
|
||||
if ("height" in animation) {
|
||||
view.style[heightProperty.keyframe] = unsetValue;
|
||||
}
|
||||
if ("width" in animation) {
|
||||
view.style[widthProperty.keyframe] = unsetValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,8 +85,8 @@ export const opacityProperty: CssAnimationProperty<Style, number>;
|
||||
|
||||
export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
|
||||
export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
|
||||
export const widthProperty: CssProperty<Style, PercentLength>;
|
||||
export const heightProperty: CssProperty<Style, PercentLength>;
|
||||
export const widthProperty: CssAnimationProperty<Style, PercentLength>;
|
||||
export const heightProperty: CssAnimationProperty<Style, PercentLength>;
|
||||
export const lineHeightProperty: CssProperty<Style, number>;
|
||||
export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
|
||||
export const marginLeftProperty: CssProperty<Style, PercentLength>;
|
||||
|
||||
@@ -48,13 +48,19 @@ function equalsCommon(a: PercentLength, b: PercentLength): boolean {
|
||||
if (typeof b === "number") {
|
||||
return a == b; // tslint:disable-line
|
||||
}
|
||||
if (!b) {
|
||||
return false;
|
||||
}
|
||||
return b.unit == "dip" && a == b.value; // tslint:disable-line
|
||||
}
|
||||
if (b == "auto") { // tslint:disable-line
|
||||
return false;
|
||||
}
|
||||
if (typeof b === "number") {
|
||||
return a.unit == "dip" && a.value == b; // tslint:disable-line
|
||||
return a ? (a.unit == "dip" && a.value == b) : false; // tslint:disable-line
|
||||
}
|
||||
if (!a || !b) {
|
||||
return false;
|
||||
}
|
||||
return a.value == b.value && a.unit == b.unit; // tslint:disable-line
|
||||
}
|
||||
@@ -83,6 +89,9 @@ function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN,
|
||||
if (typeof length === "number") {
|
||||
return layout.round(layout.toDevicePixels(length));
|
||||
}
|
||||
if (!length) {
|
||||
return auto;
|
||||
}
|
||||
switch (length.unit) {
|
||||
case "px":
|
||||
return layout.round(length.value);
|
||||
@@ -108,6 +117,7 @@ export namespace PercentLength {
|
||||
if (percentIndex !== (stringValue.length - 1) || percentIndex === 0) {
|
||||
value = Number.NaN;
|
||||
} else {
|
||||
// Normalize result to values between -1 and 1
|
||||
value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
|
||||
}
|
||||
|
||||
@@ -187,10 +197,28 @@ export const minHeightProperty = new CssProperty<Style, Length>({
|
||||
});
|
||||
minHeightProperty.register(Style);
|
||||
|
||||
export const widthProperty = new CssProperty<Style, PercentLength>({ name: "width", cssName: "width", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
|
||||
export const widthProperty = new CssAnimationProperty<Style, PercentLength>({
|
||||
name: "width", cssName: "width", defaultValue: "auto", equalityComparer: Length.equals,
|
||||
// TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
|
||||
// on the animation property, so fake it here. x_x
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
if (isIOS) {
|
||||
target.view.requestLayout();
|
||||
}
|
||||
}, valueConverter: PercentLength.parse });
|
||||
widthProperty.register(Style);
|
||||
|
||||
export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
|
||||
export const heightProperty = new CssAnimationProperty<Style, PercentLength>({
|
||||
name: "height", cssName: "height", defaultValue: "auto", equalityComparer: Length.equals,
|
||||
// TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
|
||||
// on the animation property, so fake it here. -_-
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
if (isIOS) {
|
||||
target.view.requestLayout();
|
||||
}
|
||||
}, valueConverter: PercentLength.parse,
|
||||
|
||||
});
|
||||
heightProperty.register(Style);
|
||||
|
||||
const marginProperty = new ShorthandProperty<Style, string | PercentLength>({
|
||||
|
||||
Reference in New Issue
Block a user