Статьи

Создайте простую анимацию в приложении Windows Phone

Декабрь 23, 2018

Создание анимации в приложении Windows Phone проще, чем вы думаете.

Я создал простое приложение, которое показывает, как создать статическую анимацию и динамическую анимацию. Обе анимации заполняют следующий красный прямоугольник снизу вверх.

образ

Статическая анимация

Анимация использует объект раскадровки . Обычно он создается в файле XAML, потому что так проще. Вот код XAML:

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.StaticAnimationPage"
                            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">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="staticAnimation">

            <DoubleAnimation Duration="0:0:5"
                             To="700"
                             Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>

    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

DoubleAnimation является простейшей анимации доступна, она одушевляет свойство , которое использует двойное значение. Описанная выше двойная анимация определяется следующим образом: анимируйте свойство Height объекта rectangleRed с текущего значения высоты до 700 за 5 секунд.

Чтобы запустить анимацию, вам нужно вызвать метод Begin для анимации:

using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class StaticAnimationPage
    {
        public StaticAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            staticAnimation.Begin();
        }
    }
}

Он не используется в примере приложения, но если вы хотите остановить анимацию в любое время, вам просто нужно вызвать метод Stop для анимации.

Динамическая анимация

Для динамической анимации давайте представим, что свойства Duration и To указаны в коде позади. У нас есть аналогичный код XAML:

 

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.DynamicAnimationPage"
                            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">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="dynamicAnimation">

            <DoubleAnimation Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed"
                             x:Name="doubleAnimation" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>

    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

 Существует одно дополнение x: Name = ”doubleAnimation”, которое поможет управлять анимацией в коде:

using System;
using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class DynamicAnimationPage
    {
        public DynamicAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            doubleAnimation.Duration = new TimeSpan(0, 0, 0, 10);
            doubleAnimation.To = 350;

            dynamicAnimation.Begin();
        }
    }
}

Перед запуском анимации я установил для параметра « Продолжительность» значение 5 секунд, а для параметра « Кому» — значение 350, равное половине размера синего прямоугольника.

Создать анимацию несложно. Это были простые анимации, но если вы хотите создавать более сложные анимации и даже комбинировать анимации, вы можете найти больше информации в Интернете.

Поставь немного жизни под свой контроль!

Скачать пример проекта

34
Share: