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

问题描述

我使用MVVM模式在WPF中开发应用程序。
我正在显示一个带节点和链接的定向图（见下图）。

http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26

用户可以将节点从一个单元拖放到另一个。当用户删除一个节点时，它的位置被改变以使其在网格中对齐。我想做的是在对齐程序中调整位置时对节点进行动画处理。

节点，链接和分隔符都是ItemsControl中显示的项目。他们的表现是由一些DataTemplates控制，他们的位置与Styles。

我在做什么是以下：

  private void Align（）{
 //计算... 
 TX = ... //目标X设置
 TY = .. // target Y is set 
 X = TX; 
 Y = TY; // X和Y setters fire PropertyChanged 
} 
 
< Style x：Key =NodeViewStyle> 
< Setter Property =Canvas.LeftValue ={Binding X，Mode = TwoWay}/> 
< Setter Property =Canvas.TopValue ={Binding Y，Mode = TwoWay}/> 
  

我想做的是以下内容：

  private void Align（）{
 //计算... 
 TX = ... 
 TY = ... // TX和TY setters fire PropertyChanged 
} 
 
< Style x：Key =NodeViewStyle> 
< Setter Property =Canvas.LeftValue ={Binding X，Mode = TwoWay}/> 
< Setter Property =Canvas.TopValue ={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的To属性这是一个Freezable）。

做这样一个动态动画的最简单的方法是什么？通过直接在viewmodel中的定时器来动画化X属性？

解决方案

我解决了类似的问题，动画化了附件（附件）属性从0到1，然后使用值转换器将期望的目标属性绑定到辅助目标属性。
这是否有意义？

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

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.

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>

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

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

解决方案

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