okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve Smooth Lyric Animation (#1096)

Browse source 
* app-mainMenu can be triggered by right click

Currently you can't open the little Cider popup menu without first uncollapsing the sidebar. This is extremely an extremely unepic sussy amogus L gamer moment. This change allows you to right click to bypass uncollapsing the sidebar and get straight to the hot app-mainMenu action. I think Cider speedrunners will greatly appreciate this quality of life addition. Please consider accepting this PR (short for pull request) to improve the UX (short for user experience).

* Improve Smooth Lyric Animation

PR #1094 introduced a few issues:
A) The animations would be paused when Cider was out of focus, making the lyrics remain grayed out
B) The animation was too slow, making it harder to sing along with karaoke mode on faster-paced songs
C) The easing method was inconsistent with the rest of the app and made the color look a little janky

This PR fixes issue A by changing the animation method from an animation to a transition, fixes B by increasing the speed (which themes can easily adjust if preferred), and fixes C by using the existing var(--appleEase) as the easing method
This commit is contained in:
DecibillyJoel 2022-05-31 15:53:52 -04:00 • committed by GitHub
parent 66dd74136b
commit 378cf21af6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/renderer/style.less
View file

@ -1680,7 +1680,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.lyric-line.active .verse.verse-active { .lyric-line.active .verse.verse-active {
animation: lyricVerseAnimation 0.75s ease-in-out forwards; opacity: 1;
transition: opacity 0.35s var(--appleEase);
} }
.lyric-line:hover { .lyric-line:hover {
@ -1703,10 +1704,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.lyric-line.active { .lyric-line.active {
--bgSpeed: 1s; --bgSpeed: 1s;
opacity: 1;
transform: scale(1); transform: scale(1);
/*background: var(--keyColor);*/ /*background: var(--keyColor);*/
transition: transform 0.2s var(--appleEase); transition: transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase);
animation: lyricVerseAnimation 1s ease-in-out forwards;
} }
.lyric-line:not(.active) { .lyric-line:not(.active) {
@ -1788,16 +1789,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex; display: flex;
} }
@keyframes lyricVerseAnimation {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes lyricWaitingLine { @keyframes lyricWaitingLine {
0% { 0% {
opacity: 0.25; opacity: 0.25;