Flex эффект во ViewStack


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

[swf]http://mainview.ru/wp-content/uploads/2010/02/TransEffect.swf,400,300[/swf]

Чтобы посмотреть основную идею, создадим простой ViewStack, который при переключении будет использовать данный эффект.

Создадим ViewStack и навигацию, например LinkBar, как самый простой для этого примера:

<mx:LinkBar dataProvider="viewStack"/>
<mx:ViewStack height="200" width="300" id="viewStack">

<!-- Red View -->
<mx:VBox backgroundColor="#FF0000" label="Screen One">

</mx:VBox>

<!-- Green View -->
<mx:VBox backgroundColor="#00FF00" label="Screen Two">

</mx:VBox>

<!-- Blue View -->
<mx:VBox backgroundColor="#0000FF" label="Screen Three">

</mx:VBox>

</mx:ViewStack>

Всё работает прекрасно. Давайте добавим теперь эффект, позволяющий значительно улучшить восприятие. Возмём два стандартных эффекта: WipeLeft & WipeRight. Объявим их в MXML, установим id и время выполнения duration.

<mx:WipeLeft duration="500" id="wipeLeft"/>
<mx:WipeRight duration="500" id="wipeRight"/>

В заключении, мы просто должны назначить id для VBoxes в стеке, используя showEffect и hideEffect.

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}"
backgroundColor="#FF0000" label="Screen One"/>
</mx:VBox>

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}"
backgroundColor="#00FF00" label="Screen Two"/>
</mx:VBox>

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}"
backgroundColor="#0000FF" label="Screen Three">
</mx:VBox>
Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

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

пять × один =