用WPF轻松打造iTunes CoverFlow效果

转载 2012年03月23日 14:34:55

先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(this, new 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);

                }
            }
        }


原文出处:http://www.cnblogs.com/zhouyinhui/archive/2007/09/27/908213.html

用WPF轻松打造iTunes CoverFlow效果

                                    用WPF轻松打造iTunes CoverFlow效果                                      ...
  • donetk
  • donetk
  • 2008年05月02日 22:23
  • 197

CoverFlow 效果欣赏

CoverFlow 效果欣赏
  • hero82748274
  • hero82748274
  • 2010年07月25日 16:54
  • 7136

WPF效果- CoverFlow

http://www.cnblogs.com/Leo_wl/archive/2010/08/21/1805080.html
  • avi9111
  • avi9111
  • 2012年04月26日 16:50
  • 1000

【原】仿Mac的Coverflow的效果

Kinect的手势测试,弄的小东西。。Link巴:http://unity3d8.com/content/%E4%BB%BFmac%E7%9A%84coverflow%E6%95%88%E6%9E%9...
  • Ralfkaka
  • Ralfkaka
  • 2013年08月26日 11:34
  • 508

Android 浏览图片层叠放大效果(CoverFlow)

import java.util.HashMap; import java.util.Map; import android.content.Context; import android.grap...
  • q617610589
  • q617610589
  • 2015年04月27日 08:10
  • 1173

一种CoverFlow风格相册的Android实现

本文代码是在dolphinwang贡献的代码基础上进行修改的。 https://github.com/dolphinwang/ImageCoverFlow。 主要贡献在于支持了低于3张图片的...
  • u014137988
  • u014137988
  • 2016年07月26日 11:51
  • 1195

iOS-coverFlow效果简单实现

首先你需要PageFlowView的头文件和实现文件。下载地址在https://github.com/kejinlu/PagedFlowView1 #import "PagedFlowView.h" ...
  • xuexiiphone
  • xuexiiphone
  • 2016年04月26日 18:08
  • 1375

cocos2dx3.x 类似 coverflow效果

由于镜面反射涉及到openGL,不会。 h文件: #ifndef __CoverView_H__ #define __CoverView_H__ #include "cocos2d.h" #incl...
  • skillart
  • skillart
  • 2014年03月24日 17:34
  • 3809

Cover Flow特效实现(1)

Cover Flow特效实现(1) Cover Flow特效实现(2) Cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。如下图所示: 随处...
  • stanley1984_21
  • stanley1984_21
  • 2011年10月10日 11:16
  • 2421

Unity3d 脚本实现CoverFlow 效果

public class CoverFlow : MonoBehaviour {    public int numberOfPhotos = 4;  public ArrayList Pho...
  • miaoweiye
  • miaoweiye
  • 2013年04月16日 18:01
  • 1370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用WPF轻松打造iTunes CoverFlow效果
举报原因:
原因补充:

(最多只允许输入30个字)