和之前一样首先看一下wpf钟表效果图
是不是很炫酷,上面的那个花都是带有动画效果的图片 。
接下来就是代码了。
首先看一下整个场景的布局搭建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<window x: class = "qqdemo1.datetimew"
xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
title= "datetimew" height= "700" width= "800" loaded= "window_loaded" name= "datatime" >
<window.resources>
<storyboard x:key= "zhuanrote" >
<doubleanimation repeatbehavior= "forever" from= "0" to= "360" duration= "1:0:0" storyboard.targetname= "fenimg" storyboard.targetproperty= "rendertransform.angle" ></doubleanimation>
<doubleanimation repeatbehavior= "forever" from= "0" to= "360" duration= "0:1:0" storyboard.targetname= "xiaoshiimg" storyboard.targetproperty= "rendertransform.angle" ></doubleanimation>
<doubleanimation repeatbehavior= "forever" from= "0" to= "360" duration= "0:0:5" storyboard.targetname= "zhimg" storyboard.targetproperty= "rendertransform.angle" ></doubleanimation>
<doubleanimationusingkeyframes storyboard.targetname= "huaimg" repeatbehavior= "forever" storyboard.targetproperty= "rendertransform.angle" >
<easingdoublekeyframe value= "10" keytime= "0:0:2" ></easingdoublekeyframe>
<easingdoublekeyframe value= "30" keytime= "0:0:4" ></easingdoublekeyframe>
<easingdoublekeyframe value= "0" keytime= "0:0:6" ></easingdoublekeyframe>
<easingdoublekeyframe value= "-10" keytime= "0:0:8" ></easingdoublekeyframe>
<easingdoublekeyframe value= "-30" keytime= "0:0:10" ></easingdoublekeyframe>
</doubleanimationusingkeyframes>
</storyboard>
</window.resources>
<window.triggers>
<eventtrigger routedevent= "loaded" >
<beginstoryboard storyboard= "{staticresource zhuanrote}" ></beginstoryboard>
</eventtrigger>
</window.triggers>
<canvas>
<button width= "40" height= "20" margin= "560,113" panel.zindex= "1" background= "#72532e" foreground= "white" content= "min" fontweight= "semibold" click= "button_click" ></button>
<button width= "40" height= "20" margin= "610,113" panel.zindex= "1" background= "#72532e" foreground= "white" content= "tchu" fontweight= "semibold" click= "button_click_1" ></button>
<border width= "529" height= "330" margin= "145,138" background= "#fac178" ></border>
<label width= "236" height= "40" margin= "480,150" name= "time" fontsize= "24" canvas.left= "-66" ></label>
<image width= "120" height= "140" rendertransformorigin= "0.5,0.5" name= "huaimg" margin= "510,200" source= "/qqdemo1;component/timeimage/2224.png" >
<image.rendertransform>
<rotatetransform></rotatetransform>
</image.rendertransform>
</image>
<image width= "90" name= "fenimg" height= "40" rendertransformorigin= "0,0.8" margin= "251,306" source= "/qqdemo1;component/timeimage/wwww.png" >
<image.rendertransform>
<rotatetransform></rotatetransform>
</image.rendertransform>
</image>
<image name= "xiaoshiimg" width= "48" height= "134" margin= "300,242" rendertransformorigin= "0.5,0.8" source= "/qqdemo1;component/timeimage/www.png" canvas.top= "-26" >
<image.rendertransform>
<rotatetransform></rotatetransform>
</image.rendertransform>
</image>
<image width= "867" height= "700" source= "/qqdemo1;component/timeimage/3.png" ></image>
<image width= "30" height= "30" margin= "300,160" source= "timeimage/11.png" ></image>
<image width= "30" height= "30" margin= "314,160" source= "timeimage/12.png" ></image>
<image name= "zhimg" rendertransformorigin= "0.5,0.5" width= "376" margin= "0,0" height= "356" source= "timeimage/22230.png" canvas.left= "-59" canvas.top= "-44" >
<image.rendertransform>
<rotatetransform></rotatetransform>
</image.rendertransform>
</image>
<image width= "30" height= "30" margin= "310,430" source= "timeimage/16.png" ></image>
<image width= "30" height= "30" margin= "430,305" source= "timeimage/13.png" ></image>
<image width= "30" height= "30" margin= "180,305" source= "timeimage/19.png" ></image>
<image width= "30" height= "30" margin= "390,200" source= "timeimage/11.png" canvas.left= "-10" canvas.top= "-12" ></image>
<image width= "30" height= "30" margin= "420,255" source= "timeimage/12.png" canvas.left= "-6" canvas.top= "-14" imagefailed= "image_imagefailed" ></image>
<image width= "30" height= "30" margin= "380,190" source= "timeimage/14.png" canvas.left= "34" canvas.top= "174" ></image>
<image width= "30" height= "30" margin= "390,190" source= "timeimage/15.png" canvas.left= "-10" canvas.top= "216" ></image>
<image width= "30" height= "30" margin= "390,190" source= "timeimage/17.png" canvas.left= "-148" canvas.top= "216" ></image>
<image width= "30" height= "30" margin= "400,190" source= "timeimage/18.png" canvas.left= "-193" canvas.top= "174" ></image>
<image width= "30" height= "30" margin= "400,200" source= "timeimage/10.png" canvas.left= "-193" canvas.top= "41" ></image>
<image width= "30" height= "30" margin= "400,200" source= "timeimage/11.png" canvas.left= "-208" canvas.top= "41" ></image>
<image width= "30" height= "30" margin= "370,200" source= "timeimage/11.png" canvas.left= "-148" canvas.top= "-12" ></image>
<image width= "30" height= "30" margin= "320,160" source= "timeimage/11.png" canvas.left= "-84" canvas.top= "28" ></image>
</canvas>
</window>
|
场景的搭建比较死板,没有用代码去创建整个场景,位置都是自己一个一个的慢慢的摆放的比较随意。
下面就是程序的代码了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.windows;
using system.windows.controls;
using system.windows.data;
using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.shapes;
using system.timers;
using system.windows.navigation;
using system.windows.threading;
namespace qqdemo1
{
/// <summary>
/// datetime.xaml 的交互逻辑
/// </summary>
public partial class datetimew : window
{
public datetimew()
{
dispatchertimer timer = new dispatchertimer(); //时间相当于timer
timer.tick += new eventhandler(timer_tick);
//timer.interval = timespan.fromseconds(0.1);
timer.start();
initializecomponent();
this .datatime.windowstyle = system.windows.windowstyle.none;
//this.datatime.windowstate = system.windows.windowstate.normal;
this .datatime.allowstransparency = true ; //透明
this .background = brushes.transparent; //背景透明5
this .datatime.windowstartuplocation = system.windows.windowstartuplocation.centerscreen;
//this.time.content = ;
// datetime d = new datetime();
// this.xiaoshiimg.rendertransformorigin = new point(0.85,0.85);
}
void timer_tick( object sender, eventargs e)
{
this .time.content = datetime.now.tostring(); //tick 事件
}
private void window_loaded( object sender, routedeventargs e)
{
}
private void image_imagefailed( object sender, exceptionroutedeventargs e)
{
}
private void button_click( object sender, routedeventargs e)
{
this .windowstate = system.windows.windowstate.minimized;
}
private void button_click_1( object sender, routedeventargs e)
{
this .close();
}
}
}
|
这个动画的实现实在场景里面去实现的。下一节,会说到在代码里面如何去控制整个动画的实现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://blog.csdn.net/mq_shouhug753951mq/article/details/48295279