From 94a22f132df87bb4e45294bd21c41c64af0c94ce Mon Sep 17 00:00:00 2001
From: UralGuru <71888215+UralGuru@users.noreply.github.com>
Date: Fri, 22 Oct 2021 15:40:32 +0500
Subject: [PATCH] 1-6

---
 index.html |  38 ++++++++++++++-
 index.js   | 138 +++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 160 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 6546475..e7e8a90 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@ <h3 class="animation-name">fadeIn</h3>
         </header>
         <div class="block hide" id="fadeInBlock"></div>
     </div>
+    
     <div class="container">
         <header class="container-header">
             <h3 class="animation-name">move</h3>
@@ -20,6 +21,7 @@ <h3 class="animation-name">move</h3>
         </header>
         <div class="block" id="moveBlock"></div>
     </div>
+
     <div class="container">
         <header class="container-header">
             <h3 class="animation-name">scale</h3>
@@ -28,6 +30,40 @@ <h3 class="animation-name">scale</h3>
         <div class="block" id="scaleBlock"></div>
     </div>
 
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">fadeOut</h3>
+            <button class="button" id="fadeOutPlay">Play</button>
+        </header>
+        <div class="block show" id="fadeOutBlock"></div>
+    </div>
+    
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">moveAndHide</h3>
+            <button class="button" id="moveAndHidePlay">Play</button>
+            <button class="button" id="moveAndHideStop">Reset</button>
+        </header>
+        <div class="block show" id="showAndHideBlock"></div>
+    </div>
+
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">showAndHide</h3>
+            <button class="button" id="showAndHidePlay">Play</button>
+        </header>
+        <div class="block hide" id="showAndHideBlock"></div>
+    </div>
+
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">heartBeat</h3>
+            <button class="button" id="heartBeatingPlay">Play</button>
+            <button class="button" id="heartBeatingStop">Stop</button>
+        </header>
+        <div class="block show" id="heartBeatingBlock"></div>
+    </div>
+
     <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
index 61e55f6..5f050b5 100644
--- a/index.js
+++ b/index.js
@@ -4,32 +4,67 @@ 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);
+        });
+
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOutBlock');
+            animaster().fadeOut(block, 5000);
+        });
+
+    document.getElementById('moveAndHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().moveAndHide(block, 3000, {x: 100, y: 10});
+            document.getElementById('moveAndHideStop')
+                .addEventListener('click', () => { animaster().resetMoveAndHide(block) });
+        });
+
+    document.getElementById('showAndHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHidelock');
+            animaster().showAndHide(block, 5000);
+        });
+        
+    document.getElementById('heartBeatingPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock');
+            let heartBeat = animaster().heartBeating(block, 1000, 1.5);
+            document.getElementById('heartBeatingStop')
+                .addEventListener('click', () => { heartBeat.stop() });
         });
 }
 
+
+function animaster() {
+    return {
 /**
  * Блок плавно появляется из прозрачного.
  * @param element — HTMLElement, который надо анимировать
  * @param duration — Продолжительность анимации в миллисекундах
  */
-function fadeIn(element, duration) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.classList.remove('hide');
-    element.classList.add('show');
-}
+        fadeIn(element, duration) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        
 
 /**
  * Функция, передвигающая элемент
@@ -37,10 +72,10 @@ function fadeIn(element, duration) {
  * @param duration — Продолжительность анимации в миллисекундах
  * @param translation — объект с полями x и y, обозначающими смещение блока
  */
-function move(element, duration, translation) {
-    element.style.transitionDuration = `${duration}ms`;
-    element.style.transform = getTransform(translation, null);
-}
+        move(element, duration, translation) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(translation, null);
+        },
 
 /**
  * Функция, увеличивающая/уменьшающая элемент
@@ -48,9 +83,81 @@ function move(element, duration, translation) {
  * @param duration — Продолжительность анимации в миллисекундах
  * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
  */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+        scale(element, duration, ratio) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.style.transform = getTransform(null, ratio);
+        },
+/**
+ * Блок плавно исчезает.
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ */
+        fadeOut(element, duration) {
+            element.style.transitionDuration =  `${duration}ms`;    
+            element.classList.add('hide');
+            element.classList.remove('show');
+        },
+
+/**
+ * Блок должен одновременно сдвигаться на 100 пикселей вправо и на 20 вниз, а потом исчезать.
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ */
+        moveAndHide(element, duration, translation) {
+            this.move(element, duration * 0.4, translation);
+            setTimeout(() => this.fadeOut(element, duration * 0.6), duration * 0.4);
+        },
+/**
+ * Блок должен появиться, подождать и исчезнуть.
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ */
+        showAndHide(element, duration) {
+            this.fadeIn(element, duration / 3);
+            setTimeout(() => this.fadeOut(element, duration / 3), duration * 2 / 3);
+        },
+/**
+ * Блок должен имитировать сердцебиение.
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ */
+        heartBeating(element, duration, ratio) {
+            let loop = () => {
+                this.scale(element, duration / 2, ratio);
+                setTimeout(() => this.scale(element, duration / 2, 1), duration / 2);
+            }
+            let intervalId = setInterval(loop, duration);
+            return {
+                stop(){
+                    clearInterval(intervalId);
+                }
+            }
+        },
+
+        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 = null;
+        },
+
+        resetMoveAndHide(element) {
+            element.style.transitionDuration = null;
+            element.style.transform = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+    }
 }
 
 function getTransform(translation, ratio) {
@@ -63,3 +170,4 @@ function getTransform(translation, ratio) {
     }
     return result.join(' ');
 }
+