模仿當前畫布的WPF圓形動畫

我在wpf中使用圓形動畫實現了一個圖形動畫，並引用了附加的圖片（很明顯，我不是藝術家......）。正方形表示可見的形式，而整個圖像表示一個頁面翻譯的畫布。動畫在向左方向上從1-> 2-> 3-> 4-> 1進行卷動和包裝，並且4-> 3-> 2-> 1-> 4。模仿當前畫布的WPF圓形動畫

正如您所看到的，我之前使用圖片中彩色箭頭的實現方式允許我使用與所需圖片相同的前後門廊。當動畫移動到正面或背面圖片時，即時動畫用於在用戶不知道的情況下快速移動到實際頁面。

到目前爲止，這工作良好，非常順利。問題在於我的實現不僅僅是簡單的圖像。每個頁面本身都會有複雜的動畫。使用相同的實現，我將不得不鏡像4個真實頁面中的每個動畫，因爲我必須在僅存在用於平滑動畫的最終頁面上進行翻轉。

顯然，這將是非常浪費和不理想的原因是多方面的......

一個以爲我會從頭版1和4的製作圖片和覆蓋該圖像在正面和背面門廊通過使用另一個畫布。但這似乎仍然太困難了，應該有一個更簡單的方法。

是否有比這更好的或更簡單的方法？我正在尋找一些模仿其他畫布的畫布，以便我不必擔心這一點。無論是或者整個新的算法來包裝結束頁面。

我看了看周圍的互聯網這個滾動例程，還沒有發現任何東西。感謝您的任何幫助！對不起，很長的職位。

enter image description here

來源

2013-04-22 bassplayer142

看起來像我找到了答案，我的問題通過使用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>

來源

2013-04-23 14:35:33 bassplayer142

模仿當前畫布的WPF圓形動畫

回答

相關問題