Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Графопостроитель




easeIn - базовое поведение: медленная анимация в начале, с постепенным ускорением.

  • easeOut - поведение, обратное easeIn: быстрая анимация на старте, а затем все медленней и медленней.
  • easeInOut - слияние обоих поведений. Анимация разделяется на две части. Первая часть - этоeaseIn, а вторая - easeOut.

Процесс анимации полностью в ваших руках благодаря delta. Вы можете сделать ее настолько реалистичной, насколько захотите.

Впрочем, исходя из практики, можно сказать, что варианты delta, описанные выше, покрывают 95% потребностей в анимации.

Сложные варианты step

Анимировать можно все, что угодно. Вместо движения, как во всех предыдущих примерах, вы можете изменять прозрачность, ширину, высоту, цвет… Все, о чем вы можете подумать!

Достаточно лишь написать соответствующий step.

Подсветка цветом

Функция highlight, представленная ниже, анимирует изменение цвета.

function highlight(elem) {

 

var from = [255,0,0], to = [255,255,255]

 

animate({

 

delay: 10,

 

duration: 1000,

 

delta: linear,

 

step: function(delta) {

 

elem.style.backgroundColor = 'rgb(' +

 

Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255), 0) + ',' +

 

Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255), 0) + ',' +

 

Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255), 0) + ')'

 

}

 

})

 

}

Набор текста

Вы можете создавать интересные анимации, как, например, набор текста в «скачущем» режиме:

Запустить анимированную печать!
Исходный код:

function animateText(textArea) {

 

var text = textArea.value

 

var to = text.length, from = 0

 

 

 

animate({

 

delay: 20,

 

duration: 5000,

 

delta: bounce,

 

step: function(delta) {

 

var result = (to-from) * delta + from

 

textArea.value = text.substr(0, Math.ceil(result))

 

}

 

})

 

}

Итого

Анимация выполняется путём использования setInterval с маленькой задержкой, порядка 10-50мс. При каждом запуске происходит отрисовка очередного кадра.

Анимационная функция, немного расширенная:

function animate(opts) {

 

 

 

var start = new Date;

 

var delta = opts.delta || linear;

 

 

 

var timer = setInterval(function() {

 

 

 

var progress = (new Date - start) / opts.duration;

 

if (progress > 1) progress = 1;

 

 

 

opts.step( delta(progress) );

 

 

 

if (progress == 1) {

 

clearInterval(timer);

 

opts.complete && opts.complete();

 

}

 

}, opts.delay || 13);

 

 

 

return timer;

 

}

Основные параметры:

  • delay - задержка между кадрами, по умолчанию 13мс.
  • duration - длительность анимации в мс.
  • delta - функция, которая определяет состояние анимации каждый кадр. Получает часть времени от 0 до 1, возвращает завершенность анимации от 0 до 1. По умолчанию linear.
  • step - функция, которая отрисовывает состояние анимации от 0 до 1.
  • complete - функция для вызова после завершенности анимации.
  • Вызов animate возвращает таймер, чтобы анимацию можно было отменить.

Функцию delta можно модифицировать, используя трансформации easeOut/easeInOut:

function makeEaseInOut(delta) {

 

return function(progress) {

 

if (progress < .5) return delta(2*progress) / 2;

 

else return (2 - delta(2*(1-progress))); / 2;

 

}

 

}

 

 

 

function makeEaseOut(delta) {

 

return function(progress) {

 

return 1 - delta(1 - progress);

 

}

 

}

На основе этой общей анимационной функции можно делать и более специализированные, например animateProp, которая анимирует свойство opts.elem[opts.prop] от opts.start px доopts.end px :

 

function animateProp(opts) {

 

var start = opts.start, end = opts.end, prop = opts.prop;

 

 

 

opts.step = function(delta) {

 

opts.elem.style[prop] = Math.round(start + (end - start)*delta) + 'px';

 

}

 

return animate(opts);

 

}

 

 

 

// Использование:

 

animateProp({

 

elem: document.body,

 

prop: "width",

 

start: 0,

 

duration: 2000,

 

end: document.body.clientWidth

 

});

Можно добавить еще варианты delta, step, создать общий фреймворк для анимации с единым таймером и т.п. Собственно, это и делают библиотеки типа jQuery.

 


Поделиться:

Дата добавления: 2015-09-15; просмотров: 56; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.006 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты