From 4de74a8171a39bafc3ceeb7819517f1ee59220bb Mon Sep 17 00:00:00 2001
From: xamaryllis <114435320+xamaryllis@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:33:20 +0500
Subject: [PATCH] new sol

---
 index.html |  38 +++++++
 index.js   | 302 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 293 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index 6546475..8861f79 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,20 @@
         <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">fadeOut</h3>
+            <button class="button" id="fadeOutPlay">Play</button>
+            <button class="button" id="resetfadeOutPlay">Reset</button>
+        </header>
+        <div class="block" id="fadeOutBlock"></div>
+    </div>
+
     <div class="container">
         <header class="container-header">
             <h3 class="animation-name">move</h3>
@@ -28,6 +39,33 @@ <h3 class="animation-name">scale</h3>
         <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>
+            <button class="button" id="moveAndHideReset">reset</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="heartBeatingStop">Stop</button>
+
+        </header>
+        <div class="block" id="heartBeatingBlock"></div>
+    </div>
+
     <script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 61e55f6..4db8e48 100644
--- a/index.js
+++ b/index.js
@@ -1,61 +1,269 @@
 addListeners();
+let inter1
+let inter2
+let save=[]
+
 
 function addListeners() {
-    document.getElementById('fadeInPlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
-        });
-
-    document.getElementById('movePlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
-        });
-
-    document.getElementById('scalePlay')
-        .addEventListener('click', function () {
-            const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
-        });
-}
+    const fadeInPlayBtn = document.getElementById('fadeInPlay');
+    const resetFadeInBtn = document.getElementById('resetFadeIn');
+    const fadeOutPlayBtn = document.getElementById('fadeOutPlay');
+    const resetFadeOutBtn = document.getElementById('resetfadeOutPlay');
+    const movePlayBtn = document.getElementById('movePlay');
+    const scalePlayBtn = document.getElementById('scalePlay');
+    const moveAndHidePlayBtn = document.getElementById('moveAndHidePlay');
+    const moveAndHideResetBtn = document.getElementById('moveAndHideReset');
+    const showAndHidePlayBtn = document.getElementById('showAndHidePlay');
+    const heartBeatingPlayBtn = document.getElementById('heartBeatingPlay');
+    const heartBeatingStopBtn = document.getElementById('heartBeatingStop');
+    const customAnimationBtn = document.getElementById('customAnimation');
+  
+    const fadeInBlock = document.getElementById('fadeInBlock');
+    const fadeOutBlock = document.getElementById('fadeOutBlock');
+    const moveBlock = document.getElementById('moveBlock');
+    const scaleBlock = document.getElementById('scaleBlock');
+    const moveAndHideBlock = document.getElementById('moveAndHideBlock');
+    const showAndHideBlock = document.getElementById('showAndHideBlock');
+    const heartBeatingBlock = document.getElementById('heartBeatingBlock');
+    const customAnimationBlock = document.getElementById('customAnimationBlock');
+  
+    fadeInPlayBtn.addEventListener('click', function () {
+      animaster().addFadeIn(5000).play(fadeInBlock);
+    });
+  
+    resetFadeInBtn.addEventListener('click', function () {
+      animaster().resetFadeIn(fadeInBlock);
+    });
+  
+    fadeOutPlayBtn.addEventListener('click', function () {
+      animaster().addFadeOut(5000).play(fadeOutBlock);
+    });
+  
+    resetFadeOutBtn.addEventListener('click', function () {
+      animaster().resetFadeOut(fadeOutBlock);
+    });
+  
+    movePlayBtn.addEventListener('click', function () {
+      animaster().addMove(500, { x: 20, y: 20 }).play(moveBlock);
+    });
+  
+    scalePlayBtn.addEventListener('click', function () {
+      animaster().addScale(1000, 1.25).play(scaleBlock);
+    });
+  
+    moveAndHidePlayBtn.addEventListener('click', function () {
+      animaster()
+        .addMove(1000, { x: 100, y: 20 })
+        .addFadeOut(1000)
+        .play(moveAndHideBlock);
+    });
+  
+    moveAndHideResetBtn.addEventListener('click', function () {
+      animaster().resetMoveAndHide(moveAndHideBlock);
+    });
+  
+    showAndHidePlayBtn.addEventListener('click', function () {
+      animaster()
+        .addFadeIn(5000 / 3)
+        .addDelay(5000 / 3)
+        .addFadeOut(5000 / 3)
+        .play(showAndHideBlock);
+    });
+  
+    heartBeatingPlayBtn.addEventListener('click', function () {
+      animaster().heartBeating().start(heartBeatingBlock, 1000, 1);
+    });
+  
+    heartBeatingStopBtn.addEventListener('click', function () {
+      animaster().heartBeating().stop(heartBeatingBlock, 1);
+    });
+  
+    customAnimationBtn.addEventListener('click', function () {
+      const customAnimation = animaster()
+        .addMove(200, { x: 40, y: 40 })
+        .addScale(800, 1.3)
+        .addMove(200, { x: 80, y: 0 })
+        .addScale(800, 1)
+        .addMove(200, { x: 40, y: -40 })
+        .addScale(800, 0.7)
+        .addMove(200, { x: 0, y: 0 })
+        .addScale(800, 1);
+      customAnimation.play(customAnimationBlock);
+    });
+  }
 
