如何为元素的出现设置动画

Question

我有一个关于 Expression Blend 4 的问题。

我想创建一个简单的组件出现动画，当组件的高度从 0 变化到 100% 并且其下方的组件向下移动以分配所需的空间时。

我的问题是只有像素中的静态值才允许创建这种类型的动画。但我不知道我的控件的高度（实际上，它是文本框，其中内容和内容长度可能会有所不同），并且我无法将最后一个关键帧的 Height 值设置为 Auto 。

为了实现这个任务我应该做什么？

提前致谢。

Answer 1

我想最简单的方法是使用流体布局。

在下面的示例中，我创建了一个 TextBlock 并将其 Visibility 设置为 Collpased。然后，当触发 Show 视觉状态时，我将其 Visibility 设置为 Visible。通常，您无法为 Visibility 设置动画，但如果启用 Fluid Layout 行为（另请记住定义 TransitionEffect），它将为其设置动画自动为您服务。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
    x:Class="transformanimation.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:FadeTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Hide"/>
                <VisualState x:Name="Show">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <Grid Margin="205,96,275,150">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" FontSize="26.667" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                <TextBlock.RenderTransform>
                    <CompositeTransform/>
                </TextBlock.RenderTransform>
            </TextBlock>
            <Rectangle Fill="#FF767689" Stroke="Black" Grid.Row="1"/>
        </Grid>
        <Button Content="hide" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="63,19,0,0">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Hide"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="show" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="183,20,0,0">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Show"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

当然，如果您不想使用这个神奇的动画，您可以尝试对其 ScaleY 进行动画处理。类似这样的事情，

        <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>

希望这有帮助！ :)