Анимированные сердечки станут интересным украшением вашего сайта, особенно в такие праздники, как День святого Валентина. Ниже приведены некоторые способы их легкого получения и способы их эффективного использования.
Олдскульная анимированная графика с сердечками
Идея анимации проста — создать серию картинок (так называемых «кадров»), на которых один и тот же объект показан в несколько ином положении. Показывайте эти кадры последовательно, и зритель обманет себя, думая, что это движущийся объект. Для этого очень хорошо работал ранний формат веб-изображений, известный как «GIF» (сокращение от «Формат графического изображения»). Это связано с тем, что GIF-файлы предназначены для рисунков, а не фотографий, поэтому разработчики могут уменьшить размер файла, по-прежнему показывая некоторые довольно яркие изображения .
Вы все еще можете найти анимированные GIF-файлы в Интернете, обычно доступные бесплатно, на таких сайтах, как Hellas Multimedia . Однако три вещи в изображениях могут сделать их непригодными для вашего проекта:
- Поскольку это рисунки с очень низким разрешением, они кажутся грубыми, неровными.
- Чтобы сохранить небольшой размер файла, все изображения очень маленькие, и если вы попытаетесь изменить их размер, вышеупомянутое низкое разрешение сделает их еще хуже.
- Каждый анимированный GIF-файл имеет длину всего около четырех или пяти кадров, что означает, что сама анимация довольно дерганая. Как правило, чем меньше кадров, тем менее плавным будет движение.
Для справки, фильмы имеют двадцать четыре кадра в секунду, чтобы подразумевать «настоящее» движение, а телевидение использует почти тридцать. Однако создание такого количества кадров в анимированном GIF — утомительный процесс.
Путь Web 2.0: Flash и DHTML
По мере развития графики в Интернете появились более эффективные способы создания анимированной графики сердца . Вероятно, наиболее широко используемым и гибким инструментом будет Adobe FLASH, который превратился из простого инструмента анимации в мощную платформу программирования.
FLASHy анимации
Есть два основных недостатка использования FLASH для анимированной графики сердца. Во-первых, это может быть излишним; если единственная анимация, которая вам нужна, — это сердце, то создание FLASH-приложения, его программирование, загрузка и настройка вашей веб-страницы для его отображения может оказаться больше, чем вы действительно хотели бы возиться.
Во-вторых, не на всех веб-страницах отображается FLASH. Несмотря на то, что он широко используется (на него полагаются популярные сайты, такие как YouTube), Flash также связан с несколькими угрозами безопасности в Интернете, и некоторые люди предпочитают не устанавливать его на свой компьютер.
Однако вы можете найти стандартные FLASH-анимации сердец и других вещей в Интернете по довольно низким ценам и с несколькими вариантами (например, заставить сердца следовать за мышью по экрану).
Динамический HTML
Второй метод, используемый для создания анимированной графики сердца, заключается в использовании преимуществ новых стандартов CSS и DHTML. В этом методе анимация может по-прежнему представлять собой серию изображений или это может быть одно изображение, которое затем обрабатывается и изменяется с течением времени с помощью кода DHTML. Чтобы привести простой пример, код может указать браузеру сначала показать изображение сердца в верхней части экрана, а затем увеличивать вертикальные координаты местоположения на один пиксель каждую долю секунды. Это та же теория, что и в GIF-анимации, но вместо того, чтобы рисовать отдельные картинки, работу выполняет компьютер.
DHTML требует некоторых знаний в области кодирования, таких как Javascript, но его достаточно легко изучить в Интернете . Или вы также можете использовать готовые сценарии анимации .
Какой бы метод вы ни использовали, помните, что есть тонкая грань между милой анимацией и раздражающей, поэтому используйте их с осторожностью и убедитесь, что они не искажают основную идею вашего сайта.