使用AI整理知识点--WPF动画核心知识

embedded/2025/3/10 4:23:32/

一、WPF动画基础

1、动画本质

通过随时间改变依赖属性值实现视觉效果（如位置、透明度、颜色等）。

依赖属性必须支持 DependencyProperty，且需是可动画的（如 Double, Color, Point 等）。

2、动画三要素

  1. 起始值 (From)
  2. 结束值 (To)
  3. 持续时间 (Duration)

3、基本动画类型

类型

描述

示例属性

对应动画类

线性动画

线性插值变化

Width, Opacity

DoubleAnimation

颜色动画

颜色渐变

Background

ColorAnimation

点/路径动画

沿路径或坐标点移动

Canvas.Left/Top

PointAnimation

旋转/缩放动画

变换效果

RenderTransform

RotateTransform + 动画

二、WPF动画基础类型

1、线性插值动画

  1. 原理：通过起始值和结束值的线性过渡实现平滑动画（如DoubleAnimation控制宽度变化）
  2. 适用场景：简单属性变化（如透明度渐变、位置移动）
  3. 关键属性：
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1"/>

2、关键帧动画

  1. 原理：定义多个关键时间点的属性值，支持多种插值方式（线性、离散、样条）
  2. 示例：实现中间停顿的移动效果
<DoubleAnimationUsingKeyFrames><LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/><EasingDoubleKeyFrame Value="42.5" KeyTime="0:0:1" EasingFunction="{StaticResource CubicEase}"/><DiscreteDoubleKeyFrame Value="42.5" KeyTime="0:0:2"/><EasingDoubleKeyFrame Value="85" KeyTime="0:0:3"/></DoubleAnimationUsingKeyFrames>

   3.关键帧类型： 

    <LinearDoubleKeyFrame Value="100" KeyTime="0:0:1" />       <!-- 线性过渡 --><DiscreteDoubleKeyFrame Value="200" KeyTime="0:0:2" />     <!-- 直接跳变 --><SplineDoubleKeyFrame Value="300" KeyTime="0:0:3"KeySpline="0.5,0 0.5,1" />           <!-- 贝塞尔曲线控制速率 -->

    3、路径动画

    1. 原理：元素沿 PathGeometry定义的路径运动（如 DoubleAnimationUsingPath）
    2. 适用场景：复杂轨迹运动（如曲线飞行）
    <PathGeometry x:Key="MotionPath" Figures="M0,0 L100,100 C200,50 300,150 400,0"/><DoubleAnimationUsingPath Storyboard.TargetProperty="X"PathGeometry="{StaticResource MotionPath}"/>

    三、动画核心元素

    1、动画类

    1. 继承自 Timeline，如ColorAnimation（颜色渐变）、ThicknessAnimation（边距动画）
    2. 命名规则：DataTypeAnimation（如DoubleAnimation）

    2、故事板 (Storyboard)

    1. 作用：管理多个动画的播放顺序和同步
    2. 常用方法
    Storyboard.Begin();     // 开始动画Storyboard.Stop();      // 停止Storyboard.Pause();     // 暂停Storyboard.Seek(TimeSpan); // 跳转到指定时间

          3.代码控制： 

      Storyboard sb = new Storyboard();sb.Children.Add(animation1);sb.Begin(element);

         4.事件触发器 (EventTrigger) 

        <Button Content="Click"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard>...</Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button>

          5.数据触发器 (DataTrigger) / 属性触发器 (Trigger) 

          <Style TargetType="Rectangle"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard>...</BeginStoryboard></Trigger.EnterActions></Trigger></Style.Triggers></Style>

          3、依赖属性与接口

                  动画仅作用于依赖属性，且目标对象需实现 IAnimatable 接口（所有 UI 元素均支持）

          四、缓动函数 (Easing Functions)

          1、作用

          改变动画速度曲线，实现自然过渡（如加速、弹跳）

          2、常见类型
          1. 线性：LinearEase
          2. 物理模拟：BounceEase（弹跳）、ElasticEase（弹性）
          3. 自定义曲线：CubicEase（三次方缓动）
          <DoubleAnimation From="0" To="300" Duration="0:0:2"><DoubleAnimation.EasingFunction><BounceEase Bounces="2" EasingMode="EaseOut"/></DoubleAnimation.EasingFunction></DoubleAnimation>

          五、动画实现方式

          1、XAML 声明式

          1. 优点：直观易维护，适合简单动画
          2. 示例：按钮点击缩放
          <Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.5"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
          2、C# 动态生成
          1. 适用场景：复杂逻辑控制（如根据用户输入生成动画）
          2. 代码示例：
          var animation = new DoubleAnimation{From = 0,To = 100,Duration = TimeSpan.FromSeconds(1),EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut }};element.BeginAnimation(WidthProperty, animation);

          六、高级动画技巧

          1、动画组 (Animation Groups)

          同时运行多个动画（如旋转 + 缩放）

          <Storyboard><DoubleAnimation TargetProperty="Width" To="150"/><DoubleAnimation TargetProperty="Height" To="150"/></Storyboard>

          2、动画复用 (Resource + x:Key)

          定义动画资源，全局复用：

          <Window.Resources><Storyboard x:Key="FadeInAnimation"><DoubleAnimation Storyboard.TargetProperty="Opacity"From="0" To="1" Duration="0:0:1"/></Storyboard></Window.Resources>

          3、组合动画 (Parallel vs Sequence)

          • ParallelTimeline：并行执行多个动画。
          • SequenceTimeline：按顺序执行动画。

          4、路径动画优化

          使用 PathGeometry的Simplify() 方法减少路径节点，提升性能

          5、性能优化

          1）启用硬件加速
          1. 设置 RenderOptions.BitmapScalingMode="HighQuality"
          2. 对复杂动画使用 CacheMode="BitmapCache"
          2）减少实时渲染开销
          1. 优先使用 Opacity 替代 Visibility 做淡入淡出
          2. 避免频繁触发布局计算（如动画中修改 Width/Height）
          3. 避免高指数缓动函数（如 PowerEase 的 Power >5）
          3）合理使用 FillBehavior
          1. FillBehavior="HoldEnd"：动画结束后保持最终值（默认）
          2. FillBehavior="Stop"：动画结束后恢复初始值

          七、调试与常见问题

          1. 动画不生效的排查步骤

          1. 确认目标属性是依赖属性（Dependency Property）
          2. 检查Storyboard.TargetName和TargetProperty是否正确
          3. 确保动画的 From/To 值在合理范围内
          4. 验证触发器是否被正确触发（如事件名称是否拼写错误）

          2、其它

          1. 调试工具：WPF Performance Suite 分析动画帧率
          2. 设计工具：Blend for Visual Studio 可视化编辑动画路径
          3. 学习资源：微软官方动画指南.

          八、示例

          让圆点从左至右的动画效果 中间停顿 即先从左至中间 再从中间至右 的动画效果

              <Grid><Grid.Resources><Style x:Key="ellipse" TargetType="Ellipse"><Setter Property="Width" Value="10" /><Setter Property="Height" Value="10" /><Setter Property="Canvas.Left" Value="0" /><Setter Property="Fill" Value="Gray" /><!--<Setter Property="RenderTransformOrigin" Value="0.5,3.33" />--></Style><PowerEasex:Key="MidPauseEase"EasingMode="EaseInOut"Power="5" /></Grid.Resources><Canvas Height="100"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="(Canvas.Left)"><!--  e1 动画  --><DoubleAnimationUsingKeyFrames Storyboard.TargetName="e1"><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:1.5"Value="400" /><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:3"Value="780" /></DoubleAnimationUsingKeyFrames><!--  e2 动画  --><DoubleAnimationUsingKeyFrames Storyboard.TargetName="e2"><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:1.7"Value="388" /><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:3.2"Value="780" /></DoubleAnimationUsingKeyFrames><!--  e3 动画  --><DoubleAnimationUsingKeyFrames Storyboard.TargetName="e3"><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:1.9"Value="376" /><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:3.4"Value="780" /></DoubleAnimationUsingKeyFrames><!--  e4 动画  --><DoubleAnimationUsingKeyFrames Storyboard.TargetName="e4"><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:2.1"Value="364" /><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:3.6"Value="780" /></DoubleAnimationUsingKeyFrames><!--  e5动画  --><DoubleAnimationUsingKeyFrames Storyboard.TargetName="e5"><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:2.3"Value="352" /><EasingDoubleKeyFrameEasingFunction="{StaticResource MidPauseEase}"KeyTime="0:0:3.8"Value="780" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Canvas.Triggers><!--  背景  --><Ellipse Width="100" Height="100" /><LabelWidth="100"Height="100"HorizontalContentAlignment="Center"VerticalContentAlignment="Center"Content="Loading"FontFamily="Times New Roman"FontSize="16"FontWeight="Bold"Foreground="#6b48ff" /><Ellipse Name="e1" Style="{StaticResource ellipse}" /><Ellipse Name="e2" Style="{StaticResource ellipse}" /><Ellipse Name="e3" Style="{StaticResource ellipse}" /><Ellipse Name="e4" Style="{StaticResource ellipse}" /><Ellipse Name="e5" Style="{StaticResource ellipse}" /></Canvas></Grid>


          http://www.ppmy.cn/embedded/171394.html

          相关文章

          Windows 远程桌面多端口访问，局域网虚拟IP映射多个Windows 主机解决方案

          Windows 远程桌面多端口访问，局域网虚拟IP映射多个Windows 主机解决方案

          情景 项目现场4G路由局域网中两台主机通过VPN连接到公司内网&#xff0c;实现远程管理&#xff0c;要求映射两个Windows 桌面进行管理。 目录 情景 网络 思路 已知 问题解决 1.客户端通过VPN进入内网路由器配置NAT 2.使用远程主机远程桌面功能&#xff1a;IP端口号访问 …
          阅读更多...
          【音视频】RTP封包H265信息

          【音视频】RTP封包H265信息

          RTP 含义 RTP 是一种专门为 实时数据传输 设计的网络协议。这里的 "实时数据" 主要指的是 音频 和 视频 这类对传输延迟非常敏感的数据。想象一下&#xff0c;你在进行视频通话或者观看在线直播&#xff0c;你希望画面和声音能够流畅地、几乎同步地到达&#xff0c;而…
          阅读更多...
          无人机扩频技术对比！

          无人机扩频技术对比！

          一、技术原理与核心差异 FHSS&#xff08;跳频扩频&#xff09; 核心原理&#xff1a;通过伪随机序列控制载波频率在多个频点上快速跳变&#xff0c;收发双方需同步跳频序列。信号在某一时刻仅占用窄带频谱&#xff0c;但整体覆盖宽频带。 技术特点&#xff1a; 抗干扰…
          阅读更多...
          3.4 数据结构之递归

          3.4 数据结构之递归

          递归 定义&#xff1a; 计算机科学中&#xff0c;递归是一种解决计算问题的方法&#xff0c;其中解决方案取决于同一类问题的更小自己 说明&#xff1a; 1.自己调用自己&#xff0c;如果说每个函数对应这一种解决方案&#xff0c;自己调用自己意味着解决方案是一样的&#x…
          阅读更多...
          面试基础---MySQL 事务隔离级别与 MVCC 深度解析

          面试基础---MySQL 事务隔离级别与 MVCC 深度解析

          MySQL 事务隔离级别与 MVCC 深度解析&#xff1a;原理、实践与源码分析 引言 在高并发的互联网应用中&#xff0c;数据库事务的隔离级别是保证数据一致性和并发性能的关键。MySQL 通过多版本并发控制&#xff08;MVCC&#xff09;机制实现了不同的事务隔离级别。本文将深入探…
          阅读更多...
          将wq9001驱动集成到rv1106 SDK

          将wq9001驱动集成到rv1106 SDK

          下载代码 上次修改好的代码已经上传到仓库&#xff0c;通过git clone下载到SDK的luckfox-pico/sysdrv/drv_ko/wifi文件夹中 修改上级Makefile文件 打开luckfox-pico/sysdrv/drv_ko/wifi中的Makefile 添加 ifneq ($(findstring $(RK_ENABLE_WIFI_CHIP),"WQ9001"),…
          阅读更多...
          react中的useContext--为什么使用（一）

          react中的useContext--为什么使用（一）

          React 的数据传递流程 在 React 中&#xff0c;数据传递通常是自上而下的&#xff0c;也就是父组件把数据通过 props 传递给子组件&#xff0c;子组件无法直接修改父组件的数据。 例子&#xff1a;父组件向子组件传递数据 const Parent () > {const user { name: &quo…
          阅读更多...
          14.DS18B20温度传感器

          14.DS18B20温度传感器

          1.DS18B20温度传感器 DS18B20是由DALLAS半导体公司推出的一款基于单总线接口的数字温度传感器。与传统的热敏电阻等模拟温度传感器相比&#xff0c;DS18B20具有体积小、适用电压范围宽、接口简单等缺点&#xff0c;广泛应用于工业控制、温度监测等领域。 1 主要特点 宽电压范…
          阅读更多...
          最新文章

          Copyright @ 2022~2023