代号一个动画麻烦（也在纸牌演示中）？

Question

代号一号动画发生了什么？我使用了很多，截至 12 月，我的应用程序不再工作。当我在 6 月份离开时，一切都很好（一年多以来一直如此）。

我的应用程序是一个草稿（跳棋）游戏，自 2013 年起在应用程序商店中提供。在看到 CN1 Poker 演示后，我完全重写了我的 GUI，因为我想将这些动画添加到我的应用程序中。现在发生的事情是我突然让 index out of bound 异常。我将其缩小到以下情况：

cont.addComponent(comp);
...
...
cont.getComponent(0);  <-- index out of bound exception: 0 out of 0

我在 6 月份已经使用了 newVM=true，我相信这是现在的默认设置。我试图通过添加一个

来解决问题

cont.animateLayoutAndWait(100);

在 addComponent 调用之后。这修复了索引超出范围的异常，但现在应用程序在短时间内正常工作后随机崩溃。我试过了，但一直找不到问题的根源。 CN1 发生了一些变化，因此我的代码不再有效。 （另请参阅旧论坛，搜索“草稿”，我在其中发布了我的基本设计的完整列表。）

我研究了新的 Solitaire 演示，它具有我需要的大部分动画功能。 Solitaire 的应用商店版本在我所有的 iOS/Android 设备上运行良好。一个小错误是可以拖动一组卡片，包括一些面朝下的卡片，这些卡片在拖动操作期间面朝上。也很难拿起正确数量的卡片。拖动一组卡片也会在屏幕上留下一条白色的痕迹，看起来不太好看。这也发生在模拟器中。

作为一个实验，我重新设计了我的 GUI 布局，使其与 Solitaire 代码完全相似：两层按钮，唯一的区别是我使用 GridLayout(10,10)，而 Solitaire 使用 SolitaireLayout()。这是有效的，除了一件事：如果棋子在棋盘上向下移动，它会正确地移动到其他棋子上方，但如果棋子在棋盘上移动，它会在其他棋子下方移动。

我的代码如下所示：

Button pc = (Button)piecesCnt.getComponentAt(a1);
Button to = (Button)piecesCnt.getComponentAt(a2);

piecesCnt.removeComponent(pc);
piecesCnt.addComponent(a1, createPieceButton(Piece.EMPTY_PIECE, true));
piecesCnt.removeComponent(to);
piecesCnt.addComponent(a2, pc);

piecesCnt.animateLayoutAndWait(1000);

所以按钮似乎总是按它们的 GridLayout 顺序绘制，而我希望动画（移动）按钮将在最后/顶部绘制，就像纸牌中的移动卡片一样。

这是在 SolitaireLayout 和 GridLayout 中处理动画的区别吗？如果是这样，这可以在动画逻辑中改变吗？否则我必须添加一个额外的动画层和大量开销。

在 Android 上，动画（运动）无法正常工作。因此，我决定使用当前 CN1 版本（插件 3.2.6，libs 2016-01-11）在我的设备上自行构建和测试 Solitaire 演示。我将动画更改为慢 10 倍，以便更好地了解正在发生的事情。在模拟器中，布局和动画大部分都可以正常工作，但在我的 iOS 和 Android 设备上却有很多问题。

模拟器（Windows 7、NetBeans 8.0.2）： - 我用文本替换了字体图标，因为它们丢失了。 - 但是如何访问汉堡菜单？我没有看到 3 个点，甚至没有空间。 - 有时可以拖动一组卡片，其中包含一些向下的卡片；拖动时，它们会暂时朝上翻转。 - 自动播放似乎并不总是有效。 （并非所有的动作都被播放。）

在 iOS 9.2 (iPad 4)、iOS 8.4 (iPhone 4) 上： - [?] 显示在汉堡菜单复选框中。 - 启动后，画面背景卡背跳到容器/屏幕的底部。 - 有时，在发牌动画中，最右边画面中的牌暂时朝上，而已经朝上的牌则翻转为朝下。然而，最终的交易状态是正确的。 - 撤消/重做：有时会导致牌组 0 上的牌面朝上，牌组 1 上的牌面朝下。 - 重做有时会“跳转”到新布局而不是动画。 仅限 iPhone： - 一系列自动播放动作留下了不一致的基础状态：顶牌红心-J、梅花-10、梅花-K、方块-Q；即，不同基础堆栈上的 2 张俱乐部卡。

在 Android 5.1.1 (Nexus 7) 上存在更多问题。 - 甲板上的交易动画不是一个漂亮的景象。卡片插入（滑动到）画面堆栈的底部，因此它们在其他卡片下方滑动。移动的牌应该面朝下，但通常面朝上，总是显示发给画面 1 的第一张牌。最右边画面中的牌暂时面朝上。最后，已经面朝上的牌被翻面朝下然后再翻过来。然而，最终的交易状态是正确的。 - 当连续有几个动作时，自动播放也不正确。在动画期间，几张面朝上的基础卡会暂时改变其卡值（正面）。移动的牌也会滑到基础牌下（有时会滑过，但这是个例外）。 - 完成游戏后，由于文本似乎没有叠加显示，而是显示在卡片下方（在一个大的空白区域中），而在屏幕顶部的一小部分中仅部分可见，因此完成游戏后，完成的屏幕已损坏。 - 开始新游戏经常失败，因为没有开始发牌；屏幕上显示了一个甲板和四个国王在地基上，而画面是空的。当敲击牌组时，会发一张牌并显示做得好的顺序。有时重复此操作会成功开始新游戏。

所有这一切已经花费了很多时间，但我的应用程序仍然无法再次运行，这非常令人沮丧。在这个话题上遇到了很多麻烦，即使下载了演示应用程序，使用 Codename One 构建这种类型的应用程序感觉就像在流沙上构建。请帮忙！

Answer 1

一旦遇到麻烦，您可能应该只是问一下，而不是在帖子上如此努力。是的，作为长期存在的动画问题（并行运行的动画可能发生冲突）的错误修复的一部分，我们确实进行了重大的兼容性破坏性更改。

这引入了一些冲突，但减少了设备/模拟器之间的不一致，这总是一件好事。

我们在这里宣布了这一点：https://www.codenameone.com/blog/new-animation-manager.html

现在创建便携式动画实际上要简单得多，因为所有内容都会同步以避免动画冲突，例如如果您在动画正在进行时执行Component.removeComponent()，它将被隐式添加到动画队列中，并在动画完成后执行，而不是立即执行。

将您的下一个动作推迟到我们拥有的动画之后：

form.getAnimationManager().flushAnimation(() -> doThisAfterAnimation());

更简单，没有特殊情况的全局锁。

将代码直接“移植”到新方法有点困难，但看起来您的动画逻辑依赖于耗时 1000 毫秒的动画，并且在方法返回时它完全完成，这可能并非总是如此（如 add/删除调用或其他逻辑可能会妨碍）。

过去，确保动画完成的唯一方法是将它们分开，但现在您可以使用flushAnimation 来确保所有动画都已完成。请记住，一些不是明确的动画的东西现在可能会意外地变成动画，例如如果在调用它们时正在运行动画，则添加/删除组件将变为动画...

Answer 2

很抱歉，我错过了 12 月 16 日关于新动画管理器的博文。纸牌演示日期为 10 月 8 日，我查看了 12 月 31 日的开发人员指南，所以我认为我是最新的。尽管如此，我还不清楚如何使用新的动画管理器。 Januari 11 的新开发人员指南没有说明该主题，您的答案/博客文章也不是很详细。

如果将 Solitaire 演示更新为与新的动画管理器一起使用，也会有很大帮助。

现在我的问题是：

1) 如何重写以下代码以使用新的动画管理器？这是一个真实的场景，因为我有多个步骤的动画应该连续执行。

// simplified code (background layer omitted)
public void start() {
    if(current != null){
        current.show();
        return;
    }

    Form form = new Form("Draughts 2");
    Container piecesCnt = new Container(new GridLayout(10, 10));
    for (int i=0; i<100; i++) {
        piecesCnt.addComponent(createPieceButton(piece(i), true));
    }
    form.addComponent(piecesCnt);
    form.show();

    new UITimer(() -> {
        testAnimation(piecesCnt, 0,9 , 9,0);    // moves UNDER other pieces
        testAnimation(piecesCnt, 9,0 , 0,9);    //   "   OVER    "     "
        testAnimation(piecesCnt, 1,0 , 9,8);    //   "   OVER    "     "
        testAnimation(piecesCnt, 9,8 , 1,0);    //   "   UNDER   "     "
    }).schedule(1500, false, form);
}

