diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..4ceb507
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1741689120056
+
+
+ 1741689120056
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 6546475..45d6a33 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,13 @@ fadeIn
+
+
+
+
+
+
diff --git a/index.js b/index.js
index 61e55f6..459ddb1 100644
--- a/index.js
+++ b/index.js
@@ -1,58 +1,130 @@
addListeners();
+
+function animaster() {
+ return {
+ /**
+ * Блок плавно появляется из прозрачного.
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ */
+ fadeIn(element, duration) {
+ element.style.transitionDuration = `${duration}ms`;
+ element.classList.remove('hide');
+ element.classList.add('show');
+ },
+
+ fadeOut(element, duration) {
+ element.style.transitionDuration = `${duration}ms`;
+ element.classList.remove('show');
+ element.classList.add('hide');
+ },
+
+
+ /**
+ * Функция, передвигающая элемент
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ * @param translation — объект с полями x и y, обозначающими смещение блока
+ */
+ move(element, duration, translation) {
+ element.style.transitionDuration = `${duration}ms`;
+ element.style.transform = getTransform(translation, null);
+ },
+
+ /**
+ * Функция, увеличивающая/уменьшающая элемент
+ * @param element — HTMLElement, который надо анимировать
+ * @param duration — Продолжительность анимации в миллисекундах
+ * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
+ */
+ scale(element, duration, ratio) {
+ element.style.transitionDuration = `${duration}ms`;
+ element.style.transform = getTransform(null, ratio);
+ },
+
+ moveAndHide(element, duration, translation) {
+ this.move(element, duration / 3, translation);
+ setTimeout(() => this.fadeOut(element, duration / 3), duration / 3);
+ },
+
+ showAndHide(element, duration) {
+ this.fadeIn(element, duration / 3);
+ setTimeout(() => this.fadeOut(element, duration / 3), duration / 3)
+ },
+
+ heartBeating(element, duration) {
+ // this.scale(element, duration / 2, 1.4);
+ // setTimeout(() => this.scale(element, duration / 2, 1), 500)
+ const interval = setInterval(() => {
+ this.scale(element, 500, 1.4);
+ setTimeout(() => {
+ this.scale(element, 500, 1);
+ }, 500);
+ }, 1000);
+ return {
+ stop: function () {
+ clearInterval(interval);
+ }
+ };
+
+ }
+ }
+}
+
function addListeners() {
document.getElementById('fadeInPlay')
.addEventListener('click', function () {
const block = document.getElementById('fadeInBlock');
- fadeIn(block, 5000);
+ animaster().fadeIn(block, 5000);
+ });
+
+ document.getElementById('fadeOutPlay')
+ .addEventListener('click', function () {
+ const block = document.getElementById('fadeOutBlock');
+ animaster().fadeOut(block, 5000);
});
document.getElementById('movePlay')
.addEventListener('click', function () {
const block = document.getElementById('moveBlock');
- move(block, 1000, {x: 100, y: 10});
+ animaster().move(block, 1000, {x: 100, y: 10});
});
document.getElementById('scalePlay')
.addEventListener('click', function () {
const block = document.getElementById('scaleBlock');
- scale(block, 1000, 1.25);
+ animaster().scale(block, 1000, 1.25);
});
-}
-/**
- * Блок плавно появляется из прозрачного.
- * @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, 5000, {x: 100, y: 10});
+ });
-/**
- * Функция, передвигающая элемент
- * @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('showAndHide')
+ .addEventListener('click', function () {
+ const block = document.getElementById('showAndHideBlock');
+ animaster().showAndHide(block, 5000);
+ });
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
- */
-function scale(element, duration, ratio) {
- element.style.transitionDuration = `${duration}ms`;
- element.style.transform = getTransform(null, ratio);
+ let heartAnimation;
+ document.getElementById('heartBeating')
+ .addEventListener('click', function () {
+ const block = document.getElementById('heartBeatingBlock');
+ heartAnimation = animaster().heartBeating(block, 1000);
+ });
+ document.getElementById('heartBeatingStop')
+ .addEventListener('click', function () {
+ if (heartAnimation) {
+ heartAnimation.stop();
+ heartAnimation = null;
+ }
+ });
}
+
function getTransform(translation, ratio) {
const result = [];
if (translation) {
@@ -62,4 +134,4 @@ function getTransform(translation, ratio) {
result.push(`scale(${ratio})`);
}
return result.join(' ');
-}
+}
\ No newline at end of file