文档章节

WPF成长之路------帧动画(1)

o
 osc_pn11u1x9
发布于 2018/08/06 10:35
字数 800
阅读 21
收藏 0

精选30+云产品,助力企业轻松上云!>>>

原文: WPF成长之路------帧动画(1)

最近公司的一个项目因为是WPF的,而自己已经很长一段时间没有接触过WPF了,再加上之前没有做过wpf的动画效果,因此在学习的过程中也顺便记录一下,说不定以后还会用上,同时也算是总结一下吧!刚开始写博客,写得不好的地方大家多多见谅!不喜勿喷!

 

这个效果主要是通过各种图形的组合进行绘图,然后通过贝塞尔曲线绘制主要的动画图形,从而实现帧动画!

先上效果图:

动态图效果不好,所以也放了一张静态图片。

首先是绘制图形部分,图形主要是五部分组成:背景的虚化效果、圆弧(由两部分组成,分别设置渐变色)、圆形边框、圆形内部颜色以及动画部分,代码如下:

<Viewbox>
        <DockPanel>
            <Grid>
                <ed:Arc x:Name="shadowArc" StartAngle="0" EndAngle="360" Height="200" Width="200" ArcThickness="40" Opacity="0.7">
                    <ed:Arc.Fill>
                        <SolidColorBrush x:Name="shadowColor" Color="#0689FF"></SolidColorBrush>
                    </ed:Arc.Fill>
                    <ed:Arc.Effect>
                        <BlurEffect Radius="15" KernelType="Box"  RenderingBias="Quality"/>
                    </ed:Arc.Effect>
                </ed:Arc>
                <ed:Arc StartAngle="0" EndAngle="360" ArcThickness="2" Height="140" Width="140" Fill="#8BFCF4" Margin="0 0 0 30"></ed:Arc>
                <ed:Arc StartAngle="0" EndAngle="360" ArcThickness="122" Height="135" Width="135" Fill="#0048B4" Margin="0 0 0 30"></ed:Arc>
                <ed:Arc Height="140" Width="140" Margin="0 0 0 30" StartAngle="90" EndAngle="180"></ed:Arc>
                <Path Height="140" Width="140" 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="90" EndAngle="180" Height="90" Width="90" ArcThickness="10" Margin="85 60 0 0">
                    <ed:Arc.Fill>
                        <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                            <GradientStop Color="#038EFF" Offset="0"></GradientStop>
                            <GradientStop Color="#126DFF" Offset="1"></GradientStop>
                        </LinearGradientBrush>
                    </ed:Arc.Fill>
                </ed:Arc>
                <ed:Arc StartAngle="180" EndAngle="270" Height="90" Width="90" ArcThickness="10" Margin="-85 60 0 0">
                    <ed:Arc.Fill>
                        <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                            <GradientStop Color="#126DFF" Offset="0"></GradientStop>
                            <GradientStop Color="#4826D2" Offset="1"></GradientStop>
                        </LinearGradientBrush>
                    </ed:Arc.Fill>
                </ed:Arc>
                <Button x:Name="button" Width="50" Height="20" 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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
WPF成长之路------帧动画(1)

最近公司的一个项目因为是WPF的,而自己已经很长一段时间没有接触过WPF了,再加上之前没有做过wpf的动画效果,因此在学习的过程中也顺便记录一下,说不定以后还会用上,同时也算是总结一下吧...

MaxFish
2018/08/06
0
0
WPF成长之路------帧动画(1)

最近公司的一个项目因为是WPF的,而自己已经很长一段时间没有接触过WPF了,再加上之前没有做过wpf的动画效果,因此在学习的过程中也顺便记录一下,说不定以后还会用上,同时也算是总结一下吧...

osc_mblu5qn4
2018/08/06
5
0
WPF中的动画——(一)基本概念

原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧...

osc_ipgs1x3t
2018/05/15
2
0
[UWP]使用离散式关键帧播放动画

这篇文章介绍离散式关键帧,并使用它做些有趣的动画。 1. 什么是离散式关键帧 以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoubleKeyFrame、LinearDoubleKey...

dino.c
05/27
0
0
[UWP]使用离散式关键帧播放动画

这篇文章介绍离散式关键帧,并使用它做些有趣的动画。 1. 什么是离散式关键帧 以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoubleKeyFrame、LinearDoubleKey...

dino.c
05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud开发人员如何解决服务冲突和实例乱窜?(IP实现方案)

点击上方“陶陶技术笔记”关注我 回复“资料”获取作者整理的大量学习资料! 一、背景 在我上一篇文章《Spring Cloud开发人员如何解决服务冲突和实例乱窜?》中提到使用服务的元数据来实现隔...

zlt2000
2019/09/06
0
0
Linux下diff命令用法详解

大家好,我是良许。 我们在平时工作的时候,经常要知道两个文件之间,以及同个文件不同版本之间有何异同点。在 Windows 下,有 beyond compare 这个好用的工具,而在 Linux 下,也有很多很强...

osc_th8jvcw7
15分钟前
0
0
万变不离其宗之UART要点总结

[导读] 单片机开发串口是应用最为广泛的通信接口,也是最为简单的通信接口之一,但是其中的一些要点你是否明了呢?来看看本人对串口的一些总结,当然这个总结并不能面面俱到,只是将个人认为...

osc_kyehmyzk
16分钟前
7
0
kafka的认识、安装与配置

认识Kafka 花费越少的精力在数据移动上,就能越专注于核心业务 --- 《Kafka:The Definitive Guide》 认识 Kafka 之前,先了解一下发布与订阅消息系统:消息的发送者不会直接把消息发送给接收...

osc_wy8nhxhn
18分钟前
0
0
使用pandas进行数据处理——DataFrame篇

  今天是pandas数据处理专题的第二篇文章,我们一起来聊聊pandas当中最重要的数据结构——DataFrame。   上一篇文章当中我们介绍了Series的用法,也提到了Series相当于一个一维的数组,只...

开源仔
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部