Всем привет, всем здоровейте! Я тот самый автор первого интерактивного челленджа на Пикуко challenge?. Многих стал интересовать вопрос, как создаются такие челленджи. Пишу этот пост специально для этого. Попытаюсь объяснить максимально просто и доступно, чтобы каждый при желании смог сделать что-то подобное.
* * *
Для начала, я так понимаю, что многие думают, что SVG файл который надо загружать при создании теста - это что-то сложное, какой-то засекреченный формат, который надо находить в интернете готовым или еще что-то подобное.
Но это не так. SVG - это буквально язык кружочков и квадратиков. Можете воспринимать его именно так, это значительно упростит вам жизнь. Давайте разберем простой пример.
* * *
Слева - код, справа - то как он выглядит.
Вот, например, как можно сделать простенького призрака. Первая строчка - черный квадрат занимающий всё доступное пространство. Иначе говоря фон.
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
где x и y - координаты начала, т.е. верхнего левого угла; width и height - длинна и ширина квадрата. Здесь можно указать во многих величинах, но вам понадобится только px - пиксели и % - проценты от размера полотна. Можно в прицепе обойтись только пикселями. fill - цвет заливки. Можно указать как и стандартные black, red, green и тд. Так и HEX-коды #000000, #ff0000, #00ff00 и тд. Кто не знает что это такое, просто знайте что, в любой онлайн палитре можно скопировать код цвета и прописать его фигуре. Также есть circle(круг), но там вместо x и y используются cx и cy. То есть центы окружности. r - радиус. И самое главное - ellipse. Это тот же самый круг, но вместо одного радиуса r есть rx и ry, то есть грубо говоря кривой круг, овал. Посмотрите на рот призрака. Вот это ellipse rx="10" ry="6".
Помимо этих основных фигур также есть и другие, например, line(линии), polygon(многоугольники) и path(кривые). Но их можете освоить самостоятельно при желании. Вы вполне можете обойтись и без них.
И вот вы, весь такой веселый, нарисовали какого-нибудь призрака и бежите вставлять его на Pikuco, но вдруг видите вот это:
Вышеупомянутый призрак после загрузки на Pikuco
Вы ещё даже не успели начать, а злой admin уже засунул палки во все колеса, кроме одного. Для стандартного режима челлендж, к которому мы все так привыкли есть одно простое правило, которое вы все знаете: что не отгадано то серое. Но что тогда это за овалы и почему они не серые? Это ellipse. Так уж вышло, что admin запретил окрашивать абсолютно всё, кроме ellipse и обводки(stroke но ооб этом позже). За что я ему чрезмерно благодарен, ведь без этой маленькой лазейки ничего бы не вышло. И что тогда делать вы спросите, а я отвечу - элипсы, элипсы и еще раз элипсы. Да. Вы всё правильно поняли. 90% всего того что вы видели в моем тесте это элипсы. Фон - это огромный элипс в центре. Лучи солнца это элипс, у которого с cx=5 и cy=50, т.е очень вытянутый. Безумие? Возможно, но а как иначе.
Вы еще даже не успели начать, а злой admin уже засунул палки во все колеса, кроме одного. Для стандартного режима челленджа, к которому мы все так привыкли, есть одно простое правило, которое вы все знаете: что не отгадано, то серое. Но что тогда это за овалы и почему они не серые? Это ellipse. Так уж вышло, что admin запретил окрашивать абсолютно всё, кроме ellipse и обводки (stroke, но об этом позже). За что я ему чрезмерно благодарен, ведь без этой маленькой лазейки ничего бы не вышло. И что тогда делать, вы спросите, а я отвечу: элипсы, элипсы и еще раз элипсы. Да. Вы всё правильно поняли. 90% всего того, что вы видели в моем тесте, это элипсы. Фон - это огромный элипс в центре. Лучи солнца - это элипс, у которого cx=5 и cy=50, то есть очень вытянутый. Безумие? Возможно, но а как иначе?
Не буду томить. Помимо цветов на основные фигуры, admin вырезал еще 70% всего SVG. Грустно? Да. Но многие из них можно восстановить костылями. Например, квадрат. Помните, я сказал, что цвет работает помимо круга еще и на обводку - stroke. Если говорить на простом языке, то обводка это буквально обводка. У каждой фигуры можно прописать помимо цвета, координат и размера еще кучу параметров, и один из них stroke.
Вот кому надо код этого SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="450" viewBox="0 0 300 150">
<!-- С обводкой: --><rect x="20" y="20" width="100" height="100" fill="#ff6666" />
<circle cx="70" cy="170" r="50" fill="#6666ff" />
<!-- С обводкой: -->
<rect x="180" y="20" width="100" height="100" fill="#ff6666" stroke="#000000" stroke-width="10" />
<circle cx="230" cy="170" r="50" fill="#6666ff" stroke="#000000" stroke-width="10" />
</svg>
И вот что делать, если вам прям очень нужен прямоугольник? Да всё просто. Сделайте тонкую линию с огромной обводкой.
* * *
Поздравляю, сейчас вы за 10 минут узнали то, что я методом проб и ошибок узнавал не один час. Теперь вы можете создавать всё те же обычные челленджи, но, например, сделать цвет океана на карте мира синим. Но полагаю, вы сюда не за этим пришли. Как же взаимодействовать с курсором? Здесь надо освоить еще одну небольшую лазейку, которую забыл удалить админ. Это стили, или как их называет компьютер <style>. Они нужны для создания движения, анимации, а также некоторых других функций, но для простой игры они вам не понадобятся.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 300 150">
<style>
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
.animated {
animation: pulse 1s infinite alternate;
transform-origin: 100px 100px;
}
</style>
<rect x="50" y="50" width="100" height="100" fill="#6666ff" class="animated" />
</svg>
Поверьте, он движется, честно
К сожалению, я не могу на одном скриншоте показать работоспособность этого SVG. Кто хочет, вставьте этот код в любой онлайн SVG reader. Всё кажется громоздким и сложным, но на самом деле всё очень просто. После того как вы сделали какую-либо фигуру, допишите в конце class="название класса". В моем случае это animated, но вы можете написать что угодно. Затем сверху между <style> и </style> вы должны прописать свойства этого самого class. На самом деле в нем может быть любые свойства объекта: цвет, обводка, анимация, прозрачность и тд. Но так как всё это мы можем прописать и в самом объекте, для простоты не будем этого делать. Оставим только анимацию. Так ладно, давайте разбираться, как это делать:
1. Вы пишите название класса с точкой в начале и фигурными скобками в конце, например, .animated {}
2. Между фигурными скобками для удобства нажимаем enter и с новой строки (находясь внутри скобок) присваиваем анимацию. Для этого вы пишите animation: *название анимации* *сколько секунд она длится*s infinite alternate; Прошу заметить точку с запятой в конце, ни в коем случае не забывайте ее ставить. Название может быть любое. infinite - это сколько повторять анимацию. alternate - делает так, чтобы после конца анимации она повторяла всё то же самое в обратном порядке, чтобы вернуться в начальное положение. На простом языке анимация смещения на 100px без alternate сдвинет его вправо, а затем моментально вернет в изначальное положение. Здесь есть миллион разных свойств по типу задержки, сглаживания и тому подобного, но если я буду их все описывать, то вы будете читать этот пост до завтра.
3. transform-origin: 100px 100px; - это центр, откуда играть анимацию. Легко понять, например, на вращении. Если укажете координаты центра самого объекта, он будет крутиться на месте. Если укажете любые другие координаты, он будет вращаться вокруг них как бы по орбите.
4. Мы подошли к самому главному - сама анимация. Вы также как и в случае с class должны прописать ей свойства. Но немного другой синтаксис. Вы пишите @keyframes *название анимации* {}. Важно: название анимации должно совпадать с тем, что вы прописали в классе.
5. Прописывайте саму анимацию. Ставьте просто, в какой момент и что должно стать с объектом. Например:
0% { transform: scale(1); }
100% { transform: scale(1.2); }
Значит, что в самом начале на 0% объект будет изменен до своего стандартного размера. То есть не изменится. А вот в самом конце на 100% увеличится в 1.2 раза. Учитывая infinite и alternate, он будет бесконечно увеличиваться и уменьшаться.
Помимо scale() есть еще rotate(_deg), где вместо подчеркивания вы пишите градус. translateX(_px) для смещения по X и translateY(_px) для смещения по Y. Этого вам хватит на большинство идей. Также есть и другие анимации по типу прозрачности и смены цвета, но опять же в другой раз об этом.
Вот вам картинка, чтобы не было "стен текста". Хотя как тут без них
* * *
Если вы дочитали до этого момента, то вы освоили 80% всего, что необходимо. Остается последнее, самое простое, но не менее важное - якорь. Многие, возможно, заметили, что при нажатии ЛКМ в моем челлендже в конце ссылки меняется значение. Это и есть якорь. Грубо говоря, мы просто добавляем в конец ссылки что-то, а потом смотрим: если в конце ссылки есть это "что-то", то, например, вывести какую-нибудь менюшку. Всё очень просто, но вот для реализации придется освоить несколько нововведений.
Cамая простая реализация якоря
Что здесь происходит? Изначально на экране 2 кнопки. Если нажимаете первую, выводится ЭКРАН 1. Если нажимаете на вторую, ЭКРАН 2. Вы уже должны понять большую часть кода за исключением этих строк:
* * *
Вот мы подошли к самому концу. Самые последние завершающие функции, которые расширят ваш инструментарий. И первое, о чем хочется сказать, это :hover. Используется в стилях также, как :target, но срабатывает при наведении курсора на объект. Например, в моем тесте на третьем уровне курсор надо было держать в белом круге. Я просто проигрываю анимацию только тогда, когда курсор на круге. Если он выходит, то анимация сбросится в нулевой кадр.
Если курсор на зеленом круге, то синий круг увеличивается и краснеет
Забыл то, без чего вы даже круг не сделаете. Весь код должен находиться между <svg xmlns="http://www.w3.org/2000/svg" width="ширина" height="высота"> и </svg>. Скажу так, полотна 1000х1000px хватит с головой, так как это размер видимой области. Но вы также можете работать и за её пределами.
Также прошу перед началом создания теста взять во внимание пару советов:
Очень жду похожих работ от вас! Креативных людей на Пикуко хватает. Если есть желание, а теперь и возможность - творите. Надеюсь, в скором времени увидеть эту самую "новую эру челленджей". Также обращение к дорогому и неповторимому admin: не надо, пожалуйста, запрещать эти лазейки. Они прекрасны. Всем флаг в руки, если через месяц никто ничего не сделает, я обижусь.
Камета?28
