Оптимизация листов спрайтов на основе SVG --для ускорения GPU на основе CSS3 HW в (мобильном )браузере

На прошлой неделе я помогал другу экспериментировать со спрайт-листами на основе SVG -в браузер. Мы хотели разработать идеальный рабочий процесс для подготовки, публикации и запуска высококачественной -анимированной графики в браузере. Так что в идеале иметь единый источник данных анимации, который будет работать на небольших экранах смартфонов, планшетах, дисплеях Retina и настольных браузерах.

Теоретически (вектор -на основе )SVG должен идеально подходить для этого, но, поскольку SVG обычно не так часто используется -, мы решили протестировать его. Идея состояла не в том, чтобы использовать SMIL SVG (, поэтому не использовать анимацию на основе SVG -), а вместо этого создать анимационный спрайт -лист (, как вы обычно делаете с растровыми данными PNG/JPG ), но это с чистыми векторами, т.е. SVG. Он был немного больше, но если он работает так -, он будет работать даже с чем-то еще более оптимизированным.

Плюс покадровая -на -векторная анимация кадра могла бы значительно улучшить наш рабочий процесс -это позволило бы нам использовать редактор Flash для создания анимации, а затем экспортировать ее в листы спрайтов SVG.

В любом случае, результат работает на удивление хорошо , но в некоторых областях также не работает (обратите внимание, что в целях тестирования мы работали только с браузерами на основе Webkit -, т. е. Safari, Chrome, мобильным Safari на iOS, и Android ICS ).

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

background-image: url(my.svg);
-webkit-animation: walk 1s steps(12, end) infinite; 

для вызова анимации на основе ключевых кадров -, показанной здесь:

@-webkit-keyframes walk {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }          
}

где использование translate3d должно позволить графическому процессору включиться, и все это должно быть аппаратно ускорено в мобильном браузере iOS Safari и Android ICS.

Удивительно, учитывая, что это своего рода техника перебора -силы и довольно крупная векторная анимация (600x600px для теста)-все летает. Но это не идеально -мерцает в Safari перед взлетом. И в браузере ICS он все время мерцает, поэтому его нельзя использовать.

Итак, мы попробовали обычные приемы, чтобы избавиться от мерцания, такие как:

-webkit-transform: translateZ(0);    
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Но это не сработало. Затем мы попытались растеризовать SVG динамически в памяти и использовать его в качестве текстуры с-webkit -transform :scale3d (1, 1, 0 ), но это не помогло эфиру.

Наконец, мы просто заменили SVG отрендеренным листом спрайтов PNG/JPG того же размера, думая, что сложные векторы просто слишком велики для браузера -, но знаете что? Это та же проблема -, так что это вообще не SVG-рендеринг -, это проблема с отрисовкой браузера. Еще одним доказательством этого является то, что если мы замедлим анимацию до 1 кадра в секунду, -мерцание все еще сохраняется.

Изображение слишком велико для графического процессора? Мы достигли предела производительности того, что вы можете удобно рисовать/анимировать в браузере (в частности на мобильных устройствах )?

Я был бы очень признателен за идеи/хаки о том, как потенциально избавиться от мерцания (, тем более, что оно работает очень быстро ). Это просто многообещающая технология -высокопроизводительная анимация браузера, которая адаптируется к разным размерам экрана-Святой Грааль HTML5 ;)

С помощью нескольких оптимизаций, таких как

и некоторой магии CSS, мы можем добиться идеальной адаптации SVG к своему контейнеру и изменить его размер из одного класса CSS. Это действительно творило бы чудеса -, но увы мерцание.

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