UWP开发入门（二十二）——Storyboard和Animation

　　微博上有同学问我MyerSplash是如何实现那个很炫的图片点亮，然后移动到屏幕中央的效果。惭愧啊，我又不是作者哪里会知道。硬着头皮去GitHub拜读了高手的代码，自愧弗如，比我不知道高到哪里去了……这时我就面临一个艰难的抉择，要么就写个几十篇来分析一下MyerSplash（万一分析错了好丢人……），要么就说看不懂（貌似也很丢人……）。

　　幸亏我临机一动，决定山寨一个极简版，做一点微小的工作，顺便写一篇博客蹭点热度，给某软，给UWP续一秒……

　　首先要明确我们希望以少量的代码来模拟MyerSplash的部分效果，较少的代码分析起来更为易懂，所以各位同学就不要抱怨说这个是五毛钱特效……

　　

    <ListView ItemsSource="{Binding Photos,Mode=OneTime}" ItemContainerStyle="{StaticResource photoItemContainerStyle}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal"></ItemsWrapGrid>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding ImageUri,Mode=OneTime}" Stretch="UniformToFill" IsTapEnabled="True" Tapped="Image_Tapped"></Image>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

　　上面的XAML绘制了一个根据元素数量自动换行的列表，列表中的Item元素就是单纯的Image，同时Item元素响应一个Tapped事件（这个我们后面说）。

　　

　　可以看到鼠标移动时，会有一个动画，0.5秒的渐变点亮同时图片放大的效果（生成的这个gif图比较渣，实际效果请运行代码）。这是通过自定义ItemContainerStyle并在其中添加VisualStateManager来实现的。

        <Style x:Key="photoItemContainerStyle" TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.5" From="0.5" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPhoto" ></DoubleAnimation>
                                            <DoubleAnimation Duration="0:0:0.5" From="1" To="1.2" Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scaleGrid" ></DoubleAnimation>
                                            <DoubleAnimation Duration="0:0:0.5" From="1" To="1.2" Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scaleGrid" ></DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                           
                            <Grid.Clip>
                                <RectangleGeometry Rect="0 0 200 200"/>
                            </Grid.Clip>

                            <Grid Background="Black">
                                <ContentPresenter x:Name="contentPhoto" Width="200" Height="200" Opacity="0.5">
                                    <ContentPresenter.RenderTransform>
                                        <ScaleTransform x:Name="scaleGrid" ScaleX="1.0" ScaleY="1.0" CenterX="100" CenterY="100"></ScaleTransform>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

　　在 <VisualState x:Name="PointerOver">这个状态我们通过Storyboard播放了三个Animation来改变图片的透明度，以及长宽。透明度从0.5变化至1时，图片不再透明，背景黑色Grid不再可见，模拟高亮效果。同时通过Clip将放大后图片的外缘裁剪仍保持原始大小。

　　貌似已经做的差不多了……至少你已经学会如何山寨照片墙了。接下来我们要做点不一样的，换一种方式来使用Storyboard和Animation，点击图片放大并移动到屏幕中央的功能，我打算通过C#代码实现（话说这部分有点坑，写得时候搞死我了……）

　　浮动显示的图片我们采用Popup来显示，通过给Popup添加Child，并通过storyboard和animation来改变Width，Height属性控制图片大小的变化。图片的位移则是将Popup的RenderTransform属性设置为TranslateTransform，然后改变X轴和Y轴坐标来实现。

　　这里需要注意Animation对象的EnableDependentAnimation属性，这个坑爹的属性是 Windows Runtime 8.1新增的，如果你发现自定义的Animation不能播放，又找不到任何错误，那就需要把这个属性值置为true。

        private void Image_Tapped(object sender, TappedRoutedEventArgs e)
        {
            popup.IsOpen = false;

            var tappedImage = e.OriginalSource as Image;
            var image = new Image { Source = tappedImage.Source };
            popup.Child = image;
            popup.IsOpen = true;

            //获取被点击图片相对MainPage的坐标
            var position = tappedImage.TransformToVisual(this).TransformPoint(new Point());
            //获取MainPage的中心坐标
            var xCenter = ActualWidth / 2 - 200 ;
            var yCenter = ActualHeight / 2 - 200;

            var storyBoard = new Storyboard();
            var extendAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = 200, To = 400, EnableDependentAnimation = true };
            Storyboard.SetTarget(extendAnimation, image);
            Storyboard.SetTargetProperty(extendAnimation, "Width");
            Storyboard.SetTargetProperty(extendAnimation, "Height");

            var xAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = position.X, To = xCenter, EnableDependentAnimation = true };
            Storyboard.SetTarget(xAnimation, popup);
            Storyboard.SetTargetProperty(xAnimation, "(UIElement.RenderTransform).(TranslateTransform.X)");

            var yAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = position.Y, To = yCenter, EnableDependentAnimation = true };
            Storyboard.SetTarget(yAnimation, popup);
            Storyboard.SetTargetProperty(yAnimation, "(UIElement.RenderTransform).(TranslateTransform.Y)");

            storyBoard.Children.Add(extendAnimation);
            storyBoard.Children.Add(xAnimation);
            storyBoard.Children.Add(yAnimation);

            storyBoard.Begin();
        }

　　补充下Popup的定义，记得要设置popup.RenderTransform = TranslateTransform()，默认可是null

    public sealed partial class MainPage : Page
    {
        public List<PhotoModel> Photos { get; set; }

        private Popup popup = new Popup();

        public MainPage()
        {
            this.InitializeComponent();
            Photos = CreatePhotos();
            this.DataContext = this;
            popup.RenderTransform = new TranslateTransform();
        }

　　总体就这么些了，大约100行左右的代码，直接拿去卖钱肯定是不行的。作为Demo演示给吃瓜群众，或者忽悠BOSS还是可以的。如果需要用到产品中，去GayHub下载代码自己改吧改吧，调调UI。

　　有问题新浪微博@楼上那个蜀黍，免费咨询，当然质量也是免费的程度……

　　GitHub：

　　https://github.com/manupstairs/UWPSamples/tree/master/UWPSamples/StoryboardSample