From bc7fc33a67acb974450e351afff488d68e1d2027 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 15:31:52 +0500 Subject: [PATCH 01/11] 1, 2 --- index.js | 75 ++++++++++++++++++++++++++++++++------------------------ 1 file changed, 43 insertions(+), 32 deletions(-) diff --git a/index.js b/index.js index 61e55f6..539c23a 100644 --- a/index.js +++ b/index.js @@ -20,46 +20,57 @@ function addListeners() { }); } -/** - * Блок плавно появляется из прозрачного. - * @param element — HTMLElement, который надо анимировать - * @param duration — Продолжительность анимации в миллисекундах - */ -function fadeIn(element, duration) { +function getTransform(translation, ratio) { + const result = []; + if (translation) { + result.push(`translate(${translation.x}px,${translation.y}px)`); + } + if (ratio) { + result.push(`scale(${ratio})`); + } + return result.join(' '); +} + +function animaster() { + /** + * Блок плавно появляется из прозрачного. + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + */ + function fadeIn(element, duration) { element.style.transitionDuration = `${duration}ms`; element.classList.remove('hide'); element.classList.add('show'); -} + } -/** - * Функция, передвигающая элемент - * @param element — HTMLElement, который надо анимировать - * @param duration — Продолжительность анимации в миллисекундах - * @param translation — объект с полями x и y, обозначающими смещение блока - */ -function move(element, duration, translation) { + /** + * Функция, передвигающая элемент + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + * @param translation — объект с полями x и y, обозначающими смещение блока + */ + function move(element, duration, translation) { element.style.transitionDuration = `${duration}ms`; element.style.transform = getTransform(translation, null); -} + } -/** - * Функция, увеличивающая/уменьшающая элемент - * @param element — HTMLElement, который надо анимировать - * @param duration — Продолжительность анимации в миллисекундах - * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 - */ -function scale(element, duration, ratio) { + /** + * Функция, увеличивающая/уменьшающая элемент + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 + */ + function scale(element, duration, ratio) { element.style.transitionDuration = `${duration}ms`; element.style.transform = getTransform(null, ratio); -} + } -function getTransform(translation, ratio) { - const result = []; - if (translation) { - result.push(`translate(${translation.x}px,${translation.y}px)`); - } - if (ratio) { - result.push(`scale(${ratio})`); - } - return result.join(' '); + return { + fadeIn, move, scale + }; } + +const anim = animaster(); +const fadeIn = anim.fadeIn; +const move = anim.move; +const scale = anim.scale; From 3984231ecb31af0def7f00b8f126f57ac0587f62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 11 Mar 2025 15:33:53 +0500 Subject: [PATCH 02/11] 3 --- index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.js b/index.js index 539c23a..0cd1084 100644 --- a/index.js +++ b/index.js @@ -43,6 +43,12 @@ function animaster() { element.classList.add('show'); } + function fadeOut(element, duration) { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); + } + /** * Функция, передвигающая элемент * @param element — HTMLElement, который надо анимировать From 061a72ea981f6c6ca3b7d44e6ad050b5a1e89ec0 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 15:48:57 +0500 Subject: [PATCH 03/11] 4 --- index.html | 21 ++++++++++++++++++++ index.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 77 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6546475..b727d28 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,27 @@

scale

+
+
+

moveAndHide

+ +
+
+
+
+
+

showAndHide

+ +
+
+
+
+
+

heartBeating

+ +
+
+
diff --git a/index.js b/index.js index 0cd1084..6a8699e 100644 --- a/index.js +++ b/index.js @@ -18,6 +18,24 @@ function addListeners() { const block = document.getElementById('scaleBlock'); scale(block, 1000, 1.25); }); + + document.getElementById('moveAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('moveAndHideBlock'); + moveAndHide(block, 5000); + }); + + document.getElementById('showAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('showAndHideBlock'); + showAndHide(block, 5000); + }); + + document.getElementById('heartBeatingPlay') + .addEventListener('click', function () { + const block = document.getElementById('heartBeatingBlock'); + const beating = heartBeating(block); + }); } function getTransform(translation, ratio) { @@ -71,12 +89,49 @@ function animaster() { element.style.transform = getTransform(null, ratio); } + function moveAndHide(element, duration, translation) { + const moveDuration = duration * 2/ 5; + const fadeDuration = duration * 3/ 5; + move(element, moveDuration, {x: 100, y: 20}); + setTimeout(() => { + fadeOut(element, fadeDuration); + }, moveDuration) + } + + function showAndHide(element, duration) { + const partDuration = duration / 3; + fadeIn(element, partDuration); + setTimeout(() => { + fadeOut(element, partDuration); + }, partDuration * 2); + } + + function heartBeating(element) { + scale(element, 500, 1.4); + setTimeout(() => { + scale(element, 500, 1); + }, 500); + + const int = setInterval(() => { + scale(element, 500, 1.4); + setTimeout(() => { + scale(element, 500, 1); + }, 500); + }, 1000); + + return {stop: () => clearInterval(int)} + } + return { - fadeIn, move, scale + fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating }; } const anim = animaster(); const fadeIn = anim.fadeIn; +const fadeOut = anim.fadeOut; const move = anim.move; const scale = anim.scale; +const moveAndHide = anim.moveAndHide; +const showAndHide = anim.showAndHide; +const heartBeating = anim.heartBeating; \ No newline at end of file From 1c48e99337a8e904ef8fcc73536992466c94cd21 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 15:53:50 +0500 Subject: [PATCH 04/11] 5 --- index.html | 1 + index.js | 13 +++++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b727d28..63a7d6b 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@

showAndHide

heartBeating

+
diff --git a/index.js b/index.js index 6a8699e..cdec3fe 100644 --- a/index.js +++ b/index.js @@ -34,8 +34,15 @@ function addListeners() { document.getElementById('heartBeatingPlay') .addEventListener('click', function () { const block = document.getElementById('heartBeatingBlock'); - const beating = heartBeating(block); + heartBeatingAnimation = heartBeating(block); }); + + document.getElementById('heartBeatingStop') + .addEventListener('click', function () { + if (heartBeatingAnimation) { + heartBeatingAnimation.stop(); + } + }) } function getTransform(translation, ratio) { @@ -134,4 +141,6 @@ const move = anim.move; const scale = anim.scale; const moveAndHide = anim.moveAndHide; const showAndHide = anim.showAndHide; -const heartBeating = anim.heartBeating; \ No newline at end of file +const heartBeating = anim.heartBeating; + +let heartBeatingAnimation; \ No newline at end of file From fb7f155ca78d47a5ee438f3487984cbf7fe02bf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 11 Mar 2025 15:59:06 +0500 Subject: [PATCH 05/11] 6 --- index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/index.js b/index.js index cdec3fe..da6edf3 100644 --- a/index.js +++ b/index.js @@ -68,12 +68,27 @@ function animaster() { element.classList.add('show'); } + function resetFadeIn(element) { + element.classList.remove('show'); + element.style.transitionDuration = null; + } + function fadeOut(element, duration) { element.style.transitionDuration = `${duration}ms`; element.classList.remove('show'); element.classList.add('hide'); } + function resetFadeOut(element) { + element.classList.remove('hide'); + element.style.transitionDuration = null; + } + + function resetMoveAndScale(element) { + element.style.transitionDuration = null; + element.style.transform = null; + } + /** * Функция, передвигающая элемент * @param element — HTMLElement, который надо анимировать From b1c8fd705102bbb117cfed94a3b64cd242e69eca Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 16:03:20 +0500 Subject: [PATCH 06/11] 7 --- index.html | 1 + index.js | 24 ++++++++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 63a7d6b..576b80f 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@

scale

moveAndHide

+
diff --git a/index.js b/index.js index da6edf3..9dcbeae 100644 --- a/index.js +++ b/index.js @@ -22,9 +22,15 @@ function addListeners() { document.getElementById('moveAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('moveAndHideBlock'); - moveAndHide(block, 5000); + moveAndHideAnimation = moveAndHide(block, 5000); }); + document.getElementById('moveAndHideReset') + .addEventListener('click', function () { + if (moveAndHideAnimation && moveAndHideAnimation.reset) + moveAndHideAnimation.reset(); + }) + document.getElementById('showAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('showAndHideBlock'); @@ -111,16 +117,25 @@ function animaster() { element.style.transform = getTransform(null, ratio); } - function moveAndHide(element, duration, translation) { + function moveAndHide(element, duration) { const moveDuration = duration * 2/ 5; const fadeDuration = duration * 3/ 5; move(element, moveDuration, {x: 100, y: 20}); - setTimeout(() => { + const fadeTimeout = setTimeout(() => { fadeOut(element, fadeDuration); }, moveDuration) + + return { + reset() { + clearTimeout(fadeTimeout); + resetMoveAndScale(element); + resetFadeOut(element); + } + } } function showAndHide(element, duration) { + element.classList.remove('show'); const partDuration = duration / 3; fadeIn(element, partDuration); setTimeout(() => { @@ -158,4 +173,5 @@ const moveAndHide = anim.moveAndHide; const showAndHide = anim.showAndHide; const heartBeating = anim.heartBeating; -let heartBeatingAnimation; \ No newline at end of file +let heartBeatingAnimation; +let moveAndHideAnimation; \ No newline at end of file From b1c083bb0a9a75e6e9274cb821b9c4b5c418bfee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 11 Mar 2025 16:14:08 +0500 Subject: [PATCH 07/11] 8 --- index.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9dcbeae..d767738 100644 --- a/index.js +++ b/index.js @@ -159,8 +159,42 @@ function animaster() { return {stop: () => clearInterval(int)} } + function addMove(duration, translation) { + this._steps.push({ + type: 'move', + duration, + translation + }); + return this; + } + + function play() { + let delay = 0; + for (const step of this._steps) { + switch (step.type) { + case 'move': + setTimeout(() => { + move(element, step.duration, step.translation); + }, delay); + break; + case 'fadeIn': + setTimeout(() => { + fadeIn(element, step.duration); + }, delay); + break; + case 'fadeOut': + setTimeout(() => { + fadeOut(element, step.duration); + }, delay); + break; + } + delay += step.duration; + } + } + return { - fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating + _steps: [], + fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating, addMove, play }; } From 356f500ab7ce3b0d18ae237b2d58e646148f3ccf Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 16:22:16 +0500 Subject: [PATCH 08/11] 9 --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index d767738..390e6b4 100644 --- a/index.js +++ b/index.js @@ -102,8 +102,7 @@ function animaster() { * @param translation — объект с полями x и y, обозначающими смещение блока */ function move(element, duration, translation) { - element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(translation, null); + return animaster().addMove(duration, translation).play(element); } /** @@ -168,13 +167,14 @@ function animaster() { return this; } - function play() { + function play(element) { let delay = 0; for (const step of this._steps) { switch (step.type) { case 'move': setTimeout(() => { - move(element, step.duration, step.translation); + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(step.translation, null); }, delay); break; case 'fadeIn': From 3045e65a50e6e8ff9002c182a3917d3b00809ba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 11 Mar 2025 16:46:08 +0500 Subject: [PATCH 09/11] 10 --- index.js | 64 +++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 19 deletions(-) diff --git a/index.js b/index.js index 390e6b4..d82317a 100644 --- a/index.js +++ b/index.js @@ -69,9 +69,7 @@ function animaster() { * @param duration — Продолжительность анимации в миллисекундах */ function fadeIn(element, duration) { - element.style.transitionDuration = `${duration}ms`; - element.classList.remove('hide'); - element.classList.add('show'); + return animaster().addFadeIn(duration).play(element); } function resetFadeIn(element) { @@ -80,9 +78,7 @@ function animaster() { } function fadeOut(element, duration) { - element.style.transitionDuration = `${duration}ms`; - element.classList.remove('show'); - element.classList.add('hide'); + return animaster().addFadeOut(duration).play(element); } function resetFadeOut(element) { @@ -112,8 +108,7 @@ function animaster() { * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 */ function scale(element, duration, ratio) { - element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(null, ratio); + return animaster().addScale(duration, ratio).play(element); } function moveAndHide(element, duration) { @@ -158,14 +153,35 @@ function animaster() { return {stop: () => clearInterval(int)} } - function addMove(duration, translation) { - this._steps.push({ - type: 'move', - duration, - translation - }); - return this; - } + function addMove(duration, translation) { + return animaster([...this._steps, { + type: 'move', + duration, + translation + }]); + } + + function addFadeIn(duration) { + return animaster([...this._steps, { + type: 'fadeIn', + duration + }]); + } + + function addFadeOut(duration) { + return animaster([...this._steps, { + type: 'fadeOut', + duration + }]); + } + + function addScale(duration, ratio) { + return animaster([...this._steps, { + type: 'scale', + duration, + ratio + }]); + } function play(element) { let delay = 0; @@ -179,12 +195,22 @@ function animaster() { break; case 'fadeIn': setTimeout(() => { - fadeIn(element, step.duration); + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('hide'); + element.classList.add('show'); }, delay); break; case 'fadeOut': setTimeout(() => { - fadeOut(element, step.duration); + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); + }, delay); + break; + case 'scale': + setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(null, step.ratio); }, delay); break; } @@ -194,7 +220,7 @@ function animaster() { return { _steps: [], - fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating, addMove, play + fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating, addMove, play, addScale, addFadeOut, addFadeIn }; } From 3617b80066e9578974605d4a60eb9ff9c773b02c Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 17:23:03 +0500 Subject: [PATCH 10/11] 9 --- index.html | 7 ++ index.js | 287 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 185 insertions(+), 109 deletions(-) diff --git a/index.html b/index.html index 576b80f..c22ac87 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,13 @@

heartBeating

+
+
+

customAnimation

+ +
+
+
diff --git a/index.js b/index.js index d82317a..bf5e207 100644 --- a/index.js +++ b/index.js @@ -1,35 +1,35 @@ addListeners(); function addListeners() { - document.getElementById('fadeInPlay') - .addEventListener('click', function () { - const block = document.getElementById('fadeInBlock'); - fadeIn(block, 5000); - }); - - document.getElementById('movePlay') - .addEventListener('click', function () { - const block = document.getElementById('moveBlock'); - move(block, 1000, {x: 100, y: 10}); - }); - - document.getElementById('scalePlay') - .addEventListener('click', function () { - const block = document.getElementById('scaleBlock'); - scale(block, 1000, 1.25); - }); - - document.getElementById('moveAndHidePlay') - .addEventListener('click', function () { - const block = document.getElementById('moveAndHideBlock'); - moveAndHideAnimation = moveAndHide(block, 5000); - }); - - document.getElementById('moveAndHideReset') - .addEventListener('click', function () { - if (moveAndHideAnimation && moveAndHideAnimation.reset) - moveAndHideAnimation.reset(); - }) + document.getElementById('fadeInPlay') + .addEventListener('click', function () { + const block = document.getElementById('fadeInBlock'); + fadeIn(block, 5000); + }); + + document.getElementById('movePlay') + .addEventListener('click', function () { + const block = document.getElementById('moveBlock'); + move(block, 1000, {x: 100, y: 10}); + }); + + document.getElementById('scalePlay') + .addEventListener('click', function () { + const block = document.getElementById('scaleBlock'); + scale(block, 1000, 1.25); + }); + + document.getElementById('moveAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('moveAndHideBlock'); + moveAndHideAnimation = moveAndHide(block, 5000); + }); + + document.getElementById('moveAndHideReset') + .addEventListener('click', function () { + if (moveAndHideAnimation && moveAndHideAnimation.reset) + moveAndHideAnimation.reset(); + }) document.getElementById('showAndHidePlay') .addEventListener('click', function () { @@ -48,47 +48,64 @@ function addListeners() { if (heartBeatingAnimation) { heartBeatingAnimation.stop(); } - }) + }); + + document.getElementById('customAnimationPlay') + .addEventListener('click', function () { + const element = document.getElementById('customAnimationBlock'); + const customAnimation = animaster() + .addMove(200, {x: 40, y: 40}) + .addScale(800, 1.3) + .addMove(200, {x: 80, y: 0}) + .addScale(800, 1) + .addMove(200, {x: 40, y: -40}) + .addScale(800, 0.7) + .addMove(200, {x: 0, y: 0}) + .addScale(800, 1); + customAnimation.play(element); + }); } function getTransform(translation, ratio) { - const result = []; - if (translation) { - result.push(`translate(${translation.x}px,${translation.y}px)`); - } - if (ratio) { - result.push(`scale(${ratio})`); - } - return result.join(' '); + const result = []; + if (translation) { + result.push(`translate(${translation.x}px,${translation.y}px)`); + } + if (ratio) { + result.push(`scale(${ratio})`); + } + return result.join(' '); } function animaster() { + let _steps = [] + /** * Блок плавно появляется из прозрачного. * @param element — HTMLElement, который надо анимировать * @param duration — Продолжительность анимации в миллисекундах */ function fadeIn(element, duration) { - return animaster().addFadeIn(duration).play(element); + return animaster().addFadeIn(duration).play(element); } function resetFadeIn(element) { - element.classList.remove('show'); - element.style.transitionDuration = null; + element.classList.remove('show'); + element.style.transitionDuration = null; } function fadeOut(element, duration) { - return animaster().addFadeOut(duration).play(element); + return animaster().addFadeOut(duration).play(element); } function resetFadeOut(element) { - element.classList.remove('hide'); - element.style.transitionDuration = null; + element.classList.remove('hide'); + element.style.transitionDuration = null; } function resetMoveAndScale(element) { - element.style.transitionDuration = null; - element.style.transform = null; + element.style.transitionDuration = null; + element.style.transform = null; } /** @@ -108,12 +125,12 @@ function animaster() { * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 */ function scale(element, duration, ratio) { - return animaster().addScale(duration, ratio).play(element); + return animaster().addScale(duration, ratio).play(element); } function moveAndHide(element, duration) { - const moveDuration = duration * 2/ 5; - const fadeDuration = duration * 3/ 5; + const moveDuration = duration * 2 / 5; + const fadeDuration = duration * 3 / 5; move(element, moveDuration, {x: 100, y: 20}); const fadeTimeout = setTimeout(() => { fadeOut(element, fadeDuration); @@ -153,74 +170,126 @@ function animaster() { return {stop: () => clearInterval(int)} } - function addMove(duration, translation) { - return animaster([...this._steps, { - type: 'move', - duration, - translation - }]); - } + function addMove(duration, translation) { + _steps.push({ + type: 'move', + duration, + translation + }); + return this; + } - function addFadeIn(duration) { - return animaster([...this._steps, { - type: 'fadeIn', - duration - }]); - } + function addScale(duration, ratio) { + _steps.push({ + type: 'scale', + duration, + ratio + }); + return this; + } - function addFadeOut(duration) { - return animaster([...this._steps, { - type: 'fadeOut', - duration - }]); - } + function addFadeIn(duration) { + _steps.push({ + type: 'fadeIn', + duration + }); + return this; + } - function addScale(duration, ratio) { - return animaster([...this._steps, { - type: 'scale', - duration, - ratio - }]); - } + + function addFadeOut(duration) { + _steps.push({ + type: 'fadeOut', + duration + }); + return this; + } + + function addDelay(duration) { + _steps.push({ + type: 'delay', + duration + }); + return this; + } function play(element) { - let delay = 0; - for (const step of this._steps) { - switch (step.type) { - case 'move': - setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.style.transform = getTransform(step.translation, null); - }, delay); - break; - case 'fadeIn': - setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.classList.remove('hide'); - element.classList.add('show'); - }, delay); - break; - case 'fadeOut': - setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.classList.remove('show'); - element.classList.add('hide'); - }, delay); - break; - case 'scale': - setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.style.transform = getTransform(null, step.ratio); - }, delay); - break; - } - delay += step.duration; + let delay = 0; + const timeouts = []; + const initState = { + classList: [...element.classList], + transform: element.style.transform, + transitionDuration: element.style.transitionDuration + }; + let timeout = null; + + for (const step of this._steps) { + switch (step.type) { + case 'move': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(step.translation, null); + }, delay); + break; + case 'fadeIn': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('hide'); + element.classList.add('show'); + }, delay); + break; + case 'fadeOut': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); + }, delay); + break; + case 'scale': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(null, step.ratio); + }, delay); + break; } + timeouts.push(timeout); + delay += step.duration; + } + return { + stop() { + timeouts.forEach(clearTimeout); + }, + reset() { + this.stop(); + element.classList = initState.classList; + element.style.transform = initState.transform; + element.style.transitionDuration = initState.transitionDuration; + } + }; + } + + function buildHandler() { + return function () { + this.animInstance = this.animInstance || animaster(); + return this.animInstance._steps.length ? this.animInstance.play(this) : null; + }.bind(this); } return { - _steps: [], - fadeIn, fadeOut, move, scale, moveAndHide, showAndHide, heartBeating, addMove, play, addScale, addFadeOut, addFadeIn + _steps, + fadeIn, + fadeOut, + move, + scale, + moveAndHide, + showAndHide, + heartBeating, + addMove, + play, + addScale, + addFadeOut, + addFadeIn, + buildHandler }; } @@ -234,4 +303,4 @@ const showAndHide = anim.showAndHide; const heartBeating = anim.heartBeating; let heartBeatingAnimation; -let moveAndHideAnimation; \ No newline at end of file +let moveAndHideAnimation; From 26188345dacf8090a9019735ab3a1b99754ef279 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 11 Mar 2025 19:32:43 +0500 Subject: [PATCH 11/11] 12, 13, 14 --- index.html | 7 +++ index.js | 141 +++++++++++++++++++++++++++-------------------------- 2 files changed, 79 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index c22ac87..077d0b6 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,13 @@

customAnimation

+
+
+

worryAnimationPlay

+ +
+
+
diff --git a/index.js b/index.js index bf5e207..6f2904d 100644 --- a/index.js +++ b/index.js @@ -131,43 +131,26 @@ function animaster() { function moveAndHide(element, duration) { const moveDuration = duration * 2 / 5; const fadeDuration = duration * 3 / 5; - move(element, moveDuration, {x: 100, y: 20}); - const fadeTimeout = setTimeout(() => { - fadeOut(element, fadeDuration); - }, moveDuration) - - return { - reset() { - clearTimeout(fadeTimeout); - resetMoveAndScale(element); - resetFadeOut(element); - } - } + return animaster() + .addMove(moveDuration, { x: 100, y: 20 }) + .addFadeOut(fadeDuration) + .play(element); } function showAndHide(element, duration) { - element.classList.remove('show'); const partDuration = duration / 3; - fadeIn(element, partDuration); - setTimeout(() => { - fadeOut(element, partDuration); - }, partDuration * 2); + return animaster() + .addFadeIn(partDuration) + .addDelay(partDuration) + .addFadeOut(partDuration) + .play(element); } function heartBeating(element) { - scale(element, 500, 1.4); - setTimeout(() => { - scale(element, 500, 1); - }, 500); - - const int = setInterval(() => { - scale(element, 500, 1.4); - setTimeout(() => { - scale(element, 500, 1); - }, 500); - }, 1000); - - return {stop: () => clearInterval(int)} + return animaster() + .addScale(500, 1.4) + .addScale(500, 1) + .play(element, true); } function addMove(duration, translation) { @@ -213,66 +196,85 @@ function animaster() { return this; } - function play(element) { - let delay = 0; + function play(element, cycled = false) { + let totalDelay = 0; const timeouts = []; const initState = { classList: [...element.classList], transform: element.style.transform, transitionDuration: element.style.transitionDuration }; - let timeout = null; - - for (const step of this._steps) { - switch (step.type) { - case 'move': - timeout = setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.style.transform = getTransform(step.translation, null); - }, delay); - break; - case 'fadeIn': - timeout = setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.classList.remove('hide'); - element.classList.add('show'); - }, delay); - break; - case 'fadeOut': - timeout = setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.classList.remove('show'); - element.classList.add('hide'); - }, delay); - break; - case 'scale': - timeout = setTimeout(() => { - element.style.transitionDuration = `${step.duration}ms`; - element.style.transform = getTransform(null, step.ratio); - }, delay); - break; + + function runAnimation() { + let delay = 0; + for (const step of _steps) { + let timeout; + switch (step.type) { + case 'move': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(step.translation, null); + }, delay); + break; + case 'fadeIn': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('hide'); + element.classList.add('show'); + }, delay); + break; + case 'fadeOut': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); + }, delay); + break; + case 'scale': + timeout = setTimeout(() => { + element.style.transitionDuration = `${step.duration}ms`; + element.style.transform = getTransform(null, step.ratio); + }, delay); + break; + case 'delay': + timeout = setTimeout(() => {}, delay); + break; + } + timeouts.push(timeout); + delay += step.duration; } - timeouts.push(timeout); - delay += step.duration; + return delay; + } + + totalDelay = runAnimation(); + + let cycleTimeout; + if (cycled) { + cycleTimeout = setTimeout(function cycle() { + runAnimation(); + cycleTimeout = setTimeout(cycle, totalDelay); + timeouts.push(cycleTimeout); + }, totalDelay); } + return { stop() { timeouts.forEach(clearTimeout); }, reset() { this.stop(); - element.classList = initState.classList; + element.classList = initState.classList.join(' '); element.style.transform = initState.transform; element.style.transitionDuration = initState.transitionDuration; } }; } - function buildHandler() { + function buildHandler(cycled = false) { + const animInstance = this; return function () { - this.animInstance = this.animInstance || animaster(); - return this.animInstance._steps.length ? this.animInstance.play(this) : null; - }.bind(this); + return animInstance._steps.length ? animInstance.play(this, cycled) : null; + }; } return { @@ -289,6 +291,7 @@ function animaster() { addScale, addFadeOut, addFadeIn, + addDelay, buildHandler }; }