Анимированная инфографика SVG Javascript для временной шкалы

Я подумываю сделать анимированную инфографику на основе технологий SVG, Javascript и CSS временной шкалы. У меня есть большой опыт в программировании, но не так много в использовании этих технологий для анимации чего-либо (это означает, что вы, возможно, могли бы сказать мне, что я должен подойти к проблеме по-другому).

С помощью Inkscapeя могу создать большое изображение SVG (большое по горизонтали, а также относительно большое по размеру файла, если только я не избегаю встраивания пиксельной графики). SVG содержит множество полей для событий (групп SVG), которые я хотел бы увеличить при нажатии, чтобы можно было увидеть детали. Я думаю, я мог бы создать рабочую анимацию, которая показывает весь SVG и позволяет увеличивать все блоки по отдельности.

Однако, поскольку временная шкала очень длинная, необходимо масштабировать ее так, чтобы в каждый момент времени была видна только ее часть. Должны быть какие-то кнопки, которые позволяют пользователю перемещаться влево или вправо, чтобы отображать более ранние или более поздние события. Но тем не менее, всякий раз, когда пользователь щелкает одно из событий, оно должно увеличиваться.

Вот концепция в картинках (меньший большой блок должен быть экраном или видимой частью изображения):

введите описание изображения здесь

Мне интересно, возможен ли такой подход (как мне подойти к комбинации двух функций?). Другим вариантом было бы создать отдельный SVG или что-то еще для каждого из событий и расположить их по-разному на экране.

Поскольку мне нужно будет повторять это много раз для разных или обновленных временных шкал, мне придется делать большую часть этого программно, работая с исходными текстовыми файлами. Однако, если такая единая временная шкала может быть создана с помощью какого-либо инструмента, из чьего вывода я могу узнать, как это сделать, я открыт для предложений. В этом случае мне нужно знать, как это сделать.

Кроме того, было бы, конечно, очень полезно иметь рабочий пример, если существует что-то сопоставимое.

К какому типу контента относится каждый из небольших элементов, которые увеличиваются при нажатии? Это важный фактор, определяющий, какой подход вы должны использовать.
Они представляют собой сгруппированные элементы svg, которые могут быть путями, текстом и пиксельной графикой. Пиксельная графика может быть встроенной или внешней. Поскольку они делают весь файл немного большим, последний подход в принципе предпочтительнее. Если пиксельная графика вызывает проблемы, также можно включить их только в «увеличенное» поле, если это возможно.

Ответы (1)

Возможно ли это?

Да . Точно так же, как вы думали об этом, это определенно возможно сделать так. Лучше задать вопрос: «Есть ли лучшие способы сделать это?» в этом случае я бы ответил , вероятно .

Единственный раз, когда я бы использовал для этого SVG, это если большинство элементов, которые вы хотите увеличить, изначально являются SVG (например, значки), которые вы пытаетесь проиллюстрировать чем-то подобным. Вы можете анимировать окно просмотра SVG, чтобы выполнить горизонтальную прокрутку, и выполнить некоторую пользовательскую функцию масштабирования, чтобы увеличить определенные элементы (возможно, сохранив окно просмотра перед масштабированием, чтобы вы могли вернуться к нему).

Если есть много текста, фотографий или чего-то еще, кроме того, что обычно является SVG, я бы предпочел не использовать этот подход.

Если вы используете этот подход, обязательно оптимизируйте свои SVG, следуя некоторым правилам и используя некоторые инструменты .

Вместо этого я бы использовал подход, заключающийся в создании обычной веб-страницы с горизонтальной прокруткой. Затем я бы использовал элементы HTML для более мелких частей. Одна из причин этого заключается в том, что уменьшенный (маленький) контент не читается. Но если вы вместо этого используете предварительный просмотр содержимого в этом «немасштабированном» представлении, вы можете вместо «масштабирования» (если это не было изображение или что-то подобное статичному) вы можете открыть полное содержимое (или, возможно, даже новый страница).

Под этим я подразумеваю использование переходов , подобных рекомендациям Google по материальному дизайну . Такие виды анимации могут быть созданы с относительной легкостью (человеком, который знает, что он делает) с помощью JavaScript, но у Polymer есть некоторые встроенные функции , если вы хотите использовать для этого фреймворк.

Вы можете добавить несколько кнопок для горизонтальной прокрутки, но если вы используете этот подход, я рекомендую вам не отключать обычный способ прокрутки. Важно указать, что страница прокручивается горизонтально, потому что пользователи не привыкли к такому типу движения.

Используя этот подход, вы можете обрабатывать все виды содержимого и по-прежнему делать тот же тип масштабирования, о котором вы говорите для SVG и подобных типов.

Некоторые положительные стороны этого подхода:

  • Он использует навигацию браузера по умолчанию (в сочетании с некоторыми дополнительными пользовательскими переходами и масштабированием) и макет: собственная прокрутка всегда менее глючна, чем пользовательская прокрутка. Не жесткое кодирование позиций (как в SVG) позволяет позиционировать контент с меньшими усилиями.
  • Это экономит размер файла: SVG такого масштаба может быть довольно большим. Это влияет не только на время загрузки, но и на производительность и заставляет пользователей платить больше за доступ к вашему контенту.
  • Это дает больше свободы для контента: вместо того, чтобы ограничиваться только SVG-подобным контентом, он позволяет использовать тот же формат в более широком смысле.
  • Вероятно, он более модульный, что упрощает повторное использование в будущем или на других страницах.
  • Его легче редактировать: вместо того, чтобы заходить в Illustrator каждый раз, когда нужно что-то изменить, вы можете просто добавить в HTML.
Спасибо! Я изучаю эти варианты. Поскольку я не знаком с Polymer, я задал дополнительный вопрос на stackoverflow.com/questions/35067882/… .
@highsciguy Если ответ удовлетворяет вашему вопросу, вы можете щелкнуть стрелку слева от ответа, чтобы отметить его как правильный.
Я не забуду сделать это!
@highsciguy Надеюсь, ты не забыл :)
Анимированная инфографика SVG Javascript для временной шкалы
СпросиСетьПолитика конфиденциальности1y, 0v