在兩個圖像之間旋轉模擬動畫在C＃WPF

Question

我想創建一個動畫來模擬一個卡通運動員運行。我有兩種不同的人物角色運行狀態圖像，我希望能夠在兩幅圖像之間循環，圖像變化之間的延遲時間大約爲1秒。

我試圖通過一個改變畫布背景的故事板來做到這一點，也試圖把兩個圖像放在一起，並在短時間內改變0％ - > 100％的不透明度，但是要麼我從我的代碼中錯過某些東西來使其運行起來，要麼我只是在錯誤的方向前進解決方案。

任何幫助或鏈接到可能的解決方案將不勝感激，因爲我似乎無法找到任何幫助我。

希望這解釋了我在找什麼，但如果需要，我可以提供進一步的細節。

編輯：好的，所以我採用了Noobacode提供的示例，並且已將其更改爲我認爲應該執行的操作。我有以下幾點：

用戶控件的代碼背後

public partial class UserControl1 : UserControl 
{ 
    private int currentIndex = 1; 
    private DispatcherTimer updateImageTimer; 
    public UserControl1() 
    { 
     InitializeComponent(); 
     this.updateImageTimer = new DispatcherTimer(DispatcherPriority.Render); 
     this.updateImageTimer.Interval = TimeSpan.FromMilliseconds(30.0); 
     this.updateImageTimer.Tick += new EventHandler(this.updateImageTimer_Tick); 

    } 
    private void updateImageTimer_Tick(object sender, EventArgs e) 
    { 
     if(currentIndex == 1) 
     { 
      backgroundImage.Source = new BitmapImage(new Uri("images/blurredBackground1.png", UriKind.Relative)); 
      currentIndex++; 
     } 
     else if(currentIndex == 2) 
     { 
      backgroundImage.Source = new BitmapImage(new Uri("images/blurredBackground2.png", UriKind.Relative)); 
      currentIndex--; 
     } 


    } 
    public void Play() 
    { 
     updateImageTimer.Start(); 
    } 

    public void Stop() 
    { 
     updateImageTimer.Stop(); 
    } 
} 

用戶控制XAML

<UserControl x:Class="Going_For_Gold.UserControl1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="492" d:DesignWidth="800"> 
<Grid> 
    <Image x:Name="backgroundImage" Stretch="Fill"/> 

</Grid> 

現在我已經添加了用戶控制我的主要窗口，但圖像控制我已經放入主窗口（我知道這是正確的工作如果我把一個初始圖像源放到UserControl中，我可以通過主窗口上的控件看到圖像），但是這個代碼似乎沒有在tick上更新圖像源。

Answer 1

這裏的這可以實現的途徑一個解釋得很清楚：

http://dotnetslackers.com/XAML/re-192014_WPF_Image_Sequencer_for_animations.aspx

該鏈接提供了這是怎麼回事的一個很好的解釋，也有一個完整的源代碼。

UPDATE：

我不知道它爲什麼不適合你，但讓我提供一點點簡單的例子。我已經測試過它，它工作得很好。

第1步：

創建一個新的用戶控件。在XAML部分中，添加<Image x:Name="image" Stretch="Fill"/>。這裏是我的樣子：

<UserControl x:Class="WpfApplication1.Animation" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <Image x:Name="image" Stretch="Fill"/> 
    </Grid> 
</UserControl> 

STEP 2：

走進您剛剛創建的用戶控件的代碼隱藏和類似的代碼添加到我的（做同樣的開始和然後根據你的需要調整，以便你知道它的工作原理）：

using System; 
using System.Windows.Controls; 
using System.Windows.Media.Imaging; 
using System.Windows.Threading; 

namespace WpfApplication1 
{ 
    public partial class Animation : UserControl 
    { 
     private int index = 1; 
     private DispatcherTimer timer; 

     public BitmapImage Image1 { get; set; } 
     public BitmapImage Image2 { get; set; } 

     public Animation() 
     { 
      InitializeComponent(); 
     } 

     public void Initiate() 
     { 
      if (Image1 != null && Image2 != null) 
      { 
       image.Source = Image1; 

       this.timer = new DispatcherTimer(DispatcherPriority.Render); 
       this.timer.Interval = TimeSpan.FromMilliseconds(100.0); 
       this.timer.Tick += new EventHandler(this.updateImage); 
       this.timer.Start(); 
      } 
     } 

     private void updateImage(object sender, EventArgs e) 
     { 
      if (index == 1) 
      { 
       image.Source = Image2; 
       index++; 
      } 
      else 
      { 
       image.Source = Image1; 
       index--; 
      } 
     } 
    } 
} 

我爲動畫設置了1秒的間隔。

第3步：

在任何你正在努力增加這個控制規劃窗口中，添加適當的命名空間和XAML的控制，這是我的例子：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication1" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <local:Animation x:Name="animation" Width="400" Height="350"/> 
    </Grid> 
</Window> 

步驟＃ 4：

在代碼隱藏該窗口，添加以下代碼：

using System; 
using System.Windows; 
using System.Windows.Media.Imaging; 

namespace WpfApplication1 
{ 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 

      LoadSourceImages(); 
     } 

     private void LoadSourceImages() 
     { 
      animation.Image1 = new BitmapImage(new Uri(@"pictures\image1.jpg")); 
      animation.Image2 = new BitmapImage(new Uri(@"pictures\image2.jpg")); 
      animation.Initiate(); 
     } 
    } 
} 

我這樣做是爲了讓您可以從控件外部更改動畫的背景圖像。從MVVM的角度來看，這些代碼並不完美，但這是一個好的開始。先試用我的代碼，然後，如果它能正常工作，請根據您的需求進行調整。

Answer 2

建立一個UserControl。在控制中將兩個圖像重疊在一起。在後面的代碼中，使用DispatcherTimer來翻轉兩個（或更多）圖像的可見性。然後，您可以在想要顯示動畫的任何位置重複使用此控件。