Android:位图的补间动画 [英] Android: tween animation of a bitmap

问题描述

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

My app implements its own sprites by calling the following in my view's onDraw() method:

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

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

The app is a physics simulation, and so far this has worked out great. But now I'd like to enhance the animation by morphing between images for the sprites when certain events occur.

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

For example- when a collision happens, I would like to play an animation of an explosion. My idea was to replace the usual sprite bitmap with that of an explosion PNG, and use Android "tween animation" to make the explosion grow larger.

但 Android 补间动画示例假定您在 XML 配置中静态定义了一个 ImageView.

But the Android tween animation example assumes that you have an ImageView defined somewhere statically in your XML configuration.

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

Is there a way to animate a bitmap as drawn in onDraw() using tween animation? Or do I need to convert my sprites to use some sort of ImageView? If the latter, can you point me to an example of proper sprite animation in Android?

谢谢

推荐答案

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

I built a generic Tween Engine in java that you can use to animate anything, including your sprites. It's optimized for Android and games because it does not allocate anything at runtime, to avoid any garbage collection. Moreover, Tweens are pooled, so really: no garbage collection at all!

您可以在此处查看完整的演示a> 作为 android 应用程序，或 此处 作为 WebGL html页面(需要 Chrome)！

You can see a complete demo here as an android application, or here as a WebGL html page (requires Chrome)!

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

All you have to do is implement the TweenAccessor interface to add Tween support to all your sprites. You don't even have to change your Sprite class, just create a SpriteTweenAccessor class that implements TweenAccessor<Sprite>, and register it to the engine at initialization. Just have a look at the GetStarted wiki page ;)

http://code.google.com/p/java-universal-吐温引擎/

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

I'm also building a visual timeline editor that can be embedded in any application. It will feature a timeline similar to the Flash authoring tool and Expression Blend (a Silverlight dev tool).

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

The whole engine is heavily documented (all public methods and classes have detailed javadoc), and the syntax is quite similar to Greensock's TweenMax/TweenLite engine that is used in the Flash world. Note that it supports every Robert Penner easing equation.

// 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);

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

Of course, no tween engine would be complete without providing a way to build powerful sequences :)

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();

我希望你能相信:) 有很多人已经在他们的游戏或安卓 UI 动画中使用了这个引擎.

I hope you're convinced :) There are a lot of people already using the engine in their games or for android UI animation.

这篇关于Android:位图的补间动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！