圆形显示动画 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以上。

我究竟做错了什么 ？

我搜索了很多，没有发现同样的问题，所以我尝试了其他方法，比如画画布，但不幸的是它不符合我的需求。

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

提前感谢任何线索

编辑：里面ACTION_MOVE

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

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

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

日志： 总是相同的因素，那么半径不应该移动，因为我的手指停止了

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之间的距离的某个函数（欧氏距离可能是一个不错的选择，这里是一个例子）；centerXcenterY

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 毫秒，但如果您发现其反应性不够，则可以更短。每当您移动手指时，都会设置一个标志，这样就不会在顶部启动其他动画，并且过渡总是平滑的。如果您在动画播放时移动手指，则将revealModified在 onAnimationEnd 内的 if 语句中重新执行。

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