Question

我的wpf应用程序中有一个背景图像，我希望实现背景图像连续移动的效果。下面的代码可以实现简单的效果，但是当图片结束的时间再次移过时，我想让这张图片运动的效果一直没有停止的现象。

void StartBackgroudMove()
{
    Storyboard sb = new Storyboard();
    DoubleAnimation TranslateXExtendAnimation = new DoubleAnimation() { From = 0, To = -100, Duration = TimeSpan.FromMilliseconds(2500) };
    Storyboard.SetTarget(TranslateXExtendAnimation, BackgroundImage);
    Storyboard.SetTargetProperty(TranslateXExtendAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
    sb.Children.Add(TranslateXExtendAnimation);
    sb.FillBehavior = FillBehavior.Stop;
    sb.Completed += (s, args) =>
    {
        this.StartBackgroudMove();
    };
    sb.Begin();
}

Answer 1

您可以使用将TileMode设置为Tile并为其Viewport属性设置动画的ImageBrush：

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
                    Stretch="Fill" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,1024,768"/>
    </Grid.Background>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <RectAnimation Storyboard.TargetProperty="Background.Viewport"
                                   To="-1024,0,1024,768" Duration="0:0:10" 
                                   RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

以下替代解决方案将两个相邻图像放置在画布中，并为Canvas'RenderTransform属性设置动画。

<Grid>
    <Canvas>
        <Canvas.RenderTransform>
            <TranslateTransform x:Name="translation"/>
        </Canvas.RenderTransform>
        <Image Stretch="None"
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
        <Image Canvas.Left="1024" Stretch="None"
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
    </Canvas>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="X" 
                                     Storyboard.TargetName="translation"
                                     To="-1024" Duration="0:0:10"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

Answer 2

您可以将Storyboard.RepeatBehavior设置为RepeatBehavior.Forever

示例：

    void StartBackgroudMove()
    {
        Storyboard sb = new Storyboard();
        DoubleAnimation TranslateXExtendAnimation = new DoubleAnimation() { From = 0, To = -100, Duration = TimeSpan.FromMilliseconds(2500) };
        Storyboard.SetTarget(TranslateXExtendAnimation, BackgroundImage);
        Storyboard.SetTargetProperty(TranslateXExtendAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
        sb.Children.Add(TranslateXExtendAnimation);
        sb.FillBehavior = FillBehavior.Stop;
        sb.RepeatBehavior = RepeatBehavior.Forever;
        sb.Begin();
    }

如何在wpf中实现背景图像的连续移动

2 个答案: