尝试在 uwp 中的网格内实现两个或多个动画

Question

尝试实现两个将永远运行但不知道如何做的动画这是我尝试的发现

 <Grid Grid.Row="0" Background="#339FFE">
            <Image Source="Assets\ic_nytra_logo.png" HorizontalAlignment="Left"  Stretch="Fill" Width="84" Height="72" 
                    Margin="10,0,0,0"/>
            <Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Top"  Stretch="Uniform" Width="49" Height="49" 
                    Margin="0,10,15,0"/>
        </Grid>
        <Grid x:Name="ImageGrid" Grid.Row="1">
            <Grid.Projection>
                <PlaneProjection/>
            </Grid.Projection>            
            <Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="147,-240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
            <Ellipse VerticalAlignment="Center" Margin="245,-134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="285,2,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="254,134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="147,240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
            <Ellipse VerticalAlignment="Center" Margin="10,286,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="-130,252,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="-239,146,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="-266,10,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="-232,-122,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
            <Ellipse VerticalAlignment="Center" Margin="-130,-238,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
            <Image  x:Name="ImageBlock" Source="Assets/ic_out_circle.png" HorizontalAlignment="Center" Stretch="Uniform" Width="230">            
            <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.Loaded">
                        <BeginStoryboard>
                            <Storyboard x:Name="SpinAnimation">
                                <DoubleAnimation To="0" From="360" RepeatBehavior="Forever" Duration="0:0:5"  Storyboard.TargetName="ImageGrid"
                Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>                 
                            </Storyboard>                                             
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
            <Canvas x:Name="round_anima" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-120,10,0,130" >
                <Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/ic_round_animation.png" Height="120" Width="120">
                    <Image.Projection>
                        <PlaneProjection/>
                    </Image.Projection>
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="Image.Loaded">
                            <BeginStoryboard>
                                <Storyboard x:Name="SpinAnimation1">
                                    <DoubleAnimation To="360" From="0" RepeatBehavior="Forever" Duration="0:0:5"  Storyboard.TargetName="round_anima"
                Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>
            </Canvas>
        </Grid>

但包含第二个动画的故事板不是 working.Any 参考或关于此的想法 issue.one 可以参考给定 post

中的图像

Answer 1

but the storyboard containing second animation is not working.Any reference or idea regarding this issue.

第二个动画应该定位 round_anima1(image) 而不是 round_anima(canvas)，你在图像上定义了 PlaneProjection , 不在 Canvas.
我猜你想逆时针旋转第二张图片(round_anima1)。你做得对，但由于第二张图片在 ImageGrid 内，它也随着 ImageGrid 旋转。因此第二个动画看起来不起作用。

要解决此问题，请将 Storyboard.TargetName="round_anima" 更改为 Storyboard.TargetName="round_anima1" 并将 To 值从 360 更改为 720：

<Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/profiler.jpeg" Height="120" Width="120">
    <Image.Projection>
       <PlaneProjection />
    </Image.Projection>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="SpinAnimation1">
                    <DoubleAnimation To="720" From="0" RepeatBehavior="Forever" Duration="0:0:5"  Storyboard.TargetName="round_anima1"
            Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

结果如下：

尝试在 uwp 中的网格内实现两个或多个动画

Trying to implement two or more animation inside a grid in uwp

xaml

uwp

uwp-xaml