Light and dark mode
Added ability to set a light / dark / transparent background to animations in order to easily see how it contrasts against each mode.
This is an imported pull request from
https://github.com/google/skia-buildbot/pull/49
GitOrigin-RevId: 3f4ff1daa6e2d6ec72453a446379f144604c4828
Change-Id: Ib543a8a896a32a1299949e3e1b0f06d960ef4617
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/371974
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Kevin Lubick <kjlubick@google.com>
diff --git a/skottie/modules/skottie-config-sk/skottie-config-sk.js b/skottie/modules/skottie-config-sk/skottie-config-sk.js
index 6db2978..0bd8871 100644
--- a/skottie/modules/skottie-config-sk/skottie-config-sk.js
+++ b/skottie/modules/skottie-config-sk/skottie-config-sk.js
@@ -33,6 +33,12 @@
const DEFAULT_SIZE = 128;
+const BACKGROUND_VALUES = {
+ TRANSPARENT: 'rgba(0,0,0,0)',
+ LIGHT: '#FFFFFF',
+ DARK: '#000000',
+};
+
const allowZips = window.location.hostname === "skottie-internal.skia.org" ||
window.location.hostname === "localhost";
@@ -64,6 +70,24 @@
${ele._state.assetsFilename ? ele._state.assetsFilename : 'No asset folder selected.'}
</div>
<label class=number>
+ Background Color
+ <select id="backgroundColor">
+ <option
+ value=${BACKGROUND_VALUES.TRANSPARENT}
+ ?selected=${ele._backgroundColor === BACKGROUND_VALUES.TRANSPARENT}
+ >Transparent</option>
+ <option
+ value=${BACKGROUND_VALUES.LIGHT}
+ ?selected=${ele._backgroundColor === BACKGROUND_VALUES.LIGHT}
+ >Light</option>
+ <option
+ value=${BACKGROUND_VALUES.DARK}
+ test=${ele._backgroundColor}
+ ?selected=${ele._backgroundColor === BACKGROUND_VALUES.DARK}
+ >Dark</option>
+ </select>
+ </label>
+ <label class=number>
<input type=number id=width .value=${ele._width} required /> Width (px)
</label>
<label class=number>
@@ -105,6 +129,7 @@
this._width = DEFAULT_SIZE;
this._height = DEFAULT_SIZE;
this._fps = 0;
+ this._backgroundColor = BACKGROUND_VALUES.TRANSPARENT;
this._fileChanged = false;
this._starting_state = Object.assign({}, this._state);
}
@@ -147,6 +172,13 @@
this._render();
}
+ /** @prop backgroundColor {string} Selected background color for animation. */
+ get backgroundColor() { return this._backgroundColor; }
+ set backgroundColor(val) {
+ this._backgroundColor = val;
+ this._render();
+ }
+
_hasCancel() {
return !!this._starting_state.lottie;
}
@@ -237,6 +269,7 @@
this._width = +$$('#width', this).value;
this._height = +$$('#height', this).value;
this._fps = +$$('#fps', this).value;
+ this._backgroundColor = $$('#backgroundColor', this).value;
}
_go() {
@@ -247,6 +280,7 @@
'width' : this._width,
'height': this._height,
'fps': this._fps,
+ 'backgroundColor': this._backgroundColor,
}, bubbles: true }));
}
diff --git a/skottie/modules/skottie-sk/skottie-sk.js b/skottie/modules/skottie-sk/skottie-sk.js
index 6989d84..d919ee3 100644
--- a/skottie/modules/skottie-sk/skottie-sk.js
+++ b/skottie/modules/skottie-sk/skottie-sk.js
@@ -38,7 +38,7 @@
const displayDialog = (ele) => html`
<skottie-config-sk .state=${ele._state} .width=${ele._width}
- .height=${ele._height} .fps=${ele._fps}></skottie-config-sk>
+ .height=${ele._height} .fps=${ele._fps} .backgroundColor=${ele._backgroundColor}></skottie-config-sk>
`;
const skottiePlayer = (ele) => html`
@@ -56,7 +56,7 @@
return html`
<figure>
<div id=container title=lottie-web
- style='width: ${ele._width}px; height: ${ele._height}px'></div>
+ style='width: ${ele._width}px; height: ${ele._height}px; background-color: ${ele._backgroundColor}'></div>
<figcaption>lottie-web (${bodymovin.version})</figcaption>
</figure>`;
}
@@ -242,6 +242,7 @@
this._width = 0;
this._height = 0;
this._fps = 0;
+ this._backgroundColor = 'rgba(0,0,0,0)';
this._stateChanged = stateReflector(
/*getState*/() => {
@@ -253,6 +254,7 @@
'w' : this._width,
'h' : this._height,
'f' : this._fps,
+ 'bg': this._backgroundColor,
}
}, /*setState*/(newState) => {
this._showLottie = newState.l;
@@ -261,6 +263,7 @@
this._width = newState.w;
this._height = newState.h;
this._fps = newState.f;
+ this._backgroundColor = newState.bg;
this._applyTextEdits = this._applyTextEdits.bind(this);
this.render();
});
@@ -387,6 +390,7 @@
this._width = e.detail.width;
this._height = e.detail.height;
this._fps = e.detail.fps;
+ this._backgroundColor = e.detail.backgroundColor;
this._autoSize();
this._stateChanged();
if (e.detail.fileChanged) {
