Strips Transition.

Учимся вместе.

Увидел [Только зарегистрированные пользователи могут видеть ссылки. Регистрация...] по движению полос закрывающих фотографию. Думаю многие тоже видели.
Что не понравилось :
1. Подготовка в Фотошопе. (Искажение перспективы и нарезание полосок.) Конечно, если использовать только один раз ничего страшного.
2. Параметры движения полос. Изменена перспектива у основной фотографии. А полосы получается, опускаются строго перпендикулярно. Так же как будто основная фотография стоит ровно. Мне кажется это немного создаёт дисбаланс.


Попробуем создать переход на основе маскирования полосками с одновременным вращением масок.

Регистрация...] Демо'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...] Демо'; }" />[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...] Демо

[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

( Или как "чайник" делал переход)

Создаём новую презентацию с параметром экрана 16х9 добавляем слайд длительностью 5 сек и убираем переходы между слайдами. Добавляем 1 слой - фотографию. Для удобства расчётов - она должна быть так же 16х9 ( совпадая с размером окна презентации ) Параметр заполнения экрана слоя в данном случае не важен.
Добавим вниз фоновый слой (Цветной, градиент , или всё что захотите.)
1 КК слоя с основной фотографией. - Все размеры начальные..
Если неустановленно по умолчанию - меняем все опции - Тип движения на "Линейный."

Рис 1
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Добавляем 2 КК на 1 секунде слайда. В этот момент фотография должна сместится по Х Уменьшить масштаб и повернуться по оси наклона Y
Так же меняем координаты центра вращения фотографии. Чтобы фото поворачивалось относительно левого верхнего угла.

Итак во втором КК на 1 сек. имеем параметры:
Панорамирование по Х= 8,5
Масштаб = 90%
Наклон по оси Y= -25
Центр вращения Х= -50 Y= -50

Рис. 2
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Размеры панорамирования, масштаба и наклона – произвольные. Мне так больше понравилось. :)

Вот в этом положении и будем маскировать основную фотографию полосками.

Теперь займёмся созданием, размещением и "привязкой" полосок- масок к основной фотографии.
( Из-за маленького окна в моей 5-ке, я делаю основные расчёты в 4 версии. Там лучше видно)
Я решил сделать 4 полосы. Поэтому делим размер основной фотографии на 4.
90/4= 22,5 Это и будет ширина полосы по Х.
Добавляем новый цветной слой. Устанавливаем масштаб:
Х = 22,5
Y = 90

Нам нужно сдвинуть полосу к левому краю основной фотографии.
Вычитаем из масштаба по Х фото - масштаб по Х полосы и делим на 2
Х = (90 - 22,5) / 2 = 33,75
Панорамирование по Х = - 33,75 Так как полоса сдвигается влево.
Ставим значения центра вращения полосы в левый верхний угол
Х= -50 Y= -50

Центр вращения основного фото и полосы у нас теперь совпадают. Поэтому любые вращения будут происходить одинаково.
Рис. 3
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Добавляем ещё один цветной слой полосы с тем же масштабом
Х = 22,5
Y = 90

Сдвигаем влево, до правого края 1 полосы. Тут визуально понятно, что сдвинуть надо на половину ширины полосы:
22,5 / 2 = - 11,25
Но в общем, другом случае будет так :
-33,75 (значение Х 1 полоски, минус 22,5 ширина полоски)
Теперь нужно для этого слоя выставить центр вращения в ту же точку (левый верхний угол фотографии)
Y = -50 (Верхний край)
По Х - считаем :
(На самом деле, тут можно обойтись без всяких коэффициентов из за таких параметров масштабов слоёв, но приведу пример общих расчётов)

Отношение ширины окна 100% и полосы 22,5%

100 / 22,5 = 4,44444444
и умножаем этот коэффициент на тот путь который должна пройти точка центра вращения. У нас это - 45 (Координата левого края фотографии) минус панорамирование полосы -11,25
45 - 11,25 = 33,75
Получаем координату Х центра вращения второй полосы.
4,44 * - 33,75 = - 150
Y = -50
Рис 4
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Создаём ещё 2 полоски. Значения Панорамирования будут зеркальными относительно 1 и 2 полосы (С другими знаками)

3 Полоса
Х= 11,25
Центр вращения по Х
(45 + 11,25) * 4,444 = - 250
Y = -50

4 Полоса
Х = 33,75
Центр вращения по Х
(45 + 33,75) * 4,444 = - 350
Y = -50

Рис. 5
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Таким образом мы получили 5 слоёв. Основная фотография и 4 слоя - маски с общим центром вращения в одной точке. Теперь при любом повороте - слои будут двигаться одинаково.
Это можно проверить, задав всем слоям одинаковое вращение.

Рис.6
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Теперь вернёмся к нашему будущему переходу.

