对于过渡从嵌套国嵌套状态（见图表）最佳实践 [英] Best Practice for Transitioning From Nested State to Nested State (see diagram)

问题描述

我试图总结我的脑海各地最好的方式来实现在一个单线程的编程语言（动作脚本）嵌套的状态转换。说我有这样的行为，树形结构：

I am trying to wrap my mind around the best way to implement nested state transitions in a single threaded programming language (Actionscript). Say I have a structure like this behavior tree:

现在想象，每个叶节点是在网站上的一个目标点，就像在一个画廊，或嵌套在后视图嵌套在一个页面视图评论的图像......而我们的目标是能够运行动画从叶节点过渡到叶节点，由动画出previous树（从底部到顶部），和在当前树动画（从上到下）。

Now imagine that each leaf node is a destination point on a website, like an image in a gallery, or a comment nested in a post view nested in a page view... And the goal is to be able to run animated transitions from leaf node to leaf node, by animating out the previous tree (from bottom to top), and animating in the current tree (from top to bottom).

所以，如果我们在底部，最左边的叶节点，我们想去的底部最右边的叶结点，我们就必须：

So, if we were at the bottom-left-most leaf node, and we wanted to go to the bottom-right-most leaf node, we would have to:

• 在转换出左下节点
• 在完成（比如动画的第二个后），转换出它的父，
• 在完成后，转换出它的父
• 在完成后，转型最右边的父母
• 在完成后，转型最右边的孩子
• 在完成后，过渡叶

我的问题是：

如果你想像每个节点作为HTML视图（其中叶子是'谐音'，借用轨术语），或MXML的观点，在这里你嵌套子组件，你不一定知道巢从应用程序根目录级别，什么是过渡动画效果如上所述？最好的办法

If you imagine each of these nodes as HTML views (where the leaves are 'partials', borrowing the term from rails), or MXML views, where you're nesting sub components, and you don't necessarily know the nest levels from the application root, what is the best way to animate the transition as described above?

的一种方法是将所有可能的路径全局，然后说的应用，转换出此路径，过渡在此路径。这工作，如果应用程序是非常简单的。这就是盖亚这样做，一个ActionScript框架。但是，如果你希望它能够转换入/出任意嵌套的路径，你不能存储，在全球范围，因为：

One way is to store all possible paths globally, and then to say "Application, transition out this path, transition in this path". That works if the application is very simple. That's how Gaia does it, an Actionscript framework. But if you want it to be able to transition in/out arbitrarily nested paths, you can't store that globally because:

1. 在动作脚本无法处理所有的处理
2. 似乎并不像良好的封装

所以这个问题可以改写为，你怎么动画出最左边的叶节点，它的父母，从叶开始，和动画在最右边的叶结点，从根？的其中存储的信息（什么过渡进出）？

So this question can be reworded as, how do you animate out the left-most-leaf node and it's parents, starting from the leaf, and animate in the right-most-leaf node, starting with the root? Where is that information stored (what to transition in and out)?

另一种可能的解决办法是只说应用程序，转换出previous子节点，而当这是完整的，在当前的子节点的过渡，这里的子节点是应用程序根的直接子。然后应用程序根目录（它有两个子节点，它们都有两个子节点）的最左边的孩子，会检查它是否在正确的状态（如果它的孩子们转变了）。如果不是，它会叫transitionOut（）他们......这样一来，一切都将被完全封装。但似乎这会是pretty的处理器密集型的。

Another possible solution would be to just say "Application, transition out previous child node, and when that's complete, transition in the current child node", where the "child node" is the direct child of the application root. Then the left-most child of the application root (which has two child nodes, which each have two child nodes), would check if it's in the right state (if it's children are 'transitioned out'). If not, it would call "transitionOut()" on them... That way everything would be completely encapsulated. But it seems like that'd be pretty processor intensive.

你怎么看？你有什么其他选择？或者可以或分层状态机，描述他们如何你点我到任何好的资源 AI行为树木切实实现异步状态转换：

What do you think? Do you have any other alternatives? Or can you point me to any good resources on AI Behavior Trees or Hierarchical State Machines that describe how they practically implement asynchronous state transitions:

• 从哪里他们称之为transitionOut的对象？从根或特定的孩子？
• 在哪里储存状态？全球范围内，在当地？范围是什么定义什么叫transitionIn（）和transitionOut（）？

我看到/阅读AI和状态机很多文章/书，但我还没有找到的东西，描述他们实际上如何实现台异步/动画过渡在一个复杂的MVC的面向对象的项目，享有100S /图形参与行为树。

I have seen/read many articles/books on AI and State Machines, but I have yet to find something describing how they actually implement asychronous/animated transitions in a complex MVC Object Oriented Project with 100s of Views/Graphics participating in the behavior tree.

该不该叫的转换从父最对象，或者从孩子？

Should I call the transitions from the parent-most object, or from the child?

下面是一些事情我已经研究：

Here are some of the things I've examined:

• 的体系结构游戏行为AI：行为多队列
• 分层状态机 - 设计
的根本重要途径
• 编程游戏AI通过实例
• 目标驱动的代理行为
• <一个href="http://tv.adobe.com/watch/360flex-conference/advanced-state-management-by-troy-gardner">Advanced国家管理特洛伊加德纳
• TroyworksAS3 COGS图书馆
• 流行的方法，以行为树设计
• 大厦事件驱动的条件异步感觉系统

• An Architecture for Game Behavior AI: Behavior Multi-Queues
• Hierarchical State Machines — a Fundamentally Important Way of Design
• Programming Game AI by Example
• Goal-Driven Agent Behavior
• Advanced State Management by Troy Gardner
• Troyworks' AS3 COGS Library
• Popular Approaches to Behavior-Tree Design
• Building Event-Driven Conditions for an Asynchronous Sensory System

虽然这不一定是AI的问题，也有描述如何嵌套状态架构应用到网站的任何其他资源;这些是最​​接近的东西。

While this is not necessarily an AI problem, there are no other resources describing how to apply nested state architectures to websites; these are the closest things.

另一种方式来字的问题：你如何播放状态更改应用程序？你在哪里保持事件监听器？你如何查找查看时，它的任意嵌套的动画？

Another way to word the question: How do you broadcast state changes to the application? Where do you keep the event listeners? How do you find what view to animate when it's arbitrarily nested?

注：我不是想建立一个游戏，只是想打造的动画网站

Note: I am not trying to build a game, just trying to build animated websites.

推荐答案

我会尽力暗示一种可能的方法之前简化问题。该转换似乎与大家的意见，而不是模型。如果我跳过过渡，直接进入一些其他的叶节点，应用程序仍然有效，但没有视觉提示，为用户。所以，我建议你用一个视图 - 控制器专为保持当前分支的各种视图的转换。

I'll try to simplify the problem before suggesting a possible approach. The transitions seem related to the views, and not the model. If I were to skip the transitions and go straight to some other leaf node, the application still works but there is not visual clue for the users. So I'd suggest you use a view-controller specifically to hold the current branch and the transitions of various views.

这可能是一个更好的办法，以两个类型的转换效果分成了一种堆栈，其中一个流行的过渡是回到一个previous节点，而推动转型前进中的层次结构。苹果采用了类似的技术用于管理导航应用的<一个href="http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UINavigationController_Class/Reference/Reference.html"相对=nofollow>导航视图控制器。它基本上保持一叠视图控制器，该用户随后到达的特定节点。当用户回到过去，上面的项目被弹出堆栈，用户看到的previous项目。如果用户进入更深层次结构中，一个新的视图控制器被压入堆栈。

It's probably a better approach to split the two types of transitions into a sort of stack where a pop transition is to go back to a previous node, while a push transition goes forward in the hierarchy. Apple uses a similar technique to manage navigational applications using a navigation view controller. It basically maintains a stack of view controllers that the user followed to get to a particular node. When a user goes back, the top item is popped off the stack, and the user sees the previous item. If the user goes deeper in the hierarchy, a new view controller is pushed onto the stack.

您仍需要一个全球性的方式重新present在一个轻量级的方式层次结构，而导航堆栈只保存当前可见的分支下来的叶节点。

You would still need a global way to represent the hierarchies in a flyweight manner, while the navigation stack only stores the currently visible branch down to the leaf node.

如果一个用户从一个叶子结点跑到另外，当前栈将被弹出高达共同父。那么全球树状结构将被要求从那个父高达新叶节点的路径。节点的此路径被推入当前导航堆栈，并且每个项目被推动时，所述过渡被示出。

If a user went from one leaf node to another, the current stack will be popped out upto the common parent. Then the global tree structure will be asked to get the path from that parent upto the new leaf node. This path of nodes is pushed into the current navigation stack, and as each item is pushed, the transition is shown.

在一个简单的算法，有会是这两个数据结构和办法让整支包含叶节点：

In a simple algorithm, there'd be these two data structures and a way to get the entire branch that contains leaf node:

1. 树的全球再presentation
2. 一叠当前分支

开始：

stack = []
tree = create-tree()

算法：

// empty current branch upto the common ancestor, root node if nothing else
until stack.peek() is in leaf-node.ancestors() {
    stack.pop() // animates the transition-out
}
parent = stack.peek();
// get a path from the parent to leaf-node
path = tree.get-path(parent, leaf-node)
for each node in path {
    stack.push(node) // animates the transition-in
}

更新

整个应用程序可以有一个单一的导航控制器，或多个这样的控制器。导航控制器只需要知道有哪些暴露出某些操作树。所以，你可以创建与这些操作的界面，让具体子类实现的。

The entire application could have a single navigation controller, or multiple such controllers. A navigation controller only needs to know that there is a tree which exposes certain operations. So you could create an interface with those operations and let concrete subclasses implement that.

我只能想到两个操作需要被暴露了的（伪Java语法）：

I can only think of two operations that would need to be exposed (pseudo-Java syntax):

interface Tree {
    List<Node> getAncestors(node);
    List<Node> findPath(ancestorNode, descendantNode);
}

这应该提供足够的抽象，以保持导航控制器戳全局树结构中。把它带到一个新的水平，使用依赖注入，以便树对象被注入到导航控制器，提高了可测试性和彻底打破了树的连接。

That should provide sufficient abstraction to keep the navigation controller poking inside the global tree structure. To take it to the next level, use dependency injection so the tree object is injected into the navigation controller, improving testability and breaking the tree connection completely.

这篇关于对于过渡从嵌套国嵌套状态（见图表）最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！