翻译：将曲线路径与缩放动画应用于 Android。

Question

我想在缩放的同时将ImageView沿着曲线平移。

我已经阅读了多篇文章，例如https://dev59.com/zmsy5IYBdhLWcg3wvgdl#30254927，但我无法弄清如何计算我的路径变量。

此外，https://dev59.com/Cl8e5IYBdhLWcg3wssIV#26591870中提到Android 5提供了基本的插值曲线，但它们似乎没有效果。

我的当前代码是：

View view;
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
        animator.setDuration(5000); // 5 seconds duration from 0 to 1
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
        {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = ((Float) (animation.getAnimatedValue()))
                        .floatValue();
                // Set translation of your view here. Position can be calculated
                // out of value. This code should move the view in a half circle.
                img_fullscreen_drone.setTranslationX((float)(150.0 * Math.sin(value*Math.PI)));
                img_fullscreen_drone.setTranslationY((float)(150.0 * Math.cos(value*Math.PI)));
                img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
                img_fullscreen_drone.animate().scaleX(0.5f).scaleY(0.5f).setDuration(5000).start();

            }
        });

        animator.start();

这将我的视图在弧线上进行翻译，但在翻译完成后开始缩放，我希望缩放和沿曲线平移同时发生。

任何帮助将不胜感激

提前致谢

- user2229100

Answer 1

你的原始代码在每一帧动画中重新启动了缩放动画，这导致了图像的平移动画。你只需要将缩放动画代码移到更新块之外，如下所示。

请注意，你使用了两种稍微不同的动画方法，分别是缩放和平移，这可能让你感到困惑。

    View view;
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
    animator.setDuration(5000); // 5 seconds duration from 0 to 1
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
    {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value = ((Float) (animation.getAnimatedValue()))
                    .floatValue();
            // Set translation of your view here. Position can be calculated
            // out of value. This code should move the view in a half circle.
            img_fullscreen_drone.setTranslationX((float)(150.0 * Math.sin(value*Math.PI)));
            img_fullscreen_drone.setTranslationY((float)(150.0 * Math.cos(value*Math.PI)));
        }
    });

    animator.start();

    img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
    img_fullscreen_drone.animate().scaleX(0.5f).scaleY(0.5f).setDuration(5000).start();

- Joel Duggan

---

150是原帖作者使用的任意值。 - Joel Duggan

当我点击它时，它会向下然后向上移动，如何使它在起始位置就开始动画？ - Lidor Eliyahu Shelef

Answer 2

在尝试了Joel的答案之后，我发现你也可以使用ViewPropertyAnimator并以这种方式一次性编写它：

img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
img_fullscreen_drone.animate()
  .setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = ((Float) (animation.getAnimatedValue()));
        // Set translation of your view here. Position can be calculated
        // out of value. This code should move the view in a half circle.
        img_fullscreen_drone.setTranslationX((float)(150.0 * Math.sin(value*Math.PI)));
        img_fullscreen_drone.setTranslationY((float)(150.0 * Math.cos(value*Math.PI)));
    }})
  .scaleX(0f).scaleY(0f)
  .setDuration(5000)
  .start();

虽然没有经过测试，但我认为它应该能正常工作。

- Bentaye

Answer 3

首先创建一个动画集。可以像这样：

AnimatorSet set = new AnimatorSet();

接下来，您需要将平移和缩放这两个动画分别制作成动画器，可以按照以下方式进行：

对于平移，请使用：

ObjectAnimator translateAnimator = ObjectAnimator.ofInt(view, "y", toValue);

同样的，你可以为规模做同样的事情。然后你们可以一起玩耍。

set.playTogether(translateAnimator, scaleAnimator);

它应该一起缩放和平移。

- user3354265