WPF成长之路------帧动画（1）
最近公司的一个项目因为是WPF的，而自己已经很长一段时间没有接触过WPF了，再加上之前没有做过wpf的动画效果，因此在学习的过程中也顺便记录一下，说不定以后还会用上，同时也算是总结一下吧！刚开始写博客，写得不好的地方大家多多见谅！不喜勿喷！
这个效果主要是通过各种图形的组合进行绘图，然后通过贝塞尔曲线绘制主要的动画图形，从而实现帧动画！
先上效果图:
动态图效果不好，所以也放了一张静态图片。
首先是绘制图形部分，图形主要是五部分组成：背景的虚化效果、圆弧（由两部分组成，分别设置渐变色）、圆形边框、圆形内部颜色以及动画部分，代码如下：
<Viewbox>
<DockPanel>
<Grid>
<ed:Arc x:Name="shadowArc" StartAngle="" EndAngle="" Height="" Width="" ArcThickness="" Opacity="0.7">
<ed:Arc.Fill>
<SolidColorBrush x:Name="shadowColor" Color="#0689FF"></SolidColorBrush>
</ed:Arc.Fill>
<ed:Arc.Effect>
<BlurEffect Radius="" KernelType="Box" RenderingBias="Quality"/>
</ed:Arc.Effect>
</ed:Arc>
<ed:Arc StartAngle="" EndAngle="" ArcThickness="" Height="" Width="" Fill="#8BFCF4" Margin="0 0 0 30"></ed:Arc>
<ed:Arc StartAngle="" EndAngle="" ArcThickness="" Height="" Width="" Fill="#0048B4" Margin="0 0 0 30"></ed:Arc>
<ed:Arc Height="" Width="" Margin="0 0 0 30" StartAngle="" EndAngle=""></ed:Arc>
<Path Height="" Width="" Margin="0 0 0 30" Fill="#11DAB9">
<Path.Data>
<PathGeometry>
<PathFigure x:Name="pf_main" StartPoint="0,70">
<BezierSegment x:Name="bs_main0" Point1="30,100" Point2="40,80" Point3="50,70"></BezierSegment>
<BezierSegment x:Name="bs_main1" Point1="50,70" Point2="60,65" Point3="70,70"></BezierSegment>
<BezierSegment x:Name="bs_main2" Point1="70,70" Point2="80,80" Point3="90,70"></BezierSegment>
<BezierSegment x:Name="bs_main3" Point1="90,70" Point2="100,65" Point3="105,65"></BezierSegment>
<BezierSegment x:Name="bs_main4" Point1="105,65" Point2="120,60" Point3="130,65"></BezierSegment>
<BezierSegment x:Name="bs_main5" Point1="130,65" Point2="135,65" Point3="140,75"></BezierSegment>
<PolyLineSegment Points="140,120 70,150 0,120"></PolyLineSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<ed:Arc StartAngle="" EndAngle="" Height="" Width="" ArcThickness="" Margin="85 60 0 0">
<ed:Arc.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
<GradientStop Color="#038EFF" Offset=""></GradientStop>
<GradientStop Color="#126DFF" Offset=""></GradientStop>
</LinearGradientBrush>
</ed:Arc.Fill>
</ed:Arc>
<ed:Arc StartAngle="" EndAngle="" Height="" Width="" ArcThickness="" Margin="-85 60 0 0">
<ed:Arc.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
<GradientStop Color="#126DFF" Offset=""></GradientStop>
<GradientStop Color="#4826D2" Offset=""></GradientStop>
</LinearGradientBrush>
</ed:Arc.Fill>
</ed:Arc>
<Button x:Name="button" Width="" Height="" VerticalAlignment="Top" HorizontalAlignment="Left">动画</Button>
</Grid>
</DockPanel>
</Viewbox>
随后设置内部动画效果,设置的点位越多，动画效果也好，这里就由大家自己的琢磨了（帧动画）:
<UserControl.Resources>
<ResourceDictionary>
<Storyboard x:Key="stb">
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="4x" FillBehavior="Stop">
<EasingPointKeyFrame Value="45,70" KeyTime="0:0:0.8"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="4x" FillBehavior="Stop">
<EasingPointKeyFrame Value="90,75" KeyTime="0:0:1.2"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="4x" FillBehavior="Stop">
<EasingPointKeyFrame Value="90,75" KeyTime="0:0:1.2"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="4x" FillBehavior="Stop">
<EasingPointKeyFrame Value="100,70" KeyTime="0:0:1.2"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
<EasingPointKeyFrame Value="105,68" KeyTime="0:0:1.2"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main4" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
<EasingPointKeyFrame Value="105,68" KeyTime="0:0:0.8"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main4" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
<EasingPointKeyFrame Value="120,65" KeyTime="0:0:0.8"></EasingPointKeyFrame>
</PointAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource stb}"></BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="button" RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource stb}"></BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
参考链接：https://www.cnblogs.com/tsliwei/p/5770546.html
WPF成长之路------帧动画（1）的更多相关文章
- WPF成长之路------翻转动画
先介绍一下RenderTransform类,该类成员如下: TranslateTransform:能够让某对象的位置发生平移变化. RotateTransform:能够让某对象产生旋转变化,根据中心点 ...
- WPF成长之路------视频
今天偶然看到一篇博文,发现WPF原来还可以直接播放视频!于是在这里记录一下,以后方便使用: <MediaElement Source="C:\WINDOWS\system32\oobe ...
- wpf 帧动画
帧动画实现很简单 <ImageBrush x:Key="speed_s" Stretch="Fill" ImageSource="/images ...
- android 帧动画的实现及图片过多时OOM解决方案(一)
一,animation_list.xml中静态配置帧动画的顺序,如下: <?xml version="1.0" encoding="utf-8"?> ...
- WPF学习之绘图和动画
如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
- WPF学习之路初识
WPF学习之路初识 WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...
- WPF学习之绘图和动画--DarrenF
Blend作为专门的设计工具让WPF如虎添翼,即能够帮助不了解编程的设计师快速上手,又能够帮助资深开发者快速建立图形或者动画的原型. 1.1 WPF绘图 与传统的.net开发使用GDI+进行绘图不 ...
随机推荐
- application-defined exception
dataSnap服务器,客户端调用的时候写错了一句话, SQLConnection1->CloneConnection(); 改为 SQLConnection1->Close(); 就好了 ...
- 我的Linux之路——实现虚拟机VMware上linux与windows互相复制与粘贴
出自:http://blog.csdn.net/u012243115/article/details/40454063 解决方法:只需要在CentOS安装一个vmware-tools的工具. 1.打开 ...
- UNIX网络编程——客户/服务器心搏函数 (转)
下面是关于回送客户和服务器程序开发一些简单的心搏函数.这些函数可以发现对端主机或到对端的通信路径的过早失效. 在给出这些函数之前我们必须提出一些警告.首先,有人会想到使用TCP的保持存 ...
- <mvc:annotation-driven />讲解
<mvc:annotation-driven />是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学者快速应用默认配置方案.<mvc:annotation-driv ...
- Linux Debian 下LNMP服务器——nginx+mysql+php环境搭建及配置
昨天刚给公司服务器装了LNMP服务器环境,在这里简单记录一下过程备忘. 这里我在安装的时候是用的Dotdeb源,仅供参考. 1.导入Dotdeb源,据说Dotdeb源里的软件版本比较新. 在向源中导入 ...
- 114. Flatten Binary Tree to Linked List (Stack, Tree; DFS)
Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6 ...
- cannot launch node of type [arbotix_python/arbotix_driver]: arbotix_python
这个时候提示错误: ERROR: cannot launch node of type [arbotix_python/arbotix_driver]: arbotix_python ROS path ...
- C#HTML解析利器HtmlAgilityPack
HtmlAgilityPack是一个开源的解析HTML元素的类库,最大的特点是可以通过XPath来解析HMTL,如果您以前用C#操作过XML,那么使用起HtmlAgilityPack也会得心应手.目前 ...
- Lua与C交换
1.C调用Lua函数 (1) 首先要进行Lua的初始化,这个主要是lua_open和luaL_openlibs函数 (2)然后是解析并编译lua的代码,这个主要是luaL_dofile函数 (3) ...
- Bash空格的那点事-乾颐堂CCIE
先了解下bash中什么时候该用空格,什么时候不该用. 1. 等号赋值两边不能有空格 2. 命令与选项之间需要空格 3. 管道两边空格可有可无 我们来看看常见的问题 1. 赋值时等号两边或者只有左边多了 ...