Xaml 将css动画转换为wpf动画

我有这个css规则

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

摘自演示

当我在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>

网格x:Name=“MyGrid”Opacity=“0”> RenderTransferMorigin=“0.5,0.5” 故事板的代码

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

用户控件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” RenderTransferMorigin=“0.5,0.5” 不透明度=“0” x:Name=“ModalDialogControl” Width=“600”Height=“400”> 在朋友们的帮助下

<UserControl.Resources>
    <Style x:Key="FadeInAndScaleUpStyle" TargetType="{x:Type FrameworkElement}">
        <Setter Property="Opacity" Value="0"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="0.7" ScaleY="0.7" />
            </Setter.Value>
        </Setter>
        <Style.Triggers >
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <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>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

---

你想在这个网站上播放什么动画（）对不起，我的英语不是很好。我不能完全理解你说的话

我为您制作了这部动画。希望对您的业务有所裨益

以下是代码：

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

---

一点也不复杂：

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

---

请注意，通常不必从值中指定任何

。此外，在特定元素上调用
BeginStoryboard
时，不需要像在EventTrigger中那样显式指定
Storyboard.Target
或
Storyboard.TargetName
。
感谢您的帮助。这让我进入了正确的故事板。TargetProperty=“（ScaleTransform.ScaleY）”谢谢这接近css。是否有一种方法可以对动画进行分组并在组上设置持续时间，而不是对每个项目重复？