WPF特效:流光动画效果
今天有人问我想实现一个流光效果。我简单的录了一下他想实现效果的GIF。

实际效果如下:因为今天有事情,只是大概实现了一个效果。主要使用PointAnimationUsingKeyFrames动画效果来实现。以后有空了会写一些更好看的。

代码如下:
<Window x:Class="StreamerEffect.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:StreamerEffect"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<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>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Rectangle x:Name="rectangle" Width="100" Height="100"
StrokeThickness="3">
<Rectangle.Stroke>
<LinearGradientBrush Opacity="0.6">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Violet" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke> </Rectangle>
</Grid>
</Window>
WPF特效:流光动画效果的更多相关文章
- WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果. /// -Ball to Ball Collision - Detection and Handling /// http:// ...
- WPF 有趣的动画效果
WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至 ...
- WPF 画线动画效果实现
原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...
- 【WPF】两则动画效果
原文:[WPF]两则动画效果 引言 利用WPF的动画可以轻而易举的实现各种各样的特效,如擦除,滑动进入等,先看两个效果图 第一个效果 这个动画其实利用了OpacityMask和LinearGradie ...
- WPF特效-鱼游动动画3
原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj). 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontr ...
- WPF特效-鱼游动动画
原文:WPF特效-鱼游动动画 实现思路: 通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部 ...
- WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2 纯代码撸动画实践2: 原图:(png格式) ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- jQuery 特效:盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
随机推荐
- 【Azure 环境】Azure Key Vault (密钥保管库)中所保管的Keys, Secrets,Certificates是否可以实现数据粒度的权限控制呢?
问题描述 Key Vault (密钥保管库) 能不能针对用户授权实现指定用户只能访问某个或某些特定的key? 如当前有两个用户(User1, User2),在Key Vault中有10个Key,Use ...
- F5 api接口开发实战手册(二)
F5 rest api 各对象使用方式详解 本篇文章介绍rest api接口下Collection.Resource.Subcollections.SubResource的各种使用方法.如果您不了解这 ...
- LATEX如何写多个条件推导式推出一个结论
用markdown写推导式的时候,不太好写,故做个笔记记录一下,插入 公式块 : \left. \begin{aligned} \left. \begin{aligned} \text{这里可以写文字 ...
- Linux分区创建、挂载
fdisk -l 这块盘是没有分区的,没有被使用. fdisk /dev/vdb 操作这块磁盘, 创建分区 格式化/dev/sdb1为ext4 mkfs -t ext4 /dev/vdb1 mkfs. ...
- TVM自定义数据类型
TVM自定义数据类型 本文将介绍"自定义数据类型"框架,该框架可在TVM中使用自定义数据类型. 介绍 在设计加速器时,关键是如何近似地表示硬件中的实数.这个问题具有长期的行业标准解 ...
- TensorRT原理图示
TensorRT原理图示 NVIDIA的核心 TensorRT是有助于在NVIDIA图形处理单元(GPU)的高性能推理一个C ++库.它旨在与TensorFlow,Caffe,PyTorch,MXNe ...
- GStreamer 1.0 series序列示例
GStreamer 1.0 series序列示例 OpenEmbedded layer for GStreamer 1.0 这layer层为GStreamer 1.0框架提供了非官方的支持,用于Ope ...
- C++中头文件和实现文件的关系
头文件相当于是声明的集合,包括头文件的语句#Include实质为程序代码的宏替换. 编译阶段将函数和变量登记在符号表,链接时将各种函数的入口地址在其中查找到来调用,解引用.
- Java面试必知必会(扩展)——Java基础
float f=3.4;是否正确? 不正确 3.4是双精度,将双精度赋值给浮点型属于向下转型,会造成精度损失: 因此需要强制类型转换: 方式一:float f=(float)3.4 方式二:float ...
- 点分治&cdq分治 总结
游荡的孤高灵魂不需要羁绊之处. 洛谷题单 点分治 前置芝士 树的重心 树分治 例题略解 P3806 [模板]点分治1 板子题,先暴力找到整棵树的重心,然后先求出重心到各点的距离,进而算出他所在树的各个 ...