From 4cf92f8834cc24011f7e6497ecccf31cb504622f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=82=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?= =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <68995714+ohtoe02@users.noreply.github.com> Date: Fri, 22 Oct 2021 01:10:37 +0500 Subject: [PATCH 1/4] 1-14 --- index.html | 26 +++++++ index.js | 219 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 194 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 6546475..e5a09a9 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

fadeIn

+
@@ -17,6 +18,7 @@

fadeIn

move

+
@@ -24,9 +26,33 @@

move

scale

+
+
+
+

moveAndHide

+ + +
+
+
+
+
+

showAndHide

+ +
+
+
+
+
+

heartBeating

+ + +
+
+
diff --git a/index.js b/index.js index 61e55f6..3e18577 100644 --- a/index.js +++ b/index.js @@ -1,56 +1,22 @@ -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); - }); -} - -/** - * Блок плавно появляется из прозрачного. - * @param element — HTMLElement, который надо анимировать - * @param duration — Продолжительность анимации в миллисекундах - */ -function fadeIn(element, duration) { - element.style.transitionDuration = `${duration}ms`; - element.classList.remove('hide'); - element.classList.add('show'); -} +addListeners(false, + ['fadeIn', 5000], + ['move', 1000, {x: 100, y: 10}], + ['scale', 1000, 1.25], + ['moveAndHide', 1000, {x: 100, y: 20}], + ['showAndHide', 1000]); -/** - * Функция, передвигающая элемент - * @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); -} +addListeners(true, ['heartBeating']); -/** - * Функция, увеличивающая/уменьшающая элемент - * @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 addListeners(cycled, ...listeners) { + for (let listener of listeners) { + let block = document.getElementById(listener[0] + 'Block'); + let command = document.getElementById(listener[0] + (cycled ? 'Stop' : 'Reset')); + document.getElementById(listener[0] + 'Play') + .addEventListener('click', function () { + let element = animaster()[listener[0]](block, ...listener.slice(1)); + command.addEventListener('click', cycled ? element.stop : element.reset) + }); + } } function getTransform(translation, ratio) { @@ -63,3 +29,154 @@ function getTransform(translation, ratio) { } return result.join(' '); } + +function setMode(element, show) { + element.classList.remove(show ? 'hide' : 'show'); + element.classList.add(show ? 'show' : 'hide'); +} + +function animaster() { + return { + _steps: [], + + buildHandler() { + let animaster = this; + return function () { + return animaster.play(this); + } + }, + + fadeIn(element, duration) { + return this.addFadeIn(duration).play(element); + }, + + fadeOut(element, duration) { + return this.addFadeOut(duration).play(element); + }, + + move(element, duration, translation) { + return this.addMove(duration, translation).play(element); + }, + + scale(element, duration, ratio) { + return this.addScale(duration, ratio).play(element); + }, + + moveAndHide(element, duration) { + return this.addMove(duration * 2 / 5, {x: 100, y: 20}) + .addFadeOut(duration * 3 / 5) + .play(element); + }, + + showAndHide(element, duration) { + return this.addFadeIn(duration / 3) + .addDelay(duration / 3) + .addFadeOut(duration / 3) + .play(element); + }, + + heartBeating(element) { + return this.addScale(500, 1.4) + .addScale(500, 1) + .play(element, true); + }, + + resetFadeIn(element) { + element.style.transitionDuration = null; + element.classList.remove('show'); + element.classList.add('hide'); + }, + + resetFadeOut(element) { + element.style.transitionDuration = null; + element.classList.remove('hide'); + element.classList.add('show'); + }, + + resetMoveAndScale(element) { + element.style.transitionDuration = null; + element.style.transform = getTransform(0, 1); + }, + + addMove(duration, translation) { + let animasterCopy = this.copy() + animasterCopy._steps.push({ + duration, + action: element => element.style.transform = getTransform(translation, null), + reset: element => this.resetMoveAndScale(element) + }) + return animasterCopy; + }, + + addScale(duration, ratio) { + let animasterCopy = this.copy() + animasterCopy._steps.push({ + duration, + action: element => element.style.transform = getTransform(null, ratio), + reset: element => this.resetMoveAndScale(element) + }) + return animasterCopy; + }, + + addFadeIn(duration) { + let animasterCopy = this.copy() + animasterCopy._steps.push({ + duration, + action: element => { + element.classList.remove('hide'); + element.classList.add('show');}, + reset: element => this.resetFadeIn(element) + }) + return animasterCopy; + }, + + addFadeOut(duration) { + let animasterCopy = this.copy() + animasterCopy._steps.push({ + duration, + action: element => { + element.classList.remove('show'); + element.classList.add('hide');}, + reset: element => this.resetFadeOut(element) + }) + return animasterCopy; + }, + + addDelay(duration) { + let animasterCopy = this.copy() + animasterCopy._steps.push({ + duration, + action: () => null, + reset: () => null + }); + return animasterCopy; + }, + + copy() { + let animasterCopy = animaster(); + animasterCopy._steps = this._steps.slice(); + return animasterCopy; + }, + + play(element, isCycled = false) { + let tick; + let timer = setTimeout(tick = index => { + element.style.transitionDuration = `${this._steps[index].duration}ms`; + this._steps[index].action(element); + if (isCycled || index < this._steps.length - 1) + timer = setTimeout(tick, Math.round(this._steps[index].duration), + (index + 1) % this._steps.length); + }, 0, 0); + + return { + stop: () => { + clearTimeout(timer); + }, + reset: () => { + element.style.transitionDuration = null; + this._steps.slice().reverse().forEach(s => s.reset(element)); + } + } + } + } +} From 24bec11035415bc48b2c8457fc05fc55af0ebc3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=82=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?= =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <68995714+ohtoe02@users.noreply.github.com> Date: Fri, 22 Oct 2021 13:07:43 +0500 Subject: [PATCH 2/4] 1-14 --- index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/index.js b/index.js index 3e18577..36e0e5c 100644 --- a/index.js +++ b/index.js @@ -30,11 +30,6 @@ function getTransform(translation, ratio) { return result.join(' '); } -function setMode(element, show) { - element.classList.remove(show ? 'hide' : 'show'); - element.classList.add(show ? 'show' : 'hide'); -} - function animaster() { return { _steps: [], From 2d5e6dfc7840ed729e2131c593d07e7c4ac6a1dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=82=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?= =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <68995714+ohtoe02@users.noreply.github.com> Date: Fri, 22 Oct 2021 13:15:11 +0500 Subject: [PATCH 3/4] 1-14 --- index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 36e0e5c..a397ddd 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,3 @@ -addListeners(false, - ['fadeIn', 5000], - ['move', 1000, {x: 100, y: 10}], - ['scale', 1000, 1.25], - ['moveAndHide', 1000, {x: 100, y: 20}], - ['showAndHide', 1000]); - -addListeners(true, ['heartBeating']); - function addListeners(cycled, ...listeners) { for (let listener of listeners) { let block = document.getElementById(listener[0] + 'Block'); @@ -19,6 +10,15 @@ function addListeners(cycled, ...listeners) { } } +addListeners(false, + ['fadeIn', 5000], + ['move', 1000, {x: 100, y: 10}], + ['scale', 1000, 1.25], + ['moveAndHide', 1000, {x: 100, y: 20}], + ['showAndHide', 1000]); + +addListeners(true, ['heartBeating']); + function getTransform(translation, ratio) { const result = []; if (translation) { From 319b27ff07eb622a569330122329c42aed78dde7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=82=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?= =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <68995714+ohtoe02@users.noreply.github.com> Date: Fri, 22 Oct 2021 13:23:51 +0500 Subject: [PATCH 4/4] 1-14 --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index a397ddd..c784666 100644 --- a/index.js +++ b/index.js @@ -90,7 +90,7 @@ function animaster() { resetMoveAndScale(element) { element.style.transitionDuration = null; - element.style.transform = getTransform(0, 1); + element.style.transform = getTransform(null, 1); }, addMove(duration, translation) {