- 浏览: 1488350 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (525)
- SEO (16)
- JAVA-EE-Hibernate (6)
- JAVA-EE-Struts (29)
- JAVA-EE-Spring (15)
- Linux (37)
- JAVA-SE (29)
- NetWork (1)
- CMS (14)
- Semantic Research (3)
- RIA-Flex (0)
- Ajax-Extjs (4)
- Ajax-Jquery (1)
- www.godaddy.com (0)
- SSH (34)
- JavaScript (6)
- SoftwareEngineer (9)
- CMMI (0)
- IDE-Myeclipse (3)
- PHP (1)
- Algorithm (3)
- C/C++ (18)
- Concept&Items (2)
- Useful WebSite (1)
- ApacheServer (2)
- CodeReading (1)
- Socket (2)
- UML (10)
- PowerDesigner (1)
- Repository (19)
- MySQL (3)
- SqlServer (0)
- Society (1)
- Tomcat (7)
- WebService (5)
- JBoss (1)
- FCKeditor (1)
- PS/DW/CD/FW (0)
- DesignPattern (11)
- WebSite_Security (1)
- WordPress (5)
- WebConstruction (3)
- XML|XSD (7)
- Android (0)
- Project-In-Action (9)
- DatabaseDesign (3)
- taglib (7)
- DIV+CSS (10)
- Silverlight (52)
- JSON (7)
- VC++ (8)
- C# (8)
- LINQ (1)
- WCF&SOA (5)
- .NET (20)
- SOA (1)
- Mashup (2)
- RegEx (6)
- Psychology (5)
- Stock (1)
- Google (2)
- Interview (4)
- HTML5 (1)
- Marketing (4)
- Vaadin (2)
- Agile (2)
- Apache-common (6)
- ANTLR (0)
- REST (1)
- HtmlAnalysis (18)
- csv-export (3)
- Nucth (3)
- Xpath (1)
- Velocity (6)
- ASP.NET (9)
- Product (2)
- CSS (1)
最新评论
-
lt26w:
理解成门面模式应该比较容易明白吧
FacadePattern-Java代码实例讲解 -
lt26w:
看下面的例子比较明白.
FacadePattern-Java代码实例讲解 -
javaloverkehui:
这也叫文档,别逗我行吗,也就自己看看。
HtmlCleaner API -
SE_XiaoFeng:
至少也应该写个注释吧。
HtmlCleaner API -
jfzshandong:
...
org.springframework.web.filter.CharacterEncodingFilter 配置
CoverFlow – built using Silverlight 3's 'Projection' feature
- 博客分类:
- Silverlight
CoverFlow – built using Silverlight 3's 'Projection' feature
So I decided to have a go at building the coverflow experience using the new Silverlight 3 “Projection” feature.
If you want any of your SL3 content to look like it’s in 3D then the “Projection ” feature is your friend. It’s not true 3D, like what we’d expect from WPF camera/viewport, BUT it is sufficient to give the appearance of 3D.
What I also want to do in this sample is utilize designer created storyboards for ALL animations. It’s easy with something like coverflow to create your animations using code generated storyboards and/or dispatcher timers. These code generated storyboards or dispatcher timers are very DESIGNER UN-FRIENDLY, and this is something I try to steer clear of. I want to show you that you can create these complex types of experiences using “designer” friendly techniques.
What we’re going to build
We are going to build a very very simplified version of the infamous coverflow. The below picture is taken from the iTunes store, we are going to build something similar but without the scrollbar (that will be added in a future blog post). Also my version will have the covers tilted on a more exaggerated angle to highlight the ease at which you can do it using the blend tools.
Future blog post’s will work off this sample BUT for now it will be lean and clean, showing only the perspective transform and use of designer friendly storyboards.
So here is the final looking coverflow that we are going to build as mentioned it is a very vanilla version without the bells and whistles found in the iTunes version (like reflection or fading gradients etc). It’s only a youTube clip in case you haven’t installed SL3 and thus can’t play with it. (If you do want to play with the Silverlight 3 version then go to the bottom of this post.)
<object width="500" height="400"> <param name="movie" value="http://www.youtube.com/v/-Vgb7HhCWqQ&hl=en&fs=1"> <param name="allowFullScreen" value="true"> <param name="allowscriptaccess" value="always"> <embed type="application/x-shockwave-flash" width="500" height="400" src="http://www.youtube.com/v/-Vgb7HhCWqQ&hl=en&fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>
My interpretation of a CoverFlow solution
This is my own interpretation of how a coverflow system can work. The beauty of programming is that there are many ways to solve the same problem, each developer/designer has there own techniques and seeing all the different approaches to problems makes programming interesting.
Don’t get too bogged down in the pictures, hopefully the code will make more sense.
The visual tree hierarchy of the coverflow application is as follows
- Main Page (MainPage.xaml & cs)
--> CoverFlow (CoverFlow.xaml & cs)
--> Cover (Cover.xaml & cs)
--> Cover (Cover.xaml & cs)
--> Cover (Cover.xaml & cs)
--> Cover (Cover.xaml & cs)
--> …… etc.
The “Main Page ” is nothing more than a simple user-control that hosts the coverflow control. In the main page we also create the dummy data and pass that into the coverflow control.
The “CoverFlow ” control is a canvas container that hosts all the covers. Note that the canvas is horizontally and vertically aligned to the centre, and it has no set width (i.e. it is zero in width). This ensures that the canvas is aligned to the centre of the screen and all the covers that will be added to it will position from the centre outwards (this is an important point to remember).
The “Cover ” control is very simple in design. It has 3 storyboards that animate an image between the three different views mentioned above (Left, Normal, Right). They’re just storyboards for this sample however in a future blog post they will be turned into visual states as i wanted to keep this demo as simple as possible.
Silverlight 3 Demo
[demo uses Silverlight 3 beta]
Conclusion
I’ve tried to keep the overall design of the solution as simple as possible, the reflections, iTunes like effects etc were intentionally not added as I wanted to just concentrate on “Projection” and “Using designer friendly storyboards”.
I’ve seen a lot of implementations of coverflow both within Silverlight and from the Flash side and all of them have been built mainly using code generated animations. I have no problems with that approach as long as you somehow expose those animations to a designer for them to tweak and customize.
Blend 3 “behaviours” is one such technology that will allow you to keep your code generated animations (storyboards) but bubble up the important bits for a designer to be able to configure. Bare this in mind when you create your future coverflow like experiences.
There will be a couple of follow up posts on this coverflow application, I plan on showing you how to create this same coverflow experience using the Scroll Viewer, and/or via using the other layout controls. I choose to do using a canvas for this first version to keep it simple.
Silverlight 3 projection makes building 3D like experiences dead simple. And the animation engine within Silverlight is so simple to implement that it lets you concentrate on the important things like getting the experience right!
Enjoy and if you’ve got any questions feel free to look me up on Twitter @ JoseFajardo .
发表评论
-
SilverLight异步调用WebService出错!
2010-01-19 12:58 5362SilverLight异步调用WebService出错! ... -
Silverlight播放器 C#语言
2010-01-13 13:30 3258这段时间研究Silverlight中的MediaElement ... -
使用Silverlight,制作简单播放器的一点点心得。
2010-01-13 13:28 3610首先介绍什么是Silverligh ... -
初探silverlight--简易播放器
2010-01-13 13:28 1471<UserControl xmlns=" ... -
新开发的silverlight视频播放器,
2010-01-13 13:21 4434http://www.chenjiliang.com/Arti ... -
Silverlight教程第四部分:使用 Style 元素更好地封装观感
2010-01-12 22:11 1222Silverlight教程第四部分 ... -
Silverlight Carousel: Creating a Silverlight Control Displays Picture in an Inte
2010-01-12 18:18 1817http://www.codeproject.com/KB/s ... -
Using projection to build a 3D carousel in Silverlight 3
2010-01-12 18:14 2281http://ww ... -
silverlight动画播放停止重播等控制
2010-01-06 12:38 1346ani.begin() ani.stop(); ani. ... -
silverlight速学范例100
2010-01-06 12:37 1235silverlight速学范例100 ... -
Silverlight 中的 HTTP 通信和安全
2010-01-04 23:43 1972Silverlight 中的 HTTP 通信和安全 < ... -
Visual Studio的 诡异bug(mscorlib无法引用)引发的对话 and Silverlight XAML 构造出错
2010-01-04 09:25 4073... -
Silverlight常见问题及解决方法
2009-12-22 14:06 1224Silverlight常见问题及解决方法 ... -
网上常用免费webservice 查询
2009-12-22 12:47 4552网上常用免费webservice 查询 2008-11 ... -
必应 Bing 新特性之最新文章, Wolfram|Alpha 整合, 天气搜索等已推出
2009-12-21 23:33 1460必应 Bing 增加了一项“最新文章”的搜索结果特性,例如下图 ... -
下载silverlight官网的全部视频教程
2009-12-21 23:30 14810Silverlight官网提供了许 ... -
Silverlight客户端和WCF服务器端共享类库
2009-12-21 23:21 1789在Silverlight企业级项目开发中,访问数据库是很常见的 ... -
Create a Silverlight Europe weather map
2009-12-21 22:55 1538I don’t generally fi ... -
必应地图图片系统(Tile System)之二
2009-12-21 22:53 2242【坐标系和地图图片编 ... -
必应地图SilverLight控件入门讲座之六:显示街景(Streetside)
2009-12-21 22:51 4815必应地图SilverLight控件入门讲座之六:显示街景(St ...
相关推荐
这篇论文是关于三维场景的Flow Estimaiton的。主要出发点是平行投影和透视。该论文对于三维场景中光的采用和构造等讲解的比较突出。有需要的可以下来看看。
Feature extraction using maximum nonparametric margin projection
High-Speed 3D Imaging with Digital Fringe Projection Techniques
利用matlab进行FDK算法重建,最后得出结果,各个方向上的数据,FDK算法主要分为三步:第一步是对投影数据进行加权,第二步是对加权后的数据进行滤波,第三步是对滤波后的数据进行反投影,最后得到重建数据。
This is a classical paper named"Eigenfaces vs Fishfaces: Recognition Using Class Specific Linear Projection".
前端项目-d3-geo-projection,d3.js的扩展地理预测。
3DMAX几何投影插件Geometry Projection,将一个或多个对象或它的顶点选择沿全局或局部 x、y 或 z 轴投影到另一个对象上。
利用MATLAB编程实现滤波反投影算法,并重建图像,效果显著!
Time for action – filtering the projection list 83 Summary 85 Chapter 4: Accessing Layers 87 Layer types 88 OpenLayers 88 Time for action – exploring OpenLayers options 89 Working with tiles 90 ...
PanoramicMosaics by Manifold Projection.pdf
Android MediaProjection截屏&录屏 1、解决Android Q中java.lang.SecurityException: Media projections require a foreground service of type ServiceInfo.FOREGROUND_SERVICE_TYPE_MEDIA_PROJECTION 异常 2、...
如果使用NPM,则npm install d3-geo-projection 。 否则,请下载。 您也可以直接从作为加载。 支持AMD,CommonJS和香草环境。 在香草中,将导出d3全局变量: < script src =" ...
Projection For VR
function of the projection algorithm
这个东东我也给忘了。
Adaptive fringe-pattern__ projection for image saturation avoidance in 3D surface-shape__ measurement.pdf
Introduction_Vertica_Projection_Design
Android5.0之后,用MediaProjection实现截屏功能。
这是一个压缩传感方面的Gradient Projection for Sparse Reconstruction 工具包。
C#绘制3D曲线的例子,可以下载看看,很好的例子,能运行。