尝试在 UWP xaml 中以顺时针方向连续旋转一个圆圈 [英] trying to rotate a circle continuously in clockwise direction in UWP xaml

问题描述

我已经实现了沿顺时针方向连续旋转的结构，现在想要实现与之相连的小圆圈，它也应该沿与尖头结构旋转的方向相同的方向旋转.代码如下.

I have implemented the structure that is rotating continuously in clockwise direction and now want to implement small circle attached along with it which should also rotate along the same direction in which pointed structure is rotating. Code for that are given below.

<Grid Name="mainGridView">
        <Grid.Background>
            <ImageBrush  ImageSource="Assets/info_bg.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="rowDefSubjectHeadingGrid" Height="1*"/>
            <RowDefinition x:Name="rowDefSubjectListGrid" Height="4.4*"/>
            <RowDefinition x:Name="rowDefButtonGrid" Height="1*"/>
        </Grid.RowDefinitions>
        <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 Grid.Row="1">
            <Image Stretch="Uniform" Name="Display" HorizontalAlignment="Center" Source="Assets/ic_out_circle.png" Width="230">
                <Image.Projection>
                    <PlaneProjection/>
                </Image.Projection>
            </Image>
        </Grid>
        <Grid Grid.Row="2" Background="#339FFE">
        </Grid>
    </Grid>

CS

public sealed partial class MainPage : Page
{
    private Storyboard rotation = new Storyboard();

    public MainPage()
    {
        this.InitializeComponent();
        DoubleAnimation animation = new DoubleAnimation();
        animation.From = 0.0;
        animation.To = 360.0;
        // animation.BeginTime = TimeSpan.FromSeconds(1);
        animation.RepeatBehavior = RepeatBehavior.Forever;
        animation.Duration = TimeSpan.FromSeconds(15);
        Storyboard.SetTarget(animation, Display);
        Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Z" + ")");
        rotation.Children.Clear();
        rotation.Children.Add(animation);
        rotation.Begin();
    } 
}

下面给出的图像

推荐答案

我得到了解决方案

<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>
</Grid>

这篇关于尝试在 UWP xaml 中以顺时针方向连续旋转一个圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！