Android：位图的补间动画

Question

我的应用程序通过在视图的 onDraw() 方法中调用以下内容来实现自己的精灵：

  canvas.drawBitmap(sprite.getBitmap(), sprite.getX(), sprite.getY(), null);

该应用程序是一个物理模拟，到目前为止效果很好。但现在我想通过在发生某些事件时在精灵图像之间进行变形来增强动画。

例如，当发生碰撞时，我想播放爆炸动画。我的想法是用爆炸 PNG 替换通常的精灵位图，并使用 Android“补间动画”使爆炸变大。

但是 Android 补间动画示例 假设您有一个ImageView 在 XML 配置中静态定义。

有没有办法使用补间动画对 onDraw() 中绘制的位图进行动画处理？或者我是否需要转换我的精灵以使用某种ImageView？如果是后者，你能给我举一个 Android 中正确的精灵动画的例子吗？

谢谢

Answer 1

我用 java 构建了一个通用的 Tween 引擎，你可以用它来制作任何东西的动画，包括你的精灵。它针对 Android 和游戏进行了优化，因为它不会在运行时分配任何内容，以避免任何垃圾收集。此外，Tweens 是池化的，所以真的：根本没有垃圾收集！

您可以在此处查看完整的演示：一个 Android 应用程序，或此处 作为 WebGL html 页面（需要Chrome）！

您所要做的就是实现TweenAccessor接口，为您的所有精灵添加Tween支持。您甚至不必更改 Sprite 类，只需创建一个实现 TweenAccessor 的 SpriteTweenAccessor 类，并在初始化时将其注册到引擎即可。只需查看 GetStarted wiki 页面即可；)

http://code.google.com/p/java-universal-tween- engine/

我还在构建一个可以嵌入到任何应用程序中的可视化时间线编辑器。它将具有类似于 Flash 创作工具和 Expression Blend（Silverlight 开发工具）的时间线。

整个引擎有大量文档（所有公共方法和类都有详细的 javadoc），并且语法与 Flash 世界中使用的 Greensock 的 TweenMax/TweenLite 引擎非常相似。请注意，它支持每个 Robert Penner 缓动方程。

// Arguments are (1) the target, (2) the type of interpolation, 
// and (3) the duration in seconds. Additional methods specify  
// the target values, and the easing function. 

Tween.to(mySprite, Type.POSITION_XY, 1.0f).target(50, 50).ease(Elastic.INOUT);

// Possibilities are:

Tween.to(...); // interpolates from the current values to the targets
Tween.from(...); // interpolates from the given values to the current ones
Tween.set(...); // apply the target values without animation (useful with a delay)
Tween.call(...); // calls a method (useful with a delay)

// Current options are:

yourTween.delay(0.5f);
yourTween.repeat(2, 0.5f);
yourTween.repeatYoyo(2, 0.5f);
yourTween.pause();
yourTween.resume();
yourTween.setCallback(callback);
yourTween.setCallbackTriggers(flags);
yourTween.setUserData(obj);

// You can of course chain everything:

Tween.to(...).delay(1.0f).repeat(2, 0.5f).start();

// Moreover, slow-motion, fast-motion and reverse play is easy,
// you just need to change the speed of the update:

yourTween.update(delta * speed);

当然，如果不提供构建强大序列的方法，任何补间引擎都是不完整的:)

Timeline.createSequence()
    // First, set all objects to their initial positions
    .push(Tween.set(...))
    .push(Tween.set(...))
    .push(Tween.set(...))

    // Wait 1s
    .pushPause(1.0f)

    // Move the objects around, one after the other
    .push(Tween.to(...))
    .push(Tween.to(...))
    .push(Tween.to(...))

    // Then, move the objects around at the same time
    .beginParallel()
        .push(Tween.to(...))
        .push(Tween.to(...))
        .push(Tween.to(...))
    .end()

    // And repeat the whole sequence 2 times
    // with a 0.5s pause between each iteration
    .repeatYoyo(2, 0.5f)

    // Let's go!
    .start();

我希望你相信:)有很多人已经在他们的游戏或 Android UI 动画中使用该引擎。

Answer 2

您可以在没有来自 xml 文件的 ImageView 的情况下执行补间动画，但它确实需要是视图层次结构中的一个 View。

您在 Canvas 中进行的绘图对于视图层次结构来说是不透明的。我认为您有两个选择：

1. 在自定义视图之上覆盖 ImageView 并使用补间动画对其进行动画处理。
2. 使用 Canvas 绘制例程来制作爆炸动画。

我想说，考虑到您的应用程序中可能已经有一个动画线程，使用 Canvas 例程及其 maxtrix 转换是有意义的。

Answer 3

您可以在 Adob​​e Flash 中绘制爆炸并为其设置动画，使用 swfSheet< 导出精灵图像/a> 或类似的，然后使用 框架动画

Answer 4

如果您正在创建游戏，您可以使用向量（数学）来更新图像的位置，然后使用 getX 和 getY 进行绘制。您应该以某种速度在某个方向上迭代和更新该向量。

这些向量不是原生的（游戏 API 是原生的）。

您需要有一个循环来迭代和更新位置，然后重绘。

对于游戏来说，使用 ImageView 等组件来制作动画并不是一个好主意。他们需要系统随着时间的推移一次又一次地计算所有布局。