XAML 动画：如何使用 BLEND 为用户控件的外观和消失设置动画

Posted 2023-02-22

【中文标题】XAML 动画：如何使用 BLEND 为用户控件的外观和消失设置动画

【英文标题】：XAML Animation : How to animate The user control appearance and disappearance using BLEND

【发布时间】：2015-03-14 21:40:51

【问题描述】：

我正在开发一个 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>

请在此处查看video。当我点击屏幕时，用户控件会出现一些动画并消失一些动画。如果我点击并按住 x 秒（或 ms）并将其移除，它会以一些动画形式消失。我希望用户控件在 0.04 秒内完整显示，并在我离开手指时消失。我需要类似的动画。不知道。请帮忙

【参考方案1】：

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

for 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();
    

【讨论】：

我为我的控制做了它！但问题是我没有得到视频中实现的内容！我正是需要这个

为此，您必须多玩一些动画 - 视频中的动画可能需要花费大量时间来实现、测试和改进。

你看到那个动画了吗？你认为用户控件是 PNG 图像而不是路径？

是的，看到了 - 我认为这可能是一条路径。

如果是 PNG 图像呢？你认为我们可以让用户控制PNG图像并从中实现动画吗？