private void testAnimation(Container piecesCnt, int x1,int y1, int x2,int y2) {
    int a1 = 10 * y1 + x1;
    int a2 = 10 * y2 + x2;        
    Button pc = (Button)piecesCnt.getComponentAt(a1);
    Button to = (Button)piecesCnt.getComponentAt(a2);
    piecesCnt.removeComponent(pc);
    piecesCnt.addComponent(a1, createPieceButton(Piece.EMPTY_PIECE, true));
    piecesCnt.removeComponent(to);
    piecesCnt.addComponent(a2, pc);
    piecesCnt.animateLayoutAndWait(1000);
}

2) 重写这个是否也解决了一个棋子（棋子）在其他棋子下方而不是在其他棋子上移动的问题？

3) 如何在两次 testAnimation 调用之间暂停？ （显然不是睡觉。）

---

2016-01-14 更新（另见评论部分）：

我用flushAnimations尝试了两件事：

1) 使用这样的函数：

private void flushAnimations(Form f) {
    f.getAnimationManager().flushAnimation(() -> {});
}

并在连续动画之间调用它。这不起作用。

2) 嵌套的flushAnimations：

testAnimation(piecesCnt, 0,9 , 9,0);
f.getAnimationManager().flushAnimation(() -> {
    testAnimation(piecesCnt, 9,0 , 0,9);
    f.getAnimationManager().flushAnimation(() -> {
        testAnimation(piecesCnt, 1,0 , 9,8);
        f.getAnimationManager().flushAnimation(() -> {
            testAnimation(piecesCnt, 9,8 , 1,0);
        });
    });
});

这似乎适用于 iOS，但不适用于我的 Android 设备：通常在第二个动画之后屏幕闪烁并跳转到下一个状态而不是动画。除此之外，这不是一个好的解决方案。

然后我尝试了 UITimer 解决方案：

blockUI(piecesCnt);
new UITimer(() -> { testAnimation(piecesCnt, 0,9 , 9,0); }).schedule(2000, false, f);
new UITimer(() -> { testAnimation(piecesCnt, 9,0 , 0,9); }).schedule(3500, false, f);
new UITimer(() -> { testAnimation(piecesCnt, 1,0 , 9,8); }).schedule(5000, false, f);
new UITimer(() -> { testAnimation(piecesCnt, 9,8 , 1,0); }).schedule(6500, false, f);
new UITimer(() -> { 
    unblockUI(piecesCnt); 
}).schedule(8000, false, f);

private boolean blocked = false;    
private void blockUI(Container piecesCnt) {
    blocked = true;
    int n = piecesCnt.getComponentCount();
    for (int i=0; i<n; i++) {
        piecesCnt.getComponentAt(i).setDraggable(false);
    }
}
private void unblockUI(Container piecesCnt) {
    ...
}

这可行，但也不是一个非常理想的解决方案。我有一个“自动播放”功能，可以重播由 >100 个动作组成的整个游戏，每个动作由 1 个或多个动画步骤组成。用户可以通过按下停止按钮来中断这个过程。

我非常想看看如何使用新的动画处理对扑克和纸牌（自动游戏！）演示进行编码。

请花一点时间点击这个链接，看看我在说什么类型的功能：http://toernooibase.kndb.nl/opvraag/applet.php?taal=1&kl=46&Id=4579&r=10&jr=16&wed=845502。只需按下板下方的自动播放按钮 ('>')。 （我的应用也可以玩游戏，您可以将其设置为每次移动思考 1 分钟，在此期间 GUI 被阻止。）

我看到开发者指南于 1 月 13 日更新，现在有一个关于休闲游戏编程的章节/附录。这很好，尽管它列出的 CN1Poker 版本仍然不能在 Android 设备上正常工作：发牌动画显示牌大多在跳跃，有时会滑到它们的位置。 （它在模拟器和 iOS 设备上运行良好。）

你怎么能说“现在创建便携式动画实际上要简单得多”？我认为就我而言，它实际上变得更加困难。对于扑克和纸牌演示中也使用的旧方法，我需要一种替代方法：使用 animateLayoutAndWait 并且在动画期间没有添加/删除操作（也由程序逻辑确保）。

作为一个基本订阅者（3 年了），我必须使用最新的 CN1 版本，但是对于当前的 CN1 版本，我不再知道如何编码。我认为这是一个非常基本的问题，因为所有游戏都使用这样的功能。