КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Графопостроитель
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; просмотров: 116; Мы поможем в написании вашей работы!; Нарушение авторских прав |