WPF重新使用\替换图像;动画

时间:2016-02-15 17:39:38

标签: c# wpf visual-studio xaml

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>

任何有关如何使其显示为连续性的想法或建议都会很棒。

1 个答案:

答案 0 :(得分: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>