Question

我想在WPF中创建一个简单的flip-book animation。翻书动画只是在多个图像之间翻转（例如，经典动画或动画gif）。注意：我不尝试创建Page Curl animation。

图像集来自List集合，在编译时不知道。

因此，我认为从一个绑定到我的图像列表的ItemsControl开始是好的，然后以某种方式使用故事板动画循环它们。但是，我遇到了很多问题，感觉可能有更好的方法。

以前是否有人这样做过，或者有解决方案的想法？谢谢！

Answer 1

使用DispatcherTimer可能更容易。故事板适用于动画属性，但它们对list和ItemsControls的效果不佳。

我已经测试了以下方法，它似乎运行良好。首先将每个图像放入具有Visibility属性的视图模型包装器中。

public class ImageViewModel : INotifyPropertyChanged
{
    public string ImagePath { get; set; }

    public Visibility Visibility
    {
        get { return _vis; }
        set
        {
            _vis = value;
            RaisePropertyChanged("Visibility");
        }
    }
    private Visibility _vis = Visibility.Collapsed;

    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string prop)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(prop));
    }
}

因此，您的主视图模型将包含图像视图模型列表：

public class FlipBookViewModel
{
    public List<ImageViewModel> FlipBookImages { get; private set; }

    public FlipBookViewModel(string[] imagePaths)
    {
        FlipBookImages = imagePaths.Select(imagePath => new ImageViewModel 
           { ImagePath = imagePath }
        ).ToList();
    }
}

然后，在页面中，只需使用Grid作为ItemsPanel将其置于彼此之上：

<ItemsControl ItemsSource="{Binding FlipBookImages}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImagePath}" Visibility="{Binding Visibility}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

要启动翻书，请启动DispatcherTimer。像这样：

var dispatcherTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(100) };
int i=0;
dispatcherTimer.Tick += (sender, args) => {
    if (i>0) 
        FlipBookImages[i-1].Visibility = Visibility.Collapsed;
    if (i>=FlipBookImages.Count) 
       dispatcherTimer.Stop();
    else 
       FlipBookImages[i].Visibility = Visibility.Visible;
    i++;
};
dispatcherTimer.Start();

使用列表的动画动画

1 个答案: