Question

我正在使用圆形动画在wpf中实现一个图形动画，参考附图（显然我不是艺术家......）。正方形表示可见形式，而整个图像表示从页面到页面平移的画布。动画在向右方向上滚动和包裹1-> 2-> 3-> 4-> 1，在向左方向上滚动和包裹4-> 3-> 2-> -1-> 4 。

正如您所看到的，我之前使用图片中彩色箭头的实现方式允许我使用与所需图片相同的前后门廊。当动画移动到前面或后面的图片时，会使用瞬时动画在用户不知情的情况下快速移动到真实页面。

到目前为止，这种方法运作良好且非常顺利。问题在于我的实现不仅仅是简单的图像。每个页面本身都有复杂的动画。使用相同的实现，我将必须镜像4个真实页面中的每个动画，就像我必须在最终页面中那样只存在平滑动画来翻转。

显然，由于种种原因，这将是非常浪费和不理想的......

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

是否有比此更优惠或更简单的方法？我正在寻找一种模仿其他画布的画布，所以我不必担心这个。这个或整个新算法来包装结束页面。

我在互联网上浏览了这个滚动例程，但还没有找到任何东西。感谢您的任何帮助！对不起，很长的帖子。

enter image description here

Answer 1

看起来我通过使用VisualBrush并将其绑定到画布上找到了我的问题的答案。

    <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>

模仿当前画布的WPF圆形动画

1 个答案: