Использование SVGA во внешнем интерфейсе

<script src="js/svga.min.js"></script>

2. Объявите объект dom

<div id="demo" style="width: 100%;height: 100%;"></div>

3. Играть в свга

var player = new SVGA.Player('#demo');
var parser = new SVGA.Parser('#demo'); 
parser.load('**/**.svga', function(item) {
    player.loops = 2;
    player.clearsAfterStop = false;
    player.setVideoItem(item);
    player.startAnimation();
    player.onFrame(function (i) {    });
})

Процесс кажется знакомым? Это то, что я хочу!

Что касается svgaPlayer, вам нужно только ознакомиться с описанием его API! Никаким изучением апи этого процесса не избежать, к счастью, апи svgaPlayer не так уж и много, которые можно прочитать за некоторое время, тут много говорить не буду, проверьте самиSVGA SVGAWeb.

Суть svgaPlayer

Суть svgaPlayer на самом деле является приложением для инкапсуляции холста, которое освобождает холст для решения различных проблем совместимости и заиканий при анимации; так же, как библиотека jQuery инкапсулирует различные методы js, делая js таким простым!

Во-вторых, приложение svga

Простая анимация

Анимация живого подарка, классный фоновый эффект страницы,...

Интерактивная реализация

Если вы просто понимаете, что svga может предоставлять только простые эффекты движения, это неправильно.Если вы видели методы API, предоставляемые svgaplayer, вы обнаружите, что svagplayer может управлять началом воспроизведения, воспроизводить определенный кадр и воспроизводить во время воспроизведения. анимационных эффектов Набор методов процесса, которые завершают весь процесс для вашего взаимодействия! Подробности можно посмотреть самостоятельноSVGAWeb.

3. Проблемы и решения в применении

1. Проблемы с загрузкой анимации, сложные анимации и большие файлы после упаковки, особенно на мобильном терминале;

Чтобы привести простой пример, такой как анимация открытия сундука с сокровищами (конечно, это может быть неуместно, вот пример идеи), обычно будет подготовительная анимация для открытия сундука с сокровищами (мы будем ссылаться на подготовительную анимацию). анимация пока), Такая же подготовительная анимация повторяется перед открытием, а затем анимация открытия сундука с сокровищами (для краткости будем называть анимацию открытия), обычно эти две части делаются в одну svga, а анимация воспроизведение управляется по секциям, но если вся упакованная svga очень Если она большая, отображение сундука с сокровищами кажется задержанным из-за загрузки svga, так как это решить?
Управление распаковкой и сегментацией svga. Поскольку подготовительная анимация представляет собой относительно простой эффект, который повторяется, то мы можем преобразовать svga в svga отдельно и загружать его по запросу, так что подготовительная анимация будет загружаться быстро, а интерактивная в реальном времени Эффект рендеринга страницы будет улучшен.

2. С другой стороны, это схема предварительной загрузки, которая использует функцию предварительной загрузки атрибута rel в h5 (использование других аспектов предварительной загрузки может быть понято поиском в Интернете);

Его принцип: Используйте время простоя браузера, чтобы сначала загрузить контент, указанный пользователем, а затем кэшировать его, чтобы при следующей загрузке пользователя он был напрямую извлечен из кэша, и эффективность была бы выше. Метод прост в следующем

<link rel="prefetch" href="****.svga" as="fetch">

3. Дизайнеры должны обратить особое внимание на проблему оптимизации файлов в процессе производства svga анимационных файлов, будь то материал или частота кадров, здесь подробно описываться не будет.

В-четвертых, преимущества svga

Характеристики динамических эффектов, реализованных в gif, css3 и js

gif: gif широко поддерживает интернет-стандарты, поддерживает сжатие без потерь и прозрачность, но gif поддерживает только 256-цветную палитру, теряя информацию о цвете изображения, особенно поддержка прозрачности немного хуже.

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

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

Характеристики динамического эффекта svga

1. Видимое визуальное улучшение, контролируемое качество анимации;
2. Невидимые улучшения производительности;
3. Использование svga делает разделение разработки более понятным;
Дизайнеры могут делать то, что хотят, и экспортировать файл svga сразу после разработки эффекта, снижая затраты на связь между дизайном и непрерывной отладкой внешнего интерфейса анимационного эффекта, чтобы разработчики внешнего интерфейса могли сосредоточиться на разработке логики!
4. svga поддерживает воспроизведение аудио;
Это связано с тем, что нет фактического спроса на использование этой функции, и я пока не пробовал ее действие.

Пять, свга за разведкой

Есть заметная особенность.Поскольку svga поддерживает воспроизведение аудио, подумайте, можно ли конвертировать видео в svga и имитировать эффект видео.