javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 02:54:11 +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>;
_matchInvalid: boolean;
_playsKeyframeAnimations: boolean;
constructor(private view: ViewBase) {
this._onDynamicStateChangeHandler = () => this.updateDynamicState();
@ -245,9 +246,11 @@ export class CssState {
private updateDynamicState(): void {
const matchingSelectors = this._match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
this.stopKeyframeAnimations();
this.setPropertyValues(matchingSelectors);
this.playKeyframeAnimations(matchingSelectors);
this.view._batchUpdate(() => {
this.stopKeyframeAnimations();
this.setPropertyValues(matchingSelectors);
this.playKeyframeAnimations(matchingSelectors);
});
}
private playKeyframeAnimations(matchingSelectors: SelectorCore[]): void {
@ -266,16 +269,31 @@ export class CssState {
}
});
animations.forEach(animation => animation.play(<View>this.view));
Object.freeze(animations);
this._appliedAnimations = animations;
if (this._playsKeyframeAnimations = animations.length > 0) {
animations.map(animation => animation.play(<View>this.view));
Object.freeze(animations);
this._appliedAnimations = animations;
}
}
private stopKeyframeAnimations(): void {
if (!this._playsKeyframeAnimations) {
return;
}
this._appliedAnimations
.filter(animation => animation.isPlaying)
.forEach(animation => animation.cancel());
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));
Object.freeze(newPropertyValues);
this.view._batchUpdate(() => {
const oldProperties = this._appliedPropertyValues;
for(const key in oldProperties) {
if (!(key in newPropertyValues)) {
if (key in this.view.style) {
this.view.style[`css:${key}`] = unsetValue;
} else {
// TRICKY: How do we unset local value?
}
const oldProperties = this._appliedPropertyValues;
for(const key in oldProperties) {
if (!(key in newPropertyValues)) {
if (key in this.view.style) {
this.view.style[`css:${key}`] = unsetValue;
} else {
// TRICKY: How do we unset local value?
}
}
for(const property in newPropertyValues) {
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);
}
}
for(const property in newPropertyValues) {
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);
}
}
this._appliedPropertyValues = newPropertyValues;
}