1

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

并在单击 ToggleButton 时将此情节提要应用于椭圆（如圆形（宽度和高度相等），所有动画都在工作，但旋转不起作用。

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

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

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

1 回答 1

3

像这样的东西对我来说可以很好地完成您需要的所有三个（旋转、不透明度、缩放）动画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 执行此操作。在您提到的情况下，您不需要在您的情况下使用 Click 处理程序，ToggleButton因为这可以像我仅从 xaml 中展示的那样实现。

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

于 2013-06-16T09:00:40.157 回答