WPF成长之路------翻转动画

简介: 先介绍一下RenderTransform类,该类成员如下:TranslateTransform:能够让某对象的位置发生平移变化。RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。

先介绍一下RenderTransform类,该类成员如下:

TranslateTransform:能够让某对象的位置发生平移变化。

RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。

ScaleTransform:能够让某对象产生缩放变化。

SkewTransform:能够让某对象产生扭曲变化。

TransformGroup:能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

MatrixTransform:能够让某对象通过矩阵算法实现更为复杂的变形。

通过以上变化效果,实现图形的动画效果,而翻转效果则是通过ScaleTransform对图形进行缩放,达到翻转效果,效果图如下:

代码如下:

<Window.Resources>
        <Storyboard x:Key="LoadHeadStoryboard" >
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:0:1"
                                           RepeatBehavior="1x"
                                           AutoReverse="True"
                                           Storyboard.TargetName="scale"
                                           Storyboard.TargetProperty="ScaleX">
                <SplineDoubleKeyFrame    Value="0.3"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger SourceName="button" RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Button x:Name="button" Height="20" Width="40" VerticalAlignment="Top">翻转</Button>
        <StackPanel Height="50" Width="50">
            <Image Source="images/干流长度.png" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="scale" ScaleX="1" ScaleY="1"></ScaleTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </StackPanel>
    </Grid>

参考链接:

https://www.cnblogs.com/xpvincent/archive/2013/03/05/2944906.html

目录
相关文章
|
13天前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
12 0
|
7月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
125 0
|
C#
WPF中的PathAnimation(路径动画)
原文:WPF中的PathAnimation(路径动画)                                   WPF中的PathAnimation(路径动画)                                                               周...
1240 0
|
API C# 索引
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
1035 0
|
C# 测试技术
WPF中的动画——(二)From/To/By 动画
原文:WPF中的动画——(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
970 0
|
算法 C#
WPF中的动画——(五)关键帧动画
原文:WPF中的动画——(五)关键帧动画 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用。
1330 0
|
C#
WPF中的动画——(四)缓动函数
原文:WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上,可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
933 0
|
C#
WPF中的动画——(三)时间线(TimeLine)
原文:WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine: AnimationTimeline :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画。
1419 0
|
C# 容器 调度
WPF中的动画——(六)演示图板
原文:WPF中的动画——(六)演示图板 前面所介绍的都是单一的动画,它只能修改单一属性。有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求: 选择该按钮时,该按钮增大并更改颜色。
735 0
|
前端开发 C#
WPF中的动画——(五)路径动画
原文:WPF中的动画——(五)路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了。 路径动画中最常用的是MatrixAnimationUsingPath,它通常用于控制对象的MatrixT...
1250 0