Интерактивные средства

99

В среде SketchFlow IDE доступен упрощенный вариант интегрированного в Expression Blend редактора анимации, с помощью которого можно внедрить интерактивные средства в отдельный прототип, созданный в SketchFlow. Конечно для этой цели можно воспользоваться и полнофункциональным редактором анимации, но панель SketchFlow Animation настолько интегрирована в среду создания прототипов в SketchFlow, что пользоваться ею удобнее.

В качестве примера введите ряд интерактивных средств на экране Checkout. Для этого активизируйте монтажный стол экрана Checkout и добавьте форму Block Arrow Up - Sketch, которая обозначает хотя и в несколько преувеличенном виде, курсор мыши, наводимый пользователем:

Добавление формы, имитирующей курсор мыши

Перейдите к панели SketchFlow Animation, которая по умолчанию располагается в верхней части визуального конструктора:

SketchFlow Animation

Щелкните на кнопке со знаком +, чтобы создать новую раскадровку анимации в SketchFlow. После этого вы вольны переименовать эту раскадровку, присвоив ей более подходящее описательное имя (например, AnimateArrow — анимация стрелки), выбрав соответствующий вариант из раскрывающегося списка в нижней части панели SketchFlow Animation.

Так или иначе, анимация на панели SketchFlow Animation, как и в полнофункциональном редакторе анимации, организуется по принципу изменения свойств элементов пользовательского интерфейса в промежутках между ключевыми кадрами.

Поэтому для ввода новых ключевых кадров в анимационную последовательность выберите отдельный ключевой кадр на панели SketchFlow Animation и щелкните на кнопке со знаком + в правом верхнем углу всплывающей панели выбранного ключевого кадра. А для того чтобы удалить выбранный ключевой кадр, достаточно щелкнуть на кнопке со знаком минус (-).

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

В качестве примера на рисунке ниже показана анимационная последовательность после ввода трех ключевых кадров. В первом ключевом кадре фиксируется первоначальное состояние экрана со стрелкой, имитирующей курсор мыши в исходном положении. Во втором ключевом кадре стрелка, имитирующая курсор мыши, перемещается на кнопку Confirm (Подтвердить). А в третьем и последнем ключевом кадре изменяются цвета фона кнопки Confirm, указывая на то, что эта кнопка выбрана:

Анимация перемещения по экрану стрелки

По желанию можете сделать еще более изящной анимацию в прототипе своего приложения, применив в отдельных ключевых кадрах эффекты инерционности движения (отскакивания, упругости и пр.). Для этого достаточно щелкнуть на кнопке с пиктограммой, обозначающей данную разновидность эффектов. А если хотите добавить эффект перехода (наплывом, волной и т.д.) в отдельный кадр, щелкните на кнопке fx.

Настроив различные эффектов анимации, еще раз запустите прототип своего приложения на выполнение. Если вы затем перейдете к экрану Checkout, то сможете воспроизвести анимацию на панели Navigate:

Воспроизведение анимации в прототипе

Если же хотите организовать запуск этой (или любой другой) анимации в зависимости от информации, вводимой пользователем, то воспользуйтесь объектом поведения типа PlaySketchFlowAnimationAction доступном в разделе SketchFlow --> Behaviors библиотеки ресурсов. Выберите этот объект и перетащите его на панель Objects and Timeline:

Ввод объекта поведения типа PlaySketchFlowAnimationAction

Выберитеэтот объект поведения, перейдите к панели Properties и настроите триггер на инициирование события Loaded, пускающего интересующую вас анимацию.

Вот, собственно, и все! На этом рассмотрение простого примера создания прототипа, демонстрирующего применение различных средств SketchFlow, завершается. И хотя этот пример демонстрирует намного более простую ситуацию, чем в реальном проекте приложения, он дает ясное представление об основных стадиях процесса создания про тотипов средствами SketchFlow, включая фиксацию комментариев клиентов, экспорт их комментариев в специальный документ формата Microsoft Word и составление блоксхемы прототипа на панели SketchFlow Map.

В качестве упражнения попробуйте сами ввести комментарии клиента в прототип своего приложения, как было показано при рассмотрении примера проекта PCGamingSketch. Попробуйте также сформировать документ формата Microsoft Word из прототипа своего приложения, руководствуясь пояснениями, приведенными выше.

Пройди тесты
Лучший чат для C# программистов