开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

通通玩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应该不会错了,哈哈~~)

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
全网最全的keytool证书生成、证书管理命令
全网最全的keytool证书生成、证书管理命令
26 0
全网首发:怎样制作CDKEY(3)-加密
全网首发:怎样制作CDKEY(3)-加密
34 0
(一)Java版Spring Cloud B2B2C o2o鸿鹄云商平台--概述
近期公司正在升级Spring Cloud版本的b2b2c o2o鸿鹄云商平台,我亲自参与了整个产品的研发及升级工作。大概统计了一下,用Java Spring Cloud技术研发电子商务平台的公司少之甚少,借此我想将整个研发的过程通过博客的方式分享出来,希望各位IT网友看到此系列文章多给本人留言,一起进步。
1101 0
制作WPF时钟之2
原文:制作WPF时钟之2 前段时间写了一篇“制作简单的WPF时钟”,今天再制作了一个更漂亮的WPF时钟,目前仅完成了设计部分,准备将它制作成一个无边框窗体式的时钟。
837 0
通通玩blend美工(5)——旋转木马,交互性设计
原文:通通玩blend美工(5)——旋转木马,交互性设计       这一篇偏向于逻辑的比较多,放在这个系列里会不会欠妥呢?在中国交互性设计也是美工的份内职责哦~   所以没有blend基础的人也可以看懂这篇文章,不过要用到初中的几何知识哦~亲     相信很多人都在手机或者网页上或者K...
795 0
C++(MFC)中WebBrowser去除3D边框的方法(实现IDocHostUIHandler接口)
先说实在的:最终解决办法是实现IDocHostUIHandler接口,在GetHostInfo方法里解决,但“实现接口”意味着QueryInterface、AddRef、Release三个方法必须实现,所以相关代码是:class CMyWebBrowser : public IDocHostUIHa...
846 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载