Question

我试图通过同时抛出3个动画来制作<img/>的动画： Opacity，Rotate和Scale。首先，我按照自己的意愿将其发送到FadeIn。然后我也设法使其旋转。但是，当我开始扩展时，一切开始变得混乱。没有抛出任何异常，这是一种“有效的” ....但是没有。现在，它执行了fadeIn，但根本不进行旋转。缩放是在做“某事”，但绝对不是它应该做的。当0:0:0:5花费的时间不多时，或者说至少是这样的时候，它的缩放速度非常慢。

总而言之，它不会引发任何异常，它会为不透明度设置动画效果，不会为旋转设置动画效果，并且会以错误的方式设置缩放动画效果。

我对xaml / wpf很陌生，几个小时后看到示例和线程，我意识到我被卡住了。我缺少了一些东西，但无法弄清楚。预先感谢。

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestWPF"
        mc:Ignorable="d"
        Title="TBNews" Height="400" Width="400" Background="{x:Null}" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Topmost="True">

    <Canvas>
        <Image Source="logo_planeta.png" Height="400" Width="400" MaxHeight="400" MaxWidth="400" Name="planeta_img" RenderTransformOrigin="0.5, 0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform CenterX="0.5" CenterY="0.5" />
                    <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" />
                </TransformGroup>                
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="planeta_img"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0" To="1.0" Duration="0:0:3" />
                            <DoubleAnimation
                                Storyboard.TargetName="planeta_img"
                                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                To="-360" Duration="0:0:3" RepeatBehavior="Forever" />
                            <DoubleAnimation
                                Storyboard.TargetName="ImageScale"
                                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                To="1.5" Duration="0:0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                            <DoubleAnimation
                                Storyboard.TargetName="ImageScale"
                                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                To="1.5" Duration="0:0:1:0" AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
        <Image Source="logo_letras.png" MaxHeight="400" MaxWidth="400" Name="tbnews_img">
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>        
    </Canvas>
</Window>

Answer 1

有很多错误。

CenterX和CenterY以绝对单位表示，而不是像RenderTransformOrigin这样的相对单位。您根本不需要设置它们
0:0:0:5的持续时间不是0.5秒，而是5秒。
(Image.RenderTransform).(RotateTransform.Angle)是无效的目标属性路径。
对于重复旋转，最好设置By而不是To。

没有所有AutoReverse和RepeatBehavior内容，并且所有Durations均设置为1.5秒，这应该为您提供一个起点：

<Image ... RenderTransformOrigin="0.5,0.5">
   <Image.RenderTransform>
      <TransformGroup>
         <RotateTransform/>
         <ScaleTransform/>
      </TransformGroup>
   </Image.RenderTransform>
   <Image.Style>
      <Style TargetType="Image">
         <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
               <BeginStoryboard>
                  <Storyboard>
                     <DoubleAnimation
                         Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[0].Angle"
                         By="360" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX"
                         To="1.5" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY"
                         To="1.5" Duration="0:0:1.5"/>
                  </Storyboard>
               </BeginStoryboard>
            </EventTrigger>
         </Style.Triggers>
      </Style>
   </Image.Style>
</Image>

在一个图像上运行多个xaml动画

1 个答案: