Image rotation as animation

问题

I am making a Windows 8 application in visual studio 2012 c#. I am having an image '1.png' and I want to rotate it at any angle as an animation along its center point. But i want to do it with the help of c# code rather than XAML code.

Thank You in Advance.

回答1:

In your XAML, have the following image:

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

Then, in code, write the following when you want to animate (you create the Storyboard programmatically, then add to it a relevant Timeline. Note that you can also create the RotateTransform in code if you want.

    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();
    }

This will rotate the object 360 degrees.

BTW: I am writing a set of posts that show an even better way of animating. It's not done yet, but it will give you a general idea on how to get a framework for certain types of animations..

First part of the series

回答2:

Thanks Shahar! I took your example and made a custom control. It's actually an infinite spinning of one ring image.

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();
    }
}

}

Then when you want to use Spinner in another xaml, it's very simple: Just add a line for it inside any Grid etc:

<include:Spinner/>

(of course you need to define include as something like:

xmlns:include="MyControls"

on top of your xaml)

来源：https://stackoverflow.com/questions/15174612/image-rotation-as-animation