将动态对象应用于情节提要

【问题标题】：Apply dynamic objects to storyboards将动态对象应用于情节提要
【发布时间】：2016-09-17 20:08:51
【问题描述】：

我在xaml 文件中有以下storyboard 设置

<Window.Resources>

    <Storyboard x:Key="Storyboard1" >
        <DoubleAnimationUsingPath 
            Duration="0:0:3"  
            Source="X" 

            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
            >
            <DoubleAnimationUsingPath.PathGeometry>
                <PathGeometry Figures="M1.5,-18.667014 L8.1669813,-54.00002 L31.833186,-94.666719 L60.166999,-116.33299"/>
            </DoubleAnimationUsingPath.PathGeometry>

        </DoubleAnimationUsingPath>
        <DoubleAnimationUsingPath 
            Duration="0:0:3"   
            Source="Y"

            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
            >

            <DoubleAnimationUsingPath.PathGeometry>
                <PathGeometry Figures="M1.5,-18.667014 L8.1669813,-54.00002 L31.833186,-94.666719 L60.166999,-116.33299"/>
            </DoubleAnimationUsingPath.PathGeometry>

        </DoubleAnimationUsingPath>
    </Storyboard>
</Window.Resources>

在同一个xaml 文件中，我有一个Rectangle 用作在路径上移动的对象。 

      <Rectangle x:Name="ObjectToMove" Height="31" Canvas.Left="-316.5" Stroke="Black" Canvas.Top="431.5" Width="42" Fill="#FFDA6C11" RenderTransformOrigin="0.5,0.5">

            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>

在代码中我这样做。 

 var sub1 = FindResource("Storyboard1") as Storyboard;
 sub1.Begin(ObjectToMove);

到目前为止一切正常。

问题

我不想在xaml 中静态设置ObjectToMove，而是希望能够进行更多动态设置并使用UserControl 从代码中应用它。所以我设置了一个UserControl。

而不是这个
sub1.Begin(ObjectToMove)

我这样做了

sub1.Begin(new Tray());

当我点击动画按钮时，我得到了

'[Unknown]' 属性未指向路径 '(0).(1)[3].(2)' 中的 DependencyObject。

我做错了什么？任何帮助，将不胜感激！

谢谢！

更新 #1 - 基于评论

我有这样的tray.xaml。不过不确定。 

<UserControl x:Class="Test.Tray"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         >
<Grid x:Name="LayoutRoot" Height="58" Width="50">
    <!--<Rectangle Fill="#FFD4CEC8" HorizontalAlignment="Left" Height="58" Stroke="White" VerticalAlignment="Top" Width="50"/>-->

    <Rectangle x:Name="ObjectToMove" Height="31" Canvas.Left="-316.5" Stroke="Black" Canvas.Top="431.5" Width="42" Fill="Aqua" RenderTransformOrigin="0.5,0.5" Margin="0,0,8,27">

        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>

</Grid>

更新 #2 - 基于给出的答案

目标是设置多个故事板（比如说 7 个故事板），但必须能够将对象动态应用于这些故事板。所以我必须控制每个故事板，并能够在代码中为这些故事板提供执行此操作的对象。

示例

当第一次动画开始时，一个对象（我们称之为 object#1 ）在路径上移动。当对象#1 在他的动画中只有几秒钟时，我必须能够将另一个对象（我们称之为对象#2）推送/馈送到同一个情节提要。所以现在我们在故事板上有 2 个可见的对象在路径上一个接一个地移动。就像传送带一样。两个对象之间有时间间隔（这个我会处理的，不用担心）。

注意：我将在情节提要中使用completed 方法，该方法会在第一个情节提要完成后立即触发。这样做我应该有序列相似的动画和对故事板和对象的控制。

希望上面的例子有点道理。

【问题讨论】：

  • 看来您必须确保您尝试制作动画的所有对象都需要动画属性（谈论RenderTransformGroup）。您必须以某种方式向Tray 添加一个。
  • @Sinatr 我已经更新了这个问题。我不确定这是否是正确的方法..？还有什么想法吗？非常感谢！

标签： c# wpf xaml storyboard


【解决方案1】：

抱歉，伙计，最近太忙了……不过既然是星期五，让我们尽快帮你整理一下吧，在不久的将来，我们俩都值得喝啤酒。 :)

所以...您想让您的 Storyboard 具有通用性，这样您就不必一直定位特定的命名对象，对吗？好吧，让我们通过打开整个TargetType 来接受我们的出价并让这些小虫子乖乖听话。

使用我在上一个示例中给您的示例，我将重新使用相同的路径数据等。除了注意我们已经从唯一的对象中获取了所有显式渲染声明，而是将它们隐式化。这样一来，它并不关心它击中的是哪个Rectangle...如果它是Rectangle，那么它就会被移动，因为我们已经将它全部移动到一个不可知的风格中，控制TargetType而不是@987654325 @像这样；

<Canvas x:Name="Main" Height="1025" Width="1025">
  <Canvas.Resources>

    <Style TargetType="{x:Type Rectangle}">
      <Style.Resources>
        <!-- All your base are belong to us. -->
        <Storyboard x:Key="Weeeee" RepeatBehavior="Forever">
          <DoubleAnimationUsingPath Duration="0:0:3" Source="X" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/>
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>
          <DoubleAnimationUsingPath Duration="0:0:3" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <DoubleAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/>
            </DoubleAnimationUsingPath.PathGeometry>
          </DoubleAnimationUsingPath>
        </Storyboard>
      </Style.Resources>

      <!-- Because we don't really care what the parent is or where it lives anyway do we? -->
      <Style.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource Weeeee}"/>
        </EventTrigger>
      </Style.Triggers>

      <!-- Whaaaa? We can do this?? Hell yes we can... -->
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
      <Setter Property="Rectangle.RenderTransform">
        <Setter.Value>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
          </TransformGroup>
        </Setter.Value>
      </Setter>

   </Style>

  </Canvas.Resources>

  <Canvas.RenderTransform>
    <MatrixTransform Matrix="1.25 0 0 -1.25 -197.1231 961.58875"/>
  </Canvas.RenderTransform>

  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
    <Path.Data>
      <PathGeometry Figures="m 66.611178 552.33853 c -4.36996 0.6305 -8.8334 0.97293 -13.3752 0.97293 -18.11465 0 -35.027 -5.21161 -49.34949 -14.18974 l 21.64732 -36.67733 c 8.2963 5.25686 18.12667 8.31294 28.67512 8.31294 2.7121 0 5.37755 -0.20365 7.98106 -0.59283 l 2.23539 -0.38916 c 4.72288 -0.91109 9.2226 -2.43913 13.41755 -4.49964 l 35.933612 77.65818 c -12.53504 5.94167 -26.095762 10.06571 -40.347392 12.0342 0 0 -2.27764 -21.55688 -4.54327 -42.98252 l -2.2747 0.35297 z" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Left="401" Canvas.Top="-173" >
    <Path.Data>
      <PathGeometry x:Name="path139750" Figures="m -21.311892 515.98804 c -11.7053 -15.57594 -18.6547 -34.92004 -18.6622 -55.85694 l 35.53987 0 5.06525 -0.024 c 0.63507 11.4535 4.86922 21.94 11.58023 30.3706 l 1.44647 1.7423 c 2.94008 3.3894 6.29329 6.4077 9.98888 8.9736 l -43.53754 73.76488 c -13.18956 -8.30539 -24.88746 -18.76176 -34.60186 -30.87743 0 0 17.3968 -13.23944 34.61076 -26.3386 l -1.42986 -1.75428 z" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139780" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
    <Path.Data>
      <PathGeometry Figures="m 214.75854 460.1016 94.92962 0 0 69.86866 -94.92962 0 0 -69.86866 z" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139784" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
    <Path.Data>
      <PathGeometry Figures="m 211.64803 529.825 -36.87191 0 -62.32503 -69.72236 100.95576 0 0 69.74499 -1.75882 -0.0226 z" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Fill="#FFD3BC5F" Canvas.Top="-173" Canvas.Left="401">
    <Path.Data>
      <PathGeometry x:Name="path139798" Figures="m -41.482092 460.131 -43.5377 0 c 0.6744 30.93022 11.4414 59.36853 29.1278 82.17137 l 33.3799 -25.40184 c -11.9001 -15.82789 -18.9641 -35.4887 -18.97 -56.76953" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139802" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
    <Path.Data>
      <PathGeometry Figures="m 139.82292 494.54117 c -13.01467 -14.5593 -25.97803 -29.06131 -30.40076 -34.00892 0 0 -2.72123 28.49563 -29.566602 43.70507 l 17.54746 37.92328 c 19.158502 -10.35383 34.278952 -27.22704 42.419902 -47.61943" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139806" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
    <Path.Data>
      <PathGeometry Figures="m 98.037008 543.53024 17.776782 38.41802 c 23.1211 -11.42479 42.62202 -29.06882 56.29587 -50.76297 l 0.18403 -0.31676 c 0 0 -15.53072 -17.37553 -31.34655 -35.06934 -8.34762 20.43762 -23.62341 37.33197 -42.910132 47.73105" FillRule="nonzero"/>
    </Path.Data>
  </Path>
  <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139810" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
    <Path.Data>
      <PathGeometry Figures="m 53.235488 554.82033 c -18.39362 0 -35.56859 -5.28853 -50.11595 -14.3994 l -21.08756 35.73002 c 21.04842 12.78086 45.75185 20.14348 72.17809 20.14348 5.74697 0 11.40815 -0.36201 16.97265 -1.03931 l -4.37747 -41.4213 c -4.43321 0.63805 -8.96144 0.98651 -13.56976 0.98651" FillRule="nonzero"/>
    </Path.Data>
  </Path>

  <!-- Trajectory -->
  <Path Data="M16.276999,1 L16.276999,5.627983 16.061945,5.9611419 C7.7738004,19.508389 3.0009999,35.41163 3.000999,52.422002 3.0009999,101.90672 43.392303,142.022 93.217499,142.022 129.02936,142.022 159.96765,121.29839 174.53767,91.267304 L175.34665,89.490136 396.375,89.490136 396.375,91.890122 176.08318,91.890122 175.9278,92.236054 C161.06975,123.27256 129.51982,144.69 93,144.69 42.189804,144.69 1,103.23167 1,52.090218 1,34.510346 5.8671546,18.07467 14.319149,4.0738615 z" Fill="#7F000000" Height="145.69" Canvas.Left="360.056" Stretch="Fill" Stroke="Red" StrokeThickness="2" Canvas.Top="236.648" Width="397.375"/>

  <!-- Because I like to move it, move it ~~ Add as many as you like, however you like, from wherever you like. -->
  <Rectangle Fill="LightBlue" Height="36" Stroke="Black" Width="41" Canvas.Left="355" Canvas.Top="223.667"/>

