模拟当前画布的WPF循环动画

我正在wpf中实现一个图形动画，其中包含一个参考所附图片的圆形动画（显然我不是艺术家…）。正方形表示可见的形式，而整个图像表示从一页到另一页转换的画布。动画从右方向的1->2->3->4->1和左方向的4->3->2->1->4滚动和换行

正如您可以从图片中的彩色箭头看到的，我以前的实现允许我使用与所需图片相同的前廊和后廊。当动画移动到前或后图片时，即时动画用于在用户不知道的情况下快速移动到真实页面

到目前为止，这一切都很顺利。问题在于我的实现不仅仅是简单的图像。每个页面本身都有复杂的动画。使用相同的实现，我必须镜像4个真实页面中的每个动画，就像我必须镜像只有平滑动画才能滚动的最后页面一样

显然，这将是非常浪费和不理想的原因很多

我的一个想法是从头版1和4中创建一个图像，并使用另一块画布将该图像覆盖在前廊和后廊上。但这似乎仍然太难了，应该有一个更简单的方法

有没有比这更好或更简单的方法？我正在寻找一种模仿其他画布的画布，这样我就不用担心这个了。或者是一个完整的新算法来覆盖最后的页面

我已经在互联网上查找了这个滚动程序，但还没有找到任何东西。谢谢你的帮助！抱歉发了这么长的邮件

---

看起来我是通过使用可视化画笔并将其绑定到画布上找到问题的答案的

    <Canvas Name="backgroundCanvas" Visibility="Visible"  Height="{StaticResource animHeight}" Width="6144">

        <Canvas Name="menuFrontCanvas" Visibility="Visible" Margin="0,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="{StaticResource animWidth}" Height="{StaticResource animHeight}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding ElementName=menu4Canvas}" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

        <Canvas Name="menu1Canvas"  Visibility="Visible" Margin="1024,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="alpsLogoImage" Canvas.ZIndex="99"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" 
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/ALPSLogo.png" />
            <Image Name="menu1Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu1Image.png" />
        </Canvas>

        <Canvas Name="menu2Canvas" Visibility="Visible" Margin="2048,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu2Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu2Image.png" />
        </Canvas>

        <Canvas Name="menu3Canvas" Visibility="Visible" Margin="3072,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu3Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu3Image.png" />
        </Canvas>

        <Canvas Name="menu4Canvas" Visibility="Visible" Margin="4096,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Image Name="menu4Image" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
                IsEnabled="True" StretchDirection="Both" Source="WPFResources/Backgrounds/menu4Image.png" />  
        </Canvas>

        <Canvas Name="menuBackCanvas" Visibility="Visible"   Margin="5120,0,0,0" Height="{StaticResource animHeight}" Width="{StaticResource animWidth}">
            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="{StaticResource animWidth}" Height="{StaticResource animHeight}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding ElementName=menu1Canvas}" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

    </Canvas>