Question

我正在使用visual studio 2012 c＃制作Windows 8应用程序。我有一个图像'1.png'，我想以任何角度旋转它作为沿其中心点的动画。但是我希望借助c＃代码而不是XAML代码来实现它。

先谢谢你。

Answer 1

在您的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如果你愿意，可以在代码中使用。

    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度。

顺便说一句：我正在写一组帖子，展示更好的动画制作方法。它尚未完成，但它将为您提供有关如何为某些类型的动画获取框架的一般概念..

First part of the series

Answer 2

谢谢莎哈！我拿了你的例子并做了一个自定义控件。它实际上是一个环形图像的无限旋转。

Spinner.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>

Spinner.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之上）

图像旋转为动画

2 个答案: