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>

在朋友的帮助下

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

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值。此外，当您在特定元素上调用Storyboard.Target时，无需显式指定Storyboard.TargetName或BeginStoryboard，就像在EventTrigger中一样。

Answer 2

哪个动画你想在这个网站上做什么（http://tympanus.net/Development/ModalWindowEffects/）对不起我不太懂英文。我无法理解你说的是什么

我为你做了这个动画。我希望你的公司受益。

这是代码：

<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对象;

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

将css动画转换为wpf动画

2 个答案: