Silverlight——简单3D效果的探究

3D:

　在MSDN上有个关于silverlight的3D展示，点击两边的图片时，图片转换会出先立体视觉动画效果：

这个效果看上去很炫，但偏偏就这个实例MSDN上不给代码！郁闷啊。

立体感与3D：

　　既然没有那我就自己来。虽学习SL有段时间了，但多是在内部数据方面。虽然也看到过别人做出的3D效果的作品，但就觉的很炫，也就过过
眼。既不知道如何实现这样的效果的，也没想过原理。偶然看到一张很让人纠结的图片：
　　我还为这个三角形是站着的还是躺着的，思考了半天。其实我也并不清楚这种“3D”和《阿凡达》要带眼镜的“3D”那个更确切。
其实这个利用的是人的视觉，让人产生一种立体的感觉。
布局：
回到那个例子上，当然这些图片都是平面的。下面用数据说明，如何让平面的看起来
像个立体的：
　　
旁边的是刚开始我设计的动作变化。下面还有实验时候的布局代码，并不完全，但已经有了思路了：
　　
<Rectangle x:Name="AR" Tag="left" Width="200" Height="250"  Canvas.Top="20" Canvas.Left="50" Canvas.ZIndex="3" MouseLeftButtonDown="btnMouseLeftButtonDown">
            <Rectangle.Projection>
                <PlaneProjection x:Name="AP" RotationY="-60"></PlaneProjection>
            </Rectangle.Projection>
            <Rectangle.Fill>
                <ImageBrush x:Name="Aimg" ImageSource="/SLDemo3D;component/florian.jpg">
                </ImageBrush>
            </Rectangle.Fill>
        </Rectangle>
        
        <Rectangle x:Name="BR" Tag="mid" Width="200" Height="250" Canvas.Top="20" Canvas.Left="300" Canvas.ZIndex="2" MouseLeftButtonDown="btnMouseLeftButtonDown">
            <Rectangle.Projection>
                <PlaneProjection x:Name="BP" RotationY="0"></PlaneProjection>
            </Rectangle.Projection>
            <Rectangle.Fill>
                <ImageBrush x:Name="Bimg" ImageSource="/SLDemo3D;component/jareck.jpg">
                </ImageBrush>
            </Rectangle.Fill>
        </Rectangle>
        
        <Rectangle x:Name="CR" Tag="right"  Width="200" Height="250" Canvas.Top="20" Canvas.Left="550" Canvas.ZIndex="1" MouseLeftButtonDown="btnMouseLeftButtonDown">
            <Rectangle.Projection>
                <PlaneProjection x:Name="CP" RotationY="60"></PlaneProjection>
            </Rectangle.Projection>
            <Rectangle.Fill>
                <ImageBrush x:Name="Cimg" ImageSource="/SLDemo3D;component/kamil.jpg">
                </ImageBrush>
            </Rectangle.Fill>
        </Rectangle>



就是用了：<Rectangle.Projection>
                <PlaneProjection x:Name="CP" RotationY="60"></PlaneProjection>
            </Rectangle.Projection>
使图片产生侧面立体的效果，简单吧。（为了看起来更逼真，您可以将中间一幅设置稍大点）这样就会有：

动画：
　　下面最主要的问题就是如何设定动画。将动画分解，其实就是两部：
　　　　1，图片视角的动画
　　　　2，图片位置的动画
　　这样就好办了，利用<Storyboard >
               　　　　　　 <DoubleAnimation Storyboard.TargetName=""Storyboard.TargetProperty=""From="" To="" Duration="">
　　　　　　　　　　　　</DoubleAnimation>
　　　　　　　　　　　</Storyboard>
很容易就实现动画效果了。只需要将这两个动画组合起来，同时进行。就会实现类似MSDN上的效果了。



