Image Image

多米播放器中有个翻转切换显示歌词和歌词信息的效果，因为没有它的源码，所以不知道具体它是怎么实现的。研究了一下，大概做了个效果出来。可能还有其他更好的实现办法。 实现的思路大致是这样的：

首先在一定区域内创建要显示的正反两个面，然后将反面翻转180度(不翻转的话很明显会在整个翻转完成后显示左右颠倒)，接下来就是分四步，第一步将整个区 域旋转90度，然后隐藏正面，显示反面，第二步继续旋转接下来的90度至180度，第三步将整个区域从180度旋转到90，隐藏反面，显示正面，第四步继续旋转接>下来的90度至0度。完成整个翻转效果。

开始贴代码：

添加五个StoryBoard，四个用于实现整个翻转效果，一个用于实现反面的180度翻转。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <!--单击的手势操作-->
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener Tap="OnTap_Click" />
    </toolkit:GestureService.GestureListener>
    <Grid.Projection>
        <PlaneProjection x:Name="GridProjection"/>
    </Grid.Projection>
    <Grid.Resources>
        <!--正反两面的翻转效果-->
        <Storyboard x:Name="myStoryboardX1">
            <DoubleAnimation Duration="0:0:1" To="90" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="GridProjection" />
        </Storyboard>
        <Storyboard x:Name="myStoryboardX2">
            <DoubleAnimation Duration="0:0:1" To="180" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="GridProjection" />
        </Storyboard>
        <Storyboard x:Name="myStoryboardX3">
            <DoubleAnimation Duration="0:0:1" To="90" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="GridProjection" />
        </Storyboard>
        <Storyboard x:Name="myStoryboardX4">
            <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="GridProjection" />
        </Storyboard>
        <!--将图片翻转180-->
        <Storyboard x:Name="myStoryboardX5">
            <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="ImageProjection" />
        </Storyboard>
    </Grid.Resources>
</Grid>

然后在区域内创建整个两面的内容，反面设置为不显示。

<TextBlock x:Name="tb" Text="这是正面" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image x:Name="image"  Source="1.jpg" Visibility="Collapsed">
    <Image.Projection>
        <PlaneProjection x:Name="ImageProjection"/>
    </Image.Projection>
</Image>

接下来是后台的代码：

public partial class MainPage : PhoneApplicationPage
{
    bool IsForeground = true;
    public MainPage()
    {
        InitializeComponent();
        //将反面翻转180°
        this.myStoryboardX5.Begin();
    }

    private void OnTap_Click(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
    {
        if (IsForeground)
        {
            this.myStoryboardX1.Begin();
            this.IsForeground = false;
            this.myStoryboardX1.Completed += new EventHandler(Completed_StoryBoard1);
        }
        else
        {
            this.myStoryboardX3.Begin();
            this.IsForeground = true;
            this.myStoryboardX3.Completed += new EventHandler(Completed_StoryBoard3);
        }
    }

    private void Completed_StoryBoard1(Object sender, EventArgs e)
    {
        this.tb.Visibility = System.Windows.Visibility.Collapsed;
        this.image.Visibility = System.Windows.Visibility.Visible;
        this.myStoryboardX2.Begin();
    }

    private void Completed_StoryBoard3(Object sender, EventArgs e)
    {
        this.image.Visibility = System.Windows.Visibility.Collapsed;
        this.tb.Visibility = System.Windows.Visibility.Visible;
        this.myStoryboardX4.Begin();
    }
}

至此,所有工作完成,看一下显示效果:
Image Image Image Image