图像旋转动画 [英] Image rotation as animation

查看:30
本文介绍了图像旋转动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在 Visual Studio 2012 c# 中制作 Windows 8 应用程序.我有一个图像1.png",我想以任何角度旋转它作为沿着其中心点的动画.但我想借助 c# 代码而不是 XAML 代码来完成.

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.

提前致谢.

推荐答案

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

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>

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

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

这会将对象旋转 360 度.

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

本系列第一部分

这篇关于图像旋转动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