WPF动画案例

最新推荐文章于 2024-09-21 16:30:49 发布
最新推荐文章于 2024-09-21 16:30:49 发布
阅读量513 收藏
点赞数
分类专栏： WPF软件开发 文章标签： wpf 动画 c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37343780/article/details/123545835
版权

WPF动画案例/图表动画
在这里插入图片描述

在这里插入图片描述
前台代码

<Page x:Class="AnimationExamples.SplineExample" 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="ExampleBeginStoryboard">
      
        <!-- Although the animations is this storyboard are databound, 
             their clocks won't be automatically regenerated as
             their databound properties change. -->
        <Storyboard x:Name="ExampleStoryboard">

          <!-- Animates the spline progress illustration. -->
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="SplineProgressTransform" 
            Storyboard.TargetProperty="Y" 
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
            <DiscreteDoubleKeyFrame Value="100" KeyTime="0%" />            
            <SplineDoubleKeyFrame x:Name="mySplineKeyFrame" 
              Value="0" KeySpline="0.0,0.0 0.0,0.0" KeyTime="100%"/>
          </DoubleAnimationUsingKeyFrames>
          
          <DoubleAnimation 
            Storyboard.TargetName="TimeProgressTransform" 
            Storyboard.TargetProperty="X"
            From="0" To="100" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
          
          <!-- Animates the 3-D picture cube using
               splined interpolation. -->
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="myTranslateTransform3D"
            Storyboard.TargetProperty="OffsetX"
            AutoReverse="True" Duration="0:0:5" RepeatBehavior="Forever">
            <DiscreteDoubleKeyFrame Value="-2.5" KeyTime="0%" />
            <SplineDoubleKeyFrame x:Name="myVector3DSplineKeyFrame" 
              Value="2.5" KeySpline="0.0,0.0 0.0,0.0" KeyTime="100%"/>
          </DoubleAnimationUsingKeyFrames>      
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>


  <StackPanel Background="White" VerticalAlignment="Stretch" Name="thePanel">
    <TextBlock FontSize="18pt" Margin="10">Spline KeyFrames</TextBlock>
    <DockPanel>
      <Border DockPanel.Dock="Left" BorderBrush="Gray" BorderThickness="1"
        VerticalAlignment="Stretch" Height="500">
        <StackPanel VerticalAlignment="Stretch">
          <Grid Margin="10">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            
            <Label 
              Grid.Column="0" Grid.Row="0" 
              Grid.ColumnSpan="2">Control Point 1</Label>
            <Label 
              Grid.Column="2" Grid.Row="0" 
              Grid.ColumnSpan="2">Control Point 2</Label>

            <Label Grid.Column="0" Grid.Row="1">X1</Label>
            <Slider Grid.Column="1" Grid.Row="1" 
              Style="{StaticResource HorizontalSliderStyle}"  
              Name="SliderControlPoint1X"  ValueChanged="OnSliderChanged" />
            <Label Grid.Column="0" Grid.Row="2">Y1</Label>
            <Slider Grid.Column="1" Grid.Row="2" 
              Style="{StaticResource HorizontalSliderStyle}"  
              Name="SliderControlPoint1Y" ValueChanged="OnSliderChanged" />
            <Label Grid.Column="2" Grid.Row="1">X2</Label>
            <Slider Grid.Column="3" Grid.Row="1" Value="0" 
              Style="{StaticResource HorizontalSliderStyle}"  
              Name="SliderControlPoint2X" ValueChanged="OnSliderChanged" />
            <Label Grid.Column="2" Grid.Row="2">Y2</Label>
            <Slider Grid.Column="3" Grid.Row="2"  Value="0" 
              Style="{StaticResource HorizontalSliderStyle}"  
              Name="SliderControlPoint2Y" 
              ValueChanged="OnSliderChanged" />

          </Grid>
          <Grid Margin="10">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Name="keySplineText" 
              Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
              FontFamily="Courier New" Margin="0,0,0,10">
              KeySpline="0.00,0.00 0.00,0.00"
            </TextBlock>
            <Border Grid.Column="1" Grid.Row="1"
              HorizontalAlignment="Left">
              
              <!-- Provides an animated illustration of the spline. -->
              <Image Width="200" Height="200">
                <Image.Source>
                  <DrawingImage>
                    <DrawingImage.Drawing>
                      <DrawingGroup>
                        <DrawingGroup.Children>
                          <GeometryDrawing Brush="{StaticResource MyPartiallyTransparentGridBrushResource}">
                            <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,101,101" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                              <PathGeometry>
                                <PathGeometry.Figures>
                                  <PathFigure StartPoint="0,100">
                                    <PathFigure.Segments>
                                      <BezierSegment x:Name="SplineIllustrationSegment"
                                        Point1="0,100" Point2="0,100" Point3="100,0" />
                                    </PathFigure.Segments>
                                  </PathFigure>
                                </PathGeometry.Figures>
                              </PathGeometry>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                              <Pen Thickness="1" Brush="Black" />
                            </GeometryDrawing.Pen>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Gray">
                            <GeometryDrawing.Geometry>
                              <GeometryGroup>
                                <EllipseGeometry
                                  Center="0,100"
                                  RadiusX="2" RadiusY="2" />
                                <EllipseGeometry
                                  Center="100,0"
                                  RadiusX="2" RadiusY="2" />
                              </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                              <Pen Thickness="1" Brush="Black" />
                            </GeometryDrawing.Pen>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Red">
                            <GeometryDrawing.Geometry>
                              <EllipseGeometry
                                x:Name="SplineControlPoint1Marker"
                                Center="0,100"
                                RadiusX="2" RadiusY="2" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Red">
                            <GeometryDrawing.Geometry>
                              <EllipseGeometry
                                x:Name="SplineControlPoint2Marker"
                                Center="0,100"
                                RadiusX="2" RadiusY="2" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Orange">
                            <GeometryDrawing.Pen>
                              <Pen Thickness="1" Brush="Red" />
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Geometry>
                              <GeometryGroup>
                                <GeometryGroup>
                                  <EllipseGeometry
                                    Center="0,0" RadiusX="2" RadiusY="2" />
                                  <LineGeometry StartPoint="2,0" EndPoint="102,0" />
                                    <GeometryGroup.Transform>
                                    <TranslateTransform Y="100" x:Name="SplineProgressTransform" />
                                  </GeometryGroup.Transform>
                                </GeometryGroup>
                                <LineGeometry StartPoint="0,0" EndPoint="0,100">
                                  <LineGeometry.Transform>
                                    <TranslateTransform X="100" x:Name="TimeProgressTransform" />
                                  </LineGeometry.Transform>
                                </LineGeometry>
                              </GeometryGroup>
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                        </DrawingGroup.Children>
                      </DrawingGroup>
                    </DrawingImage.Drawing>
                  </DrawingImage>
                </Image.Source>
              </Image>
            </Border>
            <TextBlock Grid.Column="0" Grid.Row="1">
              <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90" />
              </TextBlock.LayoutTransform>
              KeyFrame Progress (Output)
            </TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="2">
              Linear Progress (Input)
            </TextBlock>
          </Grid>
        </StackPanel>
      </Border>

      <StackPanel>
        <Border >
          <Viewbox Stretch="Uniform">
          
            <!-- An animated cube. -->
            <Viewport3D ClipToBounds="True" Width="700" Height="180">
              <Viewport3D.Camera>
                <PerspectiveCamera x:Name="myPerspectiveCamera"
                  FarPlaneDistance="15" LookDirection="0,0,-1" UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,6" FieldOfView="60" />
              </Viewport3D.Camera>
              <ModelVisual3D>
                <ModelVisual3D.Children>
                  <StaticResource ResourceKey="PictureCubeModelVisual3DResource" />
                </ModelVisual3D.Children>
                <ModelVisual3D.Transform>
                  <Transform3DGroup >
                    <Transform3DGroup.Children>
                      <RotateTransform3D>
                        <RotateTransform3D.Rotation>
                          <AxisAngleRotation3D x:Name="myHorizontalRotation" Angle="0" Axis="0 1 0" />
                        </RotateTransform3D.Rotation>
                      </RotateTransform3D>
                      <RotateTransform3D>
                        <RotateTransform3D.Rotation>
                          <AxisAngleRotation3D x:Name="myVerticalRotation" Angle="0" Axis="1 0 0" />
                        </RotateTransform3D.Rotation>
                      </RotateTransform3D>
                      <TranslateTransform3D x:Name="myTranslateTransform3D" 
                        OffsetX="-2.5" OffsetY="0" OffsetZ="0" />
                    </Transform3DGroup.Children>
                  </Transform3DGroup>
                </ModelVisual3D.Transform>
              </ModelVisual3D>
              <Viewport3D.Triggers>
                <EventTrigger RoutedEvent="Viewport3D.Loaded">
                  <BeginStoryboard>
                    <Storyboard>
                    
                      <!-- Rotates the cube. -->
                      <DoubleAnimation 
                        Storyboard.TargetName="myHorizontalRotation"
                        Storyboard.TargetProperty="Angle"
                        From="0" To="360" 
                        Duration="0:0:10" RepeatBehavior="Forever"/>
                      <DoubleAnimation 
                        Storyboard.TargetName="myVerticalRotation"
                        Storyboard.TargetProperty="Angle"
                        From="0" To="360" 
                        Duration="0:0:10" RepeatBehavior="Forever"/>  
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger>
              </Viewport3D.Triggers>
            </Viewport3D>
          </Viewbox>
        </Border>
      </StackPanel>
    </DockPanel>
  </StackPanel>

