Хорошо.У меня есть целая презентация с введением в CSS Animations и Немного о SVG.
Но вот упрощенные основы:
- Спецификация CSS Animation (само по себе) просто позволяет вам объявлять «ключевые кадры» или многошаговые переходы между стилями.
- «Стили» в CSS3 включают «Преобразование», которое задает масштаб, поворот, наклон и смещение позиции страницыэлемент.
- Можно "переходить" между стилями и указывать время и темп этого перехода, в той или иной степени, для объявления функции синхронизации кубического Безье.
- Объединение анимаций, переходов иtransforms дает вам простой, декларативный способ перемещения и преобразования ЛЮБОГО элемента страницы (img, div, видео и т. д.) очень богатым способом, который также постепенно ухудшается в старых браузерах (если вы в здравом уме)вещи).
НО каждый элемент по существу рассматривается как недифференцированный 2-мерный прямоугольник для целей анимации, так что на самом деле речь идет об анимации спрайтов.В Sencha, как вы уже заметили, мы даже создали целый инструмент CSS Animation .И вы должны взглянуть на некоторые из демонстраций там, потому что это показывает, что вы действительно можете многое сделать с небольшим набором примитивов, которые дает вам CSS.
Анимация SVG может быть выполнена с использованием встроенного в возможностях SVG-анимации (анимация, анимация и т. д.), SMIL (декларативное описание анимации, аналогичное CSS-анимациям) или JavaScript), имеет более богатый набор возможностей, чем CSS-анимация, но только потому, что выСоздаем объекты SVG и меняем их свойства.Вы не можете использовать SVG «анимацию», например, для анимации существующего фрагмента HTML.
Но это также намного богаче.Наибольший выигрыш в SVG заключается в том, что вы объявляете контуры рисования и заливки с большой гибкостью (линии, дуги, квадратичные дуги, дуги кубического Безье и т. Д. И т. Д.), И вы можете со временем изменять значение этих свойств, используя преобразования и ключевые сплайны.(аналогично функциям синхронизации в переходах CSS)) Это позволяет вам выполнять анимацию «мультфильма», а не спрайтовую анимацию.(Я не аниматор, я просто использую термины, которые считаю подходящими).Таким образом, вы можете рисовать такие вещи, как этот кот, который ходит по экрану , используя линейную анимацию, которую невозможно выполнить с помощью CSS-анимации (или невозможно выполнить для людей с разумным здравомыслием - если безумные люди хотят объявить большое количество нулей)высота делится с радиусами границ и использует преобразования для имитации дуг, тогда это свободная страна.)
С другой стороны, SVG - это PITA, если вы пишете его без посторонней помощи (многословный стиль XML с XHTML dtd).Я очень рекомендую Raphael (который является частью наших лабораторных проектов), если вы JavaScripter - у Raphael есть преимущество перехода на векторную графику VML в старых версиях IE.SMIL (декларативная анимация для SVG) - хорошая идея, но во многих местах она не поддерживается должным образом.Также многие браузеры не поддерживают должным образом SVG, а те, которые поддерживают, часто поддерживают его не полностью, особенно когда вы пытаетесь анимировать свойства.
И в Android 2.x нет поддержки SVG, поэтому, если вы хотите веб-анимациюкоторые работают на телефонах, вы застряли с CSS-анимацией.
Изучив основы SVG-анимации, чтобы разработать вступительную презентацию, связанную вверху, я могу сердечно поболтать с написанием рукописного SVG.Трудно запомнить, он не интуитивен, и, поскольку его XML, он имеет тенденцию либо работать полностью, либо полностью отказывать, что делает чертовски неприятной отладку.