안 드 로 이 드 사용자 정의 뷰 알 리 페 이<unk><unk>효과 구현

이 글 은 사용자 정의 View 와 속성 애니메이션 을 결합 하여 다음 과 같은 효 과 를 실현 하 는 것 을 소개 합 니 다.

실현 방향 은 매우 간단 하 다.
반투명 원 을 그리다.
4.567917.두 가지 애니메이션 효 과 를 실현 하고 클릭 시 확산 과 클릭 하지 않 을 때 확산 회수4.567917.스 레 드 방식 으로 위의 두 단 계 를 결합 시킨다.
일단 반투명 원 을 그 리 는 부분 을 볼 게 요.

public class ClickCircleView extends View {
 private Bitmap bitmap;
 private Paint paint;
 private Canvas canvas;
 private boolean isSpreadFlag = false;//        

 public boolean isSpreadFlag() {
  return isSpreadFlag;
 }

 public void setIsSpreadFlag(boolean isSpreadFlag) {
  this.isSpreadFlag = isSpreadFlag;
 }

 public ClickCircleView(Context context, int width, int height, int screenWidth, int screenHeight) {
  super(context);
  bitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); //        
  canvas = new Canvas();
  canvas.setBitmap(bitmap);
  paint = new Paint(Paint.DITHER_FLAG);
  paint.setAntiAlias(true);
  paint.setColor(Color.WHITE);
  paint.setStyle(Paint.Style.FILL);
  paint.setAlpha(50);
  canvas.drawCircle(screenWidth / 2, screenHeight / 2, width / 2 + 10, paint);
  invalidate();
 }

 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawBitmap(bitmap, 0, 0, null);
 }
}

관련 속성 이 모두 화필 에 설 치 된 것 을 볼 수 있 습 니 다.그리고 캔버스 의 drawCircle()방법 으로 반투명 원 을 그리고 마지막 으로 invalidate()방법 으로 View 를 새로 고 칩 니 다.
부모 클래스 의 onDraw()방법 을 다시 써 야 합 니 다.그렇지 않 으 면 사용자 정의 View 가 유효 하지 않 습 니 다.
우 리 는 애니메이션 의 완성 여 부 를 표시 하 는 표지 위치 isSpreadFlag 을 설정 했다.
그리고 저희 가 두 개의 애니메이션 효 과 를 실현 하도록 하 겠 습 니 다.
클릭 시 애니메이션 확산

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleY"
  android:valueFrom="1.0"
  android:valueTo="1.8"
  android:valueType="floatType" />
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleX"
  android:valueFrom="1.0"
  android:valueTo="1.8"
  android:valueType="floatType" />
</set>

간단 하 다.scale 값 을 바 꾸 어 1.8 배로 늘 리 는 것 이다.
클릭 하지 않 을 때 재 활용 애니메이션 확산

<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:ordering="together">
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleX"
  android:valueFrom="1.0"
  android:valueTo="1.2"
  android:valueType="floatType" />
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleY"
  android:valueFrom="1.0"
  android:valueTo="1.2"
  android:valueType="floatType" />
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleX"
  android:startOffset="1000"
  android:valueFrom="1.2"
  android:valueTo="1.0"
  android:valueType="floatType" />
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleY"
  android:startOffset="1000"
  android:valueFrom="1.2"
  android:valueTo="1.0"
  android:valueType="floatType" />
</set>

이전 애니메이션 과 유사 합 니 다.startOffset 인 자 는 Animation 의 실행 순 서 를 제어 할 수 있 습 니 다.예 를 들 어 Android:startOffset="1000"은 이 속성 을 설정 한 애니메이션 의 실행 지연 을 1 초 로 표시 합 니 다.
그리고 애니메이션 과 논 리 를 스 레 드 로 수행 하 는 부분 입 니 다.
클릭 하지 않 을 때의 애니메이션 부분

