WPF实现流光动画特效

2024-12-08 00:20:54

一、代码

<Window.Resources>
     <!--外-->
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)"
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.855,0.148"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.852,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.148,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.144,0.149"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,0"/>

            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)"
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.145,0.852"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.148,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.852,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.856,0.851"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,1"/>

            </PointAnimationUsingKeyFrames>
        </Storyboard>
     <!--中-->
        <Storyboard x:Key="Storyboard2" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)"
                                          Storyboard.TargetName="rectangle1">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.855,0.148"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.852,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.148,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.144,0.149"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,0"/>

            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)"
                                          Storyboard.TargetName="rectangle1">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.145,0.852"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.148,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.852,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.856,0.851"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,1"/>

            </PointAnimationUsingKeyFrames>
        </Storyboard>
     <!--内-->
        <Storyboard x:Key="Storyboard3" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)"
                                          Storyboard.TargetName="rectangle2">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.855,0.148"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.852,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.148,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.144,0.149"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,0"/>

            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)"
                                          Storyboard.TargetName="rectangle2">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.145,0.852"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.148,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.852,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.856,0.851"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,1"/>

            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <!--外-->
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
        <!--中-->
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
        </EventTrigger>
        <!--内-->
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard3}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <!--外-->
        <Rectangle x:Name="rectangle" Width="300" Height="300"
                   StrokeThickness="3">
            <Rectangle.Stroke>
                <LinearGradientBrush  Opacity="0.6">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Violet"  Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>
        <!--中-->
        <Rectangle x:Name="rectangle1" Width="200" Height="200"
                   StrokeThickness="3">
            <Rectangle.Stroke>
                <LinearGradientBrush  Opacity="0.6">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Green"  Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>
        <!--内-->
        <Rectangle x:Name="rectangle2" Width="100" Height="100"
                   StrokeThickness="3">
            <Rectangle.Stroke>
                <LinearGradientBrush  Opacity="0.6">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="red"  Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>

    </Grid>

二、特效

到此这篇关于WPF实现流光动画特效的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

WPF实现3D粒子波浪效果

本文实例为大家分享了WPF实现3D粒子波浪效果的具体代码,供大家参考,具体内容如下实现效果如下: 步骤: 1.3D粒子类Particle.cs public class Particle { public Point3D Position;//位置 public double Size;//尺寸 public int XIndex;//X位置标识 public int YIndex;//Y位置标识 } 2.粒子系统ParticleSystem类 public class ParticleSys
WPF实现进度条实时更新效果

本文实例为大家分享了WPF实现一个实时更新的进度条,供大家参考,具体内容如下效果图 xaml代码 <Window x:Class="ProgressBar.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d=&q
WPF实现文字粒子闪烁动画效果

本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下实现效果如下: 思路:首先根据显示文本创建文本路径Geometry,然后在路径内随机生成圆形粒子并添加动画. 步骤: 1.粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary
WPF实现时钟特效

WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升,下面给出WPF技术实现钟表的效果: 1.Visual Studio新建一个WPF应用程序,命名为WpfClock,新建一个images文件夹,并准备一个钟表的背景图片和程序图标素材. 2.编辑MainWindow.xaml文件,对UI进行定制,代码如下(指针都是用Rectangle实现的,当然可以用图片代替): using System; using System.Collections.Generic; using System.L
WPF实现3D立方体波浪墙效果

本文实例为大家分享了WPF实现3D立方体波浪墙效果的具体代码,供大家参考,具体内容如下实现效果如下: 思路:仿照3D粒子系统,将粒子颗粒的Geometry改造为立方体,鼠标移动时将鼠标位置转为3D场景中的坐标. 步骤: 1.粒子类Particle.cs public Point3D Position;//位置 public double Width;//长方体底面宽 public double Height;//长方体侧面高 2.粒子系统ParticleSystem.cs private re
WPF实现3D翻牌式倒计时特效

本文实例为大家分享了WPF实现3D翻牌式倒计时的具体代码,供大家参考,具体内容如下实现效果如下: 思路:使用自定义控件,设置一个背板 MyCardControlBottom,一个卡牌翻动的前部 MyCardControlFront,一个卡牌翻动后的背部 MyCardControlBack,另外实现卡牌翻动的MyCardControl:在主窗体中设置一计时器,根据卡牌上的数字和计时器时间启动翻牌动作. 主要代码: 1.自定义控件MyCardControlBottom <UserControl x
WPF实现文本描边+外发光效果的示例代码

解决思路: (1)描边效果可以将文本字符串用GDI+生成Bitmap,然后转成BitmapImage,再用WPF的Image控件显示. (2)外发光效果用WPF自带的Effect实现代码: using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Text; using System.IO; namespace TextHighLighthDemo { public clas
WPF实现转圈进度条效果

在设计界面时,有时会遇到进度条,本次讲解WPF如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc
WPF实现平面三角形3D运动效果

本文实例为大家分享了WPF实现平面三角形3D运动效果的具体代码,供大家参考,具体内容如下实现效果如下: 思路:封装三角形三个顶点和路径的三角形类,图形渲染时同步更新公共顶点三角形的顶点位置. 步骤: 1.三角形类Triangle.cs public Point A, B, C;//初始三个顶点 public Point VA, VB, VC;//运动的三个顶点 public Path trianglePath;//三角形路径 public Color triangleColor;//填充 pu
WPF实现动画效果

学习平台微软开发者博客:https://devblogs.microsoft.com/?WT.mc_id=DT-MVP-5003986微软文档与学习:https://docs.microsoft.com/zh-cn/?WT.mc_id=DT-MVP-5003986微软开发者平台:https://developer.microsoft.com/en-us/?WT.mc_id=DT-MVP-5003986 1.介绍在之前做winform中, 也做过一些动画效果, 但是整个动画都需要我们自己去编写

WPF实现流光动画特效

一、代码

二、特效

相关推荐

随机推荐