Случайная анимация объекта в телефоне Windows

Question

Я работаю над случайной анимацией объекта, подобной игре на моль и молот для телефонов, но не использую третьи в C#, я пытаюсь работать только с использованием анимации, но в случайном порядке.

Я использовал 9 эллипсов в сетке, и моя цель - изменить цвет для эллипса от белого до синего только на секунду или меньше, чем красная снова на белый, эллипс будет выбран случайным образом или просто для установки 9 Эллипс как невидимый, затем покажите их случайным образом, но с анимацией в течение секунд, затем скройте.

как я могу связать анимацию как объект и создать случайный из раскадровки!

Вот мой C# код:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using Microsoft.Phone.Controls; 

namespace Game 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
     // Constructor 
     public MainPage() 
     { 
      InitializeComponent(); 
     } 

     private void LayoutRoot_Loaded(object seander, RoutedEventArgs e) 
     { 

      Random rmd = new Random(); 

      mystory1.Begin(); 


     } 



    } 
} 

и вот моя XAML:

<phone:PhoneApplicationPage 
    x:Class="Game.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True"> 


    <phone:PhoneApplicationPage.Resources> 

     <Storyboard x:Name="mystory1"> 

      <ColorAnimation Storyboard.TargetName="El1" 
          Storyboard.TargetProperty="Color" 
          From="White" To="Blue" 
          Duration="0:0:2" 
          ></ColorAnimation> 
     </Storyboard> 

    </phone:PhoneApplicationPage.Resources> 


    <!--LayoutRoot is the root grid where all page content is placed--> 
    <Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <!--TitlePanel contains the name of the application and page title--> 
     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
      <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
      <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
     </StackPanel> 

     <!--ContentPanel - place additional content here--> 
     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
      </Grid.RowDefinitions> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El1" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse2" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El2" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 


      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse3" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El3" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse4" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Row="1" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El4" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse5" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" Grid.Row="1" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El5" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse6" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" Grid.Row="1" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El6" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse7" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Row="2" > 


       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El7" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse8" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" Grid.Row="2" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El8" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 


      </Ellipse> 

      <Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse9" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" Grid.Row="2" > 

       <Ellipse.Fill> 
        <SolidColorBrush x:Name="El9" Color="White"> 


        </SolidColorBrush> 


       </Ellipse.Fill> 

      </Ellipse> 
     </Grid> 
    </Grid> 



</phone:PhoneApplicationPage> 

Answer 1

Вам потребуется DispatchTimer, чтобы вызвать случайный выбор и начать раскадровку. Чтобы начать работу, вы можете взглянуть на этот код. Если вы запустите его, все, что он делает, превратит случайный белый круг в синий каждый раз. Вам нужно будет использовать код в качестве ссылки и изменить его в соответствии с вашими потребностями.

---

Нам нужно изменить некоторые XAML и имя ColorAnimation так:

В App.xaml поставил

<!--Application Resources--> 
<Application.Resources> 
    <Storyboard x:Name="mystory1"> 
     <ColorAnimation 
     x:Name="myColorAnimation" 
     Storyboard.TargetName="El1" 
        Storyboard.TargetProperty="Color" 
        From="White" To="Blue" 
        Duration="0:0:2" 
        /> 
    </Storyboard> 
</Application.Resources> 

В MainPage.xaml поставил

<!-- add in the loaded event to the page to start the timer --> 
<phone:PhoneApplicationPage Loaded="PhoneApplicationPage_Loaded"> 

---

Namespaces

using System.Windows.Threading;    // DispatchTimer 
using System.Windows.Media.Animation;  // Storyboard 
using System.Windows.Media;     // Brushes 
using System.Windows.Shapes;    // Shapes 

Создать наш DispatchTimer так работает каждый АБВ секунду

public partial class MainPage : PhoneApplicationPage 
{ 
    DispatcherTimer dt; 
    // Constructor 
    public MainPage() 
    { 
     InitializeComponent(); 

     // create our dispatch timer 
     dt = new DispatcherTimer(); 
     dt.Interval = TimeSpan.FromSeconds(1); 
     dt.Tick += dt_Tick; 
    } 

    // start the timer only when the page has loaded 
    private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) 
    { 
     dt.Start(); 
    } 

    /// Every tick, generate a random number from 1 to 9. 
    /// Use this number to find the Ellipse 
    /// Set the Storyboard to this found Ellipse 
    /// Start the Animation 
    void dt_Tick(object sender, EventArgs e) 
    {      
     // generate a random number 
     Random rmd = new Random(); 
     int random_int = rmd.Next(1, 9); 

     Storyboard sb = (Storyboard)Application.Current.Resources["mystory1"];    // get the storyboard from Resources 
     ColorAnimation ca = (ColorAnimation) sb.Children[0];        // get the color animation 

     sb.Stop();                   // stop the storyboard to change the target name 
     object myobject = this.FindName("El" + random_int.ToString());      // setup the name based off the random number 
     Storyboard.SetTarget(ca, (DependencyObject) myobject);        // set the new target 
     sb.Begin();                   // start the animation 

    } 

} 

---

Теперь вы можете добавить в много более Раскадровка анимации и имеют механизмы для целевой и начать/остановить, чтобы закончить то, что вы пытаетесь сделать.