用WPF轻松打造iTunes CoverFlow效果

简介: 原文:用WPF轻松打造iTunes CoverFlow效果                                    用WPF轻松打造iTunes CoverFlow效果                                                       周银辉...
原文: 用WPF轻松打造iTunes CoverFlow效果

                                    用WPF轻松打造iTunes CoverFlow效果
                                                       周银辉

源代码下载点这里
先Show一下:
CoverFlow1.png
CoverFlow2.png

下面这一张是苹果的iTunes软件:
iTunes.png

苹果iTunes播放器的CoverFlow效果羡煞旁人,不过有了WPF,我们也可以轻松实现哈,今天费了半天的时间终于搞定,呵呵...

感兴趣的话可以这里下载源代码
(说明:上传源代码时由于图片较大,所以就没传图片了,程序取的是用户" 我的图片"文件夹下的*.jpg图片,你可以修改代码中的路径或在"我的图片"文件夹下放几张jpg图片就可以看到效果了)

图片是使用3DTools 提供的2D到3D映射的方式贴图上去的,每张图片都帖在一个3D模型上,我们只需要让程序来安排这些模型的摆放位置就可以了

3D模型的摆放是按照如下方法进行的,其中3个传出参数angle指定模型源Y轴的旋转角度,offsetX指定模型的X轴方向上的平移量,offsetZ指定模型在Z轴方向上的平移量

  /**/ /// <summary>
        
/// 依照InteractiveVisual3D在列表中的序号来变换其位置等
        
/// </summary>
        
/// <param name="index">在列表中的序号</param>
        
/// <param name="midIndex">列表中被作为中间项的序号</param>

         private   void  GetTransformOfInteractiveVisual3D( int  index,  double  midIndex,  out   double  angle,  out   double  offsetX,  out   double  offsetZ)
        
{
            
double disToMidIndex = index - midIndex;


            
//旋转,两翼的图片各旋转一定的度数
            angle = 0;
            
if (disToMidIndex < 0)
            
{
                angle 
= this.ModelAngle;//左边的旋转N度
            }

            
else if (disToMidIndex > 0)
            
{
                angle 
= (-this.ModelAngle);//右边的旋转-N度
            }

            
         

            
//平移,两翼的图片逐渐向X轴负和正两个方向展开
            offsetX = 0;//中间的不平移
            if (Math.Abs(disToMidIndex) <= 1)
            
{
                offsetX 
= disToMidIndex * this.MidModelDistance;
            }

            
else if (disToMidIndex != 0)
            
{
                offsetX 
= disToMidIndex * this.XDistanceBetweenModels + (disToMidIndex > 0 ? this.MidModelDistance : -this.MidModelDistance);
            }

            

            
//两翼的图片逐渐向Z轴负方向移动一点,造成中间突出(离观众较近的效果)
            offsetZ = Math.Abs(disToMidIndex) * -this.ZDistanceBetweenModels;
          
        }


点击图片或指定当前应该被突出显示的图片时的动画效果是这样实现的,先使用上面的方法计算出决定模型位置的几个便量的新值(即上面的几个传出参数),然后在使用动画(DoubleAnimation)让这几个值由旧值过度到新值.

   /**/ /// <summary>
        
/// 重新布局3D内容
        
/// </summary>

         private   void  ReLayoutInteractiveVisual3D()
        
{
            
int j=0;
            
for (int i = 0; i < this.viewport3D.Children.Count; i++)
            
{
                InteractiveVisual3D iv3d 
=  this.viewport3D.Children[i] as InteractiveVisual3D;
                
if(iv3d != null)
                
{
                    
double angle = 0;
                    
double offsetX = 0;
                    
double offsetZ = 0;
                    
this.GetTransformOfInteractiveVisual3D(j++this.CurrentMidIndex,out angle,out offsetX,out offsetZ);


                    NameScope.SetNameScope(
thisnew NameScope());
                    
this.RegisterName("iv3d", iv3d);
                    Duration time 
= new Duration(TimeSpan.FromSeconds(0.3));

                    DoubleAnimation angleAnimation 
= new DoubleAnimation(angle, time);
                    DoubleAnimation xAnimation 
= new DoubleAnimation(offsetX, time);
                    DoubleAnimation zAnimation 
= new DoubleAnimation(offsetZ, time);

                    Storyboard story 
= new Storyboard();
                    story.Children.Add(angleAnimation);
                    story.Children.Add(xAnimation);
                    story.Children.Add(zAnimation);

                    Storyboard.SetTargetName(angleAnimation, 
"iv3d");
                    Storyboard.SetTargetName(xAnimation, 
"iv3d");
                    Storyboard.SetTargetName(zAnimation, 
"iv3d");

                    Storyboard.SetTargetProperty(
                        angleAnimation,
                        
new PropertyPath("(ModelVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"));

                    Storyboard.SetTargetProperty(
                        xAnimation,
                        
new PropertyPath("(ModelVisual3D.Transform).(Transform3DGroup.Children)[1].(TranslateTransform3D.OffsetX)"));
                    Storyboard.SetTargetProperty(
                        zAnimation,
                        
new PropertyPath("(ModelVisual3D.Transform).(Transform3DGroup.Children)[1].(TranslateTransform3D.OffsetZ)"));

                    story.Begin(
this);

                }

            }

        }
目录
相关文章
|
BI C# Windows
基于 WPF 平台的 ActiveReports Viewer控件
ActiveReports 报表控件致力于为组织和个人提供最出色的报表解决方案,多年来ActiveReports已经提供了 Windows Forms、Web、Silverlight和Flash平台的报表查看器控件,伴随着ActiveReports 7 SP1 的发布,我们又为 WPF 应用程序提供了专业的报表查看器控件。
867 0
|
前端开发 JavaScript C#
WPF中使用cefsharp
原文:WPF中使用cefsharp 新入职一家公司,由写服务端接口变成了软硬件通信、服务器、客户端、C/S、B/S乱七八糟各种打杂。
2047 0
|
Web App开发 C# Windows
制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动。先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片进行灰度处理4.  对选定图片进行裁切处理5.  无限制的恢复功能6. 类似加入购物车的功能以下来看看其实现过程。
1021 0
|
C# 容器
WPF笔记(1.2 Navigation导航)——Hello,WPF!
原文:WPF笔记(1.2 Navigation导航)——Hello,WPF!这一节是讲导航的。看了一遍,发现多不能实现,因为版本更新了,所以很多旧的语法不支持了,比如说,不再有NavigationApplication,仍然是Application,TextBlock容器的TextWrap属性改为TextingWrap,StartupUri指向"Page1.xaml"。
849 0
|
C# 安全 开发者
|
C#
[WPF]程序全屏
原文:[WPF]程序全屏 代码: 使用:
690 0

热门文章

最新文章