將圖像旋轉爲動畫

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的頂部

）