Анимирование объектов в конструкторе XAML
Область применения:
Visual Studio Visual Studio для Mac 
Visual Studio Code
С помощью средства Blend для Visual Studio вы можете с легкостью создавать короткие анимации, которые перемещают объекты или позволяют им исчезать и появляться.
Для создания анимации требуется раскадровка. Раскадровка содержит одну или несколько временных шкал. Задайте опорные кадры на временной шкале, чтобы отметить изменения свойств. Затем при запуске анимации Blend для Visual Studio интерполирует изменения свойств за указанный период времени. Результатом является плавный переход. Вы можете анимировать любое свойство, которое принадлежит к объекту, даже если оно не является визуальным.
На следующих изображениях показана раскадровка под названием Storyboard1. Временная шкала содержит ключевые кадры, которые отмечают позиции X и Y прямоугольника. При запуске анимации прямоугольник плавно перемещается из одной позиции в другую.
Создание анимации
- Чтобы создать раскадровку, нажмите кнопку Параметры раскадровки в окне Объекты и временная шкала, а затем выберите Создать.
- В диалоговом окне Create Storyboard Resource (Создание ресурса раскадровки) введите имя для раскадровки.
- На панели Ресурсы в конструкторе добавьте прямоугольник в нижнюю левую часть страницы.
- В окне Объекты и временная шкала переместите желтый указатель времени на 3 секунды.
- В конструкторе страницы перетащите прямоугольник в правую часть страницы.
- Нажмите кнопку Воспроизвести, чтобы просмотреть, как прямоугольник перемещается с левой части страницы в правую.
Поэкспериментируйте с другими изменениями в прямоугольнике, воспроизводимыми в разные моменты времени. Например, можно изменить цвет заливки или ориентацию в окне свойств.
Связанный контент
Анимация для Visual Studio
Область применения:Visual Studio Visual Studio для Mac Visual Studio Code
Основы анимации
Рекомендации по анимации в Visual Studio
Следуйте этим правилам, чтобы обеспечить согласованные и понятные стили анимации в интегрированной среде разработки Visual Studio.
- Будьте выборочными. Ограничить анимацию теми, которые служат конкретным целям.
- Время и скорость важны , чтобы переходы чувствовали себя быстро и естественно:
- Завершение анимированных переходов в течение одной половины секунды (500 миллисекунд).
- Анимации, которые часто происходят, должны быть достаточно быстрыми, чтобы они не прерывали рабочий процесс пользователя. Следите за анимацией в цикле и настраивайте время, пока оно не будет правильно.
- Анимации не должны быть настолько быстрыми или резкими, что трудно понять, но не так медленно, что это делает один нетерпеливый для перехода к завершению.
- Используйте время переменной, чтобы подчеркнуть важность. Например, при переходе по последовательности элементов на схеме классов скорость перехода между элементами затем замедляется, чтобы сосредоточиться на важных элементах.
- Остановите отображение движения хода выполнения, когда базовый процесс не продвигается.
- Различает детерминированные процессы от детерминированных процессов.
- Убедитесь, что анимация имеет идентифицируемые состояния завершения и сбоя.
- Свести к минимуму использование анимаций эффектов, которые показывают состояние и убедитесь, что они имеют реальное значение, предоставляя дополнительную информацию о фактическом использовании. Примеры включают временные изменения состояния и чрезвычайные ситуации
Анимация не поддерживается:
- Не используйте небольшие движения (движение в небольшом следе). Предпочитайте отцветать и изменяться при перемещении объектов.
- Не используйте анимации, которые происходят над большой площадью экранной недвижимости. Независимо от размера, этот стиль анимации отвлекает пользователя.
- Не используйте анимацию, не связанную с объектом, с которым пользователь в настоящее время сосредоточен или взаимодействует.
- Не используйте анимацию, требующую взаимодействия с пользователем для сброса состояния, например принудительного реагирования пользователя на мигающее уведомление, чтобы он перестал мигать. Взаимодействие с ними каким-либо образом должно быть достаточно, чтобы закрыть их.
Дополнительные сведения о приложениях для этих рекомендаций см . в шаблонах анимации.
Метрики анимации
- Система должна заметно реагировать на жесты пользователя менее чем в 10 миллисекундах.
- Анимированные переходы не должны занять больше 500 миллисекунда.
- Один из способов компенсировать переходы, требующие больше времени, — разделить его на две части. Например, первая часть анимации может быть пустым контейнером содержимого (до 500 миллисекундах), а затем содержимое исчезает в контейнере (до 500 миллисекундах).
- Для времени загрузки, который можно вычислить, предпочтительнее индикатор хода выполнения детерминированного выполнения (индикатор хода выполнения процента).
- Для времени загрузки, который не может быть вычисляться, соответствующий индикатор занятой нагрузки, например курсор или внедренная анимация спиннинга (загрузка или рабочий индикатор).
Анимация как коммуникатор
В пользовательском интерфейсе Visual Studio анимация работает только в качестве средства обмена данными. Он используется для обмена различными сведениями, такими как структурные изменения в пользовательском интерфейсе (например, при открытии или закрытии меню). Анимация может помочь визуализировать поведение сложных систем, таких как визуализация хода установки. Анимации также можно использовать для привлечения внимания с оповещениями и уведомлениями.
Анимации пользовательского интерфейса обычно работают четырьмя способами: визуализация, привлечение внимания, имитация и индикаторы времени отклика.
Визуализировать
Анимация может подчеркнуть трехмерный характер объектов и упростить визуализацию пространственной структуры пользователями. Чтобы добиться этого, анимация может потребоваться развернуть объект в полном круге, медленно повернуть его назад и вперед, или приблизить объект и немного увеличить его размер, чтобы подчеркнуть откат или фокус.
Хотя трехмерные объекты могут быть перемещены с помощью пользовательского элемента управления, конструктор должен заранее определить (программно или вручную), как лучше всего анимировать движение, которое обеспечивает оптимальное понимание объекта. Затем эта запрограммированная анимация может быть активирована пользователем путем размещения курсора над объектом, в то время как управляемые пользователем движения требуют, чтобы пользователь понимал, как управлять объектом. Ограничение перемещения на одну ось или ориентацию за раз; либо масштабировать, поворачивать или переводить, но не выполнять несколько одновременно.
Категория визуализации включает аспекты данных, связей, состояния, структуры, последовательности и времени.
Data
Проиллюстрировать сложные и переменные сведения:
- Перемещение по информационным визуализациям, таким как диаграммы и графы
- Пошаговое выполнение последовательности, интерактивного тура и разбиения по страницам
- Вызов сведений, указание и выделение конкретных сведений
- Наложение сведений и дополнительных сведений поверх фокусного элемента
- Преобразование из одного структурного или организационного представления в другое
- Представление изменений с течением времени с помощью ползунок времени, бег и шаттл колеса, а также управления транспортом (воспроизведение, остановка и пауза)
Связи
- Иллюстрирует связь элементов друг с другом или с элементами, связанными с заданным элементом
- Отображение иерархий и отношений с родительским или дочерним или одноуровневой связью
- Один элемент создает другой
- Один элемент сворачивать к другому элементу
- Один элемент, привязанный к другому
State
- Обновления содержимого
- Фокус пользователя и выбор
- Ход выполнения
- ошибки
Структура
- Сводка структуры на одном узле
- Переориентации
- Свернуть и развернуть и свернуть
Sequence
- Последовательность слайд-шоу
- Пролистывание рисунков
Time
- Отображение изменений с течением времени, интервалов времени и экранной рассылки
- Переход к корзине, отмене и повторному повтору
- Восстановление исторического состояния
Привлечь внимание
Если цель заключается в том, чтобы привлечь внимание пользователя к одному элементу из нескольких или предупредить пользователя об обновлении информации, то анимация может быть подходящей. Например, начальная страница приложения может использовать кнопку «Начало работы», которая слайдирует на месте после загрузки страницы.
Как правило, последний перемещаемый элемент на экране привлекает внимание пользователя. В серии анимированных элементов внимание пользователя будет следовать последнему движущемуся объекту.
Предупреждение
- Оповещение пользователя, получение внимания, отображение хода выполнения
- Показать, что что-то выполняется правильно или неправильно или отображает ход выполнения или изменения хода выполнения
- Запрос пользователей во время задачи, например поиск дополнительных сведений в Интернете или изучение текущей задачи
Уведомления
- Оповещение пользователя об условии ошибки
- Прервать пользователя, чтобы узнать, хотите ли они присутствовать на чем-то другом
- Нежно сообщите пользователю, что процесс завершился или изменился, например, когда скачивание завершено.
Моделирование
Эта категория охватывает физическость и размерность.
- Иллюстрировать, откуда приходят объекты или откуда они отправляются
- Развернуть и свернуть или закрыть и закрыть
- Сдвиг, прокрутка и поворот страницы
- Стек и упорядочение z
- Карусель и аккордеон
- Перевернутый и поворот пользовательского интерфейса
Индикаторы реагирования и хода выполнения
Индикаторы хода выполнения имеют несколько заметных преимуществ:
- Как детерминированные, так и недетерминированные индикаторы хода выполнения переоценят пользователя, что система не сбой и работает над проблемой.
- Детерминированные индикаторы дают пользователю чувство того, насколько далеко вдоль действия выполняется, а также чувство приближения к финишу.
Шаблоны анимации
Анимации в Visual Studio предназначены для обслуживания определенной функции, не препятствуя повышению производительности пользователей. Как правило, анимации в Visual Studio должны быть следующими:
- Небольшие и ненавязчивые
- Естественный и реалистичный
- Тонкие и подчиненные
- Быстрая и эффективная
- Расслабленный, не поспешил
На этом рисунке показаны стили анимации, которые мы рекомендуем для Visual Studio. Анимация или тонкие анимации, такие как увядающее или исчезание, не используются чаще всего. Существует ограниченное применение анимаций перемещения, таких как расширение и контракт, изменение положения X и Y, а также поворот.
Рекомендуемые стили анимации для Visual Studio
Отображаться и исчезать
С помощью этого шаблона элемент переключается с видимого на вне представления и обратно без анимации перехода.
Отображается и исчезает анимация
Правильное использование
Свежие элементы пользовательского интерфейса, которые должны мгновенно отображаться или исчезать, чтобы пользователь не отвлекал и не препятствовал. Кроме того, анимации медленного перемещения могут рассматриваться как перетаскивание производительности, которое не будет происходить с стилем отображения и исчезновения.
Неправильное использование
В случаях, когда пользовательский интерфейс отображается так резко, пользователь не имеет понятия о том, что произошло, и добавление анимации поможет с контекстным пониманием.
Свойства анимации
Задержка времени обычно равна нулю секундам.
Примеры
- Окна средств автоматического скрытия
- Пользовательский интерфейс редактора с активацией клавиатуры, например IntelliSense и справка по параметрам
- Области кода развертывания и свертывание
Fade-in и fade-out
В этом шаблоне элемент пользовательского интерфейса переходит от невидимого (0 % непрозрачности) к видимой (100 % непрозрачности) или наоборот.
Анимация fade-in и fade-out
Правильное использование
Это наиболее часто рекомендуемая анимация пользовательского интерфейса. Это тонкий эффект, который добавляет интерес без прерывания потока. В некоторых случаях пользователь может даже не понимать, что есть анимация, воспринимая гладкую и потоковую систему пользовательского интерфейса.
Свойства анимации
- Начиная с непрозрачности: 0 % для исчезания, 100 % для выхода
- Окончание непрозрачности: 100% для исчезания, 0 % для отвыкание
- Длительность: 200 миллисекунда автономных, 100 миллисекундах при использовании в рамках последовательности анимации комбинации
- Стиль упрощения: Sine InOut
Примеры
- Окна средств автоматического скрытия
- Открытие и закрытие меню
- Переходы на вкладку фона и переднего плана
Сочетание цветов от A до B
С помощью этого шаблона элемент пользовательского интерфейса изменяется с цвета A на цвет B.
Анимация смешения цветов
Правильное использование
При анимированном переходе, когда элемент пользовательского интерфейса изменяет цвет из одного контекста или состояния в другое.
Свойства анимации
- Начальный цвет: пользовательский интерфейс
- Конечный цвет: пользовательский интерфейс
- Длительность: 200 миллисекунда автономных, 100 миллисекундах при использовании в рамках последовательности анимации комбинации
- Стиль упрощения: Sine InOut
Примеры
- Переходы состояния окна документа (активные, последние активные и неактивные)
- Переходы состояния окна инструментов (фокусированные и нефокусированные)
Развертывание и контракт
С помощью этого шаблона элемент пользовательского интерфейса расширяется в направлениях X, Y или в обоих направлениях.
Развертывание и анимация контракта
Правильное использование
При анимированном переходе при изменении размера элемента пользовательского интерфейса из одного контекста в другой.
Свойства анимации
- Шкала X: % или конкретное измерение (в пикселях)
- Шкала Y: % или конкретное измерение (в пикселях)
- Позиция привязки: обычно в левом верхнем углу (для языков слева направо) или в правом верхнем углу (для языков справа налево)
- Длительность: 200 миллисекунда автономных, 100 миллисекундах при использовании в рамках последовательности анимации комбинации
Примеры
- Развертывание и свертывание панели архитектуры Обозреватель
- Элемент начальной страницы Visual Studio 2017 разверните и свернуть
Изменение положения X-Y
С помощью этого шаблона элемент пользовательского интерфейса изменяет положение X или Y или оба.
Анимация изменения положения X-Y
Правильное использование
При анимированном переходе, когда элемент пользовательского интерфейса изменяет положение из одного контекста в другой.
Свойства анимации
- Запуск позиции X и Y: зависят от пользовательского интерфейса
- Окончание позиции X и Y: зависят от пользовательского интерфейса
- Путь движения: нет
- Длительность: 200 миллисекунда автономных, 100 миллисекундах при использовании в рамках последовательности анимации комбинации
- Стиль упрощения: Sine InOut
Пример
Изменение порядка вкладок
Поворот
С помощью этого шаблона элемент пользовательского интерфейса поворачивается.
Анимация поворота элемента пользовательского интерфейса
Правильное использование
Только для неопределенного индикатора хода выполнения спиннинга.
Свойства анимации
- Степень поворота: 360
- Центр поворота: середина объекта
- Длительность: непрерывная
Пример
Неопределенный индикатор хода выполнения (спиннинг)
Общие действия пользовательского интерфейса оболочки и рекомендуемые анимации
Открытие вкладки
Анимация открытия вкладки
- Стиль: отображается
- Длительность: ноль секунд
Закрытие вкладки
Анимация закрытия вкладки
- Стиль: изменение положения X
- Длительность: 200 миллисекунда
Изменение порядка вкладок
Анимация переупорядочения вкладок
- Стиль: изменение положения X
- Длительность: 200 миллисекунда
Закрытие плавающего документа
Закрытие анимации с плавающей запятой
- Стиль: отображается
- Длительность: 200 миллисекунда
Переход состояния окна
Анимация перехода состояния окна
- Стиль: чтобы соответствовать другим окнам, позвольте текущей операционной системе определить анимацию закрытия документа.
- Длительность: 200 миллисекунда
Открыть меню
Анимация открытия меню
- Стиль: fade-in
- Длительность: 200 миллисекунда
Закрыть меню
Анимация закрытия меню
- Стиль: угасание
- Длительность: 200 миллисекунда
Окно средства автоматического скрытия
Автоматическое скрытие анимации отображения окна инструментов
- Стиль: отображается
- Длительность: ноль секунд
Пошаговое руководство. Добавление анимации в проект MFC
В этом пошаговом руководстве показано, как добавить базовый анимированный объект в проект Visual C++, библиотеки классов Microsoft Foundation (MFC).
В пошаговом руководстве показано, как выполнить следующие задачи:
- Создайте приложение MFC.
- Добавьте меню и добавьте команды для запуска и остановки анимации.
- Создайте обработчики для команд запуска и остановки.
- Добавьте в проект анимированный объект.
- Центр анимированного объекта в окне.
- Проверьте результаты.
Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.
Необходимые компоненты
Чтобы выполнить это пошаговое руководство, необходимо иметь Visual Studio.
Создание приложения MFC
- Используйте мастер приложений MFC для создания приложения MFC. См . пошаговое руководство. Использование новых элементов управления оболочки MFC для инструкций по открытию мастера для вашей версии Visual Studio.
- В поле «Имя» введите MFCAnimationWalkthrough. Нажмите кнопку ОК.
- В диалоговом окне мастера приложений MFC убедитесь, что тип приложения — несколько документов, стиль проекта — Visual Studio, а выбран параметр поддержки архитектуры document/View. Нажмите кнопку Готово.
Добавление меню и добавление команд для запуска и остановки анимации
- В меню «Вид» наведите указатель мыши на другие окна и выберите пункт «Представление ресурсов».
- В представлении ресурсов перейдите в папку меню и откройте ее. Дважды щелкните ресурс IDR_MFCAnimationWalkthroughTYPE , чтобы открыть его для изменения.
- В строке меню в поле «Тип здесь» введите nimation&, чтобы создать меню анимации.
- В разделе «Анимация» в поле «Тип здесь» введите«Пуск &вперед», чтобы создать команду «Пуск вперед«.
- В разделе «Пуск вперед» в поле «Тип здесь» введите«Начать &назад«.
- В разделе «Пуск назад» в поле «Тип здесь» введите«Сверху»&, чтобы создать команду Stop.
- Сохраните MFCAnimationWalkthrough.rc и закройте его.
- В Обозреватель решений дважды щелкните MainFrm.cpp, чтобы открыть его для изменения. В методе CMainFrame::OnCreate найдите раздел с несколькими вызовами lstBasicCommands.AddTail . Сразу после этого раздела добавьте следующий код.
lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD); lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD); lstBasicCommands.AddTail(ID_ANIMATION_STOP);Создание обработчиков для команд запуска и остановки
- В меню «Проект» выберите мастер классов.
- В мастере классов MFC в разделе «Имя класса» выберите CMFCAnimationWalkthroughView.
- На вкладке «Команды» в поле «Идентификаторы объектов» выберите ID_ANIMATION_STARTFORWARD, а затем в поле «Сообщения» выберите COMMAND. Нажмите кнопку «Добавить обработчик«.
- В диалоговом окне «Добавить функцию-член» нажмите кнопку «ОК«.
- В поле идентификаторов объектов выберите ID_ANIMATION_STARТБ ACKWARD, а затем в поле «Сообщения» выберите COMMAND. Нажмите кнопку «Добавить обработчик«.
- В диалоговом окне «Добавить функцию-член» нажмите кнопку «ОК«.
- В поле идентификаторов объектов выберите ID_ANIMATION_STOP, а затем в поле «Сообщения» выберите COMMAND. Нажмите кнопку «Добавить обработчик» и нажмите кнопку «ОК«.
- В диалоговом окне «Добавить функцию-член» нажмите кнопку «ОК«.
- В мастере классов MFC нажмите кнопку «ОК«.
- Сохраните MFCAnimationWalkthroughView.cpp, который открыт в редакторе, но не закрывайте его.
Добавление анимированного объекта в проект
- В Обозреватель решений дважды щелкните MFCAnimationWalkthroughView.h, чтобы открыть его для изменения. Непосредственно перед определением CMFCAnimationWalkthroughView класса добавьте следующий код, чтобы создать пользовательский контроллер анимации, который будет обрабатывать конфликты планирования с объектом анимации.
class CCustomAnimationController : public CAnimationController < public: CCustomAnimationController() < >virtual BOOL OnHasPriorityTrim(CAnimationGroup* pGroupScheduled, CAnimationGroup* pGroupNew, UI_ANIMATION_PRIORITY_EFFECT priorityEffect) < return TRUE; >>;CCustomAnimationController m_animationController; CAnimationColor m_animationColor; CAnimationRect m_animationRect;void Animate(BOOL bDirection);static int nAnimationGroup = 0; static int nInfoAreaHeight = 40;m_animationController.EnableAnimationTimerEventHandler(); m_animationController.EnablePriorityComparisonHandler(UI_ANIMATION_PHT_TRIM); m_animationColor = RGB(255, 255, 255); m_animationRect = CRect(0, 0, 0, 0); m_animationColor.SetID(-1, nAnimationGroup); m_animationRect.SetID(-1, nAnimationGroup); m_animationController.AddAnimationObject(&m_animationColor); m_animationController.AddAnimationObject(&m_animationRect);BOOL CMFCAnimationWalkthroughView::PreCreateWindow(CREATESTRUCT& cs) < // TODO: Modify the Window class or styles here by modifying // the CREATESTRUCT cs m_animationController.SetRelatedWnd(this); return CView::PreCreateWindow(cs); >void CMFCAnimationWalkthroughView::OnDraw(CDC* pDC) < CMFCAnimationWalkthroughDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); if (!pDoc) return; // TODO: add draw code for native data here CMemDC dcMem(*pDC, this); CDC& dc = dcMem.GetDC(); CRect rect; GetClientRect(rect); dc.FillSolidRect(rect, GetSysColor(COLOR_WINDOW)); CString strRGB; strRGB.Format(_T("Fill Color is: %d; %d; %d"), GetRValue(m_animationColor), GetGValue(m_animationColor), GetBValue(m_animationColor)); dc.DrawText(strRGB, rect, DT_CENTER); rect.top += nInfoAreaHeight; CBrush br; br.CreateSolidBrush(m_animationColor); CBrush* pBrushOld = dc.SelectObject(&br); dc.Rectangle((CRect)m_animationRect); dc.SelectObject(pBrushOld); >void CMFCAnimationWalkthroughView::Animate(BOOL bDirection) < static UI_ANIMATION_SECONDS duration = 3; static DOUBLE dblSpeed = 35.; static BYTE nStartColor = 50; static BYTE nEndColor = 255; BYTE nRedColorFinal = bDirection ? nStartColor : nEndColor; BYTE nGreenColorFinal = bDirection ? nStartColor : nEndColor; BYTE nBlueColorFinal = bDirection ? nStartColor : nEndColor; CLinearTransition* pRedTransition = new CLinearTransition(duration, (DOUBLE)nRedColorFinal); CSmoothStopTransition* pGreenTransition = new CSmoothStopTransition(duration, (DOUBLE)nGreenColorFinal); CLinearTransitionFromSpeed* pBlueTransition = new CLinearTransitionFromSpeed(dblSpeed, (DOUBLE)nBlueColorFinal); m_animationColor.AddTransition(pRedTransition, pGreenTransition, pBlueTransition); CRect rectClient; GetClientRect(rectClient); rectClient.top += nInfoAreaHeight; int nLeftFinal = bDirection ? rectClient.left : rectClient.CenterPoint().x; int nTopFinal = bDirection ? rectClient.top : rectClient.CenterPoint().y; int nRightFinal = bDirection ? rectClient.right : rectClient.CenterPoint().x; int nBottomFinal = bDirection ? rectClient.bottom : rectClient.CenterPoint().y; CLinearTransition* pLeftTransition = new CLinearTransition(duration, nLeftFinal); CLinearTransition* pTopTransition = new CLinearTransition(duration, nTopFinal); CLinearTransition* pRightTransition = new CLinearTransition(duration, nRightFinal); CLinearTransition* pBottomTransition = new CLinearTransition(duration, nBottomFinal); m_animationRect.AddTransition(pLeftTransition, pTopTransition, pRightTransition, pBottomTransition); CBaseKeyFrame* pKeyframeStart = CAnimationController::GetKeyframeStoryboardStart(); CKeyFrame* pKeyFrameEnd = m_animationController.CreateKeyframe(nAnimationGroup, pBlueTransition); pLeftTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd); pTopTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd); pRightTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd); pBottomTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd); m_animationController.AnimateGroup(nAnimationGroup); >BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
void CMFCAnimationWalkthroughView::OnAnimationStartforward() < Animate(TRUE); >void CMFCAnimationWalkthroughView::OnAnimationStartbackward() < Animate(FALSE); >void CMFCAnimationWalkthroughView::OnAnimationStop() < IUIAnimationManager* pManager = m_animationController.GetUIAnimationManager(); if (pManager != NULL) < pManager->AbandonAllStoryboards(); > >Центр анимированного объекта в окне
- В Обозреватель решений дважды щелкните MFCAnimationWalkthroughView.h, чтобы открыть его для изменения. В конце CMFCAnimationWalkthroughView класса сразу после определения m_animationRect добавьте следующий код.
BOOL m_bCurrentDirection;void CMFCAnimationWalkthroughView::OnSize(UINT nType, int cx, int cy) < CView::OnSize(nType, cx, cy); CRect rect; GetClientRect(rect); rect.top += nInfoAreaHeight; CRect rectAnim = m_animationRect; m_animationRect = CRect(CPoint(rect.CenterPoint().x - rectAnim.Width() / 2, rect.CenterPoint().y - rectAnim.Height() / 2), rectAnim.Size()); if (m_animationController.IsAnimationInProgress()) < Animate(m_bCurrentDirection); >>m_bCurrentDirection = TRUE;m_bCurrentDirection = bDirection;Проверка результатов
- Выполните сборку приложения и запустите его. В меню «Анимация» нажмите кнопку «Пуск вперед«. Прямоугольник должен появиться, а затем заполнить центральную область. При нажатии кнопки «Пуск назад» анимация должна измениться и при нажатии кнопки «Остановить«, она должна остановиться. Цвет заливки прямоугольника должен изменяться по мере выполнения анимации, а текущий цвет должен отображаться в верхней части окна анимации.
Добавление анимации в элемент управления (C#)
Элемент управления Анимация в наборе элементов управления ASP.NET AJAX — это не только элемент управления, но и целая платформа для добавления анимаций в элемент управления. В этом руководстве показано, как настроить такую анимацию.
Общие сведения
Элемент управления Анимация в наборе элементов управления ASP.NET AJAX — это не только элемент управления, но и целая платформа для добавления анимаций в элемент управления. В этом руководстве показано, как настроить такую анимацию.
Этапы
Первым шагом является включение ScriptManager на страницу , чтобы загрузить библиотеку ASP.NET AJAX и использовать набор средств управления:
Анимация в этом сценарии будет применена к панели текста, которая выглядит следующим образом:
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.Связанный класс CSS для панели определяет цвет фона и ширину:
.panelClassДалее нам понадобится AnimationExtender . После предоставления ID и обычного runat=»server» атрибута TargetControlID необходимо задать для элемента управления, чтобы анимировать в нашем случае панель:
Вся анимация применяется декларативно с использованием синтаксиса XML, который, к сожалению, в настоящее время не полностью поддерживается IntelliSense в Visual Studio. Корневой узел находится ; внутри этого узла, допускается несколько событий, которые определяют, когда происходит анимация:
- OnClick (щелчок мышью)
- OnHoverOut (когда мышь покидает элемент управления)
- OnHoverOver (при наведении указателя мыши на элемент управления и остановке анимации OnHoverOut )
- OnLoad (при загрузке страницы)
- OnMouseOut (когда мышь покидает элемент управления)
- OnMouseOver (при наведении указателя мыши на элемент управления, а не при остановке анимации OnMouseOut )
Платформа поставляется с набором анимаций, каждая из которых представлена собственным XML-элементом. Вот выбор:
- (изменение цвета)
- (исчезает)
- (исчезает)
- (изменение свойства элемента управления)
- (пульсирующая)
- (изменение размера)
- (пропорциональное изменение размера)
В этом примере панель должна исчезать. Анимация должна занять 1,5 секунды ( Duration атрибут), отображая 24 кадра (шаги анимации) в секунду ( Fps атрибут). Ниже приведена полная разметка AnimationExtender для элемента управления.
При выполнении этого скрипта панель отображается и исчезает через полтора секунды.