翻译CSS动画WPF动画

Question

我有这个CSS规则

/* Effect 1: Fade in and scale up */ 
.md-effect-1 .md-content 
{ 
    transform: scale(0.7); 
    opacity: 0; 
    transition: all 0.3s; 
} 

从演示Nifty Modal Window Effects

我想有同样的效果，当我告诉我的WF应用程序模式对话框服用。该对话框不是一个窗口，而是具有高Z顺序的UIElement。

它应该从不透明度设置为零开始，并缩小到70％，因为我不知道对话框的大小。

这是为网格设置起始状态的代码，以及动画的故事板。

Grid x:Name="MyGrid" Opacity="0"> 
    <Grid.RenderTransform> 
    <ScaleTransform ScaleX="0.7" ScaleY="0.7"/> 
    RenderTransformOrigin="0.5,0.5" 
    </Grid.RenderTransform> 
    <Grid.Triggers> 
    <EventTrigger RoutedEvent="Grid.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}"/> 
    </EventTrigger> 
    </Grid.Triggers> 
</Grid> 

故事板

<Storyboard x:Key="ModalDialogStoryboard" RepeatBehavior="Forever" AutoReverse="True"> 
    <DoubleAnimation 
     From="0" 
     To="1" 
     Duration="0:0:02" 
     Storyboard.TargetName="MyGrid" 
     Storyboard.TargetProperty="Opacity" 
     /> 
    <SizeAnimation To=""></SizeAnimation> 
</Storyboard> 

不透明度代码工作，但我不能找到一种方式来扩展电网恢复到100％。

为什么css与xaml相比如此强大？我希望好的仙女会在XAML上洒上一些魔法粉尘

确定这是工作，看起来完全一样的CSS规则。对话框的内容被删除以保持简短。 现在我只需要找到一种方式将其放入一个样式中，以便我可以将其应用于任何UI元素。

UserControl x:Class="AnimationTest.Dialog" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     RenderTransformOrigin="0.5,0.5" 
     Opacity="0" 
     x:Name="ModalDialogControl" 
     Width="600" Height="400"> 
<UserControl.Resources> 
    <Storyboard x:Key="ModalDialogStoryboard"> 
     <DoubleAnimation 
       From="0" 
       To="1" 
       Duration="0:0:0.3" 
       Storyboard.TargetName="ModalDialogControl" 
       Storyboard.TargetProperty="Opacity" /> 
     <DoubleAnimation 
       Storyboard.TargetName="ModalDialogControlScaleTransform" 
       Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
       To="1" Duration="0:0:0.3" /> 
     <DoubleAnimation 
       Storyboard.TargetName="ModalDialogControlScaleTransform" 
       Storyboard.TargetProperty="(ScaleTransform.ScaleY)" 
       To="1" Duration="0:0:0.3" /> 
    </Storyboard> 
</UserControl.Resources> 
<UserControl.RenderTransform> 
    <ScaleTransform ScaleX="0.7" ScaleY="0.7" x:Name="ModalDialogControlScaleTransform" /> 
</UserControl.RenderTransform> 
<UserControl.Triggers> 
    <EventTrigger RoutedEvent="UserControl.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}" /> 
    </EventTrigger> 
</UserControl.Triggers> 

随着一点点的帮助，我的朋友

​​ 你在这个网站（ http://tympanus.net/Development/ModalWindowEffects/）要哪动画什么

Answer 1

它并不复杂，在所有：

<Storyboard x:Key="ModalDialogStoryboard" RepeatBehavior="Forever" AutoReverse="True"> 
    <DoubleAnimation To="1" Duration="0:0:0.3" 
        Storyboard.TargetProperty="Opacity"/> 
    <DoubleAnimation To="1" Duration="0:0:0.3" 
        Storyboard.TargetProperty="RenderTransform.ScaleX"/> 
    <DoubleAnimation To="1" Duration="0:0:0.3" 
        Storyboard.TargetProperty="RenderTransform.ScaleY"/> 
</Storyboard> 

注意，你通常没有指定任何From值。此外，当您在特定元素上调用BeginStoryboard时，不需要像在EventTrigger中那样明确指定Storyboard.Target或Storyboard.TargetName。

Answer 2

对不起，我不知道得很好English.I不明白你说什么

我为你做了这个动画，我希望你的业务受益。

这里是代码：

<Storyboard x:Key="ScaleAnimation"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="13.6"> 
       <EasingDoubleKeyFrame.EasingFunction> 
        <QuarticEase EasingMode="EaseInOut"/> 
       </EasingDoubleKeyFrame.EasingFunction> 
      </EasingDoubleKeyFrame> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="13.6"> 
       <EasingDoubleKeyFrame.EasingFunction> 
        <QuarticEase EasingMode="EaseInOut"/> 
       </EasingDoubleKeyFrame.EasingFunction> 
      </EasingDoubleKeyFrame> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock"> 
      <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource ScaleAnimation}"/> 
    </EventTrigger> 
</Window.Triggers> 

这里是网格对象;

<Grid x:Name="grid" Background="#FFFF6363" Margin="298,216.5" RenderTransformOrigin="0.5,0.5" Opacity="0"> 
     <Grid.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Grid.RenderTransform> 
     <TextBlock x:Name="textBlock" VerticalAlignment="Center" HorizontalAlignment="Center" Text="CONTENT" FontSize="2" Opacity="0"/> 
    </Grid>