Question

我正在尝试在Windows应用商店的Expression blend中创建动画。我希望动画代表降雨量。动画由2张图片组成，我试图拥有3个场景。

1）简易降雨：如图1所示，有云和1滴的动画。这很好用

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

我的问题是，当我尝试创建最后两个场景时，它会影响第一个1，新对象也将显示在第一个1.所以我不能在同一个故事板上看到这三个场景。无论如何我可以将故事板分成多层，所以我可以随时隐藏一些对象？从msdn网站我发现我的文章说我可以通过点击 tools =＆gt;创建图层。创建新图层。

但是我的表达式混合中没有这个选项，我使用的是最后一个版本。

enter image description here

动画1

Lite rain animation

动画2

ssssssse

动画3

enter image description here

Answer 1

我会创建三个单独的故事板，每个场景一个。这样可以让您更好地控制何时执行操作。

在每个故事板中，您可以根据需要处理和动画对象。然后，您可以使用不同的缓和来实现不同速度的落下雨滴。

我已经在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>

表达式混合动画多个对象

1 个答案: