GithubBackup/geekgeekrun
1
0
Fork 0
mirror of https://github.com/geekgeekrun/geekgeekrun.git synced 2026-09-04 23:17:39 +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
packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
+23 -31
View File
@@ -17,25 +17,29 @@ const colCount = 6
const logoQueue: HTMLImageElement[] = [] const logoQueue: HTMLImageElement[] = []
const imageElContainer = ref<HTMLElement>() const imageElContainer = ref<HTMLElement>()
onMounted(async () => { onMounted(async () => {
const res = (await Promise.all( const res = (
[...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it()) await Promise.all(
)).map((url) => { [...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it())
)
).map((url) => {
const img = new Image() const img = new Image()
img.src = url img.src = url
img.onanimationiteration = () => { img.onanimationiteration = () => {
const newImg = logoQueue.shift()! const newImg = logoQueue.shift()!
newImg.classList.add('dot') newImg.classList.add('dot')
Object.assign(newImg.style,{ Object.assign(newImg.style, {
position: 'relative', position: 'relative',
left: (-40 * Math.random()) + 'px', left: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
bottom: (-40 * Math.random()) + 'px' bottom: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
transform: `translateZ(${-5000}px)`
}) })
img.replaceWith(newImg) img.replaceWith(newImg)
img.classList.remove('dot') img.classList.remove('dot')
Object.assign(img.style,{ Object.assign(img.style, {
position: '', position: '',
left: '', left: '',
bottom: '' bottom: '',
transform: ``
}) })
logoQueue.push(img as HTMLImageElement) logoQueue.push(img as HTMLImageElement)
} }
@@ -47,10 +51,11 @@ onMounted(async () => {
for (let i = 0; i < rowCount * colCount; i++) { for (let i = 0; i < rowCount * colCount; i++) {
const img = logoQueue.shift()! const img = logoQueue.shift()!
Object.assign(img.style,{ Object.assign(img.style, {
position: 'relative', position: 'relative',
left: (-40 * Math.random()) + 'px', left: -40 * Math.random() + 'px',
bottom: (-40 * Math.random()) + 'px' bottom: -40 * Math.random() + 'px',
transform: `translateZ(${-5000}px)`
}) })
img.classList.add('dot') img.classList.add('dot')
@@ -74,14 +79,10 @@ onMounted(async () => {
<style lang="scss"> <style lang="scss">
@keyframes fly-in { @keyframes fly-in {
0% { 0% {
transform: translateZ(-5000px);
opacity: 0; opacity: 0;
} }
70% { 70% {
opacity: 1; opacity: 0.8;
}
90% {
opacity: 0.5;
} }
100% { 100% {
transform: translateZ(0); transform: translateZ(0);
@@ -91,34 +92,25 @@ onMounted(async () => {
.flying-company-logo-list-container { .flying-company-logo-list-container {
.dot { .dot {
display: block; display: block;
--dot-run-duration: 3s; --dot-run-duration: 2.5s;
animation: fly-in var(--dot-run-duration) linear infinite; animation: fly-in var(--dot-run-duration) ease-in-out infinite;
transform-origin: center; transform-origin: center;
mix-blend-mode: darken; mix-blend-mode: darken;
width: 200px; width: 200px;
} }
.dot:nth-child(2n) { .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) { .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) { .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) { .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) { .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)); animation-delay: calc(-0.1 * var(--dot-run-duration));
} }
} }