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

原文:代码创建 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就可以了


weixin_33849942

发布了151 篇原创文章 · 获赞 30 · 访问量 16万+

私信
关注

原文地址:https://www.cnblogs.com/lonelyxmas/p/12179681.html

时间: 2024-08-27 12:11:05

代码创建 WPF 旋转、翻转动画(汇总)的相关文章

WPF翻转动画

原文:WPF翻转动画 小丫头比较调皮,为了做个东东来哄一下小丫头,我想到了做一个简单的三维翻转动画.在登录QQ 2013 的时候,我看到登录窗口也有类似的动画. 在WPF中要翻转对象,估计是得用三维变换,所以我用到了AxisAngleRotation3D,让图形绕着Z轴来旋转. 先看看效果. 是的,就是这样的效果,在XAML中,由于涉及三维图形,我先做了两个用户控件,作为正面和背面,然后让它旋转. 设计完用户控件后,就在主窗口上放一个Viewport3D控件,这个是必须的,它是三维模型的容器,如

Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画

原文:Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画 首先,来看下实现后的效果: 关于VisulaState VisualState 指定控件处于特定状态时的外观.例如,按下 Button 时,它的边框颜色可能与正常时的颜色不同.VisualState 类具有更改控件外观的 Storyboard属性.控件进入 VisualState.Name 属性指定的状态时,Storyboard 开始.控件退出该状态时,Storyboard 停止. 以上是silverligh

WPF使用后台C#代码创建Grid

笔者刚刚接触WPF,菜鸟一枚,在做一个练手程序时遇到这样一个需求,创建一个新的Grid并将其添加至一个ListView中,要求Grid及其子元素应按一定顺序给Name属性赋值,直接使用XAML创建的话重复代码过多,且新建一个Grid时名称重复,C#代码创建虽然代码量较大,但是很好的解决了这一问题,可以广泛应用,下面就贴出代码与诸位分享一下,代码质量不高,需要改进的地方还请诸位大神多多指教. 在函数外定义了一个变量Entries用于计数.使用数据绑定使得该Grid前几列与之前XAML中定义的标题宽

iOS的view翻转动画实现--代码老,供参考

新建一个view-based模板工程,在ViewController文件中添加下面的代码,即可实现翻转效果: - (void)viewDidLoad { [super viewDidLoad]; //需要翻转的视图 UIView *parentView = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 320, 200)]; parentView.backgroundColor = [UIColor yellowColor]; parentVi

纯CSS3悬停图标旋转导航动画代码

分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_contant"> <a class="xzt1" href="#"><img src="images/xztz_1.png" /></a> <a class="xzt2" hr

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

WPF绘画和动画(原文:http://blog.csdn.net/fwj380891124/article/details/8177125 )

1.1   WPF绘图 与传统的.net开发使用GDI+进行绘图不同,WPF拥有自己的一套绘图API.使用这套API不但可以轻松绘制出精美的图形,还可以为各种图形添加类似与PhotoShop的"滤镜效果"及"变形效果".本节我们就一起研究WPF图形API绘图,效果和变形等功能. 先观察下面一组图片: 显然,这组图片是矢量图(Vector Image),无论怎样放大缩小都不会出现锯齿.你可能会想:"这是组PNG格式的图片吗?"答案是"NO

WPF 有趣的动画效果

WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至于我最后做了之前从未打算做的东西,就是使用一些很实用的.NET代码,渐变填充生成背景动画.让我先给你看一些终于效果吧. WPF和元素定位 然而.在我们開始之前.我们须要考虑一件事情.这件事让我也有点原地转圈的感觉. 似乎当你使用WPF创建不论什么闭环形状时,你不能设置它的X和Y坐标.好吧.至少你不能在一般的WPF窗口(像VS开箱即

WPF中的动画——(五)关键帧动画

与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用.此时我