¿Cómo puedo hacer múltiples animaciones en un solo guión gráfico en C#/XAML?

Question

Estoy tratando de crear un juego simple de Windows Store en C# y XAML, uno que involucre mosaicos hexagonales en movimiento. Esto es principalmente para ayudarme a aprender C# y XAML ya que nunca antes había trabajado con gráficos o incluso con codificación UI.

Tengo un método que puede mover un solo hexágono a las coordenadas del objetivo, pero mirándolo ahora me doy cuenta de que es imposible hacer varios movimientos a la vez, lo cual es absolutamente necesario.

Siento que tiene que haber algo fundamentalmente fuera de mi enfoque, los objetos múltiples que se mueven en un solo lienzo no pueden ser algo inusual, ¿o sí? Principalmente estoy preguntando esto con la esperanza de que alguien me indique dónde me equivoqué.

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

Un guión gráfico puede contener múltiples animaciones, y cada animación puede apuntar a un elemento de interfaz de usuario diferente. He aquí un ejemplo de un guión gráfico, que "pulsos" los colores del borde de tres controles diferentes:

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

Su código se ve bien - que ya está animando múltiples propiedades de slideTransform, y dado que el destino de una animación es una propiedad de la animación en lugar del guión gráfico, no hay ninguna razón por la que no pueda volver a establecer el animX o el animY en un objeto diferente por completo.

Answer 2

Se pueden crear varios guiones gráficos y ejecutarlas simultáneamente con el fin de animar al mismo tiempo varios objetos. Ver el ejemplo en el siguiente artículo que anima múltiples artículos dentro de una lista de tareas:

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