将图像旋转为动画

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使用微调，这是非常简单的： 只需添加一个它可以在任何网格内使用：

<include:Spinner/> 

（当然你需要定义包括，就像这样：

xmlns:include="MyControls" 

你的XAML的顶部

）