Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Бурдин #44

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Бурдин #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
814c311
Бурдин
dimasikBurdin Oct 21, 2021
03830fe
Почти 10 рабочих
dimasikBurdin Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,42 @@

При клике на кнопку play возле названия анимации запустят ее.

1. Создай функцию с названием `animaster`
+++1. Создай функцию с названием `animaster`

2. Сейчас функции-анимации (`move`, `fadeIn`, `scale`) лежат в глобальной области видимости и имеют очень простые названия — их легко случайно переопределить. Поэтому спрячь их определения внутрь функции `animaster`. Функция `animaster` должна возвращать объект с методами для запуска разных анимаций. Сделай так, чтобы кнопки на страничке все еще показывали анимацию.
+++2. Сейчас функции-анимации (`move`, `fadeIn`, `scale`) лежат в глобальной области видимости и имеют очень простые названия — их легко случайно переопределить. Поэтому спрячь их определения внутрь функции `animaster`. Функция `animaster` должна возвращать объект с методами для запуска разных анимаций. Сделай так, чтобы кнопки на страничке все еще показывали анимацию.

Использовать анимации теперь можно будет вот так:

```
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`:

```
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});
Expand Down Expand Up @@ -67,9 +67,9 @@ 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. Теперь у тебя должно быть возможным такое использование:

Expand Down
30 changes: 30 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ <h3 class="animation-name">fadeIn</h3>
</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>
Expand All @@ -27,6 +34,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="moveAndHide">Play</button>
<button class="button" id="resetMoveAndHide">Reset</button>
</header>
<div class="block show" id="moveAndHideBlock"></div>
</div>
<div class="container">
<header class="container-header">
<h3 class="animation-name">showAndHide</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">heartBeating</h3>
<button class="button" id="heartBeating">Play</button>
<button class="button" id="heartBeatingStop">Stop</button>
</header>
<div class="block" id="heartBeatingBlock"></div>
</div>

<script src="index.js"></script>
</body>
Expand Down
Loading