windows phone 中对象的随机动画

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

---

命名空间

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

创建我们的 DispatchTimer，使其每隔 XYZ 秒运行一次

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

    }

}

---

现在您可以添加更多故事板动画，并拥有一种机制来定位和开始/停止以完成您正在尝试做的事情。