GithubBackup/geekgeekrun
1
0
Fork 0
mirror of https://github.com/geekgeekrun/geekgeekrun.git synced 2026-05-12 02:19:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

enhance the effect and performance of flying company logo list

Browse Source
This commit is contained in:
geekgeekrun
2024-03-10 21:28:07 +08:00
parent 6a00cff74a
commit e51eae331a
1 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
View File

@@ -17,25 +17,29 @@ const colCount = 6
const logoQueue: HTMLImageElement[] = []
const imageElContainer = ref<HTMLElement>()
onMounted(async () => {
const res = (await Promise.all(
[...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it())
)).map((url) => {
const res = (
await Promise.all(
[...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it())
)
).map((url) => {
const img = new Image()
img.src = url
img.onanimationiteration = () => {
const newImg = logoQueue.shift()!
newImg.classList.add('dot')
Object.assign(newImg.style,{
Object.assign(newImg.style, {
position: 'relative',
left: (-40 * Math.random()) + 'px',
bottom: (-40 * Math.random()) + 'px'
left: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
bottom: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
transform: `translateZ(${-5000}px)`
})
img.replaceWith(newImg)
img.classList.remove('dot')
Object.assign(img.style,{
Object.assign(img.style, {
position: '',
left: '',
bottom: ''
bottom: '',
transform: ``
})
logoQueue.push(img as HTMLImageElement)
}
@@ -47,10 +51,11 @@ onMounted(async () => {
for (let i = 0; i < rowCount * colCount; i++) {
const img = logoQueue.shift()!
Object.assign(img.style,{
Object.assign(img.style, {
position: 'relative',
left: (-40 * Math.random()) + 'px',
bottom: (-40 * Math.random()) + 'px'
left: -40 * Math.random() + 'px',
bottom: -40 * Math.random() + 'px',
transform: `translateZ(${-5000}px)`
})
img.classList.add('dot')
@@ -74,14 +79,10 @@ onMounted(async () => {
<style lang="scss">
@keyframes fly-in {
0% {
transform: translateZ(-5000px);
opacity: 0;
}
70% {
opacity: 1;
}
90% {
opacity: 0.5;
opacity: 0.8;
}
100% {
transform: translateZ(0);
@@ -91,34 +92,25 @@ onMounted(async () => {
.flying-company-logo-list-container {
.dot {
display: block;
--dot-run-duration: 3s;
animation: fly-in var(--dot-run-duration) linear infinite;
--dot-run-duration: 2.5s;
animation: fly-in var(--dot-run-duration) ease-in-out infinite;
transform-origin: center;
mix-blend-mode: darken;
width: 200px;
}
.dot:nth-child(2n) {
animation-delay: calc(0 * var(--dot-run-duration));
animation-delay: calc(-0.35 * var(--dot-run-duration));
}
.dot:nth-child(2n + 1) {
animation-delay: calc(-0.1 * var(--dot-run-duration));
animation-delay: calc(-0.15 * var(--dot-run-duration));
}
.dot:nth-child(3n + 1) {
animation-delay: calc(-0.2 * var(--dot-run-duration));
animation-delay: calc(-0.22 * var(--dot-run-duration));
}
.dot:nth-child(5n + 1) {
animation-delay: calc(-0.6 * var(--dot-run-duration));
animation-delay: calc(-0.05 * var(--dot-run-duration));
}
.dot:nth-child(7n + 1) {
animation-delay: calc(-0.8 * var(--dot-run-duration));
}
.dot:nth-child(11n + 1) {
animation-delay: calc(-0.5 * var(--dot-run-duration));
}
.dot:nth-child(13n + 1) {
animation-delay: calc(0 * var(--dot-run-duration));
}
.dot:nth-child(17n + 1) {
animation-delay: calc(-0.1 * var(--dot-run-duration));
}
}