uwp - 控件精确移动动画

原文:uwp - 控件精确移动动画

先看效果图：

一共有8个GRID，黄色的负责移动，其他7个负责定位。新建一个页面page，替换默认代码：

 <UserControl.Resources>
         <!--#region 动画-->
         <Storyboard x:Name="Storyboard">
             <!--整体缩小动画-->
             <DoubleAnimation x:Name="dh" From="" To="" Duration="00:00:0.2"
             Storyboard.TargetName="y"
             Storyboard.TargetProperty="X">
                 <DoubleAnimation.EasingFunction>
                     <PowerEase  EasingMode="EaseInOut" 

                              />
                 </DoubleAnimation.EasingFunction>
             </DoubleAnimation>
         </Storyboard>
         <!--#endregion-->
     </UserControl.Resources>
     <Grid>
         <FlipView>
             <FlipViewItem Width="">
                 <Grid>
                     <Grid Canvas.ZIndex="" Opacity="0.8" x:Name="w" Background="Yellow" Width="{Binding ElementName=aa,Path=ActualWidth}" HorizontalAlignment="Left">
                         <Grid.RenderTransform>
                             <TranslateTransform x:Name="y"></TranslateTransform>
                         </Grid.RenderTransform>
                     </Grid>

                     <Grid>
                         <Grid.ColumnDefinitions>

                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                             <ColumnDefinition Width="1*"/>
                         </Grid.ColumnDefinitions>
                         <Grid x:Name="aa" Grid.Column="" Background="Black" Tapped="aa_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="b"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="bb" Grid.Column="" Background="White" Tapped="bb_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="bbb"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="cc" Grid.Column="" Background="Green" Tapped="cc_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="ccc"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="dd" Grid.Column="" Background="Azure" Tapped="dd_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="ddd"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="ee" Grid.Column="" Background="Red" Tapped="ee_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="eee"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="ff" Grid.Column="" Background="Blue" Tapped="ff_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="fff"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                         <Grid x:Name="gg" Grid.Column="" Background="DarkRed" Tapped="gg_Tapped">
                             <Grid.RenderTransform>
                                 <TranslateTransform x:Name="ggg"></TranslateTransform>
                             </Grid.RenderTransform>
                         </Grid>
                     </Grid>

                 </Grid>
             </FlipViewItem>
         </FlipView>
     </Grid>

我这是用用户控件做的，所以把UserControl.Resources改成Page.Resources就行了。

后台代码：

  public void to(int i)
         {

             dh.From = getX(w);

             double to = ;
             switch (i)
             {
                 case :
                     to = getX(aa);
                     break;
                 case :
                     to = getX(bb);
                     break;
                 case :
                     to = getX(cc);
                     break;
                 case :
                     to = getX(dd);
                     break;
                 case :
                     to = getX(ee);
                     break;
                 case :
                     to = getX(ff);
                     break;
                 case :
                     to = getX(gg);
                     break;

             }

             dh.To = to;
         }
         public double getX(Grid g)
         {

             GeneralTransform gf = g.TransformToVisual(this);

             Point p = gf.TransformPoint(new Point(, ));

             return p.X;

         }

         private void gg_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void ff_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void ee_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void dd_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void cc_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void bb_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

         private void aa_Tapped(object sender, TappedRoutedEventArgs e)
         {
             to();
             Storyboard.Begin();
         }

收尾。

好吧小结一下，重点在布局和获取控件的相对坐标，通过表格定义同等宽度7列，从而达到不管在什么设备上多能平均分布，然后获取7个坐标进行位置移动就可以了，可以改变缓动函数以及参数实现一些有意思的动画，比如弹簧啊什么的，还可以叠加更多动画让它看上去不那么单调。

this.close();