wp之切换图片动画
由于早前买了一部windows phone手机，也想借着手机开发一些关于windows phone的软件，先前有尝试做了一款简易备忘软件，最近在学习的过程中，竟然遇到了Canvas，Html5的Canvas跟安卓版本的比较相似，但是跟windows phone的Canvas就有点不同了，今天就试着利用canvas来做一个图片切换的程序。
效果如下：
图片切换的原理就是简单的2张重叠的图片，第一张被剪裁的区域逐渐变大，第二章图片逐渐显现出来。
首先需要一个较大的Canvas容器，用于装载这些需要的图片，XAML代码如下：
1 <Canvas x:Name="DisplayCanvas" Width="400" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center"> 2 </Canvas>
对图片进行裁剪，需要用到Canvas、PathGeometry(表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状)、LineSegmen(在PathFigure中的两个点之间创建一条直线。)，如：当我们设置3个点的时候，会裁剪出一个三角形。
1 private List<Canvas> m_images = new List<Canvas>(); 2 3 private PathGeometry m_displayClip = null; 4 5 private LineSegment m_displayPoint1 = null; 6 7 private LineSegment m_displayPoint2 = null; 8 9 private Storyboard m_timer = null;
以Canvas为容器来存放Image对象，并让赋予Canvas点击事件来触发切换图片的效果，代码如下：
1 //添加Image对象 2 var canvas = new Canvas 3 { 4 Width = MAX_WIDTH, 5 Height = MAX_HEIGHT, 6 Background = new SolidColorBrush { Color = Colors.White } 7 }; 8 9 canvas.MouseLeftButtonDown += new MouseButtonEventHandler(DisplayImage); 10 11 var uri = new Uri(imgPath, UriKind.Relative); 12 var imgSurce = new BitmapImage(uri); 13 14 var img = new Image 15 { 16 Source = imgSurce, 17 Width = 384, 18 Margin = new Thickness(8, 8, 0, 0) 19 }; 20 21 canvas.Children.Add(img);
然后利用PathGeometry、LineSegmen裁剪出剩下的部分，由于我们需要在每一次时间内实现动画的效果，这时就需要Storyboard了，它可以实现我们需要的动画效果。代码大致如下：
1 if (m_movedHeight < MAX_HEIGHT) 2 { 3 m_movedHeight += MOVE_STEP; 4 m_displayPoint1.Point = new Point(MAX_WIDTH, m_movedHeight); 5 m_displayPoint2.Point = new Point(0, m_movedHeight); 6 m_timer.Begin(); 7 } 8 else 9 { 10 m_displaying = false; 11 m_images[m_index++].Clip = null; 12 InitCanvasOrder(); 13 }
如果需要连续切换好几张图片，那么将Canvas.Clip设为NULL是必须的，不然会出现错误。
这是一个简单的wp动画，如有错误，请告诉我，谢谢！