<Canvas.Resources>
            <Storyboard x:Name="myStoryboard" Completed="myStoryboard_Completed">
                <!--图片的旋转-->
                <DoubleAnimation x:Name="daAP" Storyboard.TargetName="AP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="-60" To="0" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daBP" Storyboard.TargetName="BP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="0" To="60" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daCP" Storyboard.TargetName="CP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="60" To="-60" Duration="0:0:1"></DoubleAnimation>
                <!--图片换位-->
                <DoubleAnimation x:Name="daAR" Storyboard.TargetName="AR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="50" To="300" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daBR" Storyboard.TargetName="BR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="300" To="550" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daCR" Storyboard.TargetName="CR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="550" To="50" Duration="0:0:1"></DoubleAnimation>
            </Storyboard>
            <Storyboard x:Name="myStoryboard2" Completed="myStoryboard2_Completed">
                <!--图片的旋转-->
                <DoubleAnimation x:Name="daAP2" Storyboard.TargetName="AP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="-60" To="60" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daBP2" Storyboard.TargetName="BP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="0" To="-60" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daCP2" Storyboard.TargetName="CP"
                                 Storyboard.TargetProperty="RotationY"
                                 From="60" To="0" Duration="0:0:1"></DoubleAnimation>
                <!--图片换位-->
                <DoubleAnimation x:Name="daAR2" Storyboard.TargetName="AR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="50" To="550" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daBR2" Storyboard.TargetName="BR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="300" To="50" Duration="0:0:1"></DoubleAnimation>
                <DoubleAnimation x:Name="daCR2" Storyboard.TargetName="CR"
                                 Storyboard.TargetProperty="(Canvas.Left)"
                                 From="550" To="300" Duration="0:0:1"></DoubleAnimation>
            </Storyboard>
        </Canvas.Resources>



代码中设定了两个动画效果，一个是图片向左旋转的，一个是向右旋转的。
实验了一下，基本上实现了“3D”效果。

进一步的改进：
　　似乎我们的目的达到了，但是很多地方还要改进。首先就是我们图片只会向左或向右移动一次，然后就是重复动画了，这当然是不行的。
　　所以首先动态设定图片立体视觉的参数：



                    //旋转参数
                    double tempdaAP = (double)daAP2.From;
                    daAP2.From =daAP2.To;
                    daBP2.To=daAP2.From ;
                    daBP2.From= daBP2.To;
                    daCP2.To=daBP2.From  ;
                    daCP2.From=daCP2.To;
                    daCP2.To=tempdaAP;



还有动画位移的参数：



                    //坐标参数
                    double tempdaAR = (double)daAR2.From;
                    daAR2.From=daAR2.To;
                    daBR2.To= daAR2.From;
                    daBR2.From = daBR2.To;
                    daCR2.To= daBR2.From;
                    daCR2.From= daCR2.To;
                    daCR2.To= tempdaAR;



细心的您一定会发现这只是向左边移动时的情况，向右移动的时候上面的两组代码又会不一样！
同样的问题还在图片的ZIndex参数上：



            //zindex参数
            int tempindex = Canvas.GetZIndex(AR);
            Canvas.SetZIndex(AR, Canvas.GetZIndex(BR));
            Canvas.SetZIndex(BR, Canvas.GetZIndex(CR));
            Canvas.SetZIndex(CR, tempindex);
            string temptag = AR.Tag.ToString();



这是向右移动时Zindex修改情况，但向左时的又是另一情况！
还有个问题，就是如何判断图片向左还是向右？跟据上面的代码，可以用同样的方式处理这个问题。
CR.MouseLeftButtonDown += new MouseButtonEventHandler(btnMouseLeftButtonDown);
CR.MouseLeftButtonDown -= new MouseButtonEventHandler(btnMouseLeftButtonDown);
为不同位置的图片移除和绑定不同的事件。这是方法之一，同样还可以这样做：
　　为每个图片设定tag，用于存放位置的信息。然后根据触发事件的sender判断当前图片的位置。动画完成后利用上面轮换的方法重新
设定图片的tag。（因为name不能随便修改，所以使用tag）


            //tag用于判定动画
            string temptag = AR.Tag.ToString();
            AR.Tag=BR.Tag;
            BR.Tag = CR.Tag;
            CR.Tag = temptag;



 
结束：
　　根据以上的信息，我想您应该明白我是如何设计和实现这个MSDN的“3D”效果了。别高兴的太早，还有很多东西需要完善的。比如:
如何让判断左右移动代码更简洁？如何处理动画未完成时，用户又点击动画了？如何处理以上的代码的顺序，是在移动前还是在移动完成
后？等等等。以上问题我都实现和优化了，但不知与MSDN上的代码有多大的差距呢？
　　我建议您自己思考一下，因为我在设计的时候很多东西有的方法并不容易实现的，还有的处理方法可能会是多样的。
OK，这就是一个从未见识过这方面内容和没有任何参考的人关于简单“3D”实现的思考。各位不要见笑。
　　如果您有何这方面的经验和新的想法，不妨说出来，让我也学习学习。