原文:WPF“天狗食月”效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yangyisen0713/article/details/18596419

利用Blend写的WPF天狗食月效果,先上效果图:

xaml代码如下:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="wpf天狗食月动画.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Storyboard1" AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="192"/>
<EasingDoubleKeyFrame KeyTime="0:0:11" Value="192"/>
<EasingDoubleKeyFrame KeyTime="0:0:13" Value="406"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-118"/>
<EasingDoubleKeyFrame KeyTime="0:0:11" Value="-118"/>
<EasingDoubleKeyFrame KeyTime="0:0:13" Value="21"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="267"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="481"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="28"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="167"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Window.Triggers> <Grid x:Name="LayoutRoot" Background="Black">
<Ellipse x:Name="ellipse" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="116" Margin="75,155,0,0" Stroke="Black" VerticalAlignment="Top" Width="116" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse1" Fill="#FF0C0C0D" HorizontalAlignment="Left" Height="116" Margin="0,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="116" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Window>

WPF“天狗食月”效果的更多相关文章

  1. WPF绘制党徽(立体效果,Cool)

    原文:WPF绘制党徽(立体效果,Cool) 前面用WPF方式绘制了党旗(WPF制作的党旗) ,去年3月份利用C# 及GDI+绘制过党徽,这次使用WPF来绘制党徽. ------------------ ...

  2. WPF 扩大,回弹效果

    原文:WPF 扩大,回弹效果 <Window x:Class="Fish.AccountBook.View.Test.PanelWindow" xmlns="htt ...

  3. WPF 有趣的动画效果

    WPF 有趣的动画效果         这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了.         实际上.我对动画如此的入迷,以至 ...

  4. WPF图形/文字特别效果之一:交叉效果探讨(续)

    原文:WPF图形/文字特别效果之一:交叉效果探讨(续) 在"WPF图形/文字特别效果之一:交叉效果探讨"(http://blog.csdn.net/johnsuna/archive ...

  5. WPF图形/文字特别效果之一:交叉效果探讨

    原文:WPF图形/文字特别效果之一:交叉效果探讨 为了说明问题,先看下图:图1  完全重叠的单一颜色文字它是2008几个字的叠加,并且颜色为单一的红色.如果不仔细分辨,你或许无法一下子看出是2008. ...

  6. WPF中制作立体效果的文字或LOGO图形(续)

    原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...

  7. WPF中制作立体效果的文字或LOGO图形

    原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题 ...

  8. WPF 实现跑马灯效果的Label控件,数据绑定方式实现

    原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件:具体代码如下 using System; using S ...

  9. WPF 实现波浪浮动效果

    原文:WPF 实现波浪浮动效果 目标:实现界面图标Load时,整体图标出现上下波浪浮动效果,如下图: 前台代码: <Windowxmlns="http://schemas.micros ...

随机推荐

  1. 三、链路追踪系统 zipkin

    一.构建项目 用到的依赖直接看pom.xml的注释吧 <?xml version="1.0" encoding="UTF-8"?> <proj ...

  2. GDB(十)--调试正在运行的进程

    我编写了一个循环: long i;    for (i = 0; i < 999999; i++) {        mt.a += 1;        sleep(1);    }把它编译成a ...

  3. Mongodb in Mycat指南

    1       前言 Mycat目前支持JDBC连接后端数据库,理论上支持任何数据库,如ORACLE.DB2.SQL Server等,是将其模拟为MySQL,所以对其他数据库只支持标准的SQL语句,而 ...

  4. 安装Win10+Ubuntu14.04双系统(uefi启动版)

    说明 本教程基于个人电脑(型号:神舟K550d-i7 D1)成功安装测试发布,不同硬件环境可能有细微差异,为预防安装过程中出现意想不到的报错,重要数据请提前备份 硬件环境 cpu:Intel i7-4 ...

  5. [Angular] How to styling ng-content

    Let's say you are builing a reuseable component. The style structure like this: div > input If yo ...

  6. Android 从硬件到应用:一步一步向上爬 4 -- 使用 JNI 方法调硬件驱动

    Android下,java应用程序通过JNI方法调用硬件抽象层模块,在Android 从硬件到应用:一步一步向上爬 3 -- 硬件抽象层訪问硬件驱动 中我们已经编译好了硬件抽象层模块,以下就要開始为H ...

  7. Android多线程研究(5)——线程之间共享数据

    一.如果是每个线程都执行相同的代码,则可以使用同一个Runnable来实现共享 public class MultiThreadShareData { public static void main( ...

  8. 账号权限问题导致 masterha_check_repl 检查失败

    在使用 masterha_check_repl --global_conf=/etc/masterha/masterha_default.conf --conf=/etc/masterha/app1. ...

  9. 百度UEditor上传图片-再总结一次

    晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就 ...

  10. 深入理解AngularJs-scope(二)

    深入理解AngularJs-scope(一)中,我们对AngularJs的脏检测及其触发.异步任务队列进行了学习.紧接上一篇文章 深入理解AngularJs-scope(一),我们来看看scope对以 ...