-/**
- * Блок плавно появляется из прозрачного.
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- */
-function fadeIn(element, duration) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.classList.remove('hide');
-    element.classList.add('show');
-}
+function animaster(){
+    this.steps = [];
+    return{
+        resetFadeIn:function(element){
+            element.style.transitionDuration = null;
+            element.classList.remove('show');
+            element.classList.add('hide');
+        },
+        resetFadeOut:function(element){
+            element.style.transitionDuration = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+        resetMoveAndScale:function(){
+            element.style.transitionDuration = null;
+            element.style.transform = null;
+        },
+        /**
+         * Блок плавно появляется из прозрачного.
+         * @param element 
+         * @param duration 
+         */
+        fadeIn:function (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);
-}
+        /**
+         * Блок плавно появляется из прозрачного.
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         */
+        fadeOut:function (element, duration) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.classList.add('hide');
+            element.classList.remove('show');            
+        },
+
+        /**
+         * Функция, передвигающая элемент
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         * @param translation — объект с полями x и y, обозначающими смещение блока
+         */
+        move:function (element, duration, translation) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(translation, null);
+        },
+
+        /**
+         * Функция, увеличивающая/уменьшающая элемент
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
+         */
+        scale:function (element, duration, ratio) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.style.transform = getTransform(null, ratio);
+        },
+
+        /**
+         * Блок плавно появляется из прозрачного.
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         * @param translation — объект с полями x и y, обозначающими смещение блока
+         */
+
+        moveAndHide(element, duration, translation) {
+            this.move(element, duration * 2 / 5, translation);
+            this.fadeOut(element, duration * 3 / 5);
+        },
+        resetMoveAndHide(element) {      
+            element.style.transitionDuration = null;
+            element.style.transform = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+        /**
+         * Блок плавно появляется из прозрачного.
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         */
+
+        showAndHide:function(element,duration){
+            this.fadeIn(element, duration / 3);
+            setTimeout(() => this.fadeOut(element, duration / 3), duration / 3);
+        },
+
+        /**
+         * Функция, увеличивающая/уменьшающая элемент
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
+         */
+        heartBeating:function () {
+                return {
+                    start:function (element, duration, ratio) {
+                        const halfDuration = duration / 2;
+                        const transformRatio = 1.4;
+            
+                        element.style.transitionDuration = `${halfDuration}ms`;
+                        element.style.transform = getTransform(null, transformRatio);
+
+            inter1 = setInterval(() => {
+                element.style.transitionDuration = `${halfDuration}ms`;
+                element.style.transform = getTransform(null, ratio);
+            }, halfDuration);
+            
+            inter2 = setInterval(() => {
+                element.style.transitionDuration = `${halfDuration}ms`;
+                element.style.transform = getTransform(null, transformRatio);
+            }, duration);
+                    },
 
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
- */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+                    stop:function (element,ratio){
+                        clearInterval(inter1);
+                        clearInterval(inter2);
+                        element.style.transitionDuration = '0ms';
+                        element.style.transform = getTransform(null, ratio);
+                    }
+                }
+        },
+        wait(duration) {
+                    setTimeout(duration);
+                },
+
+        play(element,  cycled = false) {
+            let sum = 0;
+            for (let step of steps) {
+                setTimeout(() => this[step.animation](element, step.duration, ...step.other), sum);
+                sum += step.duration;
+            }
+        },
+
+        addMove:function (duration, translation){
+            return this.addAnimation('move', duration, translation);
+        },
+
+        addScale(duration, ratio) {
+            return this.addAnimation('scale', duration, ratio);
+        },
+
+        addFadeIn(duration) {
+            return this.addAnimation('fadeIn', duration);
+        },
+
+        addFadeOut(duration) {
+            return this.addAnimation('fadeOut', duration);
+        },
+
+        addDelay(duration) {
+            return this.addAnimation('wait', duration);
+        },
+
+        addAnimation(animation, duration, ...other) {
+            steps.push({
+                animation,
+                duration,
+                other
+            });
+            return this;
+        }
+
+
+    }
 }
 
 function getTransform(translation, ratio) {
     const result = [];
     if (translation) {
+        console.log(translation)
         result.push(`translate(${translation.x}px,${translation.y}px)`);
     }
     if (ratio) {