mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-16 21:28:06 +00:00
Update animations for lyrics, panels and tracklists | 为歌词、面板和列表更新动画 (#249)
* Update lyrics scrolling animation * Remove the useless module imported by mistake * Auto prettify the changed code * Update lyrics animation curve and add blur effect to lyrics * Auto prettify the changed code * Add initial lyrics blur filter * Update lyrics blur and fade effect * Update open and close animation for explore page's panel * Update tracklist hover animation * Add scale animation to lyrics * Auto prettify the changed code * Update lyrics blur effect with CSS variables * Support small screen devices for all pages * Fix paddings for some pages * Auto prettify the changed code * Update lyrics page for small screen devices
This commit is contained in:
Mr. Will
GitHub
parent
97f2ce043b
commit
1d34aa794f
22 changed files with 496 additions and 58 deletions
|
|
@ -276,6 +276,7 @@ export default {
|
|||
display: flex;
|
||||
width: 78vw;
|
||||
margin-bottom: 72px;
|
||||
padding: var(--main-content-padding);
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -330,6 +331,29 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.playlist-info {
|
||||
width: calc(100vw - 2 * var(--main-content-padding-x));
|
||||
padding: var(--main-content-padding);
|
||||
display: block;
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
margin-left: 0;
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
|
|
@ -345,6 +369,7 @@ export default {
|
|||
font-size: 12px;
|
||||
opacity: 0.48;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -363,6 +388,7 @@ export default {
|
|||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 20px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
}
|
||||
.description-fulltext {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="head">
|
||||
<img :src="artist.img1v1Url | resizeImage(1024)" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="info">
|
||||
<div class="name">{{ artist.name }}</div>
|
||||
<div class="artist">{{ $t("artist.artist") }}</div>
|
||||
<div class="statistics">
|
||||
|
|
@ -253,6 +253,7 @@ export default {
|
|||
align-items: center;
|
||||
margin-bottom: 26px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
img {
|
||||
height: 192px;
|
||||
width: 192px;
|
||||
|
|
@ -289,12 +290,37 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.artist-info {
|
||||
display: block;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
padding: var(--main-content-padding);
|
||||
padding-top: 46px;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -309,6 +335,11 @@ export default {
|
|||
|
||||
.latest-release {
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.section-title {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.release {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -343,6 +374,7 @@ export default {
|
|||
.popular-tracks {
|
||||
.show-more {
|
||||
display: flex;
|
||||
padding: var(--main-content-padding);
|
||||
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ export default {
|
|||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" v-show="showCatOptions">
|
||||
<div class="panel" v-bind:class="{ show: showCatOptions }">
|
||||
<div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
|
||||
<div class="name">{{ bigCat }}</div>
|
||||
<div class="cats">
|
||||
|
|
@ -174,6 +174,23 @@ export default {
|
|||
},
|
||||
},
|
||||
activated() {
|
||||
var updatePanelHeight = () => {
|
||||
var panelChildren = this.$el.getElementsByClassName("panel")[0].children;
|
||||
this.$el.style.setProperty(
|
||||
"--explore-panel-children-height",
|
||||
`${
|
||||
Math.abs(
|
||||
panelChildren[0].getBoundingClientRect().y -
|
||||
(panelChildren[panelChildren.length - 1].getBoundingClientRect()
|
||||
.y +
|
||||
panelChildren[panelChildren.length - 1].clientHeight)
|
||||
) + 16
|
||||
}px`
|
||||
);
|
||||
};
|
||||
window.addEventListener("load", updatePanelHeight);
|
||||
window.addEventListener("resize", updatePanelHeight);
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
|
|
@ -193,10 +210,12 @@ export default {
|
|||
h1 {
|
||||
color: var(--color-text);
|
||||
font-size: 56px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.button {
|
||||
user-select: none;
|
||||
|
|
@ -226,8 +245,19 @@ h1 {
|
|||
margin-top: 10px;
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
padding: 0 8px;
|
||||
margin: var(--main-content-padding);
|
||||
color: var(--color-text);
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.show {
|
||||
height: var(--explore-panel-children-height);
|
||||
opacity: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.big-cat {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ export default {
|
|||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
:id="likedSongsPlaylist.id"
|
||||
dbclickTrackFunc="playPlaylistByID"
|
||||
:columnNumber="3"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -355,6 +356,7 @@ h1 {
|
|||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--main-content-padding);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
|
@ -373,6 +375,7 @@ h1 {
|
|||
.section-one {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
padding: var(--main-content-padding);
|
||||
.songs {
|
||||
flex: 7;
|
||||
margin-top: 8px;
|
||||
|
|
@ -381,6 +384,16 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.section-one {
|
||||
display: block;
|
||||
.songs {
|
||||
margin-top: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.liked-songs {
|
||||
flex: 3;
|
||||
margin-top: 8px;
|
||||
|
|
@ -460,6 +473,7 @@ h1 {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ export default {
|
|||
.login {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,12 @@
|
|||
</div>
|
||||
<div class="right-side">
|
||||
<transition name="slide-fade">
|
||||
<div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
|
||||
<div
|
||||
class="lyrics-container"
|
||||
ref="lyricsContainer"
|
||||
v-show="!noLyric"
|
||||
@scroll="blurEffect($event)"
|
||||
>
|
||||
<div class="line" id="line-1"></div>
|
||||
<div
|
||||
class="line"
|
||||
|
|
@ -270,6 +275,23 @@ export default {
|
|||
this.$parent.$refs.player.setProgress(value);
|
||||
this.$parent.$refs.player.player.seek(value);
|
||||
},
|
||||
blurEffect(ev) {
|
||||
ev.target.children.forEach((el) => {
|
||||
const distanceToCenterPercentage =
|
||||
Math.abs(
|
||||
el.getBoundingClientRect().y +
|
||||
el.clientHeight / 2 -
|
||||
window.innerHeight / 2
|
||||
) /
|
||||
(window.innerHeight / 2);
|
||||
const functionedEffectValue =
|
||||
1 - Math.sqrt(1 - Math.pow(distanceToCenterPercentage, 2));
|
||||
el.style.setProperty(
|
||||
"--func-val",
|
||||
isNaN(functionedEffectValue) ? "" : functionedEffectValue.toFixed(2)
|
||||
);
|
||||
});
|
||||
},
|
||||
setLyricsInterval() {
|
||||
this.lyricsInterval = setInterval(() => {
|
||||
const progress = this.player.seek() ?? 0;
|
||||
|
|
@ -282,11 +304,36 @@ export default {
|
|||
});
|
||||
if (oldHighlightLyricIndex !== this.highlightLyricIndex) {
|
||||
const el = document.getElementById(`line${this.highlightLyricIndex}`);
|
||||
if (el)
|
||||
el.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
if (el) {
|
||||
const duration = 500;
|
||||
var start;
|
||||
var animationProgress;
|
||||
const oldY = el.parentNode.scrollTop;
|
||||
const newY =
|
||||
el.offsetTop - window.innerHeight / 2 + el.clientHeight / 2;
|
||||
const distance = oldY - newY;
|
||||
var animation = (timeStamp) => {
|
||||
if (!start) {
|
||||
start = timeStamp;
|
||||
}
|
||||
animationProgress = (timeStamp - start) / duration;
|
||||
if (animationProgress < 1) {
|
||||
el.parentNode.scrollTo(
|
||||
0,
|
||||
oldY -
|
||||
Math.sqrt(
|
||||
2 * animationProgress - Math.pow(animationProgress, 2)
|
||||
) *
|
||||
distance
|
||||
);
|
||||
window.requestAnimationFrame(animation);
|
||||
} else {
|
||||
window.cancelAnimationFrame(animation);
|
||||
}
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(animation);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
|
|
@ -316,6 +363,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$layoutBreakpoint: 1000px;
|
||||
|
||||
.lyrics-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -424,9 +473,28 @@ export default {
|
|||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
@media (max-width: $layoutBreakpoint) {
|
||||
button:nth-child(2) .svg-icon {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
.svg-icon {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $layoutBreakpoint) {
|
||||
.controls {
|
||||
max-width: 100vw;
|
||||
width: calc(100vw - 2 * var(--main-content-padding-x));
|
||||
padding: var(--main-content-padding);
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
|
|
@ -435,18 +503,31 @@ export default {
|
|||
.cover-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: $layoutBreakpoint) {
|
||||
.cover-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 0.75em;
|
||||
width: 54vh;
|
||||
height: 54vh;
|
||||
width: 86vw;
|
||||
height: 86vw;
|
||||
max-width: 54vh;
|
||||
max-height: 54vh;
|
||||
user-select: none;
|
||||
object-fit: cover;
|
||||
}
|
||||
.shadow {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
height: 54vh;
|
||||
width: 54vh;
|
||||
width: 86vw;
|
||||
height: 86vw;
|
||||
max-width: 54vh;
|
||||
max-height: 54vh;
|
||||
filter: blur(16px) opacity(0.6);
|
||||
transform: scale(0.92, 0.96);
|
||||
z-index: -1;
|
||||
|
|
@ -469,13 +550,24 @@ export default {
|
|||
overflow-y: auto;
|
||||
transition: 0.5s;
|
||||
.line {
|
||||
--func-val: 1;
|
||||
// margin-top: 38px;
|
||||
padding: 18px;
|
||||
transition: 0.2s;
|
||||
transition: background 0.2s, transform 0.5s cubic-bezier(0.2, 0, 0, 1);
|
||||
border-radius: 12px;
|
||||
filter: blur(12px);
|
||||
filter: blur(calc(var(--func-val) * 12px));
|
||||
opacity: calc(1 - var(--func-val));
|
||||
transform: scale(0.9) translate(-5%, 0);
|
||||
&:hover {
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
&#line-1 {
|
||||
pointer-events: none;
|
||||
}
|
||||
&.highlight {
|
||||
transform: scale(1) translate(0, 0);
|
||||
}
|
||||
span {
|
||||
opacity: 0.28;
|
||||
cursor: default;
|
||||
|
|
@ -497,6 +589,12 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: $layoutBreakpoint) {
|
||||
.right-side {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
|
|
|
|||
|
|
@ -146,11 +146,13 @@ export default {
|
|||
background: transparent;
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
margin: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.video-info {
|
||||
margin-top: 12px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
|
@ -175,6 +177,8 @@ export default {
|
|||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
padding: var(--main-content-padding);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -453,6 +453,7 @@ export default {
|
|||
.playlist-info {
|
||||
display: flex;
|
||||
margin-bottom: 72px;
|
||||
padding: var(--main-content-padding);
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -511,6 +512,28 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.playlist-info {
|
||||
width: calc(100vw - 2 * var(--main-content-padding-x));
|
||||
display: block;
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
margin-left: 0;
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.special-playlist {
|
||||
margin-top: 192px;
|
||||
margin-bottom: 128px;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
:columnNumber="3"
|
||||
:items="artists.slice(0, 3)"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
:columnNumber="3"
|
||||
subTextFontSize="14px"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
$t("home.seeMore")
|
||||
}}</router-link></div
|
||||
>
|
||||
<TrackList :tracks="tracks" type="tracklist" />
|
||||
<TrackList :tracks="tracks" type="tracklist" :withoutPadding="true" />
|
||||
</div>
|
||||
|
||||
<div class="music-videos" v-show="musicVideos.length > 0">
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
$t("home.seeMore")
|
||||
}}</router-link></div
|
||||
>
|
||||
<MvRow :mvs="musicVideos.slice(0, 5)" />
|
||||
<MvRow :mvs="musicVideos.slice(0, 5)" :withoutPadding="true" />
|
||||
</div>
|
||||
|
||||
<div class="playlists" v-show="playlists.length > 0">
|
||||
|
|
@ -68,6 +70,7 @@
|
|||
:columnNumber="6"
|
||||
subTextFontSize="14px"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -215,6 +218,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@ export default {
|
|||
h1 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 28px;
|
||||
padding: var(--main-content-padding);
|
||||
color: var(--color-text);
|
||||
span {
|
||||
opacity: 0.58;
|
||||
|
|
|
|||
|
|
@ -393,6 +393,7 @@ export default {
|
|||
.settings {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.container {
|
||||
margin-top: 24px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue