День двадцать девятый. Анимационные эффекты

Вступление

Платформа Windows Phone 7 привлекает пользователя различными анимационными эффектами. Рассмотрим несколько приемов создания подобных трюков в своих приложениях.

Эффект открывающейся двери

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

Создайте новый проект и добавьте прямоугольник под именем ContentPanel в сетку Grid:

Для создания анимации мы переключимся в Expression Blend 4 (Щелкните правой на имени проекта и выберите Open in Expression Blend.

Далее в Expression Blend найдите вкладку Objects and Timeline. Там ищите символ + для создания новых анимаций.

Когда вы щелкните на символе +, то у вас откроется диалоговое окно. Дайте вашей анимации новое имя DoorOpen:

Вы вернетесь обратно к вкладке Objects and Timeline, но теперь у вас будет шкала времени в правой части страницы. Чтобы видеть шкалу времени лучше, нажмите клавишу F6 на клавиатуре. Это заставит изменить местоположения вкладок в Expression, переместив вкладку Objects and Timeline в подвал программы.

Для нашей анимации DoorOpen мы поменяем ВСЕ содержимое на нашей странице. Для этого мы воспользуемся элементом LayoutRoot. Щелкните на LayoutRoot на вкладке Objects and Timeline и найдите значок в виде яйца.

Этот значок указывает на ключевой кадр (Keyframe). Ключевые кадры используется в анимации, когда что-то меняется. Silverlight достаточно умен, чтобы самостоятельно создать анимацию между двумя ключевыми кадрами. Щелкните на кнопке Keyframe, если вы этого еще не сделали.

Таким образом мы создали ключевой кадр на нулевой секунде. Мы считаем, что наш элемент сейчас находится в стартовой позиции и мы хотим запомнить это состояние. У нас есть цель изменить стартовую позицию и точка, относительно которого будет происходить анимация. По умолчанию используется анимация вращения с точкой, которая приходится на центр объекта. Но мы хотим, чтобы анимация приходилась на левый край экрана.

Убедившись, что выбран LayoutRoot и значок "яйца" находится на 0 секунде, посмотрим на вкладку Properties. Внутри категории Transform имеется другая вкладка Center of Rotation (в секции Projection). Вы видите, что значения X и Y равны 0.5 (середина элемента). Изменим значение X на 0 (то есть левый край элемента).

Возвращаемся обратно на Object and Timeline. Перетащите желтую полоску, показывающую время, на середину между значениями 0 и 1. Во время перемещения вы увидите, что время изменится для кнопки Keyframe.

Сейчас мы собираемся изменить свойство Projection.Rotation. Откройте вкладку Properties (слева от Center of Rotation), и измените значение Y на 90. Это приведет к вращение содержимого на 90 градусов влево в 3D-вращении.

Если вы нажмете кнопку Play на шкале времени, то сможете увидеть анимацию в действии. Однако это была только подготовительная работа. Теперь нам нужно вызвать созданную анимацию из кода. Вот как будет выглядеть XAML сейчас после первых шагов (файл MainPage.xaml):


<phone:PhoneApplicationPage 
    x:Class="Day29_Animations.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		
		<Storyboard x:Name="DoorOpen">
			<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="LayoutRoot">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		
	</phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
    	<Grid.Projection>
    		<PlaneProjection/>
    	</Grid.Projection>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="animations" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<Rectangle Height="326" HorizontalAlignment="Left" Margin="83,100,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="289" Fill="Red" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Вызов анимации из кода

Создав анимацию, сохраним все изменения и вернемся обратно к Visual Studio 2010. Откроем файл MainPage.xaml.cs и запустим анимацию, если будет сделан щелчок на прямоугольнике (который мы добавили в самом начале, помните?)

Создаем обработчик события для щелчка и вызываем метод Begin():


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Day29_Animations
{
	public partial class MainPage : PhoneApplicationPage
	{
		// Constructor
		public MainPage()
		{
			InitializeComponent();
			rectangle1.MouseLeftButtonDown +=new MouseButtonEventHandler(rectangle1_MouseLeftButtonDown);
		}

		private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
		{
			DoorOpen.Begin();
		}
	}
}

Вот и все! Теперь у вас в приложении будет работать анимация открывающей двери.

Реклама