mXiuyixiuButton.post(new Runnable() {
   @Override
   public void run() {
    clickCircleView = new ClickCircleView(CustomView1.this, mXiuyixiuButton.getWidth()
      , mXiuyixiuButton.getHeight(), mXiuyixiuLayout.getMeasuredWidth(),
      mXiuyixiuLayout.getMeasuredHeight());
    clickCircleView.setVisibility(View.VISIBLE);
    mXiuyixiuLayout.addView(clickCircleView);
    mXiuyixiuLayout.postInvalidate();
    //     
    final Animator anim = AnimatorInflater.loadAnimator(CustomView1.this,
      R.animator.circle_scale_animator);
    anim.addListener(new AnimatorListenerAdapter() {
     @Override
     public void onAnimationEnd(Animator animation) {
      if (anim != null) {
       anim.start();//      
      }
     }
    });
    anim.setTarget(clickCircleView);
    anim.start();
   }
  });

clickCircleView 를 초기 화 한 후 이 view 를 부모 레이아웃 에 추가 한 다음 애니메이션 을 불 러 오고 순환 실행 을 설정 합 니 다.마지막 으로 post Invaidate()를 사용 하여 하위 스 레 드 에서 view 를 새로 고 칩 니 다.
클릭 한 애니메이션 부분

mXiuyixiuButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    clickCircleView.setVisibility(View.GONE);//    ，      View  
    final ClickCircleView item = new ClickCircleView(CustomView1.this, mXiuyixiuButton.getWidth()
      , mXiuyixiuButton.getHeight(), mXiuyixiuLayout.getWidth(),
      mXiuyixiuLayout.getHeight());
    Animator spreadAnim = AnimatorInflater.loadAnimator(CustomView1.this,
      R.animator.circle_spread_animator);
    spreadAnim.addListener(new AnimatorListenerAdapter() {
     @Override
     public void onAnimationEnd(Animator animation) {
      item.setIsSpreadFlag(true);//      ，    
     }
    });
    spreadAnim.setTarget(item);
    spreadAnim.start();
    clickCircleViewList.add(item);
    mXiuyixiuLayout.addView(item);
    mXiuyixiuLayout.invalidate();
    handler.post(circleViewRunnable);
   }
  });

클릭 하지 않 은 애니메이션 을 숨 기 고 ClickCircleView 를 초기 화한 후 이 view 를 List 에 추가 하고 부모 레이아웃 에 추가 한 다음 애니메이션 을 불 러 오고 애니메이션 이 끝 날 때 isSpreadFlag 표 시 를 추가 합 니 다.마지막 으로 invalidate()방법 으로 view 를 새로 고치 고 스 레 드 를 엽 니 다.
스 레 드 부분

private Runnable circleViewRunnable = new Runnable() {
  public void run() {
   for (int i = 0; i < clickCircleViewList.size(); i++) {
    if (clickCircleViewList.get(i).isSpreadFlag()) {
     mXiuyixiuLayout.removeView(clickCircleViewList.get(i));
     clickCircleViewList.remove(i);
     mXiuyixiuLayout.postInvalidate();
    }
   }
   if (clickCircleViewList.size() <= 0) {
    clickCircleView.setVisibility(View.VISIBLE);
   }
   handler.postDelayed(this, 100);
  }
 };

list 를 옮 겨 다 니 며 isSpreadFlag 표 시 된 view 를 list 와 부모 레이아웃 에서 제거 하고 view 를 새로 고 칩 니 다.마지막 으로 list 가 비어 있 으 면 클릭 하지 않 을 때의 애니메이션 을 표시 합 니 다.
마지막 으로 onDestroy()에서 스 레 드 를 제거 하 는 것 을 기억 하 세 요.

@Override
 protected void onDestroy() {
  super.onDestroy();
  handler.removeCallbacks(circleViewRunnable);
 }

사용자 정의 View 를 사용 하여 속성 애니메이션 과 결합 하여 이 효 과 를 실현 하 는 것 이 비교적 높 습 니 다.다만 이러한 방식 은 사용자 정의 View 를 완전히 사용 하 는 것 보다 더욱 유창 합 니 다.이 방식 은 대부분 다른 사람의 블 로그 에 있 는 코드 를 참고 하여 이 루어 집 니 다.그러나 단지 정리 하지 않 고 사용 하 는 것 만 으로 는 자신의 지식 이 될 수 없 기 때문에 이 블 로 그 를 가지 게 되 었 습 니 다.
참고:안 드 로 이 드 가 알 리 페 이 를 실현 하 는 몇 가지 사고방식
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.