Come posso fare più animazioni in un singolo storyboard in C#/XAML?

Question

Sto cercando di creare un semplice gioco Windows Store in C# e XAML, uno in cui le tessere esagonali si muovono. Questo è principalmente per aiutarmi ad imparare C# e XAML perché non ho mai lavorato con la grafica e nemmeno con la codifica dell'interfaccia utente.

Ho un metodo che può spostare un singolo esagono sulle coordinate del bersaglio, ma ora guardandolo ora mi rendo conto che è impossibile fare più mosse contemporaneamente, il che è assolutamente necessario.

Mi sento come se nel mio approccio ci fosse qualcosa di fondamentalmente diverso, più oggetti che si muovono su una singola tela non possono essere una cosa insolita, vero? Lo chiedo principalmente nella speranza che qualcuno indichi dove ho sbagliato.

//moves the hex hexName to coordinates x, y, over a specified duration. 
    public void slideHex(int x, int y, string hexName, Duration duration) 
    { 

     GameStoryboard.Stop(); 

     Polygon hex = GameCanvas.FindName(hexName) as Polygon; 



     TranslateTransform slideTransform = new TranslateTransform(); 
     slideTransform.X = hex.RenderTransformOrigin.X; 
     slideTransform.Y = hex.RenderTransformOrigin.Y; 

     hex.RenderTransform = slideTransform; 

     DoubleAnimation animX = new DoubleAnimation(); 
     DoubleAnimation animY = new DoubleAnimation(); 

     animX.Duration = duration; 
     animY.Duration = duration; 

     GameStoryboard.Duration = duration; 
     GameStoryboard.Children.Add(animX); 
     GameStoryboard.Children.Add(animY); 

     Storyboard.SetTarget(animX, slideTransform); 
     Storyboard.SetTarget(animY, slideTransform); 

     Storyboard.SetTargetProperty(animX, "X"); 
     Storyboard.SetTargetProperty(animY, "Y"); 

     animX.To = x; 
     animY.To = y; 

     GameStoryboard.Begin(); 

    } 

Answer 1

Uno storyboard può contenere più animazioni, e ogni animazione può indirizzare un elemento dell'interfaccia utente diverso. Ecco un esempio di uno storyboard, che "impulsi" i colori del bordo di tre diversi controlli:

<Storyboard x:Name="pulseAnimation" AutoReverse="True"> 
    <ColorAnimation x:Name="animateLatitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLatitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" /> 
    <ColorAnimation x:Name="animateLongitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLongitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" /> 
    <ColorAnimation x:Name="animateHyperlinkTextColour" Storyboard.TargetName="hyperlinkButtonCurrentLocation" From="{StaticResource PhoneForegroundColor}" To="Green" Storyboard.TargetProperty="(HyperlinkButton.Foreground).(SolidColorBrush.Color)" Duration="0:0:0.4" /> 
</Storyboard> 

Il codice guarda bene - si sta già animando più proprietà di slideTransform, e dal momento che l'obiettivo di un'animazione è una proprietà dell'animazione anziché dello storyboard, non vi è alcun motivo per cui non è possibile retargetare animX o animY in un altro oggetto.

Answer 2

È possibile creare più storyboard ed eseguirli simultaneamente per animare simultaneamente più oggetti. Vedere l'esempio nel seguente articolo che anima più elementi di un elenco di impegni:

http://www.codeproject.com/Articles/428088/A-Gesture-Driven-Windows-Phone-To-Do-List#swipe