如何出现的动画元素

Question

我对Expression Blend中的问题4.

我想创建动画出现一个简单的组件，当从0到100％的成分变化和它下面的组件高度向下移动的分配所需的空间。

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

我该怎么做才能实现这个任务？

在此先感谢。

Answer 1

我想简单的方法是使用Fluid Layout。

在下面的示例中，我创建了一个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> 

当然，如果你不想使用此magicial动画，你可以尝试动画的ScaleY。这样的事情，

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

希望这有助于！ :)