Анимация в Blend Studio

Анимация в Blend Studio

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

Пытаясь создать необходимую анимацию. Конечно, иногда без этого не обойтись особенно тогда когда мы создаем объекты, и анимацию динамически. Но иногда мы можем быстро и эффективно создать любую анимацию с помощью удобных средств, которые нам предоставляет Blend Studio.

И так приступим. Все в принципе достаточно просто.
1) Создается объект
2) Обозначается его начальное место положение или его начальные свойства
3) Указывается его конечно место положение или его результирующие свойства
4) Создается анимация

Открываем Blend Studio, запускаем новый проект.

Для наибольшей давайте создадим опять же какой-нибудь прямоугольник. Задайте ему цвет фона и цвет границы.

Переключаем рабочее состояние студии на Анимацию, для этого идем Window -> Active WorkSpace -> Animation WorkSpace (Или нажмите F6). Я не считаю, что решение в организации рабочего пространства, придуманное Microsoft самое лучшее, но все же он позволяет спокойно управлять всеми анимациями в нашем приложении.

Создадим новый StoryBoard, который будет содержать наши анимации. Назовем его MyFirstAnimation. После того как, мы создали StoryBoard у нас появился TimLine на котором мы указываем в какой момент времени, что у нас будет происходить. Точнее говоря, мы будем расставлять ключевые кадры нашей анимации.

Чтобы добавить новый ключевой кадр нужно проделать следующие действия:

  1. в дереве объектов выбираем наш объект
  2. Выбираем на временной линейки момент времени, когда должен закончиться переход к новым значениям
  3. Затем нажимаем на плюс под панелью анимации, рядом с таймером.
  4. Чтобы делать изменения над объектом в нужный момент времени, необходимо переместить желтый ползунок на данный момент времени, где у нас установлен ключевой кадр, и затем изменять свойства объекта

Также ключевые кадры создадутся автоматически, если вы установили ползунок времени в нужное положение и начали изменять свойства объекта.

И так чтобы проверить нашу анимацию возвращаем наш ползунок в начальное положение и нажимаем кнопочку «play». Как видите все работает. После, некоторой практики вы убедитесь, что это действительно просто и эффективно.

Давайте посмотрим, что же нам сгенерировала Blend Studio. Как видите все анимации добвались в наш StoryBoard. А сам StoryBoard добавлен в ресурсы нашего контрола. То есть мы его можем использовать, где угодно на нашем контроле. Естественно мы можем переместить нашу анимацию куда угодно, и самим определять ее доступность.

И конечно же определять в какой именно момент нам запускать анимацию.

Blend Studio позволяет нам быстро и эффективно создать любую анимацию! При этом не написав не одной строки кода, она все сделает за нас ;).

Данный метод хорош, когда мы не знаем, как создавать ту или иную анимацию, и этот способ можно использовать как шпаргалку.
Когда мы только учимся работать с анимацией.
Когда это действительно удобно создавать уникальную анимацию в Blend Studio. В остальных и большинстве случаев, вы это будете делать в Code behind.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *