WPF重用\\替換圖像； 動畫

Question

YO，我有一個向下移動的長圖像（125x8000像素），一旦到達某個點，我想使用同一圖像並將其直接放在翻譯圖像的頂部，因此它似乎是連續的流，永遠向下。 因此，就像翻譯的一半一樣，我在第一張圖片的頂部添加了一張圖片的副本。 並重復。

或者，如果我能以某種方式使用一個圖像並將其循環顯示，就好像它是圓形的還是一個輪子。 這是一台老虎機。 我不會在后面給出代碼，因為它是最高機密（不是真的），但這是到目前為止的xaml：

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication3"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="422.846" Width="581.652">
    <Window.Resources>
        <x:ArrayExtension Type="sys:Int32" x:Key="arr">
            <sys:Int32>2100</sys:Int32>
            <sys:Int32>3000</sys:Int32>
            <sys:Int32>4200</sys:Int32>
            <sys:Int32>6000</sys:Int32>
            <sys:Int32>6800</sys:Int32>
            <sys:Int32>1500</sys:Int32>
            <sys:Int32>500</sys:Int32>
            <sys:Int32>8000</sys:Int32>
        </x:ArrayExtension>
        <Storyboard x:Key="SB2">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             Duration="0:0:4"
                             To="2900">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="SB3">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             Duration="0:0:3"
                             To="2100">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="SBName">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                                                 Duration="0:0:6"
                                                 To="4111">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Image x:Name="im" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="76,-7705,374.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="im1" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="223,-7705,227.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="im2" Source="E:/fruit_roll.png" Stretch="none" Width="125" Height="8210" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="370,-7705,80.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>

        <Image x:Name="slot" Source="E:/Slot-Machine.png" Margin="-50,-187,-63.8,-166.8"/>
        <Button x:Name="button1" Content="Button" Click="button_Click_2" Margin="235,302,283.2,61.2" Background="#FFB00000" AllowDrop="True" BorderBrush="#FFFF8484" Opacity="0.15"/>
    </Grid>
</Window>

關於如何使之看起來連續的任何想法或建議都將是很棒的。

Answer 1

這樣的事情應該起作用：

<Rectangle>
    <Rectangle.Fill>
        <ImageBrush
            ImageSource="E:/fruit_roll.png" TileMode="Tile"
            Viewport="0,0,125,8000" ViewportUnits="Absolute">
            <ImageBrush.Transform>
                <TranslateTransform/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Rectangle.Fill>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="Fill.Transform.Y"
                        To="-8000" Duration="0:0:5"
                        RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>