wp之切换图片动画

　　由于早前买了一部windows phone手机，也想借着手机开发一些关于windows phone的软件，先前有尝试做了一款简易备忘软件，最近在学习的过程中，竟然遇到了Canvas，Html5的Canvas跟安卓版本的比较相似，但是跟windows phone的Canvas就有点不同了，今天就试着利用canvas来做一个图片切换的程序。

　　效果如下：

　　图片切换的原理就是简单的2张重叠的图片，第一张被剪裁的区域逐渐变大，第二章图片逐渐显现出来。

　　首先需要一个较大的Canvas容器，用于装载这些需要的图片，XAML代码如下：

<Canvas x:Name="DisplayCanvas" Width="400" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center">
</Canvas>

　　对图片进行裁剪，需要用到Canvas、PathGeometry(表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状)、LineSegmen(在PathFigure中的两个点之间创建一条直线。)，如：当我们设置3个点的时候，会裁剪出一个三角形。

private List<Canvas> m_images = new List<Canvas>();

private PathGeometry m_displayClip = null;

private LineSegment m_displayPoint1 = null;

private LineSegment m_displayPoint2 = null;

private Storyboard m_timer = null;

　　以Canvas为容器来存放Image对象，并让赋予Canvas点击事件来触发切换图片的效果，代码如下：

//添加Image对象
var canvas = new Canvas
{
    Width = MAX_WIDTH,
    Height = MAX_HEIGHT,
    Background = new SolidColorBrush { Color = Colors.White }
};

canvas.MouseLeftButtonDown += new MouseButtonEventHandler(DisplayImage);

var uri = new Uri(imgPath, UriKind.Relative);
var imgSurce = new BitmapImage(uri);

var img = new Image
{
    Source = imgSurce,
    Width = 384,
    Margin = new Thickness(8, 8, 0, 0)
};

canvas.Children.Add(img);

　　然后利用PathGeometry、LineSegmen裁剪出剩下的部分，由于我们需要在每一次时间内实现动画的效果，这时就需要Storyboard了，它可以实现我们需要的动画效果。代码大致如下：

if (m_movedHeight < MAX_HEIGHT)
{
    m_movedHeight += MOVE_STEP;
    m_displayPoint1.Point = new Point(MAX_WIDTH, m_movedHeight);
    m_displayPoint2.Point = new Point(0, m_movedHeight);
    m_timer.Begin();
}
else
{
    m_displaying = false;
    m_images[m_index++].Clip = null;
    InitCanvasOrder();
}

　　如果需要连续切换好几张图片，那么将Canvas.Clip设为NULL是必须的，不然会出现错误。

　　这是一个简单的wp动画，如有错误，请告诉我，谢谢！

　　源码在此