这篇应该是"silverlight3的"伪"3D续--图片横向轮换"的后续篇章,代码基本上从上篇代码修改而来,界面则抄袭了nasa的相册,自己一直做数据库相关的电子商务开发,虽然断断续续学习了一阵silverlight,但对RIA开发还没找着感觉,基本上仍处于从asp.net程序员看silverlight的初级阶段,这个权当练手,废话不多说,直接看效果图:
演示地址: http://images.24city.com/jimmy/album/default.html
基本技术点:
1.利用webclient动态加载xml来获取程序配置以及数据源
2.利用webclient异步读取大图片内容,以达到大图加载的loading效果
3.利用SizeChanged事件重新定位各元素中心点位置(结合ActualHeight,ActualWeight)
4.下面导航小图片区,基本上可以分成三部分:
4.1当前图(即下面一排图片中的绿色图)--始终定位于容器(canvas)的中心点 4.2当前图左边的图片(利用y轴,z轴旋转后并排在一起,形成立体堆叠效果) 4.3当前图右侧的图片(同4.2,只是y轴,z轴角度转成负值而已,以达到左右对称)
至于布局算法,大家各显神通吧,达到效果就好,在这个例子里我的代码也只是想着如何实现而已(属于最低级原始层次),不具备啥参考意义(欢迎大家提出更好的排列算法)
这里再给出一个示例结构图,有助于理解各元素水平位置的分布(为了更直接,刻意把各元素垂直错开了)
5.小图点击后,小图片整体移动的效果实现:
基本上这是一个视觉假象,把图片最外层的窗口cavas应用一个storyboard,让canvas的x坐标相对变化即可,因为所有小图片都在容器里,所以看上去也就整体跟着移动了,但是有一个问题,动画放一次后,会停在新的x坐标上(AutoReverse设置为false的前提下),下次再播放就动不了(因此起始x值一样了,相当于没移动)
所以在动画的Completed事件里,我用代码又强制把canvas容器的x值复原了(为了是下次可以继续播放),同时再次调用第"4"点中所提到的布局算法重新布局,因为代码的执行只在一瞬间,所以肉眼根本看不出这点小动作。
这样之后,基本上就能实现点击移动切换功能了,但是效果很单调,为了将导航区的当前大图慢慢缩小,同时被点击的小图慢慢放大,再同时伴随一些角度的姿态调整,在小图的点击事件ItemClick里,我又尝试了写了N多垃圾代码,如果您细心看,能看到一些小变化(不过这些小变化自我感觉仍旧很生硬,不连贯,也欢迎大家提出更有效更简单的解决办法)
源代码下载
代码配置说明:
用vs2008 sp1打开后,web目录下新建一个img目录,参照data/img.xml里的内容,自己找些图片复制到img目录中就可以了.
[2009/11/08更新]加入了DeepLink支持
转载请注明来自 菩提树下的杨过