原文:通通玩blend美工(8)--动态绘制路径动画,画出个萌妹子~ 2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香慢慢烧完的Loading动画呢? 刚经历了某甲方高强度一个月的洗礼后,这几天刚好闲下来,这个问题又浮现在我脑海里.于是经过几番思索纠结后,我发现了一个更好玩的效果,如下:                                                  ↑点击开始   只要是通过path来表示的都可以画出来哦亲~如果好好构思一下是可以实现很震撼的…

原文:通通玩blend美工(1)--荧光Button 最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...) 看着各位大虾出系列文章貌似挺好玩的,本人耍了2个月的Wpf,有点见解,希望各位看官笑纳.本系列第一章就先来点简单又实用的吧o(∩_∩)o 哈哈.. 最终效果如下: ←点它 本人一直在做WPF算是第一次做silverlight,这样主要是为了能够在博客里更好的展示成品 .(特别鸣谢银光中国提供的免费silverli…

原文:通通玩blend美工(6)上--仿iPhone滚动选择器的ListBox(UI设计) 好久没更新博客了,由于项目比较紧,期间收到不少园友的短消息,感谢大家对我的支持~~. 相信各位都在自己的神机中看到过各种滚动选择器,偶们项目经理就是个iPhone迷,前几天一直抬着个手机对我说"这个炫,做这个...".于是就有了这个选择器. 最终效果如下: (按住鼠标,尽情滚吧~)   页面代码如下:  <TextBlock Text="{Binding SelectedItem…

原文:通通玩blend美工(3)--可爱的云 好久没有写这个系列的博客了,这里给个电梯吧,照顾新来的同学~~ 通通玩blend美工(1)——荧光Button 通通玩blend美工(2)——时钟 目前我在广州出差,一直细雨绵绵,闷得慌,仰望天空,大雾笼罩,看不见蓝天白云甚至太阳,怪不得昆明的房价涨这么高...... 最终效果如下: ←是不是很想把它捧在手里,来清爽一下,北方的同学也可以先放冰箱里,夏天再用. (特别鸣谢银光中国提供的免费silverlight空间) 1.总体思路 分析上面效果:一坨…

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

原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblogs.com/tong-tong/archive/2012/07/15/2586543.html 回顾下效果:   页面代码如下:  <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}"/>…

原文:通通玩blend美工(7)--简约而不简单的块 最近在研发一个WPF快速开发框架,满脑子都是各种逻辑各种模式,写一篇比较休闲娱乐的博客,宣泄下我对美工的热爱. 我一直以来有意无意在手机应用或者各种网站上看到这么一种风格按钮,明明很简单,却有一种很清新感觉.一种独特的质感,让你很想去触摸.看了 万仓一黍 分享的 PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 有了启发,这种配色这种质感,就是一直以来我想要的感觉.于是就产生了这个正则表达式替换测试工具 效果:  别点…

原文:通通玩blend美工(5)--旋转木马,交互性设计 这一篇偏向于逻辑的比较多,放在这个系列里会不会欠妥呢?在中国交互性设计也是美工的份内职责哦~ 所以没有blend基础的人也可以看懂这篇文章,不过要用到初中的几何知识哦~亲 相信很多人都在手机或者网页上或者KTV的点歌系统里看到过旋转木马的目录导航,这个是如何做的呢?? 最终效果如下:(貌似有点太大了显示不下,附加个阅览地址: http://space.silverlightchina.net/ltt147/TTcarousel/Defau…

1,首先用svg绘制一条path路径,然后进行如下操作 ps: 下面是svg中两个属性及值的意义 stroke-dasharray是让你指定画出的线段每段的长度,第二个值是各段之间空隙的长度. stroke-dashoffset是让你指定每个小段的起始偏移量. var path = document.querySelector('.squiggle-animated path'); var length = path.getTotalLength(); // 清除之前的动作 path.style…

本文示例代码.数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl相信很多人都听说过,作为Uber几年前开源的交互式地理信息可视化工具,kepler.gl依托WebGL强大的图形渲染能力,可以在浏览器端以多种形式轻松展示大规模数据集. 图1 更令人兴奋地是Kepler.gl在去年推出了基于Python的接口库keplergl,结合jupyter notebook/jupyter lab的…