</Canvas>

您会注意到我留下的大部分内容与前面的示例相同......现在，它并不关心有多少 Rectangle 对象。或者何时或如何添加它们。当一个出现时，我们像老板一样移动它。

希望这对您有所帮助，祝您周末愉快，干杯！ :)

哦，PS，没有必要在每个路径上都有那个 xmlns 命名空间。如果你想稍微清理一下你的东西，你可以通过改变 this 的每个实例，用一行来完成同样的事情；

<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
  <Path.Data>
    <PathGeometry Figures="m 66.611178 552.33853 ... z" FillRule="nonzero"/>
  </Path.Data>
</Path>

到这个；

<Path Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6" Data="m 66.611178 552.33853 ..... z"/>

...除非有什么特别的理由让它这么长？

另一个提示是，如果您不需要转换组，只需点击特定的转换，例如 Translate。

附录：

假设您想在 Style+Elsewhere 中使用该样式。它现在的构建方式只是为了快速模块化示例。但是，例如，您可以将整个内容放入资源字典中，并在 x:Key 中提供以供参考。所以如果你把它扔到 Resource 字典中，那么第一行就会变成这样；

<Style x:Key="NiftyRectangleAnim" TargetType="{x:Type Rectangle}">

所以现在你可以将它放在一个地方，假设你想将它应用到用户控件上的所有 Rectangle 实例。那么你只需添加这样的东西;

