代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button

        <Button  Width="80" Height="60" Content="旋转" Name="trans" Click="trans_Click"  Style="{x:Null}"/>

方法一:绕左上角旋转

 public void Transform1()
        {
            RotateTransform rtf = new RotateTransform();
            trans.RenderTransform = rtf;
            DoubleAnimation dbAscending = new DoubleAnimation(0, 360, new Duration

            (TimeSpan.FromSeconds(1)));
            dbAscending.RepeatBehavior = RepeatBehavior.Forever;
            rtf.BeginAnimation(RotateTransform.AngleProperty, dbAscending);
        }

方法二:绕左上角旋转

public void Transform2()
        {
            RotateTransform rtf = new RotateTransform();
            trans.RenderTransform = rtf;
            DoubleAnimation dbAscending = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromSeconds(1)));
            Storyboard storyboard = new Storyboard();
            dbAscending.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.Children.Add(dbAscending);
            Storyboard.SetTarget(dbAscending, trans);
            Storyboard.SetTargetProperty(dbAscending, new PropertyPath("RenderTransform.Angle"));
            storyboard.Begin();
        }

效果如下:

截图不怎么能看出效果,这两种方法是按某个角进行旋转的。

方法三:Xaml动画,绕X中线或者Y中线翻转

<Window x:Class="Oland.HSS.InHospital.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="LoadHeadStoryboard" >
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:0:5"
                                           RepeatBehavior="Forever"
                                           Storyboard.TargetName="DesignerHead"
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame   Value="1"/>
                <SplineDoubleKeyFrame    Value="-1"/>
                <SplineDoubleKeyFrame    Value="1"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Button  Content="旋转" x:Name="DesignerHead"  Height="40" Width="60" RenderTransformOrigin="0.4,0.5"  Style="{x:Null}">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Window>

可设置是延X中线或者是Y中线旋转,上边那种是按左上角旋转。

方法四:第一种方式使用Xaml实现(左上)

<Button Content="旋转" Height="32" HorizontalAlignment="Left" Margin="106,176,0,0" Name="button1" VerticalAlignment="Top" Width="58" >
            <Button.RenderTransform>
                <RotateTransform x:Name="trans" Angle="0"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="360" RepeatBehavior="Forever" Duration="0:0:3"
                                             Storyboard.TargetName="trans"
                                             Storyboard.TargetProperty="Angle"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

效果同第一第二种方法

方法五:绕中点旋转:

 <Button Content="旋转" Height="32" HorizontalAlignment="Left" Margin="106,176,0,0" Name="button1" VerticalAlignment="Top" Width="58" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <RotateTransform x:Name="trans" Angle="0"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard >
                        <Storyboard>
                            <DoubleAnimation From="0" To="360" RepeatBehavior="Forever" Duration="0:0:3"
                                             Storyboard.TargetName="trans"
                                             Storyboard.TargetProperty="Angle"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

这段代码和上面差不多,

关键是RenderTransformOrigin,设成0.5,0.5就可以了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

html常用标签标记

本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《html常用标签标记》

1123
来自专栏林德熙的博客

WPF 在image控件用鼠标拖拽出矩形

今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形

1321
来自专栏非著名程序员

基础篇章:关于 React Native 之 Slider 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 来,讲这个组件之前,我们先学习一下英文单词,...

2758
来自专栏Python疯子

Python 简单实现标签词云

基于Python的词云生成类库,很好用,而且功能强大.博主个人比较推荐 github:https://github.com/amueller/word_clo...

3111
来自专栏一“技”之长

Java开发GUI之Label标签 原

    Label控件是awt包中最简单的几个视图控件之一,其用来显示固定的文本,示例如下:

692
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

2786
来自专栏hightopo

基于 HTML5 WebGL 的 3D “弹力”布局

1582
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

3593
来自专栏黒之染开发日记

【easeljs】显示对象基础 DisplayObject 类

DisplayObject is an abstract class that should not be constructed directly. Inst...

903
来自专栏电光石火

HTML条件注释判断浏览器及检验

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> ...

3549

扫码关注云+社区