Толченов Андрей + Курбатов Демьян ФТ-201

index.html

@@ -9,7 +9,9 @@
     <div class="container">
         <header class="container-header">
             <h3 class="animation-name">fadeIn</h3>
-            <button class="button" id="fadeInPlay">Play</button>
+            <button class="button" id="fadeInPlay">Play In</button>
+            <button class="button" id="fadeOutPlay">Play Out</button>
+
         </header>
         <div class="block hide" id="fadeInBlock"></div>
     </div>
@@ -27,7 +29,29 @@ <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="moveAndHidePlay">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="showAndHidePlay">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="heartBeatingPlay">Play</button>
+            <button class="button" id="stop">Stop</button>
 
+        </header>
+        <div class="block" id="heartBeatingBlock"></div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -1,65 +1,190 @@
-addListeners();
+let heartBlock = null;
 
-function addListeners() {
-    document.getElementById('fadeInPlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+function animaster() {
+    function moveAndHide(element, duration) {
+        const initialPosition = element.getBoundingClientRect();
+        const finalPosition = {
+          left: initialPosition.left + 100,
+          top: initialPosition.top + 20
+        };
+
+        const animation = element.animate([
+          { transform: `translate(${0}px, ${0}px)`, opacity: 1 },
+          { transform: `translate(${finalPosition.left - initialPosition.left}px, ${finalPosition.top - initialPosition.top}px)`, opacity: 1 },
+          { transform: `translate(${finalPosition.left - initialPosition.left}px, ${finalPosition.top - initialPosition.top}px)`, opacity: 0 }
+        ], {
+          duration: duration,
+          easing: "ease-in-out",
+          fill: "forwards"
         });
-
-    document.getElementById('movePlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
+
+        animation.onfinish = () => {
+          element.style.opacity = 0;
+        }
+      }
+
+      function showAndHide(element, duration) {      
+        const animation = element.animate([
+          { opacity: 0 },
+          { opacity: 1 },
+          { opacity: 1 },
+          { opacity: 0 }
+        ], {
+          duration: duration,
+          easing: "linear",
+          fill: "forwards"
         });
-
-    document.getElementById('scalePlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
+
+        animation.onfinish = () => {
+          element.style.opacity = 0;
+        }
+      }
+
+      function heartBeating(element) { 
+        const animation = element.animate([
+          { transform: "scale(1)", offset: 0 },
+          { transform: "scale(1.4)", offset: 0.5 },
+          { transform: "scale(1)", offset: 1 }
+        ], {
+          duration: 500,
+          iterations: Infinity,
+          easing: "ease-in-out"
         });
-}
+
+        return {
+          stop: () => {
+            animation.cancel();
+          }
+        }
+      }
 
-/**
- * Блок плавно появляется из прозрачного.
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- */
-function fadeIn(element, duration) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.classList.remove('hide');
-    element.classList.add('show');
-}
+    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);
-}
+    function fadeOut(element, duration) {
+        element.style.transitionDuration =  `${duration}ms`;
+        element.classList.remove('show');
+        element.classList.add('hide');
+    }
 
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @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 move(element, duration, translation) {
+        element.style.transitionDuration = `${duration}ms`;
+        element.style.transform = getTransform(translation, null);
+    }
 
-function getTransform(translation, ratio) {
-    const result = [];
-    if (translation) {
-        result.push(`translate(${translation.x}px,${translation.y}px)`);
+    function scale(element, duration, ratio) {
+        element.style.transitionDuration =  `${duration}ms`;
+        element.style.transform = getTransform(null, ratio);
     }
-    if (ratio) {
-        result.push(`scale(${ratio})`);
+
+    function getTransform(translation, ratio) {
+        const result = [];
+        if (translation) {
+            result.push(`translate(${translation.x}px,${translation.y}px)`);
+        }
+        if (ratio) {
+            result.push(`scale(${ratio})`);
+        }
+        return result.join(' ');
     }
-    return result.join(' ');
+
+    return {
+        fadeIn,
+        fadeOut,
+        move,
+        scale,
+        moveAndHide,
+        showAndHide, 
+        heartBeating,
+        delay: function(duration) {
+            return new Promise(resolve => setTimeout(resolve, duration));
+        },
+        sequence: function(sequenceArray) {
+            return new Promise(async function(resolve) {
+                for (let i = 0; i < sequenceArray.length; i++) {
+                    const animation = sequenceArray[i];
+                    const delay = animation.delay || 0;
+                    await animaster()[animation.name](animation.element, animation.duration, animation.amount)
+                        .delay(delay);
+                }
+                resolve();
+            });
+        },
+        parallel: function(parallelArray) {
+            const promisesArray = parallelArray.map((animation) => animaster()[animation.name](animation.element, animation.duration, animation.amount)
+                .delay(animation.delay || 0));
+            return Promise.all(promisesArray);
+        },
+        buildHandler: function({duration = 0, delay = 0, amount = null, type = '', target}) {
+            switch (type) {
+                case 'fadeIn':
+                case 'fadeOut':
+                    return {
+                        name: type,
+                        duration,
+                        delay,
+                        element: target
+                    };
+                case 'move':
+                case 'scale':
+                    return {
+                        name: type,
+                        duration,
+                        delay,
+                        element: target,
+                        amount
+                    };
+            }
+        }
+    };
 }
+
+document.getElementById('fadeInPlay')
+    .addEventListener('click', function () {
+        const block = document.getElementById('fadeInBlock');
+        animaster().fadeIn(block, 1000);
+    });
+
+document.getElementById('fadeOutPlay')
+    .addEventListener('click', function () {
+        const block = document.getElementById('fadeInBlock');
+        animaster().fadeOut(block, 1000);
+    });
+
+document.getElementById('movePlay')
+    .addEventListener('click', function () {
+        const block = document.getElementById('moveBlock');
+        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);
+    });
+
+document.getElementById('moveAndHidePlay')
+.addEventListener('click', function () {
+    const block = document.getElementById('moveAndHideBlock');
+    animaster().moveAndHide(block, 1000);
+});
+
+document.getElementById('showAndHidePlay')
+.addEventListener('click', function () {
+    const block = document.getElementById('showAndHideBlock');
+    animaster().showAndHide(block, 1000);
+});
+
+document.getElementById('heartBeatingPlay')
+.addEventListener('click', function () {
+    const block = document.getElementById('heartBeatingBlock');
+    heartBlock = animaster().heartBeating(block);
+});
+
+document.getElementById('stop')
+.addEventListener('click', function () {
+    heartBlock.stop();
+});