在libgdx中使用Universal Tween Engine进行增量补间动画？

Question

我有一个精灵正在循环播放一个缓动动画，就像一个空闲动画。我想添加另一个缓动动画，使它们同时播放。(例如，如果我的第一个缓动动画将其向上移动，而我的第二个缓动动画将其向右移动，我希望它向上和向右移动。)

但是每当我播放我的第二个缓动动画时，它似乎完全覆盖了第一个。

我做错了什么？

这是我的代码：

Tween.to(sprTurtle, SpriteAccessor.POS_XY, 0.4f)
    .waypoint(posTurtle[0] + (20 * density), posTurtle[1] + (20 * density))
    .target(posTurtle[0] + (30 * density), posTurtle[1])
    .ease(Quad.INOUT)
    .path(TweenPaths.catmullRom)
    .repeatYoyo(Tween.INFINITY, 0)
    .delay(0.1f)
    .start(tweenManager);
Tween.to(sprTurtle, SpriteAccessor.POS_XY, 1f)
    .target(50, 50)
    .repeat(Tween.INFINITY, 0)
    .start(tweenManager);  

- Steven Schoen

---

这个链接可能值得一看。它是一个用于在libgdx中创建缓动动画的可视化编辑器。我个人没有使用过，但它看起来很有前途。 - Michael Celey

Answer 1

这段代码会使得位于ViewContainer cont2中的图片首先从(0,100)移动到(100,100)，然后再按顺序进行移动。

        Timeline.createSequence()
        .push(Tween.set(cont2, ViewContainerAccessor.POSITION_XY))
        .push(Tween.to(cont2, ViewContainerAccessor.POSITION_XY, 0.5f).target(0,100))
        .push(Tween.to(cont2, ViewContainerAccessor.POSITION_XY, 0.5f).target(100,100))
        .start(tweenManager);

在我的代码中，图片先向下移动，然后向右移动。

也许在你的代码中应该像这样：

    Timeline.createSequence()
    .push(Tween.to(sprTurtle, SpriteAccessor.POS_XY, 0.4f)
        .waypoint(posTurtle[0] + (20 * density), posTurtle[1] + (20 * density))
        .target(posTurtle[0] + (30 * density), posTurtle[1])
        .ease(Quad.INOUT)
        .path(TweenPaths.catmullRom)
        .repeatYoyo(Tween.INFINITY, 0)
        .delay(0.1f))
    .push(Tween.to(sprTurtle, SpriteAccessor.POS_XY, 1f)
        .target(50, 50)
        .repeat(Tween.INFINITY, 0))
    .start(tweenManager);

如果你想让两张图片同时移动，你需要创建两个ViewContainers，这样它们才能同时移动。

在官方演示apk的MainActivity.java中，你可以看到以下代码。我添加了LinearLayout genueHamster2和VieewContainer cont2来同时移动两张图片。

  private LinearLayout genueHamster;
  private LinearLayout genueHamster2; // I add another LinearLayout so we could have
                                      // two images at the same time.

  @Override public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Setup it
    // a linearlayout in activity_main.xml
    genueHamster = (LinearLayout) findViewById(R.id.main_cont);
    // add for second image        
    genueHamster2 = (LinearLayout) findViewById(R.id.main_cont_2);
    setTweenEngine();
  }

  public void startAnimation(View v) {

    // Create object which we will animate
    ViewContainer cont = new ViewContainer();
    // Add a new container for the second image.
    ViewContainer cont2 = new ViewContainer();
    // pass our real container
    cont.view = genueHamster;
    // put it into the second container
    cont2.view = genueHamster2;

    // /start animations

    // Now you can have two images moving at the same time.
    Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f)
            .target(500, 0).ease(Bounce.OUT).delay(1.0f)
            .start(tweenManager);               

    Tween.to(cont2, ViewContainerAccessor.POSITION_XY, 0.5f)
            .target(0, 500)
            .ease(Bounce.OUT)
            .delay(1.0f)
            .repeatYoyo(2, 0.5f)
            .start(tweenManager);

  }

- cwhsu

---

问者正在寻找同时执行两个缓动的方法，而不是按顺序执行。如果您认为不可能，请考虑修改以使您的缓动同时发生，或者至少解释为什么不可能。 - Michael Celey

Answer 2

你要找的是 Timeline.createParallel 方法。

- Will Kru