表达式混合VS2013中的动画

时间：2015-07-18 05:31:36

标签： wpf animation random storyboard expression-blend

我有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 个答案:

答案 0 :(得分：0)

选项1：如果每个球的动画不同，我会写4个故事板 选项2：如果动画相同，我只会写一个故事板

使其随机： 我会使用计时器来调用故事板。

希望这有帮助。

相关问题
最新问题