wpf 利用path路径实现流体管道动画的关闭，开始功能。

最新推荐文章于 2024-07-05 22:15:00 发布
最新推荐文章于 2024-07-05 22:15:00 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： c# 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShaYe_BuShi/article/details/119802841
版权
本文介绍了如何使用WPF的Path元素结合动画效果，实现流体管道的动态显示，并提供了开始和关闭动画的功能。通过设置Path的Data属性定义管道路径，结合Storyboard和Transforms进行动画控制，实现流畅的视觉效果。同时，文章包含了打开和关闭动画的代码实现，展示了如何根据按钮点击事件控制动画的启停。
摘要由CSDN通过智能技术生成

wpf 利用path路径实现流体管道动画的关闭，开始功能。

文章目录

一、具体功能

   利用path路径实现了流体动画，及其相关开始暂停按钮功能

在这里插入图片描述
在这里插入图片描述

二、代码

前台代码

<Window x:Class="ANIMATION.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ANAMATION"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="115*"/>
            <ColumnDefinition Width="149*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.ColumnSpan="2" Width="692" Height="399"  Margin="0,0,0,0" Canvas.Left="10" Canvas.Top="10">
            <Canvas x:Name="cvsMain">

                <Image Name="picture1" Source="/image/picture2.png" Width="692" Height="399" Margin="0" Canvas.Left="10" Canvas.Top="9" Visibility="Visible"/>
                <Image Name="picture2" Source="/image/picture1.png" Width="692" Height="399" Margin="0" Canvas.Left="10" Canvas.Top="10" Visibility="Collapsed"/>
                <Label x:Name="bloke" Background="Pink" Foreground="Pink" Content="Label"  Canvas.Left="133" Canvas.Top="121" Height="4" Width="11"/>
                <Label Background="Pink" Foreground="Pink" Content="Label" Canvas.Left="442" Canvas.Top="95" Height="4" Width="11" RenderTransformOrigin="0.394,4.583"/>

                <Path x:Name="path3" Margin="0,0,0,0" Data="M88,35 L289,35 289,66 450,66" Stroke="AliceBlue" StrokeThickness="5" StrokeLineJoin="Round" Height="37.668" Stretch="Fill" Width="365" Canvas.Left="88" Canvas.Top="32.166"></Path>
                <Path x:Name="path4" Margin="0,0,0,0" Data="M138,35 L188,35 188,35 188,35" Stroke="Green" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="64" Canvas.Left="138.333" Canvas.Top="32.124"></Path>
                <Path x:Name="path5" Margin="0,0,0,0" Data="M188,35 L238,35 238,35 238,35" Stroke="Yellow" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="64" Canvas.Left="185" Canvas.Top="32"></Path>
                <Path x:Name="path6" Margin="0,0,0,0" Data="M238,35 L289,35 289,35 289,35" Stroke="Blue" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="49" Canvas.Left="249" Canvas.Top="32.166"></Path>
                <Path x:Name="path10" Margin="0,0,0,0" Data="M289,35 L289,66 290,66 289,66" Stroke="Pink" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="49" Canvas.Left="265.667" Canvas.Top="51" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="89.763"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <Path x:Name="path11" Margin="0,0,0,0" Data="M289,100 L289,66 289,66 289,66" Stroke="Pink" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="49" Canvas.Left="271" Canvas.Top="76.333" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-89.488"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <Path x:Name="path12" Margin="0,0,0,0" Data="M289,66 L339,66 339,66 339,66" Stroke="Orange"  StrokeThickness="5" StrokeLineJoin="Round" Height="14.979" Stretch="Fill" Width="64.083" Canvas.Left="284.667" Canvas.Top="60.01"></Path>
                <Path x:Name="path13" Margin="0,0,0,0" Data="M339,66 L348,66 389,66 389,66" Stroke="Purple"   StrokeThickness="5" StrokeLineJoin="Round" Height="52.813" Stretch="Fill" Width="64.083" Canvas.Left="342.667" Canvas.Top="40.76"></Path>
                <Path x:Name="path2" Margin="0,0,0,0" Data="M88,100 L289,100 289,66 450,66" Stroke="AliceBlue" StrokeThickness="5" StrokeLineJoin="Round" Height="35.958" Stretch="Fill" Width="364.75" Canvas.Left="88" Canvas.Top="65.021"></Path>
                <Path x:Name="path7" Margin="0,0,0,0" Data="M138,100 L188,100 188,100 188,100" Stroke="Green" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="64" Canvas.Left="138" Canvas.Top="95"></Path>
                <Path x:Name="path8" Margin="0,0,0,0" Data="M188,100 L238,100 238,100 238,100" Stroke="Yellow" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="64" Canvas.Left="185" Canvas.Top="94.894"></Path>
                <Path x:Name="path9" Margin="0,0,0,0" Data="M238,100 L289,100 289,100 289,100" Stroke="Blue" StrokeThickness="5" StrokeLineJoin="Round" Height="6.085" Stretch="Fill" Width="49" Canvas.Left="249" Canvas.Top="95"></Path>
                <Image Name="picture" Source="/image/kaiguan.png" Width="43" Height="25" Margin="0" Canvas.Left="435" Canvas.Top="85" Visibility="Visible" RenderTransformOrigin="0.494,0.495"/>
                <Image x:Name="picture4" Source="/image/kaiguan.png" Width="29" Height="31" Margin="0" Canvas.Left="185" Canvas.Top="85" Visibility="Visible" RenderTransformOrigin="0.494,0.495"/>
                <Image x:Name="picture5" Source="/image/kaiguan.png" Width="29" Height="31" Margin="0" Canvas.Left="185" Canvas.Top="22" Visibility="Visible" RenderTransformOrigin="0.494,0.495"/>
            </Canvas>
        </Grid>
        <Button  Content="打开" HorizontalAlignment="Left" Margin="191,9,0,0" VerticalAlignment="Top" Width="75" Click="Open_leader"/>
        <Button Content="关闭"  Click="Close_leader" HorizontalAlignment="Left" Margin="10,9,0,0" VerticalAlignment="Top" Width="77" Grid.Column="1" Height="19" />
    </Grid>
</Window>

using System;
后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;


namespace ANIMATION
{
    public partial class MainWindow : Window
    {
        Storyboard story = new Storyboard();                                                                         //实例化一个故事画板
        bool onestop = false;                                                                                        //用于控制关闭功能

        public MainWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 动画实现函数
        /// </summary>
        /// <param name="cvs">画板</param>
        /// <param name="path">动画路径</param>
        /// <param name="targetWidth">动画对象</param>
        /// <param name="duration">动画时间</param>
        public void ButtonByPath(Canvas cvs, Path path, double targetWidth, int duration = 4)                        //实现动画函数
        {
            #region 创建动画对象
            Rectangle target = new Rectangle();
            target.Width = targetWidth;
            target.Height = targetWidth;
            target.Fill = new SolidColorBrush(Colors.Black);
            cvs.Children.Add(target);
            Canvas.SetLeft(target, -targetWidth / 2);
            Canvas.SetTop(target, -targetWidth / 2);
            target.RenderTransformOrigin = new Point(0.5, 0.5);
            #endregion

            MatrixTransform matrix = new MatrixTransform();                                                           //旋转转换实例
            TransformGroup groups = new TransformGroup();                                                             //给图片空间一个转换的实例
            groups.Children.Add(matrix);
            target.RenderTransform = groups;
            string registname = "matrix" + Guid.NewGuid().ToString().Replace("-", "");
            this.RegisterName(registname, matrix);
            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();                                //实例化一个Double类型的动画
            matrixAnimation.PathGeometry = PathGeometry.CreateFromGeometry(Geometry.Parse(path.Data.ToString()));     //物体运动路线
            matrixAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));                                  //播放时间长度为2秒
            matrixAnimation.DoesRotateWithTangent = true;                                                             //跟随路径旋转
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;                                                  //循环播放
                                                                                                                      //Storyboard story = new Storyboard();
            story.Children.Add(matrixAnimation);                                                                      //将动画添加到动画板中
            Storyboard.SetTargetName(matrixAnimation, registname);
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));          //给动画指定依赖的属性
            story.SpeedRatio = 5;                                                                                     //播放的数度
            story.FillBehavior = FillBehavior.Stop;
            story.Begin(target, true);                                                                                //开始动画
                                                                                                                      //story.Pause(this);
            Console.WriteLine(onestop);
            if (onestop == true)
                story.Remove(target);                                                                                //停止动画   
        }

        /// <summary>
        /// 打开动画
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Open_leader(object sender, RoutedEventArgs e)                                                   //打开动画
        {
            onestop = false;
            //IsOnestop();
            picture.Visibility = Visibility.Collapsed;
            picture5.Visibility = Visibility.Collapsed;
            picture4.Visibility = Visibility.Collapsed;
            //ButtonByPath(cvsMain, path2, path2.StrokeThickness);
            //ButtonByPath(cvsMain, path3, path3.StrokeThickness);
            ButtonByPath(cvsMain, path4, path4.StrokeThickness);
            ButtonByPath(cvsMain, path5, path5.StrokeThickness);
            ButtonByPath(cvsMain, path6, path6.StrokeThickness);
            ButtonByPath(cvsMain, path7, path7.StrokeThickness);
            ButtonByPath(cvsMain, path8, path8.StrokeThickness);
            ButtonByPath(cvsMain, path9, path9.StrokeThickness);
            ButtonByPath(cvsMain, path10, path10.StrokeThickness);
            ButtonByPath(cvsMain, path11, path11.StrokeThickness);
            ButtonByPath(cvsMain, path12, path12.StrokeThickness);
            ButtonByPath(cvsMain, path13, path13.StrokeThickness);
        }

        /// <summary>
        /// 关闭动画
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Close_leader(object sender, RoutedEventArgs e)                                //关闭动画
        {
            if (onestop == true)
            {
                onestop = false;
            }
            else
            {
                onestop = true;
                //ButtonByPath(cvsMain, path2, path2.StrokeThickness);
                ButtonByPath(cvsMain, path4, path4.StrokeThickness);
                ButtonByPath(cvsMain, path5, path5.StrokeThickness);
                ButtonByPath(cvsMain, path6, path6.StrokeThickness);
                ButtonByPath(cvsMain, path7, path7.StrokeThickness);
                ButtonByPath(cvsMain, path8, path8.StrokeThickness);
                ButtonByPath(cvsMain, path9, path9.StrokeThickness);
                ButtonByPath(cvsMain, path10, path10.StrokeThickness);
                ButtonByPath(cvsMain, path11, path11.StrokeThickness);
                ButtonByPath(cvsMain, path12, path12.StrokeThickness);
                ButtonByPath(cvsMain, path13, path13.StrokeThickness);
                //Console.WriteLine("这是啥" + stop12);
                IsOnestop();
                picture.Visibility = Visibility.Visible;
                picture5.Visibility = Visibility.Visible;
                picture4.Visibility = Visibility.Visible;
            }
        }

        /// <summary>
        /// 用于执行动画的画板更新操作控制
        /// </summary>
        /// <returns></returns>
        public bool IsOnestop()                                                                  //输出stop12用于控制开关
        {
            return onestop;
        }
    }
}
ShaYe_BuShi
关注
专栏目录
WPF随笔（九）--使用路径动画模拟管道流体流向
weixin_30421809的博客
01-16 456
WPF随笔（九）--使用路径动画模拟管道流体流向 原文:WPF随笔（九）--使用路径动画模拟管道流体流向 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lordwish/article/details/8...
WPF中的简单水动画
weixin_30466421的博客
05-01 731
WPF中的简单水动画 原文https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前（80年代中期），我在一家拥有Silicon Graphics工作站的公司工作。在旨在展示SGI机器高端图形的少数演示中，有一个模拟了一个小线框网格中的波传播。通过更改网格中的...
Qt实现流动的管道效果代码示例
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
07-05 1452
我们将创建一个自定义的QWidget类来绘制管道并实现流动效果。Q_OBJECTpublic:protected:private:// 每50毫秒更新一次update();// 重绘窗口i < 10;++i) {在主窗口的UI文件中，添加一个QWidget，并将其提升为我们的自定义QWidget类。打开主窗口的UI文件。添加一个QWidget到主窗口。右键点击QWidget，选择“提升为...”。
WPF水波动画
08-03
通过使用各种图形组合，绘制出一个完整的图形，然后利用贝塞尔曲线和帧动画，实现了类似与水流动的动画效果
WPF之基于路径的动画
weixin_34353714的博客
08-01 159
　　不是突然想到要做一个路径动画的，是今天谈业务需求的时候偶然谈到的， 　　一艘船从一个国家到另外一个国家，沿着一条固定的路线前进，就是一个简单的动画效果，以前貌似在书上看到过，所以自己也来做一个。 　　在网上搜资料发现都是给你看看代码，或者边写边看代码。 　　认为还是要先研究一下这个东西要如何实现吧，参考资料是《WPF编程宝典》。 　　其实中心思想还是很简单的，主要是设置对象的Story...
#205 – (WPF GUI管道)The WPF GUI Pipeline
Milo的专栏
08-12 1439
在WPF中，有很多不同的子元素和动作执行者影响数据或者内容的显示。这些元素可以被看做是一个“管道”。数据流从管道的一端进入，GUI界面元素将从管道另外一端输出。 这些在管道中的元素包括：   -数据绑定（Data binding ）和一个或者多个控件绑
WPF 基本动画、关键帧动画和路径动画示例
12-14
WPF动画的使用，包括DoubleAnimation、ColorAnimation、PointAnimation、ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、StringAnimationUsingKeyFrames、...
WPF路径动画 扩散动画 Demo
01-08
示例中包含3中动画效果 1.扩散动画效果，可以自由设置颜色。...2.沿路径运行的动画效果。 3.渐变线沿传输效果动画。类似于输送管道样的动画效果，可自由设置方向、颜色、速度。 提供示例，仅供学习参考。
学习Blend制作WPF的循环动画、路径动画
10-14
在本文中，我们将深入探讨如何使用Blend for Visual Studio来创建WPF应用中的循环动画和路径动画。Blend是一款强大的设计工具，它可以与Visual Studio配合使用，为Windows Presentation Foundation（WPF）应用程序...
wpf利用png序列图 实现 可拖动透明窗口桌面动画
04-25
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中利用PNG序列图来创建一个可拖动的透明窗口桌面动画。WPF是.NET框架的一部分，为开发丰富的桌面应用程序提供了强大的工具集，而C#作为.NET的...
超级棒的开源WPF动画效果
05-29
在国外网站上找到的超级棒的源码，有3D翻书效果，窗帘效果，开窗效果，图片墙等，提供源码，包君满意
WPF实现左右移动（晃动）动画效果
10-18
总结来说，WPF实现左右移动或晃动动画效果，主要是通过设置动画目标属性以及控制动画的起始和结束值，再结合Storyboard的时间控制功能，从而在界面上产生动态的视觉效果。开发者可以充分利用WPF框架提供的动画系统，...
WPF实现组态软件-逼真的管道和速度可变流体（一）
hurst2011的博客
05-25 7465
做过组态软件开发的人都知道，市面上无论是免费的还是厂商提供的组态开发套件的UI设计都很一般。究其原因大多是工业用户对UI设计没什么要求，他们也没工夫去欣赏UI设计的精美。但时代在变化，人们也早已经开始对UI有更高的追求，在功能差不多的情况下，人们会当然会对更好看的软件映像深刻。 本文先说一说在化工组态软件中用得非常多的管道控件。大多数组态软件的管道的接头处都是不带弧度的，看上去有点小学生在美术课上画的感觉。既然是这样，那么我就趁这次的项目，将常用的工业组态软件常用的部件进行重新设计。下面就说说我对管...
WPF实现组态软件-逼真的管道和速度可变流体（二）
hurst2011的博客
06-09 3523
上一篇文章WPF实现组态软件-逼真的管道和速度可变流体（一）提到管道要支持与阀门对接，之所要放到这里将是因为，要支持与阀门对接而且支持拖动相对复杂不少。 先来一张动图看一下阀门： 这里的阀门目前是扳手阀门，后面有空给支持蝶阀。阀门后面的圆角矩形其实是4通管道连接器，有4个管道连接基座，鼠标移上去基座就会出现，用鼠标按住左键并拖动就会出现虚线，表示与支持的部件连接。当然，4通可以不装阀门，仅表示连接不同的管道，也可以装上仪表。4通的4个角用鼠标按住可以对其进行旋转，按住中间部分可以实现拖动，以便在设计管道时
WPF Path实现虚线流动效果
VS2021的专栏
12-29 5526
最近闲来无事，每天上上网，看看博客生活也过得惬意，这下老总看不过去了，给我一个任务，叫我用WPF实现虚线流动效果，我想想，不就是虚线流动嘛，这简单于是就答应下来了，谁也没想到这简单的东西搞了3天没搞定，最后搞定了居然是那么的简单，自己是想得太复杂了，哎，脑子生锈了，废话不多说，进入这3天的无脑思考中。 　　思路1： 　　根据老总的说法，他只要我实现效果就行了，那好，我就偷一下懒，用Li
WPF制作关闭按钮
SHA574810590的专栏
09-11 1633
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFra
WPF工控组态软件之管道和冷却风扇开发
绳锯木断，水滴石穿，专心写文，无问西东！！！
10-15 5328
WPF以其丰富灵活的控件样式设计，相较于WinForm而言，一直是工控组态软件的宠儿，本文以两个简单的小例子，简述如何通过WPF设计出表示水流的管道，和转动的冷却风扇。仅供学习分享使用，如有不足之处，还请指正。正在上传…重新上传取消。
WPF实现组态软件-逼真的管道和速度可变流体（三）
hurst2011的博客
08-21 5431
第一篇文章（WPF实现组态软件-逼真的管道和速度可变流体（一））简单描述了管道的实现思路，管道是本组态软件的核心，它可以连接其它不同的部件。第二篇文章（WPF实现组态软件-逼真的管道和速度可变流体（二））描述了管道与四通连接的效果。本片那文章就在前两篇文章的基础上丰富了可用的部件和编辑功能，先看看最基础的管道添加了哪些新功能： 在主窗体右键添加的管道是一根水平的直管道，鼠标移动到管道的两端有半透明的拖拽区域，可以改变管道的走向和长度。要想给管道再增加一节，可以安装Ctrl键并移动鼠标，新增的管道末端会跟随
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值