Мы задали 2 КК для основной фотографии. Последний ( 3 КК) установим в точке 2,75 Скопируем все значения из 2 КК в 3 КК.
С 1 сек. до 2,75 этот слой будет оставаться неподвижным и на 2,75 закончит работу.

Устанавливаем 1 полоску.
1 КК на 1 сек. В момент остановки основной фотографии.
Так как основная фотография к этому моменту у нас переместилась по Х на 8.5 , то нужно подкорректировать и панорамирование полосы.

- 33.75 (высчитанное начальное значение) ; 8,5 (смещение основного фото)
Х = -33,75 +8,5 = - 25,25

Устанавливаем наклон по Y = - 25 (как и у основного фото) Если всё сделано правильно, то выглядеть должно вот так:

Рис. 7
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Полоска вращается в течении 1 сек. Поэтому 2 КК устанавливаем на отметке 2 сек. И копируем 1 КК во 2КК
Это конечное положение после завершения поворота. Все полоски закончат движение на отметке 2,75. Поэтому добавляем на 2.75 последний (3 КК) и копируем значения из второго КК.
Вернёмся к 1 КК. Нужно задать начальное положение наклона полосы по Х. Установим наклон Х = - 270 град.

Полоска теперь расположена к нам торцом и не видна. Но на самом деле она развёрнута так:

Рис 8
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Выставим так же по 3 КК для второй, третей и 4 полосы.
Устанавливаем для остальных слоёв высчитанные нами размеры. Но с учётом смещения основного фото на 8,5 по Х


1 маска 1 КК - 1,00 сек. Х = - 25,25 Y = 0 ;Наклон Х = - 270 Y = -25 ; Центр Х = - 50 Y = -50
2 КК - 2,00 сек. Х = - 25,25 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 50 Y = -50
3 КК - 2,75 сек. Х = - 25,25 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 50 Y = -50

2 маска 1 КК - 1,25 сек. Х = - 2,75 Y = 0 ; Наклон Х = - 270 Y = -25 ; Центр Х = - 150 Y = -50
2 КК - 2,25 сек. Х = - 2,75 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 150 Y = -50
3 КК - 2,75 сек. Х = - 2,75 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 150 Y = -50

3 маска 1 КК - 1,50 сек. Х = 19,75 Y = 0 ; Наклон Х = - 270 Y = -25 ; Центр Х = - 250 Y = -50
2 КК - 2,50 сек. Х = 19,75 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 250 Y = -50
3 КК - 2,75 сек. Х = 19,75 Y = 0 ; Наклон Х = 0 Y = -25 ; Центр Х = - 250 Y = -50

4 маска 1 КК - 1,75 сек. Х = 42,25 Y = 0 ; Наклон Х = - 270 Y = -25 ; Центр Х = - 350 Y = -50
2 КК - 2,75 сек. Х = 42,25 Y = 0 ; Наклон Х = - 0 Y = -25 ; Центр Х = - 350 Y = -50

У последней полоски всего 2 КК. так как ей не нужно ждать окончания поворота остальных.
Если всё выполнено правильно, то выглядит это так

Рис. 9.
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Осталось добавить вторую фотографию под маски.
Продублируем слой с основным фото. Заменим на другую картинку. Удалим 1 КК
Продублируем ещё 3 раза. Получившиеся 4 слоя разместим каждый под своей маской.
В начальном КК выставляем Наклон Х = - 270
Добавим ещё по одному КК (кроме 4 слоя) Время согласуем со временем КК каждой маски соответственно.

Рис 10
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Так как и у этой картинки, центр вращения согласуется с центром вращения масок, то и поворот получается согласованным.

Рис 11.
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Осталось настроить последний слой.

Ещё раз добавляем слой со второй фотографией. 1 КК на отметке 2,75. Там где все остальные слои заканчивают работу.
Все значения КК соответствуют последнему КК основной (1 фотографии).
2 КК 3,05сек. Значение линейного наклона по Х меняем на 6 град.
3 КК 3,35 сек. Наклон по Х = - 6 град.
4 КК 3,65 сек. и 5 КК 4 сек. Одинаковые с 1 ключевым кадром слоя.
6 КК 5 сек. Все значения возвращаются к первоначальным. Масштаб 100 проц. Всё остальное по нулям.

Рис 12.
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Рис.13.
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Общее расположение слоёв
Рис. 14.
[Только зарегистрированные пользователи могут видеть ссылки. Регистрация...]

Теперь только осталось оформить слайд как переход. Как учили :)

Кликаем правой клавишей мышки по слою с 1 фотографией. И выбираем "Использовать как переход" - "Исходный слайд -все копии"
И соответственно по второй фотографии ...". Конечный слайд -все копии"

Заходим в окно Параметров слайда и кликаем по кнопке "создать переход.."

Это конечно не полноценный переход а лишь основа. Каркас. Демонстрация метода расчётов синхронизации движений центров вращения.
Дальнейшие предложения по украшательству и дизайну приветствуются.

Спасибо за внимание.