圆形显示动画 onTouch Android

Question

我正在尝试实现一个圆形显示动画，该动画包括在用户触摸视图时根据用户手指显示视图。

首先，我的视图位于一个无限循环显示循环中，只要用户什么都不做，它就会保持圆形。然后，当用户触摸视图并开始滑动时，我在 ACTION_MOVE 中计算了一个因子以实时增加半径并在每次通过时调用圆形显示。

public void reveal(final View view,
                               final float centerX,
                               final float centerY,
                               final float startRadius,
                               final float endRadius,
                               final int duration) {

                anim = ViewAnimationUtils.createCircularReveal(view, (int)centerX, (int)centerY, (int)startRadius, (int)endRadius);
                anim.setDuration(duration);
                anim.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        if (isRepeating) {
                            reveal(view,centerX,centerY,startRadius,endRadius,duration);
                        }
                    }
                    @Override
                    public void onAnimationCancel(Animator animation) {
                    }
                    @Override
                    public void onAnimationRepeat(Animator animation) {
                    }
                });
                anim.start();

    }

我再次想起它的 Listener 中的循环显示方法来创建循环，最重要的是避免视觉失真。

我注意到，如果我不这样做，会出现一些非常快的失真，因为动画持续时间比 ACTION_MOVE 中的每个通道都快，所以动画有时间在下一个通道之前完成。失真是当动画完成并像闪光一样快速返回到使用 Touch 设置的当前半径时视图缺失部分的表示。

所以这种方法在 Listener 内部调用方法一直很好用。

问题： 在我的一台设备上，滑动时各个方向出现无意义的失真。

根据我的日志，这不是半径变形，因为每次通过后开始和结束半径始终相同，所以半径不应该像这样移动，尤其是当手指停止时，动画永远不会停止，感谢听众就像我上面解释的那样。

我做错了什么？

我找了很多都没有找到同样的问题所以我尝试了其他方法，比如画图canvas但是不幸的是它不符合我的需求

有没有另一种方法可以完全不同地实现这种动画？

提前感谢任何潜在客户

编辑： 里面 ACTION_MOVE

 scaleRadius = (float) (2 * distance / maxWidth + startScale);

 if (scaleRadius < 1) {
       scaleRadius = 1;
 }

 animator.reveal(this, middleCircleX, middleCircleY, 
initialCircleRadius*scaleRadius, initialCircleRadius*scaleRadius, 0);

Logs : 总是相同的因素然后半径不应该移动因为我的手指停止了

2020-03-27 15:42:56.113 onTouch: scaleRadius 1.7870371
2020-03-27 15:42:56.113 onTouch: scaleRadius 1.7870373
2020-03-27 15:42:56.227 onTouch: scaleRadius 1.7870371
2020-03-27 15:42:56.227 onTouch: scaleRadius 1.7870373
2020-03-27 15:42:56.331 onTouch: scaleRadius 1.7870374
2020-03-27 15:42:56.331 onTouch: scaleRadius 1.7870371

Answer 1

我假设您不想要闪烁的动画，而是希望圆圈的半径平滑过渡，并随着您在屏幕上滑动的距离而变大或变小。（假设有误请指正）

我假设 centerX 和 centerY 总是相同的值并且基本上是全局变量。

创建几个额外的全局变量：

boolean animIsCurrentlyPlaying=false; 
float mCurrentRadius=initialCircleSize; //i guess this is 1 in your case
float mTargetRadius;

现在，在 ACTION_MOVE 活动中，您将执行以下操作：

1- 将 mTargetRadius 设置为 centerX 和 centerY 之间的距离以及手指在屏幕上的位置的函数（欧氏距离可能是一个不错的选择）是一个例子）；

mTargetRadius=Float.valueOf(Math.sqrt((double)(Math.pow(event.getX()-centerX,2)+Math.pow(event.getY()-centerY,2))));

2-执行下面的方法revealModified(view, 100);

public void revealModified(final View view,
                           final int duration) {
       if(!animIsCurrentlyPlaying){
            //here i just reference the global vars
            anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, mCurrentRadius, mTargetRadius);
            mCurrentRadius=mTargetRadius;
            anim.setDuration(duration);
            anim.addListener(new Animator.AnimatorListener() {

                @Override
                public void onAnimationEnd(Animator animation) {

                    animIsCurrentlyPlaying=false;
                    if(mCurrentRadius!=mTargetRadius){
                         revealModified(view, 100);
                    }
                }

            });
            animIsCurrentlyPlaying=true;
            anim.start();
       }

}

每次您轻轻移动手指时都会执行该方法。我将持续时间设置为 100 毫秒，但如果您发现它的反应不够活跃，则可以更短。每当您移动手指时，都会设置一个标志，因此无法在顶部启动其他动画，并且过渡始终为 smooth.if 您在播放动画时移动手指，然后 revealModified 将在 if 语句中重新执行在 onAnimationEnd.

内

让我知道它是否有效，尤其是如果这是您想要的

圆形显示动画 onTouch Android

Circular Reveal animation onTouch Android

animation

android

move

touch

circularreveal