【Windows Phone】制作Tile的翻转，切换图片的特效

在Metro风格的世界里，随处都可以看到Tile的影子，不同风格的Tile展现出各种绚丽的特效。下面我们一起自制一个Tile的翻转效果，并在翻转过程中切换图片。

首先，我们在资源中创建一个Image:

        <Image Name="_image" Source="/SpecTile;component/Chrysanthemum.jpg" Stretch="Fill">
        </Image>

然后，设置Image的投影属性：（这里我们将Image在X轴上的旋转角度初始值设置为0度）

        <Image Name="_image" Source="/SpecTile;component/Chrysanthemum.jpg" Stretch="Fill">
            <Image.Projection>
                <PlaneProjection x:Name="_overturn" RotationX="0"></PlaneProjection>
            </Image.Projection>
        </Image>

接下来定义旋转的动画：

            <Storyboard x:Name="_anim1">
                <DoubleAnimation Storyboard.TargetName="_overturn" Storyboard.TargetProperty="RotationX"
                                 From="0" To="90" Duration="0:0:0.3">
                </DoubleAnimation>
            </Storyboard>
            <Storyboard x:Name="_anim2">
                <DoubleAnimation Storyboard.TargetName="_overturn" Storyboard.TargetProperty="RotationX"
                                 From="90" To="0" Duration="0:0:0.3">
                </DoubleAnimation>
            </Storyboard>

这里定义了两个动画，_anim1是Image沿着X轴中线从0度旋转到90度，_anim2是Image沿着X轴中线从90度旋转回0度。在没有指定具体的旋转轴线时，系统默认选择中线为轴旋转。之所以将旋转动画分为两部分是因为在旋转到90度时，来切换图片的内容。没有选择从90度旋转到180度，而是转回0度的目的是不需要在切换图片时，将其内容倒置。具体实现如下：

namespace SpecTile
{
    public partial class TileItemControl : UserControl
    {
        private BitmapImage _bgImage;
        public TileItemControl()
        {
            InitializeComponent();
            _anim1.Completed += OnAnim1Completed;
        }

        public void BeginAnim(BitmapImage image)
        {
            _bgImage = image;
            _anim1.Begin();
        }

        public void StopAnim()
        {
            _anim1.Stop();
        }

        private void OnAnim1Completed(object o, EventArgs e)
        {
            _image.Source = _bgImage;
            _anim2.Begin();
        }
    }
}