Как реализовать хаотичное движение букв, которые на финише складываются в слово.
В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают хаотичное движение, затем буквы обратно складываются в слово.
С помощью Javascript это довольно просто сделать,- уже существуют такие скрипты.
Возможно ли реализовать такой же принцип, как в JS средствами HTML,CSSили SVG?
Сразу же в голову приходит такое решение.
С помощью средств HTML можно разделить слово на отдельные буквы:
Staсk
и затем с помощью css-animation, как-то их анимировать. Для придания реалистичности придется прописывать перемещение каждой буквы в несколько различных позиций.
Но это будут простыни кода.
Есть ли более эффективное решение без применения Javascript?
Решение SVG
В svg есть аналог HTML ,- S Он более функционален, но если пойти по пути решения, предложенного в вопросе, то тоже будет очень много кода.
Есть более эффективное решение, но чтобы понять его, наверное надо пойти от простого к сложному.
Анимация движения слова целиком
Команда SVG вывода слова на экран:
Stackoverflow
где xи y координаты первого символа слова.
Для анимации перемещения слова, нужно как-то динамически изменять или считывать эти координаты.
Но в SVG нет переменных, тем более массивов как в JS
Но есть возможность организовать их подобие в команде
Цифры через точку с запятой указывают несколько положений по оси Х, которое будет последовательно занимать слово.
Аналогичная команда пишется для координаты Y.
Ниже полный код для перемещения слова целиком:
Разбивка слова на отдельные буквы
В SVG есть очень мощное средство для этой цели. Оно скрыто в команде
так как каждый символ является векторным объектом, то у него есть свои координаты, используя которые, можно разбить слово на отдельные буквы.
Если продолжать аналогию с JS, то это будет похоже на двумерный массив, где кажды
столбец это изменяемые значения перемещения, соответствующего этому столбцу символа.
S t a c k o v e r f l o w
1поз. |200 233 266 299 332 365 400 431 464 497 530 563 596;
2поз. |100 600 200 365 700 465 465 563 530 398 431 850 900;
3поз. |200 500 900 950 150 531 300 620 150 266 365 650 900;
4поз. |332 233 820 300 800 633 200 670 300 850 800 530 266;
5поз. |464 900 900 900 820 670 430 900 530 600 233 365 100;
6поз. |332 100 100 100 500 100 800 563 900 700 900 100 100;
7поз. |200 233 266 299 332 365 400 431 464 497 530 563 596
Другими словами:
первый столбец, первая строка,- это координата x=200 в первой позиции перемещения, первого символа слова - "S"
Затем символ "S" перемещается на 2-ю позицию x=100 и т.д. до возвращения на первоначальное место в поз.7
Второй столбец для второго символа "t", который начинает перемещение с первой позиции x="233" переходит на 2-ую позицию x="600"
В процессе анимации происходит считывание первой строки, все символы расставляются в соответствии с указанными для них координатами.
Далее считывается вторая строка, символы независимо друг от друга занимают свои места
Каждая строка должна быть отделена от другой строки точкой с запятой. У последней строки точка с запятой не указывается.
По аналогии точно такая же таблица составляется для задания координаты Y.
Обе команды предназначенные для изменения координат X и Y начинают работат
одновременно, обеспечивая тем самым одновременное изменение координат в каждой позиции движения, для каждой буквы.
Ниже код анимации иммитируюшей хаотичное движение букв:
Получился очень мощный инструмент для этого вида анимации. Можно поиграться с ним
изменять скорость, время начала, добавляя события сделать анимацию интерактивной, изменяя время продолжительности для анимации можно достичь эффекта, "горизонтальной" и "вертикальной парковки" букв на финише анимации.
Можно заменить текст анимации на другой. Если будет короче исходного, то будет работат
точно также. Если будет длиннее 13 символов, то лишние символы будут приклеены к 13 символу и будут двигаться вместе с ним одной группой.
Ниже примеры:
Горизонтальная парковка букв
Эффект достигается разницей времени выполнения двух анимаций. Горизонтальная анимация на 1сек. длится больше.
Вертикальная парковка букв
Подставляем другие буквы:
Ответ 4
Пример с использованием GSAP и псевдо-рандомайзом. Все параметры, начиная от скорости каждого шага и до временной функции настраиваемые, очень удобная штука.
var master = new TimelineMax(),
boxWidth = $('body').outerWidth(),
boxHeight = $('body').outerHeight(),
duration = 3;
master.add(step1())
.add(step2())
.add(step3());
function step1() {
var letters = new TimelineMax(),
letter = $('span'),
minX = -$('div').offset().left,
minY = -$('div').offset().top,
maxX = boxWidth - $('div').offset().left,
maxY = boxHeight - $('div').offset().top;
letter.each(function(index, $item) {
TweenLite.set($item, {
left: Math.random() * (maxX - minX) + minX,
top: Math.random() * (maxY - minY) + minY
});
letters.to($item, duration, {
left: Math.random() * (maxX - minX) + minX,
top: Math.random() * (maxY - minY) + minY,
ease: Linear.easeNone
}, 0);
});
return letters;
}
function step2() {
var letters = new TimelineMax(),
letter = $('span'),
minX = -$('div').offset().left,
minY = -$('div').offset().top,
maxX = boxWidth - $('div').offset().left,
maxY = boxHeight - $('div').offset().top;
letter.each(function(index, $item) {
letters.to($item, duration, {
left: Math.random() * (maxX - minX) + minX,
top: Math.random() * (maxX - minX) + minX,
ease: Linear.easeNone
}, 0);
});
return letters;
}
function step3() {
var letters = new TimelineMax(),
letter = $('span');
letter.each(function(index, $item) {
letters.to($item, duration, {
left: 0,
top: 0,
ease: Linear.easeNone
}, 0);
});
return letters;
}
body {
min-height: 100vh;
display: flex;
margin: 0;
overflow: hidden;
}
div {
margin: auto;
}
span {
font-size: 22px;
position: relative;
}
Комментариев нет:
Отправить комментарий