Код на слайде почти всегда оказывается скриншотом. Выглядит опрятно и не двигается: вы либо показываете готовый результат, либо выкладываете три картинки подряд и надеетесь, что зал сам разглядит разницу.
Keynote умеет лучше. Волшебный сдвиг строит переход между двумя слайдами, и если код — настоящий текст, а не картинка, он анимирует отдельные слова: строка съезжает вниз, освобождая место, значение меняется, целый блок появляется, а всё вокруг расступается, чтобы его принять.
Это два слайда и один переход. Ни After Effects, ни видеодорожки.
Почему скриншот так не умеет
Волшебный сдвиг сопоставляет объекты двух соседних слайдов и анимирует переход от одних к другим. Картинка — это один объект. Keynote может её переместить, масштабировать, растворить, но не может залезть внутрь и анимировать четвёртую строку: с его точки зрения никакой четвёртой строки не существует.
С текстом иначе. Текстовый блок состоит из слов, и Волшебный сдвиг умеет сопоставлять их по отдельности.
Значит, весь приём держится на одном: нужно перенести в Keynote цветной код в виде текста. Набирать его руками и раскрашивать вручную — мучение. Скопировать из редактора — потерять подсветку, потому что редакторы кладут в буфер обмена обычный текст.
Как получить цветной код текстом
Codeshot экспортирует две вещи. PNG — это собранная картинка: фон, рамка окна, тень. RTF — только код, цветным текстом.
Поставьте Формат на RTF и нажмите Копировать RTF. Фона в RTF нет, и это сделано намеренно: фон даёт сам слайд, а второй фон позади текста только мешал бы.
Одну деталь стоит знать, потому что именно она обычно и портит вставленный код: RTF задаёт шрифты по имени, а системный моноширинный шрифт носит закрытое имя, которое другие приложения разрешить не могут. Не разрешив его, они подставляют что-нибудь пропорциональное — и выравнивание по колонкам, благодаря которому код читается как код, рассыпается. Codeshot на выходе подставляет Menlo, чтобы этого не случилось. Если шрифт выбирали вы сами, его имя и так публичное и проходит без изменений.
Собираем два слайда
Вставьте на слайд. Command-V. Цвета переносятся вместе с текстом. Размер текстового блока меняйте свободно, но ничего не перенабирайте: Волшебный сдвиг опирается на сами слова.
Дублируйте слайд. Выделите его в навигаторе и нажмите Command-D. Теперь у вас два одинаковых слайда.
Отредактируйте один из них. Либо добавьте на второй слайд строки, которых ещё не было, либо — часто это проще — вставьте готовый фрагмент и удаляйте строки с первого слайда, пока он не покажет прежнее состояние. Всё, к чему вы не притронулись, Волшебный сдвиг и будет анимировать; всё, что вы добавили или убрали, он проявит или растворит.
Идти задом наперёд предпочтительнее. Волшебный сдвиг сопоставляет по самим словам, поэтому строки, которые должны остаться на месте, обязаны быть на обоих слайдах одинаковыми. Удаление из копии это гарантирует, а перенабор строки вручную — верный способ получить слово, которое молча не совпало и вместо плавного переезда прыгает.
Порядок важен: переход принадлежит тому слайду, с которого вы уходите, так что сначала соберите состояние до.
Единственная настройка, ради которой всё затевалось
Выделите первый слайд, откройте боковое меню Анимация и добавьте Волшебный сдвиг.
Затем переключите Сопоставление со значения по умолчанию на Слов.
На этой настройке держится весь эффект. Если её не трогать, Волшебный сдвиг сочтёт текстовый блок единым объектом и просто перекрестно растворит его — вы получите смазанный переход между двумя состояниями вместо кода, который двигается. Вариант Слов велит сопоставить слова обоих слайдов и анимировать их поодиночке, и именно от этого строки едут, а значения меняются на месте.
Длительность около 1,5–2 секунд для кода читается хорошо. Быстрее — и уже не уследить, какая строка сдвинулась, а ведь ровно ради этого всё и делается.
Несопоставленные объекты гаснут оставьте включённым. Благодаря этому новые строки появляются, а удалённые исчезают плавно, а не выскакивают рывком.
Собираем последовательность
Три слайда, два волшебных сдвига — и вы проводите зал через рефакторинг шаг за шагом: наивная версия, вынесенная функция, итоговая форма. Каждый переход переносит неизменившиеся строки, так что взгляд остаётся привязанным к тому, что действительно поменялось.
Держите шаги маленькими. Двух-трёх строк разницы на переход более чем достаточно: слайд, меняющий половину своего содержимого, анимируется в шум.
Когда лучше картинка
Не каждому слайду с кодом это нужно.
Если код не меняется, PNG проще, чётче и приносит с собой рамку окна и фон, благодаря которым слайд выглядит сделанным. Экспортируйте в 2× — и довольно. Этот путь разобран в полном порядке действий.
RTF и Волшебный сдвиг нужны там, где смысл именно в изменении: когда вы показываете дифф, собираете что-то по частям или объясняете, почему одна версия превратилась в другую.
За пределами Keynote
Тот же RTF ложится в Pages, в Word и в любую программу, принимающую форматированный текст. Это цветной текст, который можно выделить и найти поиском, а не картинка, — а значит, он остаётся доступным для программы чтения с экрана, и любой может скопировать строку из вашего документа и запустить её.