通通玩blend美工(2)——时钟

简介: 原文:通通玩blend美工(2)——时钟谢谢大家对我上一篇Blend的支持:通通玩blend美工(1)——荧光Button 再接再厉再来一篇~~! 这篇是建立在已经看得懂上一篇为基础来写的,有些细节我就不说了,截了这么多张图....写起来很累的.... 最终效果如下:     哇居然这么大...有点刷屏的嫌疑..     1.总体思路  分析上面效果--表盘+环形数字+时针+阴影各种logo装饰 表盘:由一些同心圆叠在一起,不同的圆用不同的渐变来填充背景以造成层次效果。
原文: 通通玩blend美工(2)——时钟

谢谢大家对我上一篇Blend的支持:通通玩blend美工(1)——荧光Button 再接再厉再来一篇~~!

这篇是建立在已经看得懂上一篇为基础来写的,有些细节我就不说了,截了这么多张图....写起来很累的....

最终效果如下:

 

 

哇居然这么大...有点刷屏的嫌疑..

 

 

1.总体思路


 分析上面效果--表盘+环形数字+时针+阴影各种logo装饰

表盘:由一些同心圆叠在一起,不同的圆用不同的渐变来填充背景以造成层次效果。

环形数字:画个圆,根据它创建布局路径,再往路径里添加数字。

时针:用钢笔工具画出来的尖三角形和直线。把其中心点设置到线的一端并和表盘中心点重合,这样就可以圆周运动了。

阴影和logo:阴影凸显其立体感,让其更真实。 logo起到装饰,讨好女朋友等作用。

 

 

 

 2.设计过程


我们如何才能画出同心圆呢?? 

首先我们建个坐标系,就两个交叉的直线,分别设置水平居中和垂直居中,如下图:(一定要把Margin里的属性全设置为0,这样才能居中于整个画布)

我们选择圆圈工具,鼠标的小十字和坐标系的圆点重合,按住Alt+Shift画圆,就可以画出以鼠标初始坐标为圆心的圆形,这点和PS是一样的。依次画出同心圆。

为第一个圆设置背景为渐变,颜色按照自己喜欢设置。

设置好后,再旋转轮盘,让其高光斜着点,这样更真实。

再设置第二个圈的背景色,我的喜好如下图。

也是旋转,让其自然。

制作表盘,注意最下面,我们这里用的是径向渐变。

调到自己满意的效果如下图。

看上去有点卡通的感觉...我们同事选中3个圈,把其边框颜色设置为无。

          

这样看起来就真实多了。

接下来我们制作高光,让其看起来更漂亮,干净。如下图,画一个椭圆,以白色来填充。

我们这里要加一个蒙板,让其自然地过渡透明。设置如下。这里的蒙板和PS里稍有不同,我们都知道PS里是白色是要的,黑色是不要的,而Blend里是透明度为100的是完全存在,透明度为0的是完全不要。我这里做了个渐变,就从0-100的过渡透明度。对比下上图,是不是感觉从地摊货变金格货了?haha~

                     

接下来,我门制作表盘上的那一圈数字。数字是排列成一个圆的,我们先画它排列的路径。先画个圆如下图

右键点击该圆,路径→创建布局路径。

这样就生成路径了,右键路径 添加PathListItem,添加路径上的项。再设置路径的Distribution属性为Even这样项目就均匀的围满路径了

                        

数字有点太靠外了,我们选择路径依赖的那个圆(注意不是路径,而是那个圆,这里看下代码很容易理解了),调节它的大小,调节时也要按住Alt+Shift,效果不言而喻

我们设置如下属性,数字就会安不同的方向来排布了,如下图

接下来我们来做指针。用线工具还是钢笔工具随意了。如下图(也要依赖坐标圆心来画)

           

画好后选择两根线,生成复合路径,并设置填充(fill)为白色。为什么是空心的呢??因为路径没有闭合,我们用钢笔工具让他们闭合

    

这样画出时针,分针可以复制时针出来,变换一下就好。

制作秒针圆心,指针就画根线就行

最后再来调整一下让其更真实。先制作时钟的阴影。为最开始画的那个圆添加一个阴影效果,如下图。

然后再添加添加上各种喜欢的元素,让其看起来不单调。

 

 

3.动起来吧时钟~~


 利用DateTime.Now来获取但前的时间,然后再根据时间分别设置时针、分针、秒针的角度,定义一个Timer来实时跟新角度,就可以让时钟跑起来啦~~ 

double secAngle;//初始归零角度
double minAngle;
double hourAngle;

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

secAngle = secRot.Rotation;//设置初始化角度
minAngle = minRot.Rotation;
hourAngle = hourRot.Rotation;

DispatcherTimer timer = new DispatcherTimer();//定义时间触发器
timer.Interval = TimeSpan.FromMilliseconds(1000);//触发间隔时间
timer.Tick+=new EventHandler(timer_Tick);//时间到触发的方法
timer.Start();
}

private void timer_Tick(object sender, EventArgs e)
{
secRot.Rotation = secAngle + DateTime.Now.Second * 6;//每秒转360/60=6度
minRot.Rotation = minAngle + DateTime.Now.Minute * 6;//每分钟转360/60=6度
hourRot.Rotation = hourAngle + DateTime.Now.Hour * 30 + DateTime.Now.Minute * 0.5;//每分钟转360/12+30/60*分钟数
}

前台代码:

<Path x:Name="min" Data="M60.196362,92 L4.6963625,0.5 C4.6963625,0.5 0.50000006,6.3115358 0.50000006,6.3115358 C20.324205,35.02882 40.148411,63.746101 59.972618,92.463387">
<Path.RenderTransform>
<CompositeTransform x:Name="minRot" Rotation="-148"/>
</Path.RenderTransform>
</Path>
<Path x:Name="hour" Data="M60.196362,92 L4.6963625,0.5 C4.6963625,0.5 0.50000006,6.3115358 0.50000006,6.3115358 C20.324205,35.02882 40.148411,63.746101 59.972618,92.463387">
<Path.RenderTransform>
<CompositeTransform x:Name="hourRot" Rotation="-148"/>
</Path.RenderTransform>
</Path>
<Path x:Name="sec" Data="M319.5,239.5 L436,305.33334">
<Path.RenderTransform>
<CompositeTransform x:Name="secRot" Rotation="-148"/>
</Path.RenderTransform>
</Path>

F5运行看看你的成果吧~~!

程序是不是比UI简单多了,同样完成个时钟,程序就这么点代码.....

源码下载:http://files.cnblogs.com/tong-tong/SilverlightApplication2.rar


 终于画好了,UI和程序不同,交互性设计也是一门学科,那种色感,什么的只能靠感觉来掌握,貌似还只能来自经验,不然无乱怎么做都感觉就是不好看。这点我深有体会,和大家共同进步。

北京也没传说中的这么冷,我都没穿毛衣呢~~只是室内外温差比较有创意。谢谢大家支持~~~

转载请注明原始地址:http://www.cnblogs.com/tong-tong/archive/2011/12/09/2282551.html

(最近发现居然有人转载我得文章了,高兴~~不过居然没说明作者.....这次在图片里加logo应该不会错了,哈哈~~)

 

 

目录
相关文章
|
2月前
|
前端开发 JavaScript 容器
霓虹灯数字时钟(可复制源代码)
本文展示了如何创建一个具有3D效果的霓虹灯数字时钟。通过HTML、CSS和JavaScript实现了一个动态更新时间的时钟,其中包含了字体定义、3D变换、过渡效果以及颜色动画等关键部分。最后提供了完整的代码供读者复制使用。
霓虹灯数字时钟(可复制源代码)
|
4月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
202 0
|
数据安全/隐私保护
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(1)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
133 0
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(2)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
139 0
|
JavaScript 前端开发
【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍
唯有热爱,可抵岁月漫长,唯有热爱,不畏世间无常! 少年不曾迷茫,展翅飞往神域,坚定初心,踏实行动。 新的一年,收下少年的祝福,一起踏上新道路。 💪(ง •_•)ง!!!
217 0
【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍
“你那么强,能不能用Unity做时钟”,“嗨,这有啥难”
又见面了哈,今天为大家介绍时钟、钟表的实现方法教程。 实现的方法有很多,这里只是提供了一个思路,本着抛砖引玉的心态,希望能和大家共同学习。
“闪瞎双眼~”,今天来实现如何实现太阳的光晕效果(Unity3D)
太阳光晕的效果虽然用处不大,但是很漂亮,漂亮不就行了,那么就来看看怎么在Unity3D中实现太阳光晕效果吧。
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 中 使用代码切换天空盒
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
【Unity3D 灵巧小知识点】☀️ | Unity 中 使用代码切换天空盒