Spritely Plugin

Spritely является простой плагин, только два основных метода, спрайт () и Pan (), оба из которых просто анимации фонового изображения CSS свойство элемента. Разница между ними состоит в том, что “Спрайт” образ содержит два или более ‘кадры’ анимации, в то время как образ “кастрюлю” содержит непрерывный образ которого поворачивается влево или вправо, а затем повторяется. Как правило, в любом случае, вы должны использовать файл PNG (с или без прозрачности) для этого. Вы, возможно, пожелают использовать прозрачный GIF для Internet Explorer 6, хотя это, вероятно, не будет выглядеть так хорошо. Ваш HTML элементы уже должны быть правильного размера вы хотите спрайт появляться, но фоновое изображение, как правило, быть больше, чем HTML элемента, а Spritely методами изменить фоновое изображение в элементе HTML.

Пожалуйста, обратите внимание: есть проблемы с текущей версией Mobile Safari на Ipad

На Ipad, используя кастрюли () может вызвать сбои в Mobile Safari. Эта проблема не только влияет Spritely и в настоящее время вне нашего контроля – это, кажется, вызвана ошибкой в ​​Mobile Safari, где небольшие корректировки фон положение собственности в короткий промежуток времени триггер аварии. Возможные решения проблемы необходимо использовать очень низкую частоту кадров (до 10 кадров в секунду) или меньше фоновых изображений (менее 1000px в ширину). Mobile Safari на iPhone, похоже, не будут затронуты.

Быстрый старт

Если вы нетерпеливы, чтобы опробовать Spritely и хотят видеть некоторые автономные рабочие примеры, вы можете скачать некоторые образцы 0,4 код в виде архива.


Анимация изображений методу “sprite()”

Вот небольшой пример, чтобы вы начали … Следующий метод оживляет один из летающих “спрайтов птицы вокруг этой странице. “Спрайт” состоит из трех кадров в прозрачное изображение PNG, где каждый кадр бок о бок:

0

Теперь нам просто нужно создать DIV называется “птица”, стиль его точно нужного размера (180×180 пикселей в данном случае), и оживить ее с спрайт () метод. Два варианта мы должны использовать являются “кадров в секунду (кадров в секунду) и« no_of_frames, например, три кадра для картинке:

1

Чтобы мыши привлекают спрайт, когда вы нажимаете на экран, используйте:

2

Активное () делает этот метод спрайт спрайт на активное запуск – в противном случае спрайт с activeOnClick () становится активным только тогда, когда вы щелкните по ней (или коснуться его с помощью iPhone / IPad).

$ (“Тело”). FlyToTap () метод часы за клик по странице и в этот момент, после любого текущего движения завершена, спрайт перемещается на нажатия месте. После нескольких вторых, если случайное движение метод был применен (см. ниже), он затем переходит обратно.

Чтобы спрайт ход случайным образом, в рамках ограничений пикселей (скорости в миллисекундах), используйте:

3

Панорамирование фоновое изображение методу “Pan ()”

Вот как вы можете “Фавна фоновое изображение, как и холмы в демо в верхней части этой страницы:

01

Чтобы пан фоновое изображение постоянно влево, создать HTML элемента DIV меньше, чем само изображение и использовать CSS, чтобы разместить изображение в качестве фона изображения, убедившись, что вы установите повторить фоновое изображение ‘Repeat-х’, например, она повторяется непрерывно в горизонтальной оси.

Теперь оживить его с Spritely “pan()” метод:

4

Можно регулировать скорость (пикселей на кадр) и кадров в секунду независимо друг от друга. Почему? Из-за более низкой скорости приведет к более гладкой поддон, однако выше кадров в секунду, может привести к снижению производительности (особенно в устройствах, как iPhone). Вы должны экспериментировать, чтобы получить правильный баланс между плавной анимацией и производительность страницы.

Чтобы фоновый слой изображения друг на друга, просто поместите HTML изображения друг под другом, или настроить CSS свойство ‘Z-индекс “, а затем установите скорость кадров в секунду и свойства, чтобы создать иллюзию глубины. Более отдаленные фоновое изображение должно двигаться медленнее (нижняя кадров в секунду), чем крупным планом один.

Что нового в версии 0.6?

Мы очень рады версии 0.6. Почему? Потому что теперь есть Spritely событий!

Spritely 0.6 появилась возможность вызвать функцию, когда спрайт достигает первого, последнего или любого другого кадра. Три новые варианты вводятся для этого: on_first_frame, on_last_frame и on_frame. Это очень полезно, потому что это означает, что вы можете изменить «состояния» спрайт на любой кадр или остановить анимацию в целом.

Вот пример:

5

Также, начиная с 0.6:

Теперь вы можете рассказать спрайт, чтобы начать играть на конкретного кадра:

6

Что было нового в версии 0.5?

Новый метод: Destroy ()

Spritely 0,5 вводит Destroy () метод. Это приведет к сбросу элемент целиком и удаляет все анимации от него.

Так, например,

7

Что было нового в версии 0.4?

Две новые функции доступны в версии 0.4:

Вертикальное панорамирование

Долгожданный вертикального панорамирования теперь доступен. Это означает, что вы можете указать “вверх” или “вниз” как направления при вызове кастрюлю ().

Так, например,

8


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

Теперь есть возможность играть на спрайт, в обратном (например, перемотка). Это достигается с помощью “перемотки” вариант. Так, например,

9

Изменение кадров в секунду

Теперь Вы можете изменить количество кадров в секунду с FPS () метод:

10


Изменение фона скоростей относительно их глубины

Теперь, когда фонов имеют глубину, можно легко изменить скорость относительно друг друга с $. SpRelSpeed ​​() метод.

Переместите ползунок в вышеприведенная демо, чтобы увидеть влияние имеет глубину от скорости фоновых объектов, сравнивая его с этого изображения:

03

Чтобы изменить фон скоростью относительно, фоны объединить все в одном селектор JQuery и использовать spRelSpeed ​​() метод:

11

… где «spRelSpeed ​​’стоимость представляет собой сумму пикселей для перемещения, в кадре, имея в виду, что она относится к глубине элемента. Таким образом spRelSpeed ​​(30) применяется к объекту, расположенному на глубине 100 будет перемещать объект на 30 пикселей на кадр. Применительно к объекту на глубине 50 объект будет перемещаться на 15 пикселов на кадр. Вы можете изменить кадров в секунду отдельно – см. выше.

Изменение фона скорости абсолютно

. SpSpeed ​​$ () позволяет вам изменять скорость фоне абсолютно (это эквивалентно глубине 100):

12

Опять же, значение скорости является количество пикселей для перемещения, на кадр.


Изменение направления фоне анимации

SpChangeDir («левый») или spChangeDir («правильный») методы могут быть использованы на фоне анимации, чтобы изменить направление влево или вправо, соответственно:

13

Изменение направления движения или «состояния» спрайт анимации

Чтобы изменить направление спрайтов, необходимо использовать другой метод, spState $ (), и вам нужно другое изображение, с несколькими рядами кадров, по одной строке для каждого государства, а в следующем примере:

04

Второй ряд (полет в обратном направлении) представляет собой второе «состояния» спрайта, и вы поэтому изменение его направления по:

14


Остановка и запуск анимации

Для остановки и запуска спрайт фона и анимацию, используйте spStop (), spStart () и spToggle () методы:

15

Сделайте спрайт перетаскивать

IsDraggable () метод позволит спрайт быть втянутой в любую точку на экране. Есть также три параметров, которые могут использоваться с данным методом, запуска, остановки и перетащите. Эти дополнительные функции обратного вызова будет срабатывать в начале, конце, или в то время как вы тянете пункта. См. пример ниже:

16

Обратите внимание, что isDraggable () метод требует jQueryUI.

Объединение действий для получения одного действия

Конечно, Вы можете комбинировать действия в единый метод, так что вы можете контролировать движение ваших всей сцены. Следующий код, например, определяет «fly_forwards_quickly () ‘метод, которым можно управлять с помощью одного щелчка:

17

Обратите внимание, что рекомендуется для создания всех методов в единый объект, а не создавать страницы переменных, однако мы вместе с приведенным выше примером для простоты.


Рисуем спрайт игре на фиксированное количество кадров

Еще один новый метод, доступный в версии 0.2, хотя это не показано в демо, является возможность создать спрайт который играет на фиксированное количество кадров, а затем останавливается:

18

Больше примеров

Больше примеров кода можно найти, читая исходный код этой страницы – и не забывайте, вы можете объединить Spritely с другими методами JQuery для создания сложной анимации.


TwentyEleven – Spritely

Одно заключительное слово предостережения …

Используйте Spritely экономно. Немного Spritely проходит долгий путь, но слишком амбициозным использование этих методов может привести к ухудшению производительности, особенно на мобильных устройствах. Небольшое движение на большой странице может быть лучше, чем много движения на маленьком. Пожалуйста, проверьте внимательно Spritely для вашей целевой аудитории / платформы, прежде чем развивать ваш сайт, как могут меняться от платформы к платформе.

Неофициальная документация

Перечислим неофициальной документации и ресурсов здесь. Это также включает в себя переводы официальной документации.

Ресурс: Spritely

Comments are closed.

Post Navigation