2016-10-10 12 views
0

時計回り方向に連続的に回転している構造を実装しており、これに沿って取り付けられた小さな円も同じ方向に回転する必要があります回転している。そのコードを以下に示します。UWP xamlで時計回りに円を連続的に回転しようとしています

XAML

<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(); 
    } 
} 

画像は私が解決策を持って

Image of a rotating circle thingy

+0

"と同じ方向に沿って回転する必要がありますそれに沿って添付された小さな円を実装したい"あなたを止めているのは何ですか? –

+0

どのようにこれらのすべての小さな円をその尖った構造に実装する必要がありますまた、同じ方向に尖った構造と一緒に継続的に回転する必要があります。これは私を止める問題です。 – pariwesh07

+0

小さくてカラフルな円が同じ時計回りの画像である場合、この画像を回転すると、すべて同じ方向に回転しますが、同期が外れてはいけません。 1枚の写真の中にいない場合は、「時計回り」の写真と12枚の小さな円の写真をレイアウトする方法を教えてください。簡単に言えば、 'ic_out_circle.png'に小さな円が入っていますか? –

答えて

0

下記

<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> 
関連する問題