WPF-关于动画Animation(及其常见问题)

server/2024/9/22 17:44:10/

目录

一、动画合集

常见动画类型

1、资源里添加动画资源

2、事件触发器里开始一个动画

3、Double型关键帧动画

4、Object型关键帧动画 

5、Color型关键帧动画

6、String型关键帧动画

7、Matrix型沿路径动画

二、扩展

Ⅰ 动画常见问题

1、控制动画结束问题

Ⅱ 流动Path

Ⅲ 变形


一、动画合集

创建一个Storyboard演示画板,在画板里对动画进行定义与处理。

常见动画类型

提醒:更多动画类型及介绍可查看:动画概述-WPF .NET Framework

DoubleAnimation                               //普通Double型控制动画

DoubleAnimationUsingKeyFrames //Double型关键帧动画

ObjectAnimationUsingKeyFrames  //Object型关键帧动画

ColorAnimationUsingKeyFrames    //Color型关键帧动画

StringAnimationUsingKeyFrames    //String型关键帧动画

MatrixAnimationUsingPath              //沿路径型动画

1、资源里添加动画资源

注意:开始动画得自己规划逻辑(触发器、事件都可)

     var storybd = this.FindResource("storybd") as Storyboard;storybd.Begin();
    <Window.Resources><Storyboard x:Key="storybd"><DoubleAnimation AutoReverse="True"By="0.1"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="Opacity"From="0.0" /><DoubleAnimation AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[1].Offset"From="1"To="0"Duration="0:0:1" /></Storyboard></Window.Resources>

2、事件触发器里开始一个动画

        <Rectangle Name="Rect"Width="70"Height="80"Margin="279,0,0,0"HorizontalAlignment="Left"VerticalAlignment="Center"Fill="Green"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.Loaded"><BeginStoryboard><Storyboard><DoubleAnimation AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="Opacity"From="1"To="0"Duration="0:0:1" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle>

3、Double型关键帧动画

<DoubleAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="(FrameworkElement.Width)"><EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />                        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="70" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="(FrameworkElement.Height)"><EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" /><EasingDoubleKeyFrame KeyTime="0:0:5" Value="80" />
</DoubleAnimationUsingKeyFrames>

4、Object型关键帧动画 

   <Window.Resources><Storyboard x:Key="story"><ObjectAnimationUsingKeyFrames Storyboard.TargetName="img" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="{x:Static Visibility.Hidden}"/><DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames></Storyboard></Window.Resources>

5、Color型关键帧动画

      <Storyboard x:Key="story"><ColorAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"><EasingColorKeyFrame KeyTime="0" Value="Red" /><EasingColorKeyFrame KeyTime="0:0:0.5" Value="Blue" /><DiscreteColorKeyFrame KeyTime="0:0:1" Value="Red" /><DiscreteColorKeyFrame KeyTime="0:0:1.5" Value="Yellow" /></ColorAnimationUsingKeyFrames></Storyboard>

6、String型关键帧动画

FillBehavior,动画结束时行为

                        HoldEnd:保持在动画结束的最后一帧画面

                        Stop:动画结束,恢复动画开始前的画面

            <StringAnimationUsingKeyFrames FillBehavior="HoldEnd"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Button.Content)"><DiscreteStringKeyFrame KeyTime="0" Value="5s" /><DiscreteStringKeyFrame KeyTime="0:0:1" Value="4s" /><DiscreteStringKeyFrame KeyTime="0:0:2" Value="3s" /><DiscreteStringKeyFrame KeyTime="0:0:3" Value="2s" /><DiscreteStringKeyFrame KeyTime="0:0:4" Value="1s" /><DiscreteStringKeyFrame KeyTime="0:0:5" Value="0s" /></StringAnimationUsingKeyFrames>

7、Matrix型沿路径动画

使用如下:

移动控件可用RenderTransformOrigin="0.5,0.5",切换位置转换的中心点;

DoesRotateWithTangent:按切换方向旋转;

PathGeometry:指定路径;

 <Rectangle.RenderTransform><MatrixTransform /></Rectangle.RenderTransform><MatrixAnimationUsingPath AutoReverse="True"DoesRotateWithTangent="True"PathGeometry="{StaticResource Path2}"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="RenderTransform.Matrix"Duration="0:0:3" />

二、扩展

Ⅰ 动画常见问题

1、控制动画结束问题

 storyBoard.Begin(containObject,true);

注意:第二个参数(是否可控)必须给true才能控制动画停止;

2、开始动画失败

下方示例,运行会报错 :

                DoubleAnimation da = new DoubleAnimation(){From = 1,To = 0,AutoReverse = true,Duration = TimeSpan.FromSeconds(0.5),RepeatBehavior = RepeatBehavior.Forever};
//Button btn
btn.Background = Brushes.Yellow;
btn.Background.BeginAnimation(Brush.OpacityProperty, da);

原因在于:btn.Background = Brushes.Yellow;

 由于Brushes.Yellow为sealed 密封对象,所以其属性不能更改,若一个动画对其某属性值进行改变,就会报错;

解决,将该语句改成:

btn.Background=

        new SolidColorBrush((Color)ColorConverter.ConvertFromString("Yellow"));

Ⅱ 流动Path

 StrokeDashArray :分段长度

 StrokeDashOffset:分段偏移值(改变该值实现流动效果)

 StrokeDashArray="5"  StrokeDashOffset="{Binding OffSet}"

Ⅲ 变形

控制变形的属性:RenderTransform:呈现变形(定义在UIElement类中);

                             LayoutTransform:布局变形(定义在FrameworkElement类中);

 其数据类型都是Transform抽象类

 Transform派生类;

  • TranslateTransform:偏移变形,X设置右移动值,Y设置底部移动值;
  • RotateTransform:旋转变形,Angle设置旋转中心,CenterX与CenterY设置旋转中心;
  • ScaleTransform:缩放变形,ScaleX、ScaleY分别设置X、Y轴方向放大倍数;
  • SkewTransform:倾斜变形,可指定X轴和Y轴方向的倾斜角度;
  • TransformGroup:变形组(多个独立变形合成一个变形组),可同时执行多种变形;
  • MatrixTransform:矩阵变形,Matrix有6个值(M11,M12,M21,M22,OffsetX,OffsetY),M11和M22默认值1,用于在x和y方向上的伸缩,M12和M21默认值0,用于倾斜控件,OffsetX和OffsetY默认值为0,用于平移控件,当值(1,0,0,1,0,0)不改变元素,值(0.5,1.4,0.4,0.5,-200,0)会重置元素的大小、倾斜和平移元素;
<Button.RenderTransform><TransformGroup><TranslateTransform X="30" Y="-30"/><ScaleTransform ScaleX="0.8" ScaleY="0.8"/><RotateTransform Angle="40" CenterX="0" CenterY="0"/><SkewTransform AngleX="10" AngleY="10" CenterX="0" CenterY="0"/><MatrixTransform Matrix="1,0,0,1,0,0"/></TransformGroup>
</Button.RenderTransform>


http://www.ppmy.cn/server/23587.html

相关文章

【算法】前缀和

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、一维前缀和二、二维前缀和三、寻找数值的中心下标四、除自身以外数组的乘积五、和为k的子数组六、和…

怎么理解JavaScript原型、原型链

原型 JavaScript被描述为一种基于原型的语言&#xff0c;也就是每一个对象都拥有一个原型对象。 当我们访问一个对象的属性时&#xff0c;它不仅仅该改对象上查找&#xff0c;还会到这个对象的原型上查找&#xff0c;甚至是到这个对象的原型的原型上查找&#xff0c;这样一层…

力扣-有效的数独

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 注…

双向链表专题

文章目录 目录1. 双向链表的结构2. 双向链表的实现3. 顺序表和双向链表的优缺点分析 目录 双向链表的结构双向链表的实现顺序表和双向链表的优缺点分析 1. 双向链表的结构 注意&#xff1a; 这⾥的“带头”跟前面我们说的“头节点”是两个概念&#xff0c;带头链表里的头节点…

Ansible 自动化运维

一、介绍 1、定义&#xff1a; ansible是自动化运维工具&#xff0c;基于Python开发&#xff0c;具有批量系统配置、批量程序部署、批量运行命令等功能。 ansible是基于 paramiko&#xff08;框架&#xff09; 开发的&#xff0c;并且基于模块化工作&#xff0c;本身没有批量…

Java基础知识总结(79)

waitStatus属性 每个节点与等待线程关联&#xff0c;每个节点维护一个状态waitStatus&#xff0c;waitStatus的各种值以常量的形式进行定义。 CANCELLED(1):waitStatus值为1时表示该线程节点已释放&#xff08;超时、中断&#xff09;&#xff0c;已取消的节点不会再阻塞&…

OpenShift 4 - 了解 OpenShift 是如何使用节点本地镜像缓存

《OpenShift / RHEL / DevSecOps 汇总目录》 文本已在 OpenShift 4.15 环境中进行验证。 什么是节点本地镜像缓存 一个 OpenShift 集群节点在运行 Pod 前需要先从 Registry 拉取到相关 Image。这些镜像会保存在节点本地存储中并作为缓存&#xff0c;这样该节点如果再使用这个…

偏微分方程算法之二阶双曲型方程紧差分方法

目录 一、研究目标 二、理论推导 三、算例实现 一、研究目标 前面我们已经介绍了二阶双曲型方程显式、隐式差分格式,可否像抛物型方程一样,构建更高精度的差分格式。接下来我们介绍紧差分格式。这里继续以非齐次二阶双曲型偏微分方程的初边值问题为研究对象: