1

我正在 Visual Studio 2012 C# 中制作一个 Windows 8 应用程序。我有一个图像'1.png',我想以任何角度旋转它作为沿其中心点的动画。但我想在 c# 代码而不是 XAML 代码的帮助下做到这一点。

先感谢您。

4

2 回答 2

8

在您的 XAML 中,具有以下图像:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="/Assets/Logo.png" Width="300" RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <RotateTransform x:Name="rotateTransform"/>
        </Image.RenderTransform>
    </Image>
</Grid>

然后,在代码中,当您想要动画时编写以下内容(您以Storyboard编程方式创建,然后添加相关的Timeline. 请注意,您也可以根据RotateTransform需要创建 in 代码。

    async void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        await Task.Delay(500);

        Storyboard board = new Storyboard();
        var timeline = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(timeline, rotateTransform);
        Storyboard.SetTargetProperty(timeline, "Angle");
        var frame = new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromSeconds(1), Value = 360, EasingFunction = new QuadraticEase() { EasingMode = EasingMode.EaseOut } };
        timeline.KeyFrames.Add(frame);
        board.Children.Add(timeline);

        board.Begin();
    }

这会将对象旋转 360 度。

顺便说一句:我正在写一组帖子,展示一种更好的动画方式。它还没有完成,但它会让你大致了解如何为某些类型的动画获取框架。

该系列的第一部分

于 2013-03-03T15:08:55.153 回答
0

谢谢沙哈尔!我以你的例子做了一个自定义控件。它实际上是一个环形图像的无限旋转。

微调器.xaml:

<UserControl x:Class="MyControls.Spinner"
...

    <Grid >
      <Image Source="/Assets/Images/spinner.png" Width="194" RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <RotateTransform x:Name="rotateTransform"/>
        </Image.RenderTransform>
      </Image>
    </Grid>
</UserControl>

微调器.cs:

namespace MyControls
{
public partial class Spinner: UserControl
{
    public Spinner()
    {
        InitializeComponent();
        this.Loaded += Spinner_Loaded;
    }

    private void PlayRotation()
    {
        Storyboard board = new Storyboard();
        var timeline = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(timeline, rotateTransform);
        Storyboard.SetTargetProperty(timeline, new PropertyPath("(Angle)"));

        var frame = new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromSeconds(5), Value = 360, EasingFunction = new QuadraticEase() { EasingMode = EasingMode.EaseOut } };
        timeline.KeyFrames.Add(frame);
        board.Children.Add(timeline);

        board.RepeatBehavior = RepeatBehavior.Forever;
        board.Begin();
    }

    private async void Spinner_Loaded(object sender, RoutedEventArgs e)
    {
        PlayRotation();
    }
}

}

然后,当您想在另一个 xaml 中使用 Spinner 时,这非常简单:只需在任何 Grid 等中为其添加一行:

<include:Spinner/>

(当然,您需要将include定义为:

xmlns:include="MyControls"

在您的 xaml 之上)

于 2016-03-03T07:54:54.867 回答