expression blend VS2013 中的动画
Animation in expression blend VS2013
我正在制作 4 个球的动画。
但我想在一个时间限制内随机为所有 4 个球制作动画，比如 1 分钟。
我应该创建 4 个故事板（每个球 1 个）吗？因为我希望球彼此独立。
那么我怎样才能随机调用这些故事板呢？
这是xaml:
`<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="FF2D.Level1"
x:Name="UserControl"
d:DesignWidth="718" d:DesignHeight="400">
<UserControl.Resources>
<Storyboard x:Key="TargetAnimate">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame x:Name="TargetOut" KeyTime="0:0:1.2" Value="-48">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame x:Name="TargetIn" KeyTime="0:0:1.8" Value="-8">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-34">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="-27">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:7.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:7.9" Value="-3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
<BeginStoryboard Storyboard="{StaticResource TargetAnimate}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot">
<Image HorizontalAlignment="Left" Height="400" VerticalAlignment="Top" Width="712" Source="lvbk/lv1bk01.jpg"/>
<StackPanel x:Name="HUD" Height="50" Margin="0,350,6,0" Background="{DynamicResource hud}" Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="Score:" Foreground="Aqua" Width="278.46" />
<TextBlock x:Name="txbLevel" TextWrapping="Wrap" Width="206" Text="Level 1" Foreground="GreenYellow"></TextBlock>
<TextBlock x:Name="txbAmmo" TextWrapping="Wrap" Width="228.617" ><Run Language="en-in" Text="0/0" Foreground="Aqua"/></TextBlock>
</StackPanel>
<StackPanel x:Name="TimeHUD" HorizontalAlignment="Left" Height="36" Margin="310,0,0,0" VerticalAlignment="Top" Width="100" Background="{DynamicResource hud}">
<TextBlock x:Name="txbTime" TextWrapping="Wrap" Height="35.96"><Run Language="en-in" Text="00:00" Foreground="Yellow"/></TextBlock>
</StackPanel>
<Canvas Margin="0,140,22,126">
<Ellipse x:Name="ellipse3" HorizontalAlignment="Left" Height="28" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.5,0.5" Canvas.Left="443" Canvas.Top="28">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="35" Stroke="Black" VerticalAlignment="Top" Width="90" Canvas.Left="401" Canvas.Top="28">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse2" HorizontalAlignment="Left" Height="28" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.5,0.5" Canvas.Left="259" Canvas.Top="35">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="45" Stroke="Black" VerticalAlignment="Top" Width="114" Canvas.Left="199" Canvas.Top="28">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="36" Stroke="Black" VerticalAlignment="Top" Width="36" RenderTransformOrigin="0.5,0.5" Canvas.Left="65" Canvas.Top="67">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="60" Stroke="Black" VerticalAlignment="Top" Width="121" Canvas.Top="58">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="36" Stroke="Black" VerticalAlignment="Top" Width="36" RenderTransformOrigin="0.5,0.5" Canvas.Left="570" Canvas.Top="88">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="67" Stroke="Black" VerticalAlignment="Top" Width="138" Canvas.Left="558" Canvas.Top="67">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Grid>
`
选项 1：如果每个球的动画都不同，我会写 4 个故事板
选项 2：如果动画相同我会只写 1 个故事板
要使其随机：
我会使用计时器来调用故事板。
希望对您有所帮助。
我正在制作 4 个球的动画。 但我想在一个时间限制内随机为所有 4 个球制作动画，比如 1 分钟。 我应该创建 4 个故事板（每个球 1 个）吗？因为我希望球彼此独立。 那么我怎样才能随机调用这些故事板呢？
这是xaml:
`<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="FF2D.Level1"
x:Name="UserControl"
d:DesignWidth="718" d:DesignHeight="400">
<UserControl.Resources>
<Storyboard x:Key="TargetAnimate">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame x:Name="TargetOut" KeyTime="0:0:1.2" Value="-48">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame x:Name="TargetIn" KeyTime="0:0:1.8" Value="-8">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-34">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="-27">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:7.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:7.9" Value="-3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
<BeginStoryboard Storyboard="{StaticResource TargetAnimate}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot">
<Image HorizontalAlignment="Left" Height="400" VerticalAlignment="Top" Width="712" Source="lvbk/lv1bk01.jpg"/>
<StackPanel x:Name="HUD" Height="50" Margin="0,350,6,0" Background="{DynamicResource hud}" Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="Score:" Foreground="Aqua" Width="278.46" />
<TextBlock x:Name="txbLevel" TextWrapping="Wrap" Width="206" Text="Level 1" Foreground="GreenYellow"></TextBlock>
<TextBlock x:Name="txbAmmo" TextWrapping="Wrap" Width="228.617" ><Run Language="en-in" Text="0/0" Foreground="Aqua"/></TextBlock>
</StackPanel>
<StackPanel x:Name="TimeHUD" HorizontalAlignment="Left" Height="36" Margin="310,0,0,0" VerticalAlignment="Top" Width="100" Background="{DynamicResource hud}">
<TextBlock x:Name="txbTime" TextWrapping="Wrap" Height="35.96"><Run Language="en-in" Text="00:00" Foreground="Yellow"/></TextBlock>
</StackPanel>
<Canvas Margin="0,140,22,126">
<Ellipse x:Name="ellipse3" HorizontalAlignment="Left" Height="28" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.5,0.5" Canvas.Left="443" Canvas.Top="28">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="35" Stroke="Black" VerticalAlignment="Top" Width="90" Canvas.Left="401" Canvas.Top="28">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse2" HorizontalAlignment="Left" Height="28" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.5,0.5" Canvas.Left="259" Canvas.Top="35">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="45" Stroke="Black" VerticalAlignment="Top" Width="114" Canvas.Left="199" Canvas.Top="28">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="36" Stroke="Black" VerticalAlignment="Top" Width="36" RenderTransformOrigin="0.5,0.5" Canvas.Left="65" Canvas.Top="67">
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="60" Stroke="Black" VerticalAlignment="Top" Width="121" Canvas.Top="58">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="36" Stroke="Black" VerticalAlignment="Top" Width="36" RenderTransformOrigin="0.5,0.5" Canvas.Left="570" Canvas.Top="88">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush SpreadMethod="Reflect" GradientOrigin="0.5,0" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.3">
<GradientStop Offset="0.75" Color="Red"/>
<GradientStop Offset="0.108" Color="White"/>
<GradientStop Color="#FEFEA4A4" Offset="0.353"/>
<GradientStop Color="#FF9E0909" Offset="1"/>
<GradientStop Color="#FFC60505" Offset="0.909"/>
<GradientStop Color="#FFE60202" Offset="0.81"/>
<GradientStop Color="#FFD40303" Offset="0.862"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Rectangle HorizontalAlignment="Left" Height="67" Stroke="Black" VerticalAlignment="Top" Width="138" Canvas.Left="558" Canvas.Top="67">
<Rectangle.Fill>
<ImageBrush ImageSource="/textures/bs01.jpg" />
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Grid>
`
选项 1：如果每个球的动画都不同，我会写 4 个故事板 选项 2：如果动画相同我会只写 1 个故事板
要使其随机： 我会使用计时器来调用故事板。
希望对您有所帮助。