uwp - 控件精确移动动画 - .net

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

先看效果图：

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

<UserControl.Resources>

<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>

</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();
}