</Page>

后台代码

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace AnimationExamples
{
    public partial class SplineExample : Page
    {
        private Point _controlPoint1 = new Point(0, 100);
        private Point _controlPoint2 = new Point(0, 100);

        private void OnSliderChanged(object sender, RoutedEventArgs e)
        {
            // Retrieve the name of slider.
            var name = ((Slider) sender).Name;

            var args = e as RoutedPropertyChangedEventArgs<double>;

            switch (name)
            {
                case "SliderControlPoint1X":
                    mySplineKeyFrame.KeySpline.ControlPoint1 = new Point(args.NewValue,
                        mySplineKeyFrame.KeySpline.ControlPoint1.Y);
                    _controlPoint1.X = 100*args.NewValue;
                    break;
                case "SliderControlPoint1Y":
                    mySplineKeyFrame.KeySpline.ControlPoint1 = new Point(mySplineKeyFrame.KeySpline.ControlPoint1.X,
                        args.NewValue);
                    _controlPoint1.Y = 100 - (100*args.NewValue);
                    break;
                case "SliderControlPoint2X":
                    mySplineKeyFrame.KeySpline.ControlPoint2 = new Point(args.NewValue,
                        mySplineKeyFrame.KeySpline.ControlPoint2.Y);
                    _controlPoint2.X = 100*args.NewValue;
                    break;
                case "SliderControlPoint2Y":
                    mySplineKeyFrame.KeySpline.ControlPoint2 = new Point(mySplineKeyFrame.KeySpline.ControlPoint2.X,
                        args.NewValue);
                    _controlPoint2.Y = 100 - (100*args.NewValue);
                    break;
            }


            // Update the animations and illustrations.
            myVector3DSplineKeyFrame.KeySpline.ControlPoint1 = mySplineKeyFrame.KeySpline.ControlPoint1;
            myVector3DSplineKeyFrame.KeySpline.ControlPoint2 = mySplineKeyFrame.KeySpline.ControlPoint2;


            SplineIllustrationSegment.Point1 = _controlPoint1;
            SplineIllustrationSegment.Point2 = _controlPoint2;
            SplineControlPoint1Marker.Center = _controlPoint1;
            SplineControlPoint2Marker.Center = _controlPoint2;

            keySplineText.Text =
                "KeySpline=\"" + mySplineKeyFrame.KeySpline.ControlPoint1.X.ToString("N") + "," +
                mySplineKeyFrame.KeySpline.ControlPoint1.Y.ToString("N") + " " +
                mySplineKeyFrame.KeySpline.ControlPoint2.X.ToString("N") + "," +
                mySplineKeyFrame.KeySpline.ControlPoint2.Y.ToString("N") + "\"";

            // Determine the storyboard's current time.
            TimeSpan? oldTime = ExampleStoryboard.GetCurrentTime(this) ?? TimeSpan.FromSeconds(0);

            // Generate new clocks for the animations by calling 
            // the Begin method.
            ExampleStoryboard.Begin(this, true);

            // Because the storyboard was reset, advance it to its previous
            // position using the Seek method.
            ExampleStoryboard.Seek(this, (TimeSpan) oldTime, TimeSeekOrigin.BeginTime);
        }
    }
}
向着光-
关注
专栏目录
50M-c#wpf最强案例
11-20
《50M-c#wpf最强案例》是一个包含丰富C# WPF开发实践的资源集合，对于想要深入理解和提升C# WPF编程技能的开发者来说，这是一个不可多得的学习宝库。WPF（Windows Presentation Foundation）是.NET Framework的重要...
WPF：（四）常见的动画及案例
热门推荐
weixin_44870681的博客
06-25 1万+
一. 基本概念 WPF的一个特点就是支持动画，我们可以非常容易的实现漂亮大方的界面。首先，我们来复习一下动画的基本概念。计算机中的动画一般是定格动画，也称之为逐帧动画，它通过每帧不同的图像连续播放，从而欺骗眼和脑产生动画效果。 二. WPF的动画的实现 （1）简洁 这个是非常明显的，WPF的动画的代码非常容易理解，Timer的版本则要难懂得多。当然，我们也可以通过封装，使得用Timer也能用类似的...
12.WPF动画
博客
11-12 1509
WPF动画
不可不知的WPF动画（Animation）
最新发布
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-21 1252
动画是快速循环播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。当图像播放速度超过了人眼识别的速度，就会感觉这些图像形成了一个连贯的变化的场景。在电影中，摄像机每秒钟拍摄许多照片（每一张成为一帧），便可给人造成这种错觉。不同的帧速率会影响视频的流畅度和清晰度。‌24帧/秒‌：这是电影行业标准的帧速率，尤其在拍摄无声电影时期，24帧/秒被广泛采用以节省胶片。尽管如此，24帧/秒在今天仍然被一些艺术家和独立电影制作人使用，以追求特定的视觉效果。‌25帧/秒。
WPF：Animation动画--AnimationExample综合动画实例（3）
weixin_34239169的博客
02-23 345
TextAnimationExamaple字体动画效果 应用文本TextEffect: 对文本每个文字应用旋转变换， 针对变换的属性角度Angle、中心点Center、文字；文本效果TextEffect的属性PositionStart <!-- The TextEffect to animate. --> <T...
WPF：Animation动画--KeySplineAnimation关键帧进度控制动画（1）
weixin_34236497的博客
02-20 657
KeySplineAnimations关键帧进度控制动画 实现效果： 创建三维立方体及贴图模型 通过KeySpline的两个进度控制点来设置3D模型的水平进度移动动画 具体实现：一、三维立方体的创建 在Viewport3D中设置Camera及content实例。使用透视投影摄像机PerspectiveCanmera，设置投影摄像机...
WPF中的简单水动画
weixin_30466421的博客
05-01 758
WPF中的简单水动画 原文https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前（80年代中期），我在一家拥有Silicon Graphics工作站的公司工作。在旨在展示SGI机器高端图形的少数演示中，有一个模拟了一个小线框网格中的波传播。通过更改网格中的...
wpf C#案例
03-01
在“wpf C#案例”中，我们可能涉及到以下几个关键知识点： 1. **XAML（Extensible Application Markup Language）**: XAML是WPF的核心，它是一种声明式语言，用于定义UI元素和它们的属性。通过XAML，我们可以创建...
WPF 阀门90度旋转动画
01-17
在阀门旋转动画的案例中，我们将使用`DoubleAnimation`来改变`RotateTransform`的`Angle`属性，从而实现阀门的旋转效果。 1. **创建旋转转换：** 在XAML中，我们需要为阀门图像添加一个`UIElement`，如`Image`，并...
WPF 动画演示
10-21
**WPF 动画演示** Windows Presentation Foundation (WPF) 是Microsoft开发的一种用户界面框架，用于构建桌面应用程序。...对于想要深入了解WPF动画和3D效果的开发者来说，这是一个很好的实践案例。
WPF动画按钮
04-08
本文将深入探讨如何设计一个无需使用触发器来定义按钮状态更改情节提要的WPF动画按钮。 ### 1. XAML基础 XAML（Extensible Application Markup Language）是WPF的主要标记语言，用于描述用户界面元素和它们的属性...
WPF各种动画效果例子
11-02
WPF各种动画效果例子WPF各种动画效果例子WPF各种动画效果例子
WPF 基本动画、关键帧动画和路径动画示例
12-14
WPF动画的使用，包括DoubleAnimation、ColorAnimation、PointAnimation、ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、StringAnimationUsingKeyFrames、DoubleAnimationUsingPath、MatrixAnimationUsingPath、PointAnimationUsingPath
WPF实现水面波纹特效
dnazhd的博客
09-11 2171
实现效果如下： 思路：水波纹算法可以查找到很多资料，这里算法引用自博文水波纹特效，在使用时加入定时器来随机生成波纹点。 步骤： 1、WaterEffect.cs、water.ps、Shader.fx文件引用不再赘述 2、主窗体调用 布局xaml： <Grid Name="back" ClipToBounds="True"> <Grid.Background> <RadialGradientBrush Gradie
可能是迄今为止最好用的WPF加载动画功能(没有之一)
u013319633的博客
01-01 4414
当我们在开发应用程序时，用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时，为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式，它不仅能够告知用户应用程序正在进行工作，还能够缓解用户在等待过程中的焦虑感。
WPF —— 平移变换动画实例
一个新人博客，愿多多支持。
04-08 866
一.Storyboard:俗称故事板,在VS中意思是,一个容器的时间线,该时间线为子动画提供对象和属性确定信息浮点动画,在VS中的意思是,对插入的两个目标值之间的double属性值进行动画处理:封装动画 在window.resources中进行添加在xaml文件如何使用 <BeginStoryboard Storyboard="{StaticResource s1}"></BeginStoryboard>
【WPF动画】实现水波纹动画进度条
qq_36651243的博客
03-14 1250
【代码】【WPF动画】实现水波纹动画进度条。
WPF 创建水柱状进度条
u011023096的专栏
05-08 871
最近由于项目需要，需要在界面上绘制一个水柱状的进度条，如图所示： 第一反应是，重写ProgressBar，创建一个自定义的模板。结果呢，在改写的时候发现，进度条的增长方向是水平的，不是竖直，然后就各种百度，然鹅，没有找到解决方案。 受https://blog.csdn.net/qq_30975833/article/details/54987404这篇文章的启发，原来是可以用渐变的画笔来表...
WPF 贝塞尔曲线实现波纹动画效果
ReflexMechanism的博客
03-25 1005
<UserControl.Resources> <Storyboard x:Key="WaterStoryboard"> <PointAnimation Storyboard.TargetName="bs_Water" Storyboard.TargetProperty="Point1" From="15,-5" To="15,5" Duration="00:00:2" AutoReverse="True" RepeatBeha...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向着光-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值