<UserControl.Resources>
   <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource NiftyRectangleAnim}"/>
</UserControl.Resources>

然后，该 UserControl 上可用的所有 Rectangle 都将继承该样式并进行动画处理。

或者说你只是想使用故事板，然后你会把它从样式中拉出来，然后把它放在其他可以在层次结构中引用的资源中。就像（伪）你可以把这个位扔到需要继承的任何地方；

<Blah.Resources>
   <Storyboard x:Key="Weeeee"............./>
</Blah.Resources>

并以您使用的 Storyboard.Begin 方式应用。您仍然会将样式的其余部分应用于 Rectangle 对象（不包括 Style.Triggers），因此它们都将获得必要的 Transform 声明，但故事板不一定必须包含在 Style 模板中。

希望更有意义，这是一个有点难以解释的概念，但不，你不一定必须在 Style.Resources 中有故事板，我只是这样做了，所以你可以复制/粘贴整个内容在一个窗口，看到它去。不过，您需要对使用资源/继承层次结构和您尝试做的事情有一定的经验。

【讨论】：

  • 谢谢克里斯。您的回答似乎很有希望，尽管如果故事板在 astyle 的范围内，我无法找到它。我试过这个 `var sub1 = FindResource("Storyboard1") as Storyboard;` 我已经更新了这篇文章，希望能对我想要实现的目标有所了解。谢谢！
  • @user3641381 您可以将您的故事板放在您需要的任何地方，这样他们就可以在所需的上下文中被它击中。当您添加与 TargetType 匹配的项目时，应该应用 Storyboard。在这种情况下，如果您在第一个之后添加了另一个 Rectangle，比如 2s，那么它应该在第一个之后 2s，依此类推。
  • 不确定“你把故事板放在任何地方......”我不能把它放在外面 它不会应用动画......它需要在
  • @user3641381 因此，Storyboard 恰好位于 Style.Resources 中，因为当 Style.Triggers 触发时，由于继承层次结构，它可以立即找到它。但是，您可以在容器级别、父窗口、项目、解决方案中使用相同的 Storyboard，因为它是静态资源。其实在这里等一下，让我更新答案，一秒钟......
  • 太棒了，你整理好了吗？
【解决方案2】：

由于您的情节提要动画没有目标，因此它会尝试为根对象上的TranslateTransform.Y 设置动画，但它没有设置RenderTransform 属性。为了在新的 Tray 对象上运行情节提要，您需要将其编码为：

sub1.Begin(new Tray().ObjectToMove);

这将在新托盘中的 ObjectToMove 对象上而不是在托盘本身上运行故事板。

【讨论】：

  • 我认为他的总体目标是使行为适用于目标类型而不是特定的命名对象，除非我读错了。
  • @ChrisW。我想既然 OP 试图这样做sub1.Begin(new Tray()); 他可以保持故事板原样。但话又说回来，我可能读错了，错过了他的意图。
  • 呃，我没有任何使用托盘的经验，所以如果我只是摸索意图，我不会感到惊讶。哦，好吧，我相信他会让我们知道一种或另一种方式，哈哈。周末愉快！
  • @evanb 我也试了一下，但什么也没发生..？有任何想法吗？谢谢！
猜你喜欢
  • 2019-09-12
  • 2015-04-17
  • 1970-01-01
  • 2020-11-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode