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 }