由于早前买了一部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 Image15 {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动画 如有错误 请告诉我 谢谢

源码在此

转载于:https://www.cnblogs.com/ahl5esoft/archive/2012/08/20/2648346.html