用故事板动态动画 [英] Dynamic animation using storyboards

问题描述

我开发使用MVVM模式在WPF应用程序。
我显示一个面向图形，节点和链接（参见下图）。

I develop an application in WPF using the MVVM pattern. I am displaying an oriented graph, with nodes and links (see following picture).

<一个href=\"http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26\">http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26

，用户可以将来自一个小区到另一降的节点。当用户滴的一个节点，其位置改变到对齐在网格中。我想要做的，是动画节点时的位置对准程序中进行调整。

The user can drag and drop the nodes from one "cell" to another. When the user drops a node, its position is changed to align it in the grid. What I want to do, is to animate the node when its position is adjusted during the alignment routine.

节点，链路和分隔符是一个ItemsControl显示所有项目。其再presentation被控制的一些的DataTemplates，以及它们与样式位置

The nodes, links and separators are all items displayed in an ItemsControl. Their representation is controlled with some DataTemplates, and their position with Styles.

我在做什么是以下内容：

What I am doing is the following :

private void Align() {
    // Computations...
    TX = ... //Target X is set
    TY = ... //target Y is set
    X = TX;
    Y = TY; // X and Y setters fire PropertyChanged
}

<Style x:Key="NodeViewStyle">
    <Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/>
    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/>

我想要做的是以下内容：

What I want to do is the following :

private void Align() {
    // Computations...
    TX = ...
    TY = ... //TX and TY setters fire PropertyChanged
}

<Style x:Key="NodeViewStyle">
    <Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/>
    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding State}" Value="UPDATEPOS">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="{Binding TX}" Duration="0:0:1"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>

但是，这在运行时不工作，因为我不能结合到我的DoubleAnimation是产权（这是一个可冻结）。

But this does not work at runtime, since I cannot bind to "To" property of my DoubleAnimation (it's a Freezable).

什么是做这样一个动态的动画simpliest方式吗？通过一个定时器直接在视图模型动画的X的属性？

What is the simpliest way of doing such a dynamic animation ? Animating the "X" property through a timer directly in the viewmodel ?

推荐答案

我解决了类似的问题，从0到1，然后结合所期望的目标属性，以辅助一个具有值转换器的动画辅助（附后）属性。
它是否有道理？

I solved a similar problem animating an ancillary (attached) property from 0 to 1 and then binding the desired target property to the ancillary one with a value converter. Does it makes sense?

这篇关于用故事板动态动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！