0

我正在尝试在 Expression blend 中为 Windows Store App 创建一个动画。我希望动画代表降雨。动画由 2 张图片组成，我试图拥有 3 个场景。

1) 少雨：用云和 1 滴进行动画处理，如图 1 所示。这很好用

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

我的问题是，当我尝试创建最后两个场景时，它会影响第一个场景，并且新对象也将显示在第一个场景上。所以我不能在同一个故事板上拥有这 3 个场景。无论如何我可以将情节提要分成多个层，所以我可以随时隐藏一些对象？从 msdn 网站我发现我的文章说我可以通过单击工具 => 创建新图层来创建图层。

但是，我的表情混合中没有该选项，并且我使用的是最新版本。

在此处输入图像描述

在此处输入图像描述

动画 1

小雨动画

动画 2

sssssse

动画 3

在此处输入图像描述

4

1 回答 1

1

我会创建三个独立的故事板，每个场景一个。这将使您可以更好地控制何时做什么。

然后，您可以在每个 Storyboard 中根据需要处理对象并为其设置动画。然后，您可以使用不同的缓动来实现不同的雨滴下落速度。

我在 Expression Blend 中创建了一个解决方案，为您展示了这一点，并将其放在我的 Skydrive 上：http : //sdrv.ms/12IbxrR，还有一篇博文介绍了它是如何完成的。

每个按钮停止和启动正确动画的示例代码。

<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>
于 2013-03-11T14:58:24.703 回答