XAML 动画:如何使用 BLEND 对用户控件的外观和消失进行动画处理

Question

我正在开发Windows 8 Metro应用程序/RT应用程序。我对用户控件有特定要求。

<UserControl
    x:Class="controlMagnifier.MagnifierUsercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="200">

    <Canvas x:Name="controlCanvas" x:FieldModifier="public"   >
        <Canvas.RenderTransform>
            <RotateTransform>
            </RotateTransform>
        </Canvas.RenderTransform>
        <Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
                <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
                <Border.Background>
                    <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                </Border.Background>
            </Border>

            <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
            <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
            <Path x:Name="MagnifyTip"  Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />

        </Grid>
    </Canvas>
</UserControl>

请在此处观看视频。当我点击屏幕时，用户控件会显示一些动画，并带有一些动画消失。如果我点击并按住它 x 秒（或毫秒）并将其删除，它会带有一些动画。我希望用户控件在 0.04 秒内以完整形状显示，并在我离开手指时消失。我需要类似的动画。对此一无所知。请帮忙

Answer 1

这个答案有两个部分：1） 在 Blend 中创建动画和2） 点击时触发动画

对于 1） 请参阅此处：http://www.kirupa.com/net/intro_blend_animation_pg3.htm 本教程介绍如何在 Blend 中为 WPF 添加简单动画，可以以类似的方式添加应用商店应用动画。例如，尝试在一段时间内（例如 0.4 秒）对控件的不透明度进行动画处理这是我拥有的 XAML：

   <Grid PointerPressed="Grid_PointerPressed" Background="Black">
        <Grid.Resources>
            <Storyboard x:Name="animFadeIn">
                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            </Storyboard>
        </Grid.Resources>
        <TextBlock Text="tap anywhere" FontSize="46" />
        <Border x:Name="border" BorderBrush="White" BorderThickness="1" HorizontalAlignment="Left" Height="109" Margin="463,310,0,0" VerticalAlignment="Top" Width="158" Opacity="0" Background="White"/>
    </Grid>

对于 2） 您可以从 PointerPressed 事件上的代码隐藏触发动画。注意 我已经在上面的 XAML 中有了处理程序。

  private void Grid_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        animFadeIn.Begin();
    }