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>

但是包含第二个动画的故事板不起作用。关于这个问题的任何参考或想法。有人可以参考给定帖子中的图像enter link description here

Answer 1

但是包含第二个动画的故事板不起作用。关于这个问题的任何参考或想法。

第二个动画应该定位round_anima1（图片）而不是round_anima（画布），您要在图像上定义PlaneProjection，而不是在画布上。
我想你想逆时针旋转第二张图片（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中的网格中实现两个或更多动画

1 个答案: