Вопросы с меткой [анимация]

Анимация - это быстрое отображение последовательности изображений для того, чтобы создать иллюзию движения или изменения. Используйте данную метку вопросов по программной работе с анимацией, в сочетании с меткой используемой графической технологии и языка программирования. Для вопросов по анимации в CSS есть отдельная метка [css-animation]

Фильтрация
Сортировка
Метки
28 голосов
2 ответа
3k показов

Как взаимодействуют между собой viewport и viewBox

Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста? Взаимодействие между собой viewport ...
Alexandr_TT's user avatar
26 голосов
1 ответ
4k показов

Круговой процентный прогресс бар

Мне хотелось бы иметь круговой процентный показатель на моем сайте: В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано? У меня есть желтый круг в image-file, но может быть ...
Alexandr_TT's user avatar
69 голосов
18 ответов
7k показов

Анимация новогодней ёлочки

Наступает Новый год! Хорошо бы поднять настроение себе и другим. Копировать и рассылать открыточки с красивыми картинками и гифками, скаченными из сети, уже как-то не интересно. Хочется чего-то ...
Alexandr_TT's user avatar
1 голос
1 ответ
820 показов

Анимация движения с помощью безье C#

Мне необходимо анимировать движение чего-либо, для примера, Control'а, точнее его x координаты, так, чтобы x координата зависела от кривой безье EaseInOutQuint(x1=0.83, y1=0, x2=0.17, y2=1). (Прямо ...
Cordis's user avatar
  • 453
26 голосов
3 ответа
9k показов

Как сделать прозрачный текст?

Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
user avatar
7 голосов
1 ответ
693 показа

Анимация WPF при изменении свойства

Есть класс, представляющий игрока (привожу упрощенный вариант): class Player : INotifyPropertyChanged { public string Name { get; } int rank; public int Rank { get { ...
Андрей NOP's user avatar
4 голоса
4 ответа
1k показов

Плавный морфинг одного path в другой path

Как можно произвести анимацию формы одного объекта в другую форму. Имеется обычный круг, который оконтурил в объект path. И есть shape, который имеет многие кривые и совсем другую структуру. ...
MoloF's user avatar
  • 4,588
18 голосов
2 ответа
990 показов

Время окончательного применения свойств CSS

Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код). В ...
Adam Smith's user avatar
26 голосов
1 ответ
584 показа

Анимация пешеходных и других маршрутов на растровой карте

Возникла идея, как сделать анимацию похода с семьей в ТЮЗ г. Санкт-Петербурга, допустим для жителей Ленинградской области. Чтобы реализовать анимацию нескольких маршрутов. Маршрут движения будет на ...
Alexandr_TT's user avatar
17 голосов
1 ответ
3k показов

Анимация планет солнечной системы

У меня есть картинка планет солнечной системы. Получилось сделать с помощью команд <circle> орбиты и сами планеты. С помощью линейных и радиальных градиентов придать им объём. Нашел топик, ...
Alexandr_TT's user avatar
9 голосов
4 ответа
8k показов

Картинка вместо цвета текста css

Возможно ли с помощью каких-то способов заполнить изображением текст, вместо цвета.
user avatar
23 голоса
4 ответа
2k показов

Как нарисовать автомобиль с помощью команд SVG

Ниже изображение автомобиля в формате PNG. Я хочу сделать анимацию движения автомобиля вдоль какой-нибудь траектории. Желательно, чтобы колёса автомобиля вращались. Я понимаю, что для этого ...
Alexandr_TT's user avatar
20 голосов
3 ответа
615 показов

Как сделать Radial blur с помощью SVG?

Такой вопрос, как сделать Radial blur с помощью SVG? Порыв в гугле я понял что либо он в SVG не так называется, либо способа нет...
Евгений Старцев's user avatar
15 голосов
3 ответа
1k показов

Как при нажатии на кнопку `Stop` остановить анимацию и заморозить изображение

Анимация планетарного механизма. При нажатии на кнопку Stop анимация вращения шестеренок должна останавливаться и изображение "замораживаться". Но в реальности изображение возвращается к ...
Alexandr_TT's user avatar
13 голосов
2 ответа
2k показов

Стилизация и анимация текста SVG

Хотелось бы рассмотреть ряд примеров стилизации текста и как использовать pattern & mask в связке с какими-то эффектами. 1. "Гусеничный" stroke (linearGradient & animate): 2. Текст, ...
Arthur's user avatar
  • 4,572
11 голосов
2 ответа
1k показов

Анимация персонажа прыгающей девочки

На просторах интернета нашел гифку прыгающей девочки: Возник вопрос,- как реализовать эту анимацию с помощью CSS или SVG? Понятно, что нужно нарисовать спрайт, состоящий из отдельных кадров и ...
Alexandr_TT's user avatar
6 голосов
1 ответ
431 показ

Как данный пример анимации CSS сделать на чистом SVG SMIL

Как данный пример полностью реализовать на svg, без единой строчки css. css можно стилизовать только сам тег svg *, * ::after, *::before { margin: 0; padding: 0; } html, body { ...
Air's user avatar
  • 14.6k
4 голоса
2 ответа
774 показа

круглый векторный индикатор прогресса

Делаю индикатор прогресса. Изначально планировал поиграться градиентами, но оказалось(внезапно!) нужна поддержка IE9. Подскажите, пожалуйста, пример реализации или направление для поиска. Пробовал ...
zhurof's user avatar
  • 10.4k
4 голоса
2 ответа
181 показ

Управление SVG подключенного через img

Можно ли, с помощью JS, как-то управлять стилями, атрибутами svg, который подключен через тег img ?
Dmytro's user avatar
  • 6,756
3 голоса
1 ответ
2k показов

Рисование изогнутых линий cо стрелками SVG от одного div к другому div

Я хочу нарисовать две изогнутые линии со стрелками, используя SVG, чтобы соединить два элемента, чтобы показать, что линии идут вперед и назад, вот так: Я немного читал о SVG, но я не совсем ...
Alexandr_TT's user avatar
29 голосов
3 ответа
4k показов

Как создать эффект Воды?

Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья тут Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или ...
Randall's user avatar
  • 7,054
14 голосов
3 ответа
375 показов

Анимация появления карты с прорисовкой границ и с последующей закраской внутри

У меня есть файлы в форматах *.jpg, *.svg стран мира. Например Канады: Как сделать плавную анимацию появления карты с прорисовкой границ и с последующей закраской внутри?
Alexandr_TT's user avatar
8 голосов
2 ответа
2k показов

Анимация печати текста

У меня есть тег DIV с текстом внутри. Можно ли изменить текстовое содержимое в цикле с помощью печатающего эффекта, где он выводится, а затем идет назад, удаляя буквы и начиная все заново с нового ...
Alexandr_TT's user avatar
8 голосов
1 ответ
577 показов

Движение поезда с помощью SVG

У меня есть картинка, на которой изображено движение поезда по рельсам. Для создания анимации движения хочу использовать SVG. При всём этом у паровоза из дымовой трубы выходит дым. Как сделать ...
Arthur's user avatar
  • 4,572
8 голосов
3 ответа
1k показов

Плавный морфинг одного изображения в другое

Допустим, в начале на дисплее находится лого Wordpress, которое начинает плавно исчезать и одновременно с этим, на этом же месте, начинает прорисовываться лого Twitter. В конце процесса остается ...
Alexandr_TT's user avatar
8 голосов
4 ответа
945 показов

Анимация движения автомобиля по дорогам города

У меня есть изображение автомобиля, нарисованное средствами SVG: <svg id="svg" viewBox="0 0 1500 1000"> <!--Автомобиль--> <g id="car"> <!--Зеркала--> <path d="...
Sevastopol''s user avatar
  • 28.2k
7 голосов
3 ответа
673 показа

Как сделать morphing анимацию частей SVG элемента по наведению мышки?

Подскажите, есть ли возможность без подключения сторонних библиотек (GSAP / SVG-Morpheus) произвести изменения формы? Приведу пример: .game_block { position: relative; width: 100%; ...
BlackStar1991's user avatar
7 голосов
3 ответа
2k показов

Отрисовать спираль на сайте

Интересует какими лучше способами нарисовать (анимировать само рисование спирали) спираль Ферма на сайте? (Чтобы пользователь видел как она рисуется) Можно ли её сделать на чистом css? А если я хочу ...
Антон Кашин's user avatar
5 голосов
1 ответ
448 показов

Поиск ошибок в приложениях SVG

На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое ...
Alexandr_TT's user avatar
4 голоса
4 ответа
474 показа

Анимация svg глаз кролика с помощью атрибутов path "d" и "keyTimes"

Как можно анимировать svg картинку? Хочу чтобы кролик моргал глазами. #pa8{ width: 250px; height:250px; } <img id="pa8" src="https://vk.com/doc531961572_499477369?hash=a859da87b9143a35ba&...
Сергей Александров's user avatar
4 голоса
2 ответа
580 показов

Изменение толщины обводки svg треугольника только внутрь относительно осевой линии stroke

Есть равносторонний треугольник с произвольными координатами. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> <polygon fill="...
Floyat's user avatar
  • 87
4 голоса
0 ответов
137 показов

IE выполняет requestAnimationFrame после отрисовки, а не до

Кратко: В IE11 и Edge div в сниппете после клика становится зелёным, хотя не должен. Подробно: Рассмотрим следующую ситуацию: есть div чёрного цвета. При клике по нему мы запрашиваем ...
Qwertiy's user avatar
  • 124k
4 голоса
3 ответа
599 показов

Анимация контуров фигур svg

Я делаю анимацию контуров, но есть один элемент, у которого я не могу анимировать контур, поэтому хотел бы спросить ваше мнение, как это можно сделать иначе кроме анимации заливки? <svg ...
Anton Kolesnykov's user avatar
3 голоса
1 ответ
187 показов

Затухающая подсветка обновленного элемента в Listbox`е / WPF

Есть Listbox привязанный к коллекции, и отображающий одно поле из нее. При изменении в коллекции нужно сделать вспышку фона соответствующего элемента в списке. Класс коллекции примерно: public class ...
Рубик Юрий's user avatar
2 голоса
1 ответ
1k показов

Необходимо сделать анимацию заполнения дуги Svg

У меня есть кривая в SVG и необходимо заполнить её вдоль пути при наведении, может кто-нибудь помочь? Анимация для заливки должна быть другого цвета или может быть одинаковой с патчем. Я попытался ...
Alexandr_TT's user avatar
1 голос
1 ответ
1k показов

Плавный hover и при наведении на QPushButton добавление эффекта QGraphicsDropShadowEffect на Pushbutton

Заметил такую вещь, что если сделать обычный :hover на кнопку, то он резкий и без какой либо анимации. Я пробовал на :hover как-нибудь накинуть QGraphicsDropShadowEffect, но это не привело к успеху. Я ...
imapw_'s user avatar
  • 501
1 голос
1 ответ
317 показов

Wpf c# Анимация

Есть XAML анимация для кастомного текстбокса: <EventTrigger RoutedEvent="MouseDown"> <EventTrigger.Actions> <BeginStoryboard> ...
VeNNoM's user avatar
  • 115
23 голоса
4 ответа
1k показов

Как сделать баннер с капающим краном

Как сделать баннер с капающем краном. У меня есть изображение капающего крана Сценарий анимации Водопроводный кран, из которого тянется и падает капелька воды. Цикл повторяется несколько раз Кран ...
Alexandr_TT's user avatar
15 голосов
3 ответа
2k показов

Плавная смена (Анимация) Svg Path D координат

Здравствуйте! Есть svg path с координатами: M 8,21 L 12,21 L 17,26 L 17,10 L 12,15 L 8,15 L 8,21 z M 19,14 L 19,22 C 20.48,21.32 21.5,19.77 21.5,18 C 21.5,16.26 20.48,14.74 19,14 z M 19,11.29 C 21....
Yuri's user avatar
  • 16k
15 голосов
2 ответа
1k показов

Морфинг иконки внутри кнопки svg

Интересно было бы использовать тему плавного морфинга, то есть изменения контуров одной фигуры в контуры другой фигуры в svg кнопках. Дизайн следующий. В начальном состоянии кнопка имеет иконку - ...
Alexandr_TT's user avatar
14 голосов
11 ответов
44k показов

Нарисовать галочку средствами CSS

Можете подсказать, как нарисовать в CSS такую галочку(нужно именно нарисовать, а не вставить картинкой)?
Александр Агапов's user avatar
12 голосов
3 ответа
411 показов

Как анимировать рисование подобной фигуры?

Своял такой текст в illustrator вот такую штуку Так как сниппет ruSO не пропускает количество символов я выложил SVG в codepen _https://codepen.io/topicstarter/pen/YBVWKx Как сделать анимацию ...
Резидент Казахстана's user avatar
12 голосов
3 ответа
8k показов

Как нарисовать дугу на svg для сайта?

Как можно нарисовать такую дугу?
qwerty's user avatar
  • 331
11 голосов
2 ответа
265 показов

Как сделать анимацию чёрных силуэтов

Необходимо сделать анимацию пары черных силуэтов. Код svg: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="...
Alexandr_TT's user avatar
11 голосов
2 ответа
369 показов

Анимация лого WINTER BASH

Заканчивается сезон WINTER BASH 2020 Хотелось бы, как-то отметить это событие. На изображении цифрами отмечены, желаемые объекты для анимации Сценарий анимации: Генератор шляп. Должен неравномерно ...
Alexandr_TT's user avatar
11 голосов
7 ответов
288 показов

Как убрать объект в левом верхнем углу до начала анимации animateMotion?

Данный вопрос инспирирован ответом. Красный круг находится в левом верхнем углу до начала анимации animateMotion. Ниже пример кода: <div id="pathContainer4"> <button id="btn1" ...
Alexandr_TT's user avatar
10 голосов
2 ответа
371 показ

Анимация Кривошипно-шатунного механизма

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" baseProfile="full" ...
Alexandr_TT's user avatar
9 голосов
1 ответ
2k показов

Анимация персонажа с использованием svg совместно с параллаксом фона

Есть задача анимировать растровый спрайт, используя анимацию smil svg, идущего человека совместно с анимацией (параллаксом) фона. Картинка спрайта: Картинки фона гор, травы взяты с сайта: - ...
Alexandr_TT's user avatar
8 голосов
5 ответов
351 показ

Имитация смены изображений на экране TV

Идея данного вопроса возникла по мотивам ответа - "Позиционирование блока относительно фона" Эту картинку можно использовать для ответа В том ответе удалось поместить статичную картинку на ...
Alexandr_TT's user avatar
7 голосов
3 ответа
454 показа

Как реализовать анимацию плавного морфинга границ изображения?

Есть картинка, при ховере ее границы должны начать хаотично плавать, изгибаться, пока не убран курсор. Насколько понял, это должно быть связано с svg morphing, но примера не нашел. Только анимация ...
Dave Garrow's user avatar