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

76
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.stopKeyframeAnimations(); this.view._batchUpdate(() => {
this.setPropertyValues(matchingSelectors); this.stopKeyframeAnimations();
this.playKeyframeAnimations(matchingSelectors); this.setPropertyValues(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) {
Object.freeze(animations); animations.map(animation => animation.play(<View>this.view));
this._appliedAnimations = animations; Object.freeze(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,33 +309,31 @@ 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)) { if (key in this.view.style) {
if (key in this.view.style) { this.view.style[`css:${key}`] = unsetValue;
this.view.style[`css:${key}`] = unsetValue; } else {
} else { // TRICKY: How do we unset local value?
// TRICKY: How do we unset local value?
}
} }
} }
for(const property in newPropertyValues) { }
if (oldProperties && property in oldProperties && oldProperties[property] === newPropertyValues[property]) { for(const property in newPropertyValues) {
continue; if (oldProperties && property in oldProperties && oldProperties[property] === newPropertyValues[property]) {
} continue;
const value = newPropertyValues[property];
try {
if (property in this.view.style) {
this.view.style[`css:${property}`] = value;
} else {
this.view[property] = value;
}
} catch (e) {
traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
}
} }
}); const value = newPropertyValues[property];
try {
if (property in this.view.style) {
this.view.style[`css:${property}`] = value;
} else {
this.view[property] = value;
}
} catch (e) {
traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);
}
}
this._appliedPropertyValues = newPropertyValues; this._appliedPropertyValues = newPropertyValues;
} }