diff --git a/README.md b/README.md index c044e46..d5ad4d3 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ При клике на кнопку play возле названия анимации запустят ее. -1. Создай функцию с названием `animaster` +//1. Создай функцию с названием `animaster` -2. Сейчас функции-анимации (`move`, `fadeIn`, `scale`) лежат в глобальной области видимости и имеют очень простые названия — их легко случайно переопределить. Поэтому спрячь их определения внутрь функции `animaster`. Функция `animaster` должна возвращать объект с методами для запуска разных анимаций. Сделай так, чтобы кнопки на страничке все еще показывали анимацию. +//2. Сейчас функции-анимации (`move`, `fadeIn`, `scale`) лежат в глобальной области видимости и имеют очень простые названия — их легко случайно переопределить. Поэтому спрячь их определения внутрь функции `animaster`. Функция `animaster` должна возвращать объект с методами для запуска разных анимаций. Сделай так, чтобы кнопки на страничке все еще показывали анимацию. Использовать анимации теперь можно будет вот так: @@ -14,22 +14,22 @@ animaster().scale(element, 500, .8) ``` -3. По аналогии с функцией `fadeIn` создай функцию `fadeOut`, скрывающую элемент. +//3. По аналогии с функцией `fadeIn` создай функцию `fadeOut`, скрывающую элемент. -4. Мы хотим, немного облегчить жизнь пользователям анимастера, поэтому напишем для них несколько сложных анимаций. Сложные анимации состоят из нескольких простых, запущенных в правильном порядке и в нужное время. Добавь в интерфейс анимастера три новые анимации. Не забудь сделать так, чтобы с html-странички можно было их запустить. Вот такие анимации должен реализовывать анимастер: +//4. Мы хотим, немного облегчить жизнь пользователям анимастера, поэтому напишем для них несколько сложных анимаций. Сложные анимации состоят из нескольких простых, запущенных в правильном порядке и в нужное время. Добавь в интерфейс анимастера три новые анимации. Не забудь сделать так, чтобы с html-странички можно было их запустить. Вот такие анимации должен реализовывать анимастер: - `moveAndHide` — блок должен одновременно сдвигаться на 100 пикселей вправо и на 20 вниз, а потом исчезать. Метод на вход должен принимать продолжительность анимации. При этом 2/5 времени блок двигается, 3/5 — исчезает. - `showAndHide` — блок должен появиться, подождать и исчезнуть. Каждый шаг анимации длится 1/3 от времени, переданного аргументом в функцию. - `heartBeating` — имитация сердцебиения. Сначала элемент должен увеличиться в 1,4 раза, потом обратно к 1. Каждый шаг анимации занимает 0,5 секунды. Анимация должна повторяться бесконечно. -5. Сделай возможность отключать анимацию сердцебиения: +//5. Сделай возможность отключать анимацию сердцебиения: - сделай, чтобы метод `heartBeating` возвращал объект с методом `stop` - при вызове метода `stop` анимация должна прекращаться (скорее всего, нужно останавливать таймер, которым ты анимацию запускаешь) - добавь в разметку кнопку stop по аналогии с кнопкой play - в коде добавь обработчик клика по аналогии с тем, как это сделано для кнопки play. Обработчик должен вызывать метод `stop` анимации -6. Сделай функции отмены для каждой элементарной операции. Создай служебные (не доступные снаружи анимастера) функции `resetFadeIn`, `resetFadeOut` и `resetMoveAndScale`. Все эти функции принимают на вход элемент, на котором надо сбросить состояние. +//6. Сделай функции отмены для каждой элементарной операции. Создай служебные (не доступные снаружи анимастера) функции `resetFadeIn`, `resetFadeOut` и `resetMoveAndScale`. Все эти функции принимают на вход элемент, на котором надо сбросить состояние. `resetFadeIn` и `resetFadeOut` должны менять обратно css-классы в classList — каждая из них должны убирать все дописанные стили, устанавливая их в `null`: @@ -37,9 +37,9 @@ animaster().scale(element, 500, .8) element.style.заданныйАнимациейСтиль = null; ``` -7. Сделай кнопку reset для анимации `moveAndHide` по аналогии с кнопкой stop из одного из предыдущих пунктов. При нажатии на кнопку reset последующие шаги анимации должны отменяться аналогично stop из `heartBeating`, а элемент должен мгновенно вернуться в исходное состояние с помощью функций из предыдущего пункта. +//7. Сделай кнопку reset для анимации `moveAndHide` по аналогии с кнопкой stop из одного из предыдущих пунктов. При нажатии на кнопку reset последующие шаги анимации должны отменяться аналогично stop из `heartBeating`, а элемент должен мгновенно вернуться в исходное состояние с помощью функций из предыдущего пункта. -8. Сделай так, чтобы анимацию `move` можно было вызвать не только так: +//8. Сделай так, чтобы анимацию `move` можно было вызвать не только так: ``` animaster().move(element, 500, {x: 20, y: 20}); @@ -67,11 +67,11 @@ animaster().addMove(500, {x: 20, y:20}).play(element); - метод `play` должен принимать элемент, который будем анимировать, в качестве аргумента - метод `play` должен выполнять по очереди все шаги анимации, которые лежат в массиве `this._steps`, применяя их к переданному ему элементу. -9. Сделай так, чтобы метод `move` работал на написанных на предыдущем шаге методах. +//9. Сделай так, чтобы метод `move` работал на написанных на предыдущем шаге методах. -10. Сделай по аналогии с методом `addMove` методы `addScale`, `addFadeIn` и `addFadeOut`. Перепиши соответствующие анимации, чтобы они переиспользовали эти методы. +//10. Сделай по аналогии с методом `addMove` методы `addScale`, `addFadeIn` и `addFadeOut`. Перепиши соответствующие анимации, чтобы они переиспользовали эти методы. -11. Теперь у тебя должно быть возможным такое использование: +//11. Теперь у тебя должно быть возможным такое использование: ``` const customAnimation = animaster() @@ -88,9 +88,9 @@ customAnimation.play(element); В этот момент анимация запускается, элемент перемещается по четырем точкам и меняет размеры. В конце элемент возвращается в исходную точку. Если `customAnimation.play(element)` запустить несколько раз с разными элементами, то анимации должны работать. -12. Перепиши сложные анимации `moveAndHide`, `showAndHide` и `heartBeating` на использование новых методов `add...` и `play`. Чтобы сделать `showAndHide`, добавь метод `addDelay`, добавляющий шаг, в котором ничего не происходит в течение заданного времени. Чтобы сделать `heartBeating`, добавь в `play` в аргументы флаг `cycled`, означающий, что шаги анимации надо повторять бесконечно. +//12. Перепиши сложные анимации `moveAndHide`, `showAndHide` и `heartBeating` на использование новых методов `add...` и `play`. Чтобы сделать `showAndHide`, добавь метод `addDelay`, добавляющий шаг, в котором ничего не происходит в течение заданного времени. Чтобы сделать `heartBeating`, добавь в `play` в аргументы флаг `cycled`, означающий, что шаги анимации надо повторять бесконечно. -13. Метод `play` должен возвращать объект с методом `stop` (применяется для `heartBeating`) и `reset`. Метод `reset` должен возвращать элемент в исходное состояние (то, которое было до анимации): +//13. Метод `play` должен возвращать объект с методом `stop` (применяется для `heartBeating`) и `reset`. Метод `reset` должен возвращать элемент в исходное состояние (то, которое было до анимации): - если элемент был скрыт, то скрыть его - если был показан, то показать @@ -98,7 +98,7 @@ customAnimation.play(element); Для этого воспользуйся функциями отмены элементарных операций. -14. Добавь метод `buildHandler`, результат которого можно сразу передать в `addEventListener`: +//14. Добавь метод `buildHandler`, результат которого можно сразу передать в `addEventListener`: ``` const worryAnimationHandler = animaster() diff --git a/index.html b/index.html index 6546475..0e6341c 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,49 @@ +
+
+

