2

私の Silverlight アプリケーションでは、さまざまなテキストが右から繰り返し飛び込んで、色が変わったり小さくなったりするようにしたいと考えています。アニメーションは、ループを介して初めて機能しますが、それ以降は機能しません。

これが私がしたことです：

(1) Expression blendに入り、「Create Storyboard」ツールを使用してアニメーションを作成しました。

次に、(2) StoryBoardブロックを XAML にコピーしました。

<UserControl x:Class="TestWeb124.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="600">
    <UserControl.Resources>
        <Storyboard x:Key="FadeTextIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
                <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Margin="20">
            <TextBlock Height="57" Margin="190,90,133,0" VerticalAlignment="Top" Text="This is a test." TextWrapping="Wrap" FontSize="36" RenderTransformOrigin="0.5,0.5" x:Name="OutputText" Foreground="#FF000000">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </TextBlock.RenderTransform>
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

次に (3) コード ビハインドで、タイマー ループを実行します。アニメーションは最初はうまく機能しますが、その後はアニメーションがありません:

public void Each_Tick(object o, EventArgs sender)
{
    if (_secondsElapsed % 5 == 0 || _secondsElapsed == 0)
    {
        OutputText.Text = String.Format("{0}", _customerFirstNames.ElementAt(_customerNodeIndex));
        Storyboard fadeTextIn = (Storyboard)Resources["FadeTextIn"];
        fadeTextIn.Begin();
        _customerNodeIndex++;
        if (_customerNodeIndex > _customerFirstNames.Count() - 1) _customerNodeIndex = 0;
    }
    _secondsElapsed++;
}

飛ぶはずの次のテキストの新しい部分の位置をリセットする必要があるようです。それ、どうやったら出来るの？

4

1 に答える 1

2 
        <Storyboard x:Name="FadeTextIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="36" KeySpline="0,0,0,0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
                <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

ストーリーボードが行っていることは、Element を取得し、そのプロパティの操作をアニメーション化することです。そのため、2 回目の実行時に Element には既にターゲット プロパティがあるため、値を初期値に設定するアニメーションの開始にキーフレームを追加することで、アニメーションが適切に繰り返されます。

于 2009-04-01T13:39:13.953 に答える