From ca7bc92b51e7f6bff466092ab9c83fafae1e1603 Mon Sep 17 00:00:00 2001 From: ihatememore Date: Wed, 16 Jun 2021 19:01:12 +0500 Subject: [PATCH] 1-16 --- index.html | 40 +++++++++ index.js | 254 +++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 278 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 6546475..d4460f9 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

fadeIn

+
@@ -17,6 +18,7 @@

fadeIn

move

+
@@ -24,9 +26,47 @@

move

scale

+
+
+
+

fadeOut

+ + +
+
+
+
+
+

moveAndHide

+ + +
+
+
+
+
+

showAndHide

+ +
+
+
+
+
+

heartBeating

+ + +
+
+
+
+
+

skew

+
+
+
diff --git a/index.js b/index.js index 61e55f6..1f37188 100644 --- a/index.js +++ b/index.js @@ -1,23 +1,212 @@ addListeners(); -function addListeners() { - document.getElementById('fadeInPlay') - .addEventListener('click', function () { - const block = document.getElementById('fadeInBlock'); - fadeIn(block, 5000); - }); - document.getElementById('movePlay') +function animaster() { + return { + _steps: [], + + resetFadeIn(element) { + element.style.transitionDuration = null; + element.classList.remove('show'); + element.classList.add('hide'); + }, + resetFadeOut(element) { + element.style.transitionDuration = null; + element.classList.remove('hide'); + element.classList.add('show'); + }, + resetMoveAndScale(element) { + element.style.transitionDuration = null; + element.style.transform = null; + }, + + addMove(duration, transform) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option(el, dur, t) { + move(el, dur, t) + }, duration, transform + }); + return copy; + }, + addScale(duration, transform) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option(el, dur, t){ + scale(el, dur, t) + }, duration, transform + }); + console.log(this._steps); + return copy; + }, + addFadeIn(duration) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option(el, dur) { + fadeIn(el, dur) + }, duration + }); + return copy; + }, + addFadeOut(duration) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option(el, dur) { + fadeOut(el, dur) + }, duration + }); + return copy; + }, + addSkew(duration, transform) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option(el, dur, t) { + skew(el, dur, t) + }, duration, transform + }); + return copy; + }, + addDelay(duration) { + let copy = Object.assign({}, this); + copy._steps = this._steps.slice(); + copy._steps.push({ + option() { + return null + }, duration + }); + return copy; + }, + play(element, cycled = false) { + const elementInvisible = element.classList.contains('hide'); + let duration = 0; + let cycledDuration = 0; + let timer; + if (cycled) { + for (let el of this._steps) { + cycledDuration += el.duration; + setTimeout(() => el.option(element, el.duration, el.transform), duration); + console.log(duration); + duration += el.duration; + } + duration = 0; + timer = setInterval(() => { + for (let el of this._steps) { + setTimeout(() => el.option(element, el.duration, el.transform), duration); + console.log(duration); + duration += el.duration; + } + duration = 0; + }, cycledDuration) + } else { + for (let el of this._steps) { + timer = setTimeout(() => el.option(element, el.duration, el.transform), duration); + console.log(duration); + duration += el.duration; + } + } + console.log(this._steps); + return { + stop() { + clearInterval(timer); + }, + reset() { + clearTimeout(timer); + const elementAfterPlayInvisible = element.classList.contains('hide'); + console.log(elementInvisible); + console.log(elementAfterPlayInvisible); + if (!elementAfterPlayInvisible && elementInvisible) animaster().resetFadeIn(element); + if (elementAfterPlayInvisible && !elementInvisible) animaster().resetFadeOut(element); + animaster().resetMoveAndScale(element); + } + } + }, + buildHandler() { + return (el) => this.play(el.target) + }/*, + move(element, duration, translation) { + move(element, duration, translation); + }, + fadeIn(element, duration) { + fadeIn(element, duration); + }, + scale(element, duration, ratio) { + scale(element, duration, ratio); + }, + fadeOut(element, duration) { + fadeOut(element, duration); + }, + moveAndHide(element, duration, translation) { + return moveAndHide(element, duration, translation); + }, + showAndHide(element, duration) { + showAndHide(element, duration); + }, + heartBeating(element, duration, ratio) { + heartBeating(element, duration, ratio); + let interval = setInterval(() => heartBeating(element, duration, ratio), 1000); + return { + stop() { + clearInterval(interval); + } + } + }*/ + }; +} + +function Listener(anim, addedAnim, cycled = false) { + let playAnim; + document.getElementById(anim + 'Play') .addEventListener('click', function () { - const block = document.getElementById('moveBlock'); - move(block, 1000, {x: 100, y: 10}); + const block = document.getElementById(anim + 'Block'); + playAnim = addedAnim.play(block, cycled); }); + if (cycled) { + document.getElementById(anim + 'Stop') + .addEventListener('click', function () { + if (playAnim !== undefined) playAnim.stop(); + }); + } else { + document.getElementById(anim + 'Reset') + .addEventListener('click', function () { + playAnim.reset(); + }); + } +} - document.getElementById('scalePlay') +function addListeners() { + Listener('fadeIn', + animaster().addFadeIn(5000)); + Listener('move', + animaster().addMove(5000, {x: 100, y: 10})); + Listener('scale', + animaster().addScale(1000, 1.25)); + Listener('fadeOut', + animaster().addFadeOut(5000)); + Listener('moveAndHide', + animaster().addMove(400, {x: 100, y: 20}).addFadeOut(400)); + Listener('heartBeating', + animaster().addScale(500, 1.4).addScale(500, 1), + true); + + let showAndHidePlay; + let showAndHide = animaster().addFadeIn(500).addDelay(500); + let test = showAndHide.addScale(1000, 1); + document.getElementById('showAndHidePlay') .addEventListener('click', function () { - const block = document.getElementById('scaleBlock'); - scale(block, 1000, 1.25); + const block = document.getElementById('showAndHideBlock'); + showAndHidePlay = showAndHide.addFadeOut(500).play(block); }); + + const skew = animaster() + .addSkew(1000, -30) + .addSkew(1000, 0) + .buildHandler(); + document.getElementById('skewBlock').addEventListener('click', skew); } /** @@ -26,7 +215,7 @@ function addListeners() { * @param duration — Продолжительность анимации в миллисекундах */ function fadeIn(element, duration) { - element.style.transitionDuration = `${duration}ms`; + element.style.transitionDuration = `${duration}ms`; element.classList.remove('hide'); element.classList.add('show'); } @@ -49,11 +238,41 @@ function move(element, duration, translation) { * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1 */ function scale(element, duration, ratio) { - element.style.transitionDuration = `${duration}ms`; - element.style.transform = getTransform(null, ratio); + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(null, ratio, null); +} + +function fadeOut(element, duration) { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); +} + +function skew(element, duration, skew) { + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(null, null, skew); +} + +/* +function moveAndHide(element, duration, translation) { + const moveDuration = Math.floor((duration * 2) / 5); + const hideDuration = duration - moveDuration; + animaster().move(element, moveDuration, translation); + return setTimeout(() => animaster().fadeOut(element, hideDuration), moveDuration); +} +function showAndHide(element, duration) { + const showAndHideDuration = Math.floor((duration) / 3); + const restDuration = duration - showAndHideDuration * 2; + animaster().fadeIn(element, showAndHideDuration); + setTimeout(null, restDuration); + setTimeout(() => animaster().fadeOut(element, showAndHideDuration), showAndHideDuration + restDuration); } +function heartBeating(element, duration, ratio) { + animaster().scale(element, duration, ratio); + setTimeout(() => animaster().scale(element, duration, 1), duration); +}*/ -function getTransform(translation, ratio) { +function getTransform(translation, ratio, skew) { const result = []; if (translation) { result.push(`translate(${translation.x}px,${translation.y}px)`); @@ -61,5 +280,8 @@ function getTransform(translation, ratio) { if (ratio) { result.push(`scale(${ratio})`); } + if (skew) { + result.push(`skew(${skew}deg)`); + } return result.join(' '); }