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

Animations improperly reset (#4900)

Browse Source 
* Animations improperly reset

* Scope stop and start of animations to avoid blinks
This commit is contained in:
Panayot Cankov
2017-10-03 15:50:09 +03:00
committed by GitHub
parent 1049fcc251
commit 35be4bc40a
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
tns-core-modules/ui/styling/style-scope.ts
View File

@ -203,6 +203,7 @@ export class CssState {
_match: SelectorsMatch<ViewBase>; _match: SelectorsMatch<ViewBase>;
_matchInvalid: boolean; _matchInvalid: boolean;
_playsKeyframeAnimations: boolean;
constructor(private view: ViewBase) { constructor(private view: ViewBase) {
this._onDynamicStateChangeHandler = () => this.updateDynamicState(); this._onDynamicStateChangeHandler = () => this.updateDynamicState();
@ -245,9 +246,11 @@ export class CssState {
private updateDynamicState(): void { private updateDynamicState(): void {
const matchingSelectors = this._match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true); const matchingSelectors = this._match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
this.view._batchUpdate(() => {
this.stopKeyframeAnimations(); this.stopKeyframeAnimations();
this.setPropertyValues(matchingSelectors); this.setPropertyValues(matchingSelectors);
this.playKeyframeAnimations(matchingSelectors); this.playKeyframeAnimations(matchingSelectors);
});
} }
private playKeyframeAnimations(matchingSelectors: SelectorCore[]): void { private playKeyframeAnimations(matchingSelectors: SelectorCore[]): void {
@ -266,16 +269,31 @@ export class CssState {
} }
}); });
animations.forEach(animation => animation.play(<View>this.view)); if (this._playsKeyframeAnimations = animations.length > 0) {
animations.map(animation => animation.play(<View>this.view));
Object.freeze(animations); Object.freeze(animations);
this._appliedAnimations = animations; this._appliedAnimations = animations;
} }
}
private stopKeyframeAnimations(): void { private stopKeyframeAnimations(): void {
if (!this._playsKeyframeAnimations) {
return;
}
this._appliedAnimations this._appliedAnimations
.filter(animation => animation.isPlaying) .filter(animation => animation.isPlaying)
.forEach(animation => animation.cancel()); .forEach(animation => animation.cancel());
this._appliedAnimations = CssState.emptyAnimationArray; this._appliedAnimations = CssState.emptyAnimationArray;
this.view.style["keyframe:rotate"] = unsetValue;
this.view.style["keyframe:scaleX"] = unsetValue;
this.view.style["keyframe:scaleY"] = unsetValue;
this.view.style["keyframe:translateX"] = unsetValue;
this.view.style["keyframe:translateY"] = unsetValue;
this.view.style["keyframe:backgroundColor"] = unsetValue;
this.view.style["keyframe:opacity"] = unsetValue;
this._playsKeyframeAnimations = false;
} }
/** /**
@ -291,7 +309,6 @@ export class CssState {
newPropertyValues[declaration.property] = declaration.value)); newPropertyValues[declaration.property] = declaration.value));
Object.freeze(newPropertyValues); Object.freeze(newPropertyValues);
this.view._batchUpdate(() => {
const oldProperties = this._appliedPropertyValues; const oldProperties = this._appliedPropertyValues;
for(const key in oldProperties) { for(const key in oldProperties) {
if (!(key in newPropertyValues)) { if (!(key in newPropertyValues)) {
@ -317,7 +334,6 @@ export class CssState {
traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error); traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
} }
} }
});
this._appliedPropertyValues = newPropertyValues; this._appliedPropertyValues = newPropertyValues;
} }