Tag Archives: анимация

CSS-анимация разных вращений

Всё сводится к подбору нужной перспективы у контейнера (http://www.w3.org/TR/css3-transforms/#perspective-property)

  perspective: 300px;
  -webkit-perspective: 300px;

1 2	perspective: 300px; -webkit-perspective: 300px;

А для самого элемента к подбору точки вращения (http://www.w3.org/TR/css3-transforms/#transform-origin-property)

  transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;

1 2	transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%;

и повороту по нужной оси на нужный угол (http://www.w3.org/TR/css3-transforms/#funcdef-rotate)

  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);

1 2	transform: rotateX(90deg); -webkit-transform: rotateX(90deg);

Javascript-события при анимации

http://www.sitepoint.com/css3-animation-javascript-event-handlers/ Особенно полезна эта табличка про совместимости браузеров и префиксы: W3C standard Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

Функции анимации по кривым Безье

http://easings.net/ru — хорошо описаны различные функции анимации css-свойств с демонстрацией. animation

Оптимизация DOM анимации. Приоритетность оптимизаций.

Источник — http://www.xiper.net/collect/js-plugins/overclock-site/optimizacia-dom-animacii.html Постарался упорядочить действия, направленные на оптимизацию DOM/CSS анимации, в порядке эффективности. Чем выше оптимизация в списке, тем больший прирост производительности она обычно дает.

JS-Библиотека для создания CSS3-анимаций

https://github.com/jlongster/css-animations.js Позволяет делать анимации примерно так:

// Changing an animation

var anim = CSSAnimations.get('pulse');
anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();
anim.setKeyframe('0%', { transform: 'translateY(0)' });
anim.setKeyframe('70%', { transform: 'translateY(50px)' });
anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,
            'animation-duration': '1s' });

$(el).on('animationend', function() {
    CSSAnimations.remove(anim.name);
});

// Changing an animation

var anim = CSSAnimations.get('pulse');

anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();

anim.setKeyframe('0%', { transform: 'translateY(0)' });

anim.setKeyframe('70%', { transform: 'translateY(50px)' });

anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,

'animation-duration': '1s' });

$(el).on('animationend', function() {

CSSAnimations.remove(anim.name);

});

requestAnimationFrame для оптимизации анимации в браузере

Это замена обычной покадровой отрисовки по setTimeout. Пример:

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();
 
var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
 
function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
 
requestAnimationFrame(step);

(function() {

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

window.requestAnimationFrame = requestAnimationFrame;

})();

var start = window.mozAnimationStartTime; // Only supported in FF. Other browsers can use something like Date.now().

function step(timestamp) {

var progress = timestamp - start;

d.style.left = Math.min(progress/10, 200) + "px";

if (progress < 2000) {

requestAnimationFrame(step);

}

requestAnimationFrame(step);

Polyfill:

var requestAnimationFrame = window.requestAnimationFrame
	|| window.webkitRequestAnimationFrame
	|| window.mozRequestAnimationFrame
	|| window.oRequestAnimationFrame
	|| window.msRequestAnimationFrame
	|| function (callback) {
	return window.setTimeout(callback, 1000 / 60);
};

var requestAnimationFrame = window.requestAnimationFrame

|| window.webkitRequestAnimationFrame

|| window.mozRequestAnimationFrame

|| window.oRequestAnimationFrame

|| window.msRequestAnimationFrame

|| function (callback) {

return window.setTimeout(callback, 1000 / 60);

};

https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame, http://habrahabr.ru/post/114358/ http://www.xiper.net/collect/js-plugins/overclock-site/programm-animation.html (пример перевода анимации с setTimeout)