kontur-web-courses · valdmity · Mar 13, 2023
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/animaster.iml b/.idea/animaster.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -6,28 +6,58 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <div class="container">
-        <header class="container-header">
-            <h3 class="animation-name">fadeIn</h3>
-            <button class="button" id="fadeInPlay">Play</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>
-        </header>
-        <div class="block" id="moveBlock"></div>
-    </div>
-    <div class="container">
-        <header class="container-header">
-            <h3 class="animation-name">scale</h3>
-            <button class="button" id="scalePlay">Play</button>
-        </header>
-        <div class="block" id="scaleBlock"></div>
-    </div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">fadeIn</h3>
+        <button class="button" id="fadeInPlay">Play</button>
+    </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>
+        <button class="button" id="movePlay">Play</button>
+    </header>
+    <div class="block" id="moveBlock"></div>
+</div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">scale</h3>
+        <button class="button" id="scalePlay">Play</button>
+    </header>
+    <div class="block" id="scaleBlock"></div>
+</div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">move and hide</h3>
+        <button class="button" id="moveAndHide">Play</button>
+        <button class="button" id="stopMoveAndHide">Reset</button>
+    </header>
+    <div class="block" id="moveAndHideBlock"></div>
+</div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">show and hide</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">heart beating</h3>
+        <button class="button" id="heartBeating">Play</button>
+        <button class="button" id="stopHeartBeating">Stop</button>
+    </header>
+    <div class="block" id="heartBeatingBlock"></div>
+</div>
 
-    <script src="index.js"></script>
+<script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -4,53 +4,55 @@ function addListeners() {
     document.getElementById('fadeInPlay')
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+            animaster().addFadeIn(5000).play(block, false);
+        });
+
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOutBlock');
+            animaster().addFadeOut(5000).play(block, false);
         });
 
     document.getElementById('movePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
+            animaster().addMove(1000, {x: 100, y:10}).play(block, false);
         });
 
     document.getElementById('scalePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
+            animaster().addScale(1000, 1.25).play(block, false);
         });
-}
 
-/**
- * Блок плавно появляется из прозрачного.
- * @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, {x: 100, y: 20}, 1000);
+        });
 
-/**
- * Функция, передвигающая элемент
- * @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('stopMoveAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().resetMoveAndHide(block);
+        });
+
+    document.getElementById('showAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHideBlock');
+            animaster().showAndHide(block, 3000);
+        });
+
+    document.getElementById('heartBeating')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock');
+            const heartBeating = animaster().heartBeating(block, 1000);
 
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
- */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+            document.getElementById('stopHeartBeating')
+                .addEventListener('click', function () {
+                    heartBeating.stop();
+                });
+        });
 }
 
 function getTransform(translation, ratio) {
@@ -63,3 +65,157 @@ function getTransform(translation, ratio) {
     }
     return result.join(' ');
 }
+
+function animaster() {
+    function resetFadeIn(element){
+        element.style.transitionDuration = null;
+        element.classList.remove('show');
+        element.classList.add('hide');
+    }
+
+    function resetFadeOut(element){
+        element.style.transitionDuration = null;
+        element.classList.remove('hide');
+        element.classList.add('show');
+    }
+
+    function resetMoveAndScale(element){
+        element.style.transitionDuration = null;
+        element.style.transform = null;
+    }
+
+    return {
+        _steps: [],
+
+        addMove: function (duration, transition) {
+            this._steps.push({
+                duration: duration,
+                resetFunc: e => resetMoveAndScale(e),
+                do: e => this.move(e, duration, transition)
+            });
+            return this;
+        },
+        addScale: function (duration, ratio) {
+            this._steps.push({
+                duration: duration,
+                resetFunc: e => resetMoveAndScale(e),
+                do: e => this.scale(e, duration, ratio)
+            });
+            return this;
+        },
+        addFadeIn: function (duration) {
+            this._steps.push({
+                duration: duration,
+                resetFunc: e => resetFadeIn(e),
+                do: e => this.fadeIn(e, duration)
+            });
+            return this;
+        },
+        addFadeOut: function (duration) {
+            this._steps.push({
+                duration: duration,
+                resetFunc: e => resetFadeOut(e),
+                do: e => this.fadeOut(e, duration)
+            });
+            return this;
+        },
+        addDelay: function (duration){
+            this._steps.push({
+                duration: duration,
+                resetFunc: _ => {},
+                do: _ => setTimeout(() => {}, duration)
+            });
+            return this;
+        },
+
+        play: function (element, cycled, steps = this._steps) {
+            let duration = 0;
+            this._steps.forEach(step => duration += step.duration)
+            let isStopped = 0;
+            function doCycle(){
+                if (isStopped){
+                    return;
+                }
+                steps.reduce((pr, step) => {
+                    return pr.then(() => step.do(element));
+                }, Promise.resolve());
+            }
+            doCycle();
+            if (cycled){
+                setInterval(doCycle, duration);
+            }
+            return {
+                stop() {
+                    isStopped = true;
+                    clearInterval(doCycle);
+                },
+                reset() {
+                    stop();
+                    for(const step of steps){
+                        if (step.resetFunc){
+                            step.resetFunc(element);
+                        }
+                    }
+                }
+            }
+        },
+        buildHandler(){
+            const steps = this._steps;
+            const obj = this;
+            return function (){
+                obj.play(obj, false, steps);
+            }
+        },
+        fadeIn: function (element, duration) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+        fadeOut: function (element, duration) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.classList.add('hide');
+            element.classList.remove('show');
+        },
+        move: function (element, duration, translation) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(translation, null);
+        },
+        scale: function (element, duration, ratio) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(null, ratio);
+        },
+        moveAndHide: function (element, translation, duration) {
+            const movingDuration = duration * 0.4;
+            const hideDuration = duration * 0.6;
+            animaster()
+                .addMove(movingDuration, translation)
+                .addFadeOut(hideDuration)
+                .play(element, false);
+        },
+        resetMoveAndHide: function (element) {
+            resetFadeOut(element);
+            resetMoveAndScale(element);
+        },
+        showAndHide: function (element, duration) {
+            const partDuration = duration / 3;
+            animaster()
+                .addFadeIn(partDuration)
+                .addFadeOut(partDuration)
+                .play(element, false);
+        },
+        heartBeating: function (element, duration) {
+            const partDuration = duration / 2;
+
+            const scaling = setInterval(() => {
+                animaster().addScale(partDuration, 1.4)
+                    .addScale(partDuration, 1)
+                    .play(element, false)
+            }, duration);
+            return {
+                stop: function () {
+                    clearInterval(scaling);
+                }
+            }
+        }
+    }
+}