Давайте посмотрим на окончательный эффект взаимодействия SVG:
(Чтобы ощутить фактический эффект основной страницы официальной учетной записи, отсканируйте код внизу этой статьи, чтобы подписаться на официальную учетную запись)
1 Зачем официальным аккаунтам нужен интерактивный SVG
Чтобы технология была эффективной, она должна иметь сценарий целевого приложения. Почему многие официальные аккаунты начинают использовать SVG и отказываются от H5?
Есть две основные причины:
- Стоимость производства H5 высока, и он требует определенного цикла разработки и поддержки сервера.
- Переход с текстовой страницы на страницу H5 — это еще один шаг, который легко может привести к потере пользователя.
Конечно, для сложных взаимодействий или большего количества функций H5 нужно разрабатывать отдельно.
Хотя SVG может обеспечить только простое взаимодействие, он может увеличить интерактивный опыт, не слишком отвлекая внимание пользователя от контента.Он по-прежнему востребован во многих сценариях.
2 сценария применения
Суть взаимодействия SVG по-прежнему основана на анимации SVG SMIL в сочетании с событием щелчка SVG для достижения очень простого взаимодействия.
Хотя достигнутый эффект очень ограничен, все еще есть много возможностей для игры, например, в следующих сценариях применения:
- [Продвижение автомобиля] После нажатия на автомобиль, автомобиль будет двигаться, и после прохождения определенного места будет отображаться определенная функция или копия названия места.
- 【Психологический тест】После выбора варианта появится результат выбора.
- [Удалить красные конверты] Удаляйте красные конверты слой за слоем, чтобы отобразить самое внутреннее содержимое.
- [Разблокировка паролем] После нажатия указанных цифр отобразится содержимое разблокировки.
- [Отгадай загадку фонаря] Нажмите, чтобы отобразить содержимое, похожее на флоп.
Давайте начнем объяснять весь процесс создания этой демонстрации.
3 Производство материалов
3.1 Фоновое изображение
Используйте PS и другое программное обеспечение для создания фонового изображения SVG, рекомендуемая ширина 640~750 пикселей, она также может быть больше, но размер файла также увеличится. В этом примере создается фоновое изображение в формате jpg размером 640 x 800 пикселей:
3.2 SVG-материал
Вы можете перейти в векторную библиотеку Alibaba (www.iconfont.cn/) скачать сайт. Вы также можете использовать ИИ, чтобы сделать это самостоятельно. Но вам нужно обратить внимание на контроль размера изображения SVG. Размер изображения SVG — это область щелчка, поэтому контролируйте пустое пространство на изображении.
Эта демонстрация загружает фейерверк в формате SVG из векторной библиотеки Ali.После загрузки он открывается с помощью ИИ для уменьшения размера изображения:
3.3 Экспорт SVG
Поскольку редактор WeChat не позволяет встраивать<style><script>тег, поэтому при экспорте SVG через AI нужно сделать следующие настройки:
Выберите «Стили как атрибуты презентации», чтобы экспортированный SVG не содержал<style>, а стиль элемента также задается через атрибут tag вместо использования встроенного css стиля.
4 Создание SVG
4.1 Базовая структура SVG
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>
Все стили здесь являются базовыми CSS и подробно описываться не будут.
В основном поговорим об атрибуте viewBox:
viewBox="x, y, width, height"
x, y управляют смещением всех элементов в SVG (не влияет на фоновое изображение SVG).
Ширина и высота — это не фактическая ширина и высота SVG, а «разрешение» в SVG. Чем больше ширина и высота, тем меньше элемент в SVG, и наоборот, тем больше элемент (не влияет на фоновое изображение SVG).
Рекомендуется установить для x и y viewBox значение 0, а для ширины и высоты установить размер фонового изображения.
4.2 Поместите текст
использовать сначала<text>Добавить текст:
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+ <text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
</svg>
Отрегулируйте положение, отрегулировав x и y, заполните цветом текста, а стиль задайте размер шрифта.
4.3 Добавить текстовую анимацию
Теперь реализуем эффект мерцания текста. Здесь нужно использовать<animate>а также<g>Этикетка.
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
<text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
+ </g>
</svg>
представлять<animate>:
attributeName, — свойство управления анимацией, здесь — прозрачность прозрачности.
beginЭто время начала анимации, которое можно понять как время задержки. 0s означает начать анимацию немедленно. Это также может быть набор значений, разделенных с запятой, такой как Beigin = «3s; 5s», что означает, что анимация начинается после 3S, а анимация перезапускается после 6s (если предыдущая анимация не закончится, это остановится и начну с самого начала немедленно).
dur, — время анимации, чем меньше dur, тем быстрее анимация.
values, указывающее на изменение значения атрибута, заданного атрибутом attributeName, который может быть одним значением или несколькими значениями, разделенными точкой с запятой, где «1;0;1» означает «непрозрачный->прозрачный->непрозрачный», то есть мерцание эффект.
repeatCount, указывающее количество повторений анимации, неопределенное = бесчисленное количество раз
<g>Метка очень проста, она состоит в том, чтобы объединить обернутые элементы, чтобы анимировать только цели.<g>Элементы внутри тоже выполняют анимацию.
Эффект следующий:
4.4 Извлечение кода фейерверка из SVG
Откройте файл SVG, сгенерированный ИИ, и возьмите только код векторного пути фейерверка:
4.5 Добавить петарды
Добавьте код фейерверка, используйте его, чтобы обернуть его, а затем отрегулируйте положение, изменив перевод.
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
文字代码（略）
</g>
+ <g style="transform: translate(140px, 580px);">
+ <path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />
+ <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />
+ <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+ <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />
+ <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+ <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />
+ <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />
+ </g>
</svg>
4.6 Создание SVG-карты желаний
Сделайте SVG-карту желаний через AI, не забудьте преобразовать текст в вектор с помощью Command+Shift+O. Затем следуйте разделу 3.3, чтобы экспортировать SVG.
4.7 Добавление желаний
Карта желаний отображается после того, как петарда поднимется в небо, она фактически закрывается перед хлопушкой, и петарда не исчезает. Поэтому код карты желаний следует писать после кода петарды. Обратитесь к главе 4.4, чтобы извлечь код карты желаний из SVG и настроить положение Добавленный код выглядит следующим образом:
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
文字代码（略）
</g>
<g style="transform: translate(140px, 580px);">
爆竹矢量代码（略）
</g>
+ <g style="transform: translate(120px, 560px);">
+ 愿望牌矢量代码（略）
+ </g>
</svg>
Эффект следующий, карта желаний полностью блокирует петарду:
4.8 Установить начальный атрибут карты желаний
Так как начальное состояние карты желаний не невидимо, непрозрачность установлена на 0.
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
文字代码（略）
</g>
<g style="transform: translate(140px, 580px);">
爆竹矢量代码（略）
</g>
M <g style="transform: translate(120px, 560px);opacity: 0;">
愿望牌矢量代码（略）
</g>
</svg>
5 Взаимодействие кликов SVG
5.1 Вознесение петард
Чего мы хотим добиться, так это «одним кликом», петарда летит в небо, а затем появляется карта желаний. Петарды и карты желаний сгруппированы вместе.
Затем используйте щелчок реализации, чтобы запустить анимацию.
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
文字代码（略）
</g>
+ <g>
+ <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
<g style="transform: translate(140px, 580px);">
爆竹矢量代码（略）
</g>
<g style="transform: translate(120px, 560px);opacity: 0;">
愿望牌矢量代码（略）
</g>
+ </g>
</svg>
Объяснение ключевых атрибутов:
type, значением attributeName="transform" может быть перевод, масштабирование, поворот, skewX, skewY.
fill, как заполняется пробел в анимации. Поддерживаемые параметры: заморозить, удалить. remove — это значение по умолчанию, означающее, что анимация заканчивается и возвращается к тому месту, где она началась. замораживание означает, что анимация остается в том состоянии, в котором она закончилась.
restart, поддерживаемые параметры всегда, whenNotActive, никогда. always — значение по умолчанию, означающее, что анимация выполняется каждый раз заново; whenNotActive означает, что анимация не может быть перезапущена во время ее выполнения; never означает, что анимация выполняется только один раз.
begin, время задержки, как было сказано выше, сюда добавить клик, что означает, что он срабатывает сразу после клика, а клик+2 означает, что он срабатывает через 2 секунды после клика.
Теперь мы добились эффекта вознесения в небо после нажатия петарды, но карта желаний по-прежнему невидима. Здесь мы используем геймплей «щелчок + время».
5.2 Отображение карты желаний
Добавьте его на карту желаний.Поскольку анимация петард, поднимающихся в небо, составляет 0,5 с, нажмите +0,5 только для отображения карты желаний после окончания анимации петард.
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
文字代码（略）
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
<g style="transform: translate(140px, 580px);">
爆竹矢量代码（略）
</g>
<g style="transform: translate(120px, 560px);opacity: 0;">
+ <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
愿望牌矢量代码（略）
</g>
</g>
</svg>
※Примечание. Обратите внимание на иерархическую связь между элементом с begin=click и элементом с begin=click+0,5. Прежде всего, элемент click и элемент click+0.5 должны находиться в одном и том же
<g>Во-вторых, уровень элемента click+0,5 глубже, чем уровень элемента click, поэтому он может правильно соответствовать одному и тому же событию click.
5.3 Завершите оставшиеся петарды
Для оставшихся двух хлопушек просто выполните описанные выше шаги, чтобы заменить изображение карты желания, а затем отрегулируйте положение элементов.
6 Импорт официального аккаунта WeChat
6.1 Загрузить материал фонового изображения
Для фонового изображения в приведенном выше коде мы используем локальный путь, который необходимо загрузить на фон WeChat, чтобы получить онлайн-адрес. Войдите на общедоступную платформу WeChat, нажмите на управление материалами->изображение->загрузить слева:
6.2 Импорт тела статьи WeChat
Чтобы создать новое графическое сообщение, сначала введите заголовок и автора, а также загрузите обложку. Затем введите две строки текста в текстовую область (WeChat требует, чтобы текст содержал текст).
Откройте инструмент отладки Chrome и найдите вторую строку текста:
После этого вы можете опубликовать предварительный просмотр.
6.3 Примечания
Редактор WeChat имеет множество «скрытых правил» по умолчанию, которые могут отклонить код, который мы встраиваем. В случае отклонения код, который мы встраиваем, будет удален или заменен другими тегами. Вот список «скрытых правил», которые я разработал.
- на этикетке
backgroundВ url() функции url() адрес нельзя заключать в кавычки, и ни одинарные, ни двойные кавычки не будут работать, иначе он будет отфильтрован редактором WeChat. - не может быть на этикетке
id - не положено
<style><script><a>Этикетка.
Последующие новые открытия будут продолжать обновляться.
6.4 Странные ошибки и навыки
- После нажатия элемента на официальной странице тела учетной записи клиента WeChat для Android и выполнения движущейся анимации на элементе может появиться странная рамка. необходимо передать задействованным элементам
<g>Set Style = «Наброски: нет», включая<g>все дети внутри<g>.
- Центр изображения SVG
При проектировании SVG с ИИ лучше всего установить центр элемента в средней точке SVG, иначе при реализации анимации поворота отклонение центра круга вызовет проблемы с поворотом элемента. Хотя положение центра круга можно отрегулировать двумя последними параметрами от и до, определить точное положение вручную очень сложно.
<animateTransform attributeName="transform" type="rotate" from="0 41.5 43" to="360 41.5 43" dur="3s" repeatCount="indefinite">
6.5 Ссылки
Блог Чжан Синьсюй "Подробное объяснение сверхмощной анимации SVG SMIL"
Ссылка SVG
6.6 Полный HTML-код
Пожалуйста, перейдите на мой github, чтобы увидеть:GitHub.com/Yueword32/ для…
Выше представлено содержание этого выпуска, спасибо за просмотр. Своевременно получайте свежие интересные статьи, пожалуйста, обратите внимание на мой личный публичный номер ^_^