From 2ef8de1669971da408b7a7f7dd4211b770b022af Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 17:19:35 +0500 Subject: [PATCH 1/7] func animaster --- .idea/.gitignore | 5 +++ .idea/animaster.iml | 12 +++++++ .idea/modules.xml | 8 +++++ .idea/vcs.xml | 6 ++++ index.js | 77 ++++++++++++++++++++++++--------------------- 5 files changed, 73 insertions(+), 35 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/animaster.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/animaster.iml b/.idea/animaster.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/animaster.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..2448e27 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index 61e55f6..8a18175 100644 --- a/index.js +++ b/index.js @@ -4,54 +4,22 @@ function addListeners() { document.getElementById('fadeInPlay') .addEventListener('click', function () { const block = document.getElementById('fadeInBlock'); - fadeIn(block, 5000); + animaster().fadeIn(block, 5000); }); document.getElementById('movePlay') .addEventListener('click', function () { const block = document.getElementById('moveBlock'); - move(block, 1000, {x: 100, y: 10}); + animaster().move(block, 1000, {x: 100, y: 10}); }); document.getElementById('scalePlay') .addEventListener('click', function () { const block = document.getElementById('scaleBlock'); - scale(block, 1000, 1.25); + animaster().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'); -} - -/** - * Функция, передвигающая элемент - * @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) { - element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(null, ratio); -} function getTransform(translation, ratio) { const result = []; @@ -63,3 +31,42 @@ function getTransform(translation, ratio) { } return result.join(' '); } + +function animaster() { + obj = { + /** + * Функция, увеличивающая/уменьшающая элемент + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 + */ + + scale(element, duration, ratio) { + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(null, ratio); + }, + + /** + * Функция, передвигающая элемент + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + * @param translation — объект с полями x и y, обозначающими смещение блока + */ + move(element, duration, translation) { + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(translation, null); + }, + + /** + * Блок плавно появляется из прозрачного. + * @param element — HTMLElement, который надо анимировать + * @param duration — Продолжительность анимации в миллисекундах + */ + fadeIn(element, duration) { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('hide'); + element.classList.add('show'); + } + } + return obj; +} \ No newline at end of file From e8676fbf72243ead5fa3808e3ecaf7bb82e26deb Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 17:26:08 +0500 Subject: [PATCH 2/7] 3rd --- index.html | 7 +++++++ index.js | 11 +++++++++++ 2 files changed, 18 insertions(+) diff --git a/index.html b/index.html index 6546475..834bc9f 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,13 @@

fadeIn

+
+
+

fadeOut

+ +
+
+

move

diff --git a/index.js b/index.js index 8a18175..e1c5ad0 100644 --- a/index.js +++ b/index.js @@ -7,6 +7,12 @@ function addListeners() { animaster().fadeIn(block, 5000); }); + document.getElementById('fadeOutPlay') + .addEventListener('click', function () { + const block = document.getElementById('fadeOutBlock'); + animaster().fadeOut(block, 5000); + }); + document.getElementById('movePlay') .addEventListener('click', function () { const block = document.getElementById('moveBlock'); @@ -66,6 +72,11 @@ function animaster() { element.style.transitionDuration = `${duration}ms`; element.classList.remove('hide'); element.classList.add('show'); + }, + fadeOut(element, duration) { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); } } return obj; From 190bd67625c2dbbf4b9de5499dc7430f1fb13d0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB?= Date: Mon, 13 Mar 2023 17:55:23 +0500 Subject: [PATCH 3/7] 4.2 --- index.html | 8 ++++++++ index.js | 13 +++++++++++++ 2 files changed, 21 insertions(+) diff --git a/index.html b/index.html index 834bc9f..88f4246 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,14 @@

scale

+
+
+

showAndHide

+ +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index e1c5ad0..8cf82dd 100644 --- a/index.js +++ b/index.js @@ -24,6 +24,13 @@ function addListeners() { const block = document.getElementById('scaleBlock'); animaster().scale(block, 1000, 1.25); }); + + document.getElementById('showAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('showAndHideBlock'); + console.log(block); + animaster().showAndHide(block, 3000); + }); } @@ -77,6 +84,12 @@ function animaster() { element.style.transitionDuration = `${duration}ms`; element.classList.remove('show'); element.classList.add('hide'); + }, + showAndHide(element, duration) { + + this.fadeIn(element, Math.floor(duration / 3)); + setTimeout(this, Math.floor(duration / 3)); + setTimeout(this.fadeOut, Math.floor(duration / 3), element, Math.floor(duration / 3)); } } return obj; From 5168730abe1b525625790b756f993c405453774a Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 18:05:21 +0500 Subject: [PATCH 4/7] 4.1 4.3 --- index.html | 14 ++++++++++++++ index.js | 21 +++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/index.html b/index.html index 834bc9f..5990cc7 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,20 @@

scale

+
+
+

moveAndHide

+ +
+
+
+
+
+

heartBeating

+ +
+
+
diff --git a/index.js b/index.js index e1c5ad0..06f3f89 100644 --- a/index.js +++ b/index.js @@ -24,6 +24,17 @@ function addListeners() { const block = document.getElementById('scaleBlock'); animaster().scale(block, 1000, 1.25); }); + + document.getElementById('moveAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('moveAndHideBlock'); + animaster().moveAndHide(block, 1000); + }); + document.getElementById('heartBeatingPlay') + .addEventListener('click', function () { + const block = document.getElementById('heartBeatingBlock'); + animaster().heartBeating(block); + }); } @@ -77,6 +88,16 @@ function animaster() { element.style.transitionDuration = `${duration}ms`; element.classList.remove('show'); element.classList.add('hide'); + }, + moveAndHide(element, duration) { + this.move(element, 2 * duration / 5, {x: 100, y: 20}); + setTimeout(this.fadeOut, 2 * duration / 5, element, 3 * duration / 5,); + }, + heartBeating(element) { + setInterval((el) => { + this.scale(el, 500, 1.4); + setTimeout(this.scale, 500, el, 500, 1); + }, 1000,element); } } return obj; From 1fa0a0215fbe3dde80858229d3c3477b0bd5ee84 Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 18:21:01 +0500 Subject: [PATCH 5/7] 4 --- index.html | 1 + index.js | 27 +++++++++++++++++++-------- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 1a91a81..2d82235 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@

moveAndHide

heartBeating

+
diff --git a/index.js b/index.js index 30a8656..7780540 100644 --- a/index.js +++ b/index.js @@ -1,46 +1,53 @@ addListeners(); function addListeners() { + let Animaster = new animaster() document.getElementById('fadeInPlay') .addEventListener('click', function () { const block = document.getElementById('fadeInBlock'); - animaster().fadeIn(block, 5000); + Animaster.fadeIn(block, 5000); }); document.getElementById('fadeOutPlay') .addEventListener('click', function () { const block = document.getElementById('fadeOutBlock'); - animaster().fadeOut(block, 5000); + Animaster.fadeOut(block, 5000); }); document.getElementById('movePlay') .addEventListener('click', function () { const block = document.getElementById('moveBlock'); - animaster().move(block, 1000, {x: 100, y: 10}); + Animaster.move(block, 1000, {x: 100, y: 10}); }); document.getElementById('scalePlay') .addEventListener('click', function () { const block = document.getElementById('scaleBlock'); - animaster().scale(block, 1000, 1.25); + Animaster.scale(block, 1000, 1.25); }); document.getElementById('moveAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('moveAndHideBlock'); - animaster().moveAndHide(block, 1000); + Animaster.moveAndHide(block, 1000); }); document.getElementById('heartBeatingPlay') .addEventListener('click', function () { const block = document.getElementById('heartBeatingBlock'); - animaster().heartBeating(block); + Animaster.heartBeating(block); }); document.getElementById('showAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('showAndHideBlock'); console.log(block); - animaster().showAndHide(block, 3000); + Animaster.showAndHide(block, 1000); + }); + + document.getElementById('heartBeatingStop') + .addEventListener('click', function () { + const block = document.getElementById('heartBeatingBlock'); + Animaster.stopHeartBeating(block); }); } @@ -58,6 +65,7 @@ function getTransform(translation, ratio) { function animaster() { obj = { + Timer: setInterval(() => {}, 0), /** * Функция, увеличивающая/уменьшающая элемент * @param element — HTMLElement, который надо анимировать @@ -101,11 +109,14 @@ function animaster() { setTimeout(this.fadeOut, 2 * duration / 5, element, 3 * duration / 5,); }, heartBeating(element) { - setInterval((el) => { + this.Timer = setInterval((el) => { this.scale(el, 500, 1.4); setTimeout(this.scale, 500, el, 500, 1); }, 1000,element); }, + stopHeartBeating(element) { + clearInterval(this.Timer); + }, showAndHide(element, duration) { this.fadeIn(element, Math.floor(duration / 3)); From 666cba127fb2dc2a816e0bd05b23eafe71d455db Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 18:43:45 +0500 Subject: [PATCH 6/7] 6,7 --- index.html | 1 + index.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/index.html b/index.html index 2d82235..556bc79 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@

scale

moveAndHide

+
diff --git a/index.js b/index.js index 7780540..4674a82 100644 --- a/index.js +++ b/index.js @@ -49,6 +49,12 @@ function addListeners() { const block = document.getElementById('heartBeatingBlock'); Animaster.stopHeartBeating(block); }); + + document.getElementById('moveAndHideStop') + .addEventListener('click', function () { + const block = document.getElementById('moveAndHideBlock'); + Animaster.resetMoveAndHide(block); + }); } @@ -64,6 +70,20 @@ function getTransform(translation, ratio) { } function animaster() { + function resetFadeIn(element) { + element.style.transitionDuration = null; + element.classList = ["block"]; + } + function resetFadeOut(element) { + element.style.transitionDuration = null; + element.classList = ["block"]; + } + function resetMove(element) { + element.style.transitionDuration = null; + element.style.transform = null; + } + + obj = { Timer: setInterval(() => {}, 0), /** @@ -122,6 +142,10 @@ function animaster() { this.fadeIn(element, Math.floor(duration / 3)); setTimeout(this, Math.floor(duration / 3)); setTimeout(this.fadeOut, Math.floor(duration / 3), element, Math.floor(duration / 3)); + }, + resetMoveAndHide(element) { + resetMove(element); + resetFadeOut(element); } } return obj; From 30eab0ae9ce206bda96ce7f14fdc63e2530def31 Mon Sep 17 00:00:00 2001 From: GoldEyes Date: Mon, 13 Mar 2023 19:29:35 +0500 Subject: [PATCH 7/7] 9-10 --- index.js | 94 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 79 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 4674a82..c5a4002 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,61 @@ addListeners(); function addListeners() { - let Animaster = new animaster() + let animaster1 = new animaster(); + let animaster2 = new animaster(); + document.getElementById('fadeInPlay') .addEventListener('click', function () { const block = document.getElementById('fadeInBlock'); - Animaster.fadeIn(block, 5000); + animaster().fadeIn(block, 5000); }); document.getElementById('fadeOutPlay') .addEventListener('click', function () { const block = document.getElementById('fadeOutBlock'); - Animaster.fadeOut(block, 5000); + animaster().fadeOut(block, 5000); }); document.getElementById('movePlay') .addEventListener('click', function () { const block = document.getElementById('moveBlock'); - Animaster.move(block, 1000, {x: 100, y: 10}); + animaster().addMove(1000, {x:100, y:20}).play(block); }); document.getElementById('scalePlay') .addEventListener('click', function () { const block = document.getElementById('scaleBlock'); - Animaster.scale(block, 1000, 1.25); + animaster().addScale(1000, 1.25).play(block); }); document.getElementById('moveAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('moveAndHideBlock'); - Animaster.moveAndHide(block, 1000); + animaster().moveAndHide(block, 1000); }); document.getElementById('heartBeatingPlay') .addEventListener('click', function () { const block = document.getElementById('heartBeatingBlock'); - Animaster.heartBeating(block); + animaster1.heartBeating(block); }); document.getElementById('showAndHidePlay') .addEventListener('click', function () { const block = document.getElementById('showAndHideBlock'); console.log(block); - Animaster.showAndHide(block, 1000); + animaster2.showAndHide(block, 1000); }); document.getElementById('heartBeatingStop') .addEventListener('click', function () { const block = document.getElementById('heartBeatingBlock'); - Animaster.stopHeartBeating(block); + animaster1.stopHeartBeating(block); }); document.getElementById('moveAndHideStop') .addEventListener('click', function () { const block = document.getElementById('moveAndHideBlock'); - Animaster.resetMoveAndHide(block); + animaster2.resetMoveAndHide(block); }); } @@ -85,7 +87,11 @@ function animaster() { obj = { - Timer: setInterval(() => {}, 0), + _steps: [], + _translation: null, + _ratio: null, + Timer: setInterval(() => { + }, 0), /** * Функция, увеличивающая/уменьшающая элемент * @param element — HTMLElement, который надо анимировать @@ -95,7 +101,7 @@ function animaster() { scale(element, duration, ratio) { element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(null, ratio); + this.ratio = ratio; }, /** @@ -106,7 +112,7 @@ function animaster() { */ move(element, duration, translation) { element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(translation, null); + this.translation= translation; }, /** @@ -130,8 +136,9 @@ function animaster() { }, heartBeating(element) { this.Timer = setInterval((el) => { - this.scale(el, 500, 1.4); - setTimeout(this.scale, 500, el, 500, 1); + this.addScale(500, 1.4); + this.addScale(500, 1); + this.play(el); }, 1000,element); }, stopHeartBeating(element) { @@ -146,6 +153,63 @@ function animaster() { resetMoveAndHide(element) { resetMove(element); resetFadeOut(element); + }, + addMove(duration, translation) { + obj = { + name: 'move', + duration: duration, + translation: translation, + }; + this._steps.push(obj); + return this; + }, + addScale(duration, ratio) { + obj = { + name: 'scale', + duration: duration, + ratio: ratio, + }; + this._steps.push(obj); + return this; + }, + addFadeIn(duration) { + obj = { + name: 'fadeIn', + duration: duration + }; + this._steps.push(obj); + return this; + }, + addFadeOut(duration) { + obj = { + name: 'fadeOut', + duration: duration + }; + this._steps.push(obj); + return this; + }, + play(element) { + let prevDuration = 0; + for (let i of this._steps) { + setTimeout((name) => { + console.log(i.name); + switch (name) { + case('move'): + this.move(element, i.duration, i.translation); + break; + case('scale'): + this.scale(element, i.duration, i.ratio); + break; + case('fadeOut'): + this.fadeOut(element, i.duration); + break; + case('fadeIn'): + this.fadeIn(element, i.duration); + } + element.style.transform = getTransform(this.translation, this.ratio); + }, prevDuration, i.name); + prevDuration = i.duration; + } } } return obj;