Изменение анимаций с помощью клиентского кода (VB) Changing an Animation Using Client-Side Code (VB)

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Анимацию также можно изменить с помощью пользовательского кода JavaScript на стороне клиента. The animation can also be changed using custom client-side JavaScript code.

Обзор Overview

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Анимацию также можно изменить с помощью пользовательского кода JavaScript на стороне клиента. The animation can also be changed using custom client-side JavaScript code.

Шаги Steps

Во-первых, включите ScriptManager на странице. затем загружается библиотека ASP.NET AJAX, что позволяет использовать набор средств управления. First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

Анимация будет применена к панели текста, которая выглядит следующим образом: The animation will be applied to a panel of text which looks like this:

В связанном классе CSS для панели задайте хороший цвет фона, а также задайте фиксированную ширину панели: In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

Фактическая анимация запускается с помощью кнопки HTML: The actual animation is launched by an HTML button:

Затем добавьте AnimationExtender на страницу, указав ID , атрибут TargetControlID и runat=»server» обязательную: Then, add the AnimationExtender to the page, providing an ID , the TargetControlID attribute and the obligatory runat=»server» :

Как и в случае с API сервера AnimationExtender , еще нет простого способа присвоить анимацию расширительу. As with the server API of AnimationExtender , there is no easy way to assign an animation to the extender yet. Однако расширитель предоставляет несколько методов для чтения и записи анимации, зарегистрированной с различными событиями ( OnClick , OnLoad и т. д.). However the extender does expose several methods to read and write animations registered with the various events ( OnClick , OnLoad , and so on). Ниже приведены некоторые примеры: Here are some examples:

Формат возвращаемого значения функций get_*() и формат аргумента для функций set_*() являются строкой JSON, предоставляя объектное представление того, что будет иметь XML-разметка. The format of the return value of the get_*() functions and the format of the argument for the set_*() functions is a JSON string, providing an object representation of what the XML markup would be. В настоящее время невозможно передать объект в, но можно считать объект из заданной анимации ( get_OnXXXBehavior() методы). Currently, there is no way to pass an object in, but it is possible to read an object from a given animation ( get_OnXXXBehavior() methods).

Ниже приведена строка JSON (без кавычек и отформатированных), представляющая анимацию, активируемую кнопкой, но анимирование панели путем изменения ее размера и исчезновения ее в то же время: Here is a JSON string (without the delimiting quotes and formatted nicely) representing an animation triggered by the button, but animating the panel by resizing it and fading it out at the same time:

Следующий код JavaScript назначает этот JSON-скрипта OnClick анимации текущего расширителя и выполняет его: The following JavaScript code assigns this JSON descripting to the OnClick animation of the current extender and runs it:

Анимация выполняется немедленно, без щелчка мышью (и с очень маленькой разметкой) (щелкните, чтобы просмотреть изображение с полным размером). The animation runs immediately, without a mouse click (and with very little markup) (Click to view full-size image)

Добавление анимации в элемент управления (VB) Adding Animation to a Control (VB)

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. В этом руководстве показано, как настроить подобную анимацию. This tutorial shows how to set up such an animation.

Обзор Overview

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. В этом руководстве показано, как настроить подобную анимацию. This tutorial shows how to set up such an animation.

Шаги Steps

Первым шагом является включение ScriptManager на страницу, чтобы загрузить библиотеку ASP.NET AJAX и использовать набор элементов управления. The first step is as usual to include the ScriptManager in the page so that the ASP.NET AJAX library is loaded and the Control Toolkit can be used:

Анимация в этом сценарии будет применена к панели текста, которая выглядит следующим образом: The animation in this scenario will be applied to a panel of text which looks like this:

Связанный класс CSS для панели определяет цвет фона и ширину: The associated CSS class for the panel defines a background color and a width:

Далее требуется AnimationExtender . Next up, we need the AnimationExtender . После предоставления ID и обычного runat=»server» атрибут TargetControlID должен быть установлен на элемент управления для анимации в нашем случае, панель: After providing an ID and the usual runat=»server» , the TargetControlID attribute must be set to the control to animate in our case, the panel:

Вся анимация применяется декларативно с использованием синтаксиса XML, к сожалению, в настоящее время не полностью поддерживается IntelliSense в Visual Studio. The whole animation is applied declaratively, using an XML syntax, unfortunately currently not fully supported by Visual Studio’s IntelliSense. Корневой узел ; в пределах этого узла; разрешено несколько событий, которые определяют, когда происходит анимация (-ов): The root node is ; within this node, several events are allowed which determine when the animation(s) take(s) place:

• OnClick (щелчок мышью) OnClick (mouse click)
• OnHoverOut (когда мышь покидает элемент управления) OnHoverOut (when the mouse leaves a control)
• OnHoverOver (при наведении указателя мыши на элемент управления, остановка OnHoverOut ной анимации) OnHoverOver (when the mouse hovers over a control, stopping the OnHoverOut animation)
• OnLoad (при загрузке страницы) OnLoad (when the page has been loaded)
• OnMouseOut (когда мышь покидает элемент управления) OnMouseOut (when the mouse leaves a control)
• OnMouseOver (при наведении указателя мыши на элемент управления, не останавливая OnMouseOut анимацию) OnMouseOver (when the mouse hovers over a control, not stopping the OnMouseOut animation)

Платформа поставляется с набором анимаций, каждый из которых представлен собственным XML-элементом. The framework comes with a set of animations, each one represented by its own XML element. Выбор осуществляется следующим образом: Here is a selection:

• (изменение цвета) (changing a color)
• (снижение) (fading in)
• (плавное уменьшение) (fading out)

(изменение свойства элемента управления)

(changing a control’s property)

(pulsating)

(изменение размера) (changing the size)

(пропорциональное изменение размера) (proportionally changing the size)

В этом примере панель будет исчезать. Анимация должна принимать 1,5 секунд ( Duration атрибут), отображая 24 кадра (шаги анимации) в секунду ( Fps атрибут). In this example, the panel shall fade out. The animation shall take 1.5 seconds ( Duration attribute), displaying 24 frames (animation steps) per second ( Fps attribute). Ниже приведена полная разметка для элемента управления AnimationExtender . Here is the complete markup for the AnimationExtender control:

При выполнении этого сценария панель отображается и постепенно исчезает в течение одной и половины секунд. When you run this script, the panel is displayed and fades out in one and a half seconds.

Реализовать анимированную заставку для приложения

Подскажите, как мне на время загрузки формы (она долго грузится) показать форму с анимацией (типа круга progress circle). Эта форма должна закрыться когда основная форма загружена.

У меня либо анимации совсем не видно (пустая форма), но основная форма загружается успешно. либо анимация работает но форма не грузится. Возможно ли решение без многопоточности?

Создать заставку для приложения
Помогите. Я хочу сделать в программе перед тем как загрузится основная форма программы Окошко с.

Реализовать заставку приложения
Прошу HELP! Как работать с потоками я читала, но не очень разобралась. Вот такой код составила.

Как реализовать заставку приложения при её запуске?
Здравствуйте, ув.читатели данного вопроса! Был бы очень рад, если бы вы мне могли помочь со.

Как сделать заставку приложения
Помогиете организовать заставку с картинкой. Чтоб не создавать лишних форм. А просто появляется.

slavina, не зная деталей можно лишь посоветовать встроенное средство.
В свойствах проекта можно выбрать параметр «Экран-заставка».
В нем перечислены формы проекта.
Там, вроде как, многопоточность уже реализована. Проверить не на чем.

Добавлено через 3 минуты
Проверил, работает, но пришлось скомпилировать, иначе программе не нравился доступ к элементу из потока

Простой пример:
Есть форма (Form1) с кнопкой. По нажатию кнопки фоновой задачей открывается сплэш форма с анимацией (GIF рисунок).
Основная задача (обращение к БД) имитируется паузой. По завершении паузы — заставка закрывается. При этом анимация на заставке не работает.

Если же делаю наоборот — фоновая задача — пауза, а основная — открытие заставки, то все работает нормально.
Проблема в том, что в реальности основная задача у меня открытие большой формы с загрузкой данных и прочее. Это занимает от 10 сек. На это время хотел поставить заставку с анимацией (типа ожидания).
Явно что-то делаю не так. Казалось бы очевидная задача — показ колеса (spinning wheel) на время загрузки.

Анимация в зависимости от условия (VB) Animation Depending On a Condition (VB)

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Выполняется ли анимация, а также может зависеть от условия в виде кода JavaScript. Whether an animation is run or not can also depend on a condition in form of some JavaScript code.

Обзор Overview

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Выполняется ли анимация, а также может зависеть от условия в виде кода JavaScript. Whether an animation is run or not can also depend on a condition in form of some JavaScript code.

Шаги Steps

Во-первых, включите ScriptManager на странице. затем загружается библиотека ASP.NET AJAX, что позволяет использовать набор средств управления. First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

Анимация будет применена к панели текста, которая выглядит следующим образом: The animation will be applied to a panel of text which looks like this:

В связанном классе CSS для панели задайте хороший цвет фона, а также задайте фиксированную ширину панели: In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

Затем добавьте AnimationExtender на страницу, указав ID , атрибут TargetControlID и обязательную runat=»server»: Then, add the AnimationExtender to the page, providing an ID , the TargetControlID attribute and the obligatory runat=»server»:

Обратите внимание, что знак «меньше» ( ) в атрибуте ConditionScript должен быть экранированным (). Note that the less than sign ( ) in the ConditionScript attribute must be escaped (). При запуске этого скрипта не выполняется ни анимация, ни одно из двух операций. When you run this script, either no animation runs, or one of the two does, or both do.

Панель вытекает без изменения размера, поэтому вторая анимация выполняется, а первая — нет (щелкните, чтобы просмотреть изображение с полным размером). The panel is fading out without resizing, so the second animation runs, the first one didn’t (Click to view full-size image)

Выполнение анимаций с помощью клиентского кода (VB) Executing Animations Using Client-Side Code (VB)

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Выполнение анимации также может быть запущено с помощью пользовательского кода JavaScript на стороне клиента. The animation execution may also be triggered using custom client-side JavaScript code.

Обзор Overview

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Выполнение анимации также может быть запущено с помощью пользовательского кода JavaScript на стороне клиента. The animation execution may also be triggered using custom client-side JavaScript code.

Шаги Steps

Во-первых, включите ScriptManager на странице. затем загружается библиотека ASP.NET AJAX, что позволяет использовать набор средств управления. First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

Анимация будет применена к панели текста, которая выглядит следующим образом: The animation will be applied to a panel of text which looks like this:

В связанном классе CSS для панели задайте хороший цвет фона, а также задайте фиксированную ширину панели: In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

Затем добавьте AnimationExtender на страницу, указав ID , атрибут TargetControlID и runat=»server» обязательную: Then, add the AnimationExtender to the page, providing an ID , the TargetControlID attribute and the obligatory runat=»server» :

В целях демонстрации эта анимация (и любая другая анимация, созданная с помощью набора средств управления) выполняется с помощью кода JavaScript после выполнения страницы. For the sake of demonstration, this animation (and any other animation created using the Control Toolkit) is executed using JavaScript code, once the page runs. Прежде всего нам нужен доступ к элементу управления AnimationExtender . First of all we need access to the AnimationExtender control. Библиотека ASP.NET AJAX предоставляет функцию $find() для этой задачи: The ASP.NET AJAX library provides the $find() function for this task:

Элемент управления AnimationExtender предоставляет богатый API, включая методы с именами, идентичными обработчикам событий, используемым в XML-разметке: OnClick() , OnLoad() и т. д. The AnimationExtender control exposes a rich API, including methods with names identical to the event handlers used in the XML markup: OnClick() , OnLoad() , and so on. Например, вызов метода OnClick() выполняет анимацию в элементе элемента управления AnimationExtender : For instance, a call of the OnClick() method executes the animation within the element of the AnimationExtender control:

Ниже приведен полный код JavaScript на стороне клиента, который имитирует щелчок на панели после полной загрузки страницы. Обратите внимание, что используется имя pageLoad() функции, которое вызывается ASP.NET AJAX после загрузки страницы и всех включенных библиотек JavaScript. Here is the complete client-side JavaScript code that emulates the click on the panel once the page has been fully loaded note that the pageLoad() function name is used which is called by ASP.NET AJAX once the page and all included JavaScript libraries have been loaded.

Анимация выполняется немедленно без щелчка мышью (щелкните, чтобы просмотреть изображение с полным размером). The animation runs immediately, without a mouse click (Click to view full-size image)