Custom Animation

+
+
+
+
+
+

moveAndHide

+ + +
+
+

fadeIn

- +
+
+
+

showAndHide

+ +
+
+
+
+
+

heartBeating

+ + +
+
+
+
+
+

fadeOut

+ +
+
+

move

diff --git a/index.js b/index.js index 61e55f6..8870ef5 100644 --- a/index.js +++ b/index.js @@ -1,57 +1,224 @@ addListeners(); +let hb = null; +let mh; + function addListeners() { + 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) + .buidlHandler(); + + document.getElementById('TestBlock') + .addEventListener('click', customAnimation); + + document.getElementById('moveAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('moveAndHideBlock'); + mh = animaster().moveAndHide(block, 4000); + }); + document.getElementById('fadeInPlay') .addEventListener('click', function () { const block = document.getElementById('fadeInBlock'); - fadeIn(block, 5000); + animaster().addFadeIn( 5000).play(block,false); }); - + document.getElementById('moveAndHideReset') + .addEventListener('click', function () { + mh.reset(); + }); + document.getElementById('heartBeatingPlay') + .addEventListener('click', function () { + const block = document.getElementById('heartBeatingBlock'); + if (hb==null) + hb = animaster().heartBeating(block); + }); + document.getElementById('heartBeatingStop') + .addEventListener('click', function () { + if (hb != null) + hb.stop(); + hb = null; + }); + document.getElementById('showAndHidePlay') + .addEventListener('click', function () { + const block = document.getElementById('showAndHideBlock'); + animaster().showAndHide(block, 6000); + }); + document.getElementById('fadeOutPlay') + .addEventListener('click', function () { + const block = document.getElementById('fadeOutBlock'); + animaster().addFadeOut( 5000).play(block); + }); 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); }); document.getElementById('scalePlay') .addEventListener('click', function () { const block = document.getElementById('scaleBlock'); - scale(block, 1000, 1.25); + animaster().addScale( 1000, 1.25).play(block); }); } -/** - * Блок плавно появляется из прозрачного. - * @param element — HTMLElement, который надо анимировать - * @param duration — Продолжительность анимации в миллисекундах - */ -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 Step(name , duration ,resetFunc,data){ + this.name = name , + this.duration = duration , + this.resetFunc = resetFunc, + this.data = data } -/** - * Функция, увеличивающая/уменьшающая элемент - * @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 animaster(){ + + 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; + }; + + let stepCount = 0; + _steps = [] + + addMove = function (duration, translate) { + _steps.push(new Step('move', duration , 'resetMoveAndScale', translate)); + return this; + } + addScale = function (duration, ratio) { + _steps.push(new Step('scale', duration , 'resetMoveAndScale', ratio)); + return this; + } + addFadeIn = function (duration) { + _steps.push(new Step('fadeIn', duration , 'resetFadeIn')); + return this; + } + addFadeOut = function (duration) { + _steps.push(new Step('fadeOut', duration, 'resetFadeOut')); + return this; + } + + resetDelay = ()=>{} + + delay = (del) => { + setTimeout(()=>{} , del); + } + + addDelay = function(delay){ + _steps.push(new Step('delay',delay,'resetDelay')); + } + let cycleTimer; + play = (element , cycled ) => { + + let step = _steps[stepCount]; + if (stepCount < _steps.length) { + this[step.name](element, step.duration, step.data); + stepCount += 1; + cycleTimer = setTimeout(() => { this.play(element,cycled) }, step.duration); + } + else { + stepCount = 0; + if (!cycled) return; + this.play(element,true); + } + return { + stop : ()=>{ clearTimeout(cycleTimer);}, + reset : ()=>{ + clearTimeout(cycleTimer); + for (step of _steps){ + this[step.resetFunc](element); + } + } + } + } + + resetMoveAdnHide = (element) => { + resetMoveAndScale(element); + resetFadeOut(element); + } + heartBeating = function (element) { + this.addScale(500,1.4); + this.addScale(500,1); + let cycle = this.play(element,true); + return { stop: () => {cycle.stop(element)} }; + } + showAndHide = function (element, duration) { + this.addFadeIn(duration / 3); + this.addDelay(duration/3); + this.addFadeOut(duration / 3); + this.play(element); + } + moveAndHide = function (element, duration) { + this.addMove(2 * duration / 5, { x: 100, y: 20 }); + this.addFadeOut( 3 * duration / 5); + let play = this.play(element); + return {reset : ()=>{play.reset()}} ; + } + + fadeOut = (element, duration) => { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('show'); + element.classList.add('hide'); + } + + fadeIn= (element, duration) => { + element.style.transitionDuration = `${duration}ms`; + element.classList.remove('hide'); + element.classList.add('show'); + } + + move = (element, duration, translation) => { + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(translation, null); + } + + scale = (element, duration, ratio) =>{ + element.style.transitionDuration = `${duration}ms`; + element.style.transform = getTransform(null, ratio); + } + + buidlHandler = function(){ + let that = this; + return function () { + return that.play(this); + } + } + + return { + buidlHandler, + addMove, + addScale, + addFadeIn, + addFadeOut, + addDelay, + delay, + move, + scale, + fadeIn, + fadeOut, + moveAndHide, + resetMoveAdnHide, + resetMoveAndScale, + heartBeating, + showAndHide, + play + } +} function getTransform(translation, ratio) { const result = [];