Silverlight 表达式混合设置多个对象的动画

我正在尝试为Windows应用商店应用程序在Expression blend中创建动画。 我希望动画能够代表降雨。动画由2张图片和我试图有3个场景组成

1） Lite Rainsion：如图1所示，使用云和一滴设置动画。这个很好用

2） 中等降雨量：在这里，我想使用相同的云，但增加1滴 3） 大雨：在这里，我想使用相同的云，但添加第三滴

我的问题是，当我尝试创建最后两个场景时，它会影响前1个场景，新对象也会显示在前1个场景中。所以我不能把这3个场景放在同一个故事板上。我是否可以将故事板拆分为多个层，以便在需要时隐藏一些对象？在msdn网站上，我发现一篇文章说我可以通过单击tools=>createnewlayer来创建层

然而，我没有在我的表达式混合选项，我使用的是最后一个版本

动画1

动画2

动画3

---

我将创建三个独立的故事板，每个场景一个。这将允许您更多地控制何时做什么

在每个故事板中，您可以根据需要处理和设置对象的动画。 然后你们可以使用不同的测量来获得不同的雨滴下落速度

我在Expression Blend中创建了一个解决方案，为您演示了这一点，并将其放在我的Skydrive上：还有一篇博客文章

每个按钮停止和启动右侧动画的示例代码

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard
            x:Name="MediumRainAnimation"
            RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.7"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.7"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.7"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard
            x:Name="StrongRainAnimation"
            RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.42"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.42"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.42"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.6"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.18"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard
            x:Name="SlowRainAnimation"
            RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.19"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.19"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.19"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase
                            EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.7"
                    Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path1">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="path2">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.51"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>
    <Grid
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path
            x:Name="path"
            Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
            Fill="#FF93B6F1"
            Height="60.673"
            Width="35.616"
            UseLayoutRounding="False"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0,0,100,0"
            RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <CompositeTransform />
            </Path.RenderTransform>
        </Path>
        <Path
            x:Name="path1"
            Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
            Fill="#FF93B6F1"
            Height="60.673"
            Width="35.616"
            UseLayoutRounding="False"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <CompositeTransform />
            </Path.RenderTransform>
        </Path>
        <Path
            x:Name="path2"
            Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
            Fill="#FF93B6F1"
            Height="60.673"
            Width="35.616"
            UseLayoutRounding="False"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0,0,-100,0"
            RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <CompositeTransform />
            </Path.RenderTransform>
        </Path>
        <Path
            Data="F1M207.885,33.885C202.225,33.885 196.732,34.596 191.485,35.924 184.27,15.299 164.651,0.5 141.564,0.5 117.399,0.5 97.034,16.714 90.718,38.852 82.291,34.586 72.771,32.167 62.679,32.167 28.339,32.167 0.5,60.006 0.5,94.346 0.5,128.687 28.339,156.526 62.679,156.526 72.489,156.526 81.764,154.246 90.015,150.2 94.9,169.883 112.678,184.474 133.872,184.474 151.986,184.474 167.603,173.812 174.811,158.426 184.56,164.01 195.844,167.218 207.885,167.218 244.704,167.218 274.552,137.37 274.552,100.552 274.552,63.733 244.704,33.885 207.885,33.885"
            Fill="White"
            Height="184.974"
            Width="275.052"
            UseLayoutRounding="False"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" />
        <StackPanel>
            <Button
                Tapped="Button_Tapped">Play slow rain</Button>
            <Button
                Tapped="Button_Tapped_1">Play Medium rain</Button>
            <Button
                Tapped="Button_Tapped_2">Play Strong rain</Button>
        </StackPanel>
    </Grid>
</Page>

慢雨
打中雨
下大雨

非常感谢您的帮助！！真的很感激！！