Матвей Мехряков

index.html

@@ -10,13 +10,15 @@
         <header class="container-header">
             <h3 class="animation-name">fadeIn</h3>
             <button class="button" id="fadeInPlay">Play</button>
+            <button class="button" id="resetFadeIn">reset</button> 
         </header>
         <div class="block hide" id="fadeInBlock"></div>
     </div>
     <div class="container">
         <header class="container-header">
             <h3 class="animation-name">move</h3>
             <button class="button" id="movePlay">Play</button>
+            <button class="button" id="resetMove">reset</button>
         </header>
         <div class="block" id="moveBlock"></div>
     </div>
@@ -27,6 +29,37 @@ <h3 class="animation-name">scale</h3>
         </header>
         <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>
+            <button class="button" id='resetFadeOut'>reset</button>
+        </header>
+        <div class="block show" id="fadeOut"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">move and hide</h3>
+            <button class="button" id="moveHidePlay">Play</button>
+        </header>
+        <div class="block show" id="moveHideBlock"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">show and hide</h3>
+            <button class="button" id="showHidePlay">Play</button>
+        </header>
+        <div class="block hide" id="showAndHide"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">heart beating</h3>
+            <button class="button" id="heartBeatingPlay">Play</button>
+            <button class="button" id="heartBeatingStop">Stop</button>
+        </header>
+        <div class="block" id="heartBeating"></div>
+    </div>
+
 
     <script src="index.js"></script>
 </body>

index.js

@@ -1,56 +1,132 @@
 addListeners();
+const animator = animaster();
 
 function addListeners() {
     document.getElementById('fadeInPlay')
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+            block.classList.contains('hide') ?
+                animator.fadeIn(block, 5000):
+                animator.fadeOut(block, 5000);
         });
 
     document.getElementById('movePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
+            animator.move(block, 1000, { x: 100, y: 10 });
         });
 
     document.getElementById('scalePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
+            animator.scale(block, 1000, 1.25);
         });
-}
+
+    document.getElementById('moveHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveHideBlock');
+            animator.moveAndHide(block, 1000);           
+        });
+
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOut');
+            animator.fadeOut(block, 1000);           
+    });
 
-/**
- * Блок плавно появляется из прозрачного.
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- */
-function fadeIn(element, duration) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.classList.remove('hide');
-    element.classList.add('show');
-}
+    document.getElementById('showHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHide');
+            animator.showAndHide(block, 1000);           
+    });
+
+    document.getElementById('heartBeatingPlay')
+        .addEventListener('click', function () {
+            block = document.getElementById('heartBeating');
+            animator.heartBeating(block, 1000);
+            let heartBeatingStop = animator.heartBeating(block, 1000).stop;
+            document.getElementById("heartBeatingStop").addEventListener("click", heartBeatingStop)       
+    });
+
+    /*document.getElementById('heartBeatingStop')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeating');
+            animator.heartBeating(block, 1000).stop;           
+    }); */
 
-/**
- * Функция, передвигающая элемент
- * @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 animaster() {
+    return {
+
+    /**
+     * Блок плавно появляется из прозрачного.
+     * @param element — HTMLElement, который надо анимировать
+     * @param duration — Продолжительность анимации в миллисекундах
+     */
+    fadeIn(element, duration) {
+        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');
+    },
+
+
+    /**
+     * Функция, передвигающая элемент
+     * @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 — Продолжительность анимации в миллисекундах
+     * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
+     */
+    scale(element, duration, ratio) {
+        element.style.transitionDuration = `${duration}ms`;
+        element.style.transform = getTransform(null, ratio);
+    },
+
+    moveAndHide(element, duration) {
+        const timing = duration / 5;        
+        animator.move(element, timing*2, { x: 100, y: 20 });
+        setTimeout(()=>animator.fadeOut(element,timing*3),timing * 2);   
+    },
+
+    showAndHide(element, duration) {
+        const timing = duration / 3;
+        element.style.transitionDuration = `${timing}ms`;
+        element.classList.remove('hide');
+        element.classList.add('show');
+        setTimeout(() => animator.fadeOut(element, timing), timing);
+    },
+
+    heartBeating(element, duration) {
+        let beat = () => {
+            this.scale(element, duration / 2, 1.4);
+            setTimeout(() => this.scale(element, duration / 2, 1), duration / 2);
+        };
+        let beating = setInterval(beat, duration);
+
+        return {
+            stop() {
+                //clearTimeout(beat)
+                clearInterval(beating);
+            }
+        };
+    }
 }
 
 function getTransform(translation, ratio) {
@@ -62,4 +138,5 @@ function getTransform(translation, ratio) {
         result.push(`scale(${ratio})`);
     }
     return result.join(' ');
+    }
 }