2017-12-12 20 views
1

간단한 애니메이션을 만들고 싶습니다. 1 일에는 화면 중앙에 작은 원이 그려져 있습니다. 원형 애니메이션을 누르면 직사각형 버튼이 나타납니다. 나는 가능한 한 그것을 최선의 방법을했다면 모르겠지만 여기 내 조각 내부원형 반향 애니메이션 반전

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/fragments_container"> 

    <Button 
     android:id="@+id/my_button" 
     android:layout_width="200dp" 
     android:layout_height="100dp" 
     android:layout_gravity="center" 
     android:background="@color/buttons_color" 
     android:visibility="invisible" 
     /> 

    <ImageView 
     android:id="@+id/circle_image" 
     android:layout_gravity="center" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     app:srcCompat="@drawable/circle" /> 

</FrameLayout> 

그럼 내 조각에 대한

circle.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 

    <solid android:color="@color/circle_color"></solid> 

    <size 
     android:width="50dp" 
     android:height="50dp"/> 
</shape> 

레이아웃입니다

@Override 
public void onActivityCreated(@Nullable Bundle savedInstanceState) { 
    super.onActivityCreated(savedInstanceState); 

    activity = (MainActivity) getActivity(); 
    final View fragments_container = activity.findViewById(R.id.fragments_container); 

    final Button button = (Button) activity.findViewById(R.id.my_button); 
    final ImageView image = (ImageView) activity.findViewById(R.id.circle_image); 



    image.setOnClickListener(new ImageView.OnClickListener(){ 
     @Override 
     public void onClick(View v) { 
      Animator animator = ViewAnimationUtils.createCircularReveal(fragments_container, 
        image.getLeft() + image.getWidth()/2, 
        image.getTop() + image.getHeight()/2, 
        0, 
        button.getWidth()); 

      image.setVisibility(View.INVISIBLE); 
      button.setVisibility(View.VISIBLE); 
      animator.start(); 
     } 
    }); 
} 

지금까지 모든 것이 잘 작동합니다. 다음으로 나는 반전 된 원형 공개 애니메이션을 원합니다. 기본적으로 방금 만든 애니메이션은 방금 만든 애니메이션과 똑같은 모양을 가지고있어서 그 끝에 작은 원과 버튼이 사라질 것입니다.

아무도 내가 어떻게 할 수있는 몇 가지 힌트를 줄 수 있습니까?

답변

1

나는 당신의 문제를 해결하기 위해 뭔가 도움을 주려고 노력했습니다.

image.setOnClickListener(new ImageView.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
        revealShow(button, true); 
       } 
      } 
     }); 

     button.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
        revealShow(image, false); 
       } 
      } 
     }); 

// 여기에 revealShow 메서드가 있으며 요구 사항에 따라 애니메이션 기간을 변경할 수 있습니다.

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) 
    private void revealShow(View view, boolean isExpand) { 

     int w = view.getWidth(); 
     int h = view.getHeight(); 

     int endRadius = (int) Math.hypot(w, h); 

     int cx = (int) (image.getX() + (image.getWidth()/2)); 
     int cy = (int) (image.getY() + (image.getHeight()/2)); 


     if (isExpand) { 
      Animator revealAnimator = ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, 0, endRadius); 

      image.setVisibility(View.INVISIBLE); 
      button.setVisibility(View.VISIBLE); 
      revealAnimator.setDuration(500); 
      revealAnimator.start(); 

     } else { 

      Animator anim = 
        ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, endRadius, image.getWidth()/2); 

      anim.addListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        super.onAnimationEnd(animation); 
        image.setVisibility(View.VISIBLE); 
        button.setVisibility(View.INVISIBLE); 
       } 
      }); 
      anim.setDuration(500); 
      anim.start(); 
     } 
    } 
+0

대단히 감사합니다! 나는'createCircularReveal' 함수에서 끝 반경을 시작 반지름보다 크게 지정할 수 있다는 것을 알지 못했습니다 :) 노력한 사람에게 많은 감사드립니다! – etrusks