0

WindowsストアアプリのExpressionBlendでアニメーションを作成しようとしています。降雨をアニメーションで表現したい。アニメーションは2枚の写真で構成されており、3つのシナリオを作成しようとしています。

1）ライト降雨：写真1のように、雲と1滴でアニメートします。これは問題なく機能します。

2）中程度の降雨量：ここでは同じ雲を使用したいが、さらに1滴追加します3）大雨：ここでは同じ雲を使用したいのですが、3番目の滴を追加します

私の問題は、最後の2つのシナリオを作成しようとすると、最初の1つに影響し、新しいオブジェクトも最初の1つに表示されることです。したがって、これら3つのシナリオを同じストーリーボードに配置することはできません。とにかくストーリーボードを複数のレイヤーに分割できるので、いつでもオブジェクトの一部を非表示にできますか？msdnのWebサイトから、[ツール]=>[新しいレイヤーの作成]をクリックしてレイヤーを作成できるという記事を見つけました。

ただし、Expression Blendにはそのオプションがなく、最後のバージョンを使用しています。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

アニメーション1

ライトレインアニメーション

アニメーション2

ssssssse

アニメーション3

ここに画像の説明を入力してください

4

1 に答える 1

1

シナリオごとに1つずつ、3つの別々のストーリーボードを作成します。これにより、いつ何をするかをより細かく制御できます。

各ストーリーボードでは、必要に応じてオブジェクトを処理およびアニメーション化できます。次に、さまざまなイージングを使用して、落下する雨滴のさまざまな速度を実現できます。

私はExpressionBlendでこれを示すソリューションを作成し、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 に答える