Question

我创建了一个故事板 1.Rotate 2.Scale 3.Opacity动画

当点击ToggleButton时，将此故事板应用于椭圆（如圆（宽度和高度相等）），所有动画都在工作但旋转不起作用。

我的要求是 1.首先它旋转 2.然后缩放x和y（从1到0.2） 3.Opacity变为零

我计划实现径向菜单的相同行为。

XAML:

<Storyboard x:Key="enterStoryBoard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipse">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="180"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ellipse">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.2"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ellipse">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.2"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>

    </Storyboard>

  <Grid>
        <Ellipse x:Name="ellipse" Fill="#FFF4F4F5" Margin="132,96,192,46" Stroke="#FF8300FF" StrokeThickness="35" Width="300" Height="300" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>

        </Ellipse>           
        <ToggleButton x:Name="toggle" Content="Click" Click="Button_Click" HorizontalAlignment="Center" Margin="0 30 60 0" VerticalAlignment="Center">
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Background="Transparent">
                        <Ellipse Width="50" Height="50" Stroke="Black" StrokeThickness="2"/>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>                        
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>
    </Grid>

Answer 1

这样的事情对我来说可以很好地完成你需要的所有三个（旋转，不透明度，比例）动画，只需要一个Storyboard

<Grid Margin="15">
  <Grid.Triggers>
    <EventTrigger RoutedEvent="Button.Click"
                  SourceName="myBtn">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <!--  Rotate  -->
            <DoubleAnimation Duration="0:0:0.4"
                              From="0"
                              Storyboard.TargetName="myEllipse"
                              Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                              To="180" />
            <!--  Opacity  -->
            <DoubleAnimation Duration="0:0:0.4"
                              From="1"
                              Storyboard.TargetName="myEllipse"
                              Storyboard.TargetProperty="(Ellipse.Opacity)"
                              To="0" />
            <!--  Scale Transform - X  -->
            <DoubleAnimation Duration="0:0:0.4"
                              From="1"
                              Storyboard.TargetName="myEllipse"
                              Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
                              To="0.2" />
            <!--  Scale Transform - Y  -->
            <DoubleAnimation Duration="0:0:0.4"
                              From="1"
                              Storyboard.TargetName="myEllipse"
                              Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
                              To="0.2" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Grid.Triggers>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Canvas Grid.Row="0">
    <Ellipse x:Name="myEllipse"
              Canvas.Left="100"
              Canvas.Top="100"
              Width="50"
              Height="80"
              Fill="Tomato"
              Opacity="1"
              Stroke="SteelBlue">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <RotateTransform Angle="0"
                            CenterX="25"
                            CenterY="45" />
          <ScaleTransform CenterX="25"
                          CenterY="40" />
        </TransformGroup>
      </Ellipse.RenderTransform>
    </Ellipse>
  </Canvas>
  <Button x:Name="myBtn"
          Grid.Row="1"
          Margin="0 10 0 0"
          HorizontalAlignment="Center"
          Content="Click Me" />
</Grid>

<强>更新

首先，我不确定你所说的径向菜单是什么，所以不确定那个控件有什么动画。

现在有几点：

从Storyboard编辑所有动画，运行0.4秒，然后一起开始。因此，实际上不需要使用KeyFrames动画，因为您可以使用标准DoubleAnimation来获得相同的结果。
当您可以从xaml执行某些操作时，更喜欢单独使用xaml。在您提到的案例中，您不需要在ToggleButton上设置点击处理程序，因为这可以像我单独从xaml中看到的那样实现。

我在发布的代码中调整了数字以匹配您的数字，我强烈建议您首先尝试发布的代码，然后根据您的要求进行调整。虽然你的问题始于你有一个并发RotateAnimation的问题，但它现在转到了“请为我编写所有代码”的案例。从长远来看，它不会帮助你。获取一本关于WPF的书，并阅读一些动画基础知识

旋转动画不起作用？

1 个答案: