翻譯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>