我正在尝试在 Expression blend 中为 Windows 应用商店应用创建动画。 我希望动画代表降雨。动画由 2 张图片组成，我尝试使用 3 个场景。
1) 少量降雨：如图 1 所示，使用云和 1 滴进行动画处理。效果很好
2) 中等降雨量：这里我想使用相同的云，但要多加 1 滴 3) 大雨：这里我想使用相同的云但添加第三滴
我的问题是，当我尝试创建最后两个场景时，它会影响第一个场景，并且新对象也将显示在第一个场景上。所以我不能在同一个故事板上拥有这 3 个场景。无论如何我可以将情节提要分成多个层，所以我可以随时隐藏一些对象？在 msdn 网站上，我发现一篇文章说我可以通过单击 tools => create new layer 来创建图层。
但是我的表情混合中没有该选项，我使用的是最新版本。
动画 1
动画 2
动画 3
【问题讨论】：
标签： silverlight xaml microsoft-metro windows-store-apps expression-blend
我会创建三个独立的故事板，每个场景一个。这将使您可以更好地控制何时做什么。
然后，您可以在每个 Storyboard 中根据需要处理对象并为其设置动画。 然后，您可以使用不同的缓动来实现不同的雨滴下落速度。
我已经在 Expression Blend 中创建了一个解决方案，向您展示了这一点，并将其放在我的 Skydrive 上：http://sdrv.ms/12IbxrR，还有一篇涵盖 how it's done here 的博文。
每个按钮停止和启动正确动画的示例代码。
<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>
【讨论】：