Предыдущий ролик Следующий ролик  

Видео урок: Плавные переходы в слайдшоу

HTML5: графика и анимация с Canvas

На этом уроке мы рассмотрим, как использовать плавные переходы, чтобы улучшить предыдущий пример, в котором мы создали слайдшоу. Я открою этот пример SlideShowSmooth_finished и покажу вам, что я имею в виду. В другом примере переходы между слайдами были довольно резкими, а в этом примере мы сделаем так, чтобы каждый слайд исчезал постепенно, и тогда у нас выйдет приятный плавный переход. Давайте посмотрим, как это делается. Я открываю пример SlideShowSmooth_start.

Это наша начальная точка. Давайте вернемся к файлу snippets. Копируем здесь несколько первых строк, и это установочный код. Вставляем его. У меня есть массив со всеми путями к изображениям, а также переменные, которые ссылаются на canvas и его контекст. Затем я создаю изображение, которое будет отвечать за загрузку каждого из изображений из локальной папки или веб ресурса. Здесь у меня есть индексатор, который отслеживает то, на какое изображение мы смотрим, и, наконец, переменная, которая является таймером, благодаря которому плавно показывается каждое изображение.

Она называется revealTimer. Теперь давайте скопируем логику инициализации, а вот и эта функция. Все вставляем. Когда окно загружается, и вот для этого нужная функция, мы получим ссылку на canvas и на его контекст. Для изображения мы установим ширину и высоту, которые будут как ширина и высота изображений, что мы будем загружать. Затем мы вызываем функцию switchImage, и она показывает первое изображение, а затем у нас есть анимация, которая ждет каждые три секунды, то есть, 3,000 миллисекунд, чтобы показать новый слайд.

Сохраняем это. Затем нам нужно скопировать две функции, которые являются сутью того, как все работает. Давайте скопируем switchImage, и я ее поясню. Функция switchImage смотрит на индекс текущего изображения, получает к нему путь из массива, а затем устанавливает атрибут source объекта image, который мы создали при помощи DOM, так, чтобы он указывал на текущий индекс изображения.

Здесь у нас есть маленькая проверка, которая заключается в том, чтобы текущий счетчик изображения, который мы постоянно увеличиваем на единицу, не был больше массива, содержащего пути, в ином случае мы устанавливаем его на 0. Затем мы устанавливаем globalAlpha для контекста canvas на 0.1, или 10%, и об этом мы говорили в ролике про globalAlpha. Затем мы устанавливаем revealTimer на интервал в 100 миллисекунд, или 10ую долю секунды. Итак, каждую 10ую долю секунды мы вызываем эту функцию revealImage, которую нам нужно скопировать.

Копируем и вставляем. Давайте посмотрим, что делает revealImage. Каждые три секунды будет вызываться switchImage. Затем у нас есть subInterval. Итак, revealImage сохраняет текущий контекст canvas, а затем рисует текущее изображение в canvas с верхнего левого угла, используя ширину и высоту. Затем globalAlpha увеличивается на 10%.

Если globalAlpha достигнет 100%, тогда мы останавливаем revealTimer. А затем произойдет так, что каждую 10ую долю секунды будет вызываться revealImage. Поскольку каждый раз мы увеличиваем globalAlpha на 0.1, она будет вызываться 10 раз. То есть, через одну секунду изображение в canvas постепенно блекнет поверх того, что уже есть здесь. После этого мы восстанавливаем контекст, а затем функция заканчивает работу. То есть, у нас работает два таймера. Один таймер отсчитывает три секунды, а второй - 100 миллисекунд, но выполняется 10 раз, то есть, 1 секунду.

Сохраняем, возвращаемся в браузер и смотрим, как все работает. Через долю секунды я вижу, что изображение постепенно блекнет. Затем мы ждем несколько секунд и другое изображение исчезает. То есть, мы разрешаем эту проблему тем, что устанавливаем каждый раз globalAlpha на инкремент в 10%, а затем просто заново рисуем изображение. Таким способом мы получаем эффект постепенного плавного перехода. В данном уроке мы рассмотрели, как создать плавный переход, используя globalAlpha и JavaScript таймер.