ФТ-203, Никитин, Кузьмин, Хазова

index.html

@@ -13,6 +13,13 @@ <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">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">move</h3>
@@ -27,6 +34,30 @@ <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">moveAndHide</h3>
+            <button class="button" id="moveAndHide">Play</button>
+        </header>
+        <div class="block" id="moveAndHideBlock"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">showAndHide</h3>
+            <button class="button" id="showAndHide">Play</button>
+        </header>
+        <div class="block hide" id="showAndHideBlock"></div>
+    </div>
+
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">heartBeating</h3>
+            <button class="button" id="heartBeating">Play</button>
+            <button class="button" id="heartBeatingStop">Stop</button>
+        </header>
+        <div class="block show" id="heartBeatingBlock"></div>
+    </div>
+
 
     <script src="index.js"></script>
 </body>

index.js

@@ -1,58 +1,130 @@
 addListeners();
 
+
+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, translation) {
+            this.move(element, duration / 3, translation);
+            setTimeout(() => this.fadeOut(element, duration / 3), duration / 3);
+        },
+
+        showAndHide(element, duration) {
+            this.fadeIn(element, duration / 3);
+            setTimeout(() => this.fadeOut(element, duration / 3), duration / 3)
+        },
+
+        heartBeating(element, duration) {
+            // this.scale(element, duration / 2, 1.4);
+            // setTimeout(() => this.scale(element, duration / 2, 1), 500)
+            const interval = setInterval(() => {
+                this.scale(element, 500, 1.4);
+                setTimeout(() => {
+                    this.scale(element, 500, 1);
+                }, 500);
+            }, 1000);
+            return {
+                stop: function () {
+                    clearInterval(interval);
+                }
+            };
+
+        }
+    }
+}
+
 function addListeners() {
     document.getElementById('fadeInPlay')
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+            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');
-            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');
-}
+    document.getElementById('moveAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().moveAndHide(block, 5000, {x: 100, y: 10});
+        });
 
-/**
- * Функция, передвигающая элемент
- * @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);
-}
+    document.getElementById('showAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHideBlock');
+            animaster().showAndHide(block, 5000);
+        });
 
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
- */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+    let heartAnimation;
+    document.getElementById('heartBeating')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock');
+            heartAnimation = animaster().heartBeating(block, 1000);
+        });
+    document.getElementById('heartBeatingStop')
+        .addEventListener('click', function () {
+            if (heartAnimation) {
+                heartAnimation.stop();
+                heartAnimation = null;
+            }
+        });
 }
 
+
 function getTransform(translation, ratio) {
     const result = [];
     if (translation) {
@@ -62,4 +134,4 @@ function getTransform(translation, ratio) {
         result.push(`scale(${ratio})`);
     }
     return result.join(' ');
-}
+}