我有这个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>
答案 0 :(得分：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中一样。
答案 1 :(得分：0)
哪个动画你想在这个网站上做什么（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>