Android Material Design 사용자 정의 애니메이션 작성 에 대한 자세 한 설명

15880 단어 AndroidMaterial
새로운 애니메이션 Api 는 UI 컨트롤 에서 터치 피드백 을 만 들 고 View 의 상 태 를 바 꾸 며 activity 를 전환 하 는 일련의 사용자 정의 애니메이션 을 만 들 수 있 습 니 다.
구체 적 으로 다음 과 같다.
  • View 의 touch 이벤트 에 응답 하 는 터치 피드백 애니메이션
  • View 의 순환 전시 애니메이션 숨 기기 및 표시
  • 두 개의 Activity 간 전환 애니메이션
  • 더욱 자 연 스 러 운 곡선 운동 애니메이션
  • View 의 상태 로 애니메이션 을 변경 하면 하나 이상 의 View 의 속성 을 변경 할 수 있 습 니 다
  • View 의 상태 변경 시 상태 목록 애니메이션 보이 기
  • 이 new animations Api 는 Button 과 같은 표준 Widget 에 내장 되 어 있 습 니 다.사용자 정의 view 에서 도 이 api 를 사용 할 수 있 습 니 다.
    201647145144001.gif (252×480)
    애니메이션 은 Material 디자인 에서 사용자 와 app 의 상호작용 에 그들의 동작 행 위 를 피드백 하고 시각 적 일관성 을 제공 합 니 다.Material 테 마 는 Buttons 와 Activity 의 과도 에 기본 애니메이션 을 제공 합 니 다.안 드 로 이 드 5.0(api 21)이상 에서 이 애니메이션 을 사용자 정의 할 수 있 습 니 다.
  • Touch feedback  터치 피드백
  • Circular Reveal  반복 표시
  • Activity transitions  이벤트 과도
  • Curved motion       곡선 운동
  • View state changes  보기 상태 변화
  • Customize Touch Feedback  사용자 정의 터치 피드백 애니메이션
  • Material 디자인 에서 터치 피드백 은 사용자 와 UI 가 상호작용 을 할 때 즉시 시각 화 된 확인 접점 을 제공 합 니 다.buttons 의 기본 터치 피드백 애니메이션 에 대해 서 는 RippleDrawable 류 를 사용 하여 하나의 파문(파문)효과 로 두 가지 서로 다른 상태 에서 과도 합 니 다.
    대부분의 경우 view 의 xml 정의 에서 배경 을 정의 해 야 합 니 다.
  • android:attr/selectableItemBackground                              한계 가 있 는 파문   
  • android:attr/selectableItemBackgroundBorderless             view 밖으로 뻗 은 파문     note:이 속성 은 api 21 추가
  • 또는 RippleDrawable 형식의 자원 을 xml 로 정의 하고 파문 속성 을 사용 할 수 있 습 니 다.
    기본 터치 피드백 색상 을 바 꾸 기 위해 RippleDrawable 대상 에 게 색상 을 지정 할 수 있 습 니 다.테마의 android:colorControl Highlight 속성 을 사용 할 수 있 습 니 다.
    Use the Reveal Effect  디 스 플레이 효과 사용
    View Animation Utils.createCircular Reveal()방법 은 보 기 를 순환 적 으로 표시 하거나 숨 길 수 있 도록 합 니 다.
    표시:
    
    // previously invisible view
    View myView = findViewById(R.id.my_view);
    
    // get the center for the clipping circle
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;
    
    // get the final radius for the clipping circle
    int finalRadius = myView.getWidth();
    
    // create and start the animator for this view
    // (the start radius is zero)
    Animator anim =
      ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    anim.start();
      
    // previously visible view
    final View myView = findViewById(R.id.my_view);
    
    // get the center for the clipping circle
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;
    
    // get the initial radius for the clipping circle
    int initialRadius = myView.getWidth();
    
    // create the animation (the final radius is zero)
    Animator anim =
      ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
    
    // make the view invisible when the animation is done
    anim.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
      }
    });
    
    // start the animation
    anim.start();
    
    
    Customize Activity Transitions  Activity 의 과도 애니메이션 정의
  • 한 enter transition 은 Activity 의 진입 장면 을 나타 낸다.예 를 들 어 explode enter transition 은 Views 의 진입 장면 을 나타 낸다.외부 에서 화면 중심 으로 빠르게 이동한다.
  • 한 exit transition 은 Activity 의 이탈 장면 을 나타 낸다.예 를 들 어 explode exit transition 은 Views 의 이탈 장면 을 나타 낸다.화면 중심 에서 흩 어 진다.
  • 한 share transition 은 두 개의 Activity 간 에 그들의 activity transition 을 공유 하 는 것 을 나타 낸다.예 를 들 어 두 개의 Activity 는 같은 그림 을 가지 고 있 는데 위치 와 크기 가 다 르 기 때문에 changeImageTransform 이라는 공유 요 소 를 사용 하면 Activity 간 에 그림 을 안정 적 으로 전환 하고 확대 할 수 있 습 니 다.
  • android 5.0(api 21)이상,이러한 효 과 를 지원 하 는 transition(과도):
  • 폭발―이동 보기 또는 장면 중심 에서.class Explode
  • 활주―이동 보기 또는 한 장면 의 가장자리 에서.class Slide
  • 페이드아웃-장면 에서 보 기 를 추가 하거나 삭제 하면 투명 도 를 바 꿉 니 다.class Fade
  • 이러한 공유 요소(모두 대응 하 는 class)변환 도 지원 합 니 다.
  • changeBounds―View 의 구조의 경계 변화.
  • changeClipBounds―View 의 재단 경계 변화.
  • changeTransform―View 의 회전,확대 경계 변화
  • changeImageTransform―대상 이미지 의 크기 와 크기 변화.
  • 프로그램 에서 활동 전환 을 사용 하면 기본 값 과 페 이 드 사이 의 과 도 는 활동 을 활성화 하고 종료 하 는 것 입 니 다.
    사용자 정의 전환 사용자 정의 과도 애니메이션 지정
    우선 테 마 를 정의 하 는 style 에서 android:windowContentTransitions 속성 을 사용 하고 transitions 를 사용 해 야 합 니 다.사용 할 Transitions 도 정의 할 수 있 습 니 다.
    
    <?xml version="1.0" encoding="utf-8"?> 
    <resources> 
      <style name="MyTheme" parent="@android:style/Theme.Material"> 
        <!-- enable window content transitions --> 
        <item name="android:windowContentTransitions">true</item> 
        <!-- specify enter and exit transitions --> 
        <item name="android:windowEnterTransition">@android:transition/explode</item> 
        <item name="android:windowExitTransition">@android:transition/explode</item> 
        <!-- specify shared element transitions --> 
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> 
        <item name="android:windowSharedElementExitTransition">@android:transition/slide_top</item> 
      </style> 
    </resources> 
    
    주:모든 transition xml 에서 정의 하 는 것 은 change 요소 입 니 다.
    코드 에서 transitions 사용 하기:
    
    // inside your activity (if you did not enable transitions in your theme)
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    
    // set an exit transition
    getWindow().setExitTransition(new Explode());
          transitions     
    Window.setEnterTransition()
    Window.setExitTransition()
    Window.setSharedElementEnterTransition()
    Window.setSharedElementExitTransition()
    
    
    transitions 과 도 를 빨리 진행 하려 면 Activity 에서 Window.setAllowEnterTransition Overlap()를 호출 할 수 있 습 니 다.
    transitions 를 사용 하여 액 티 비 티 를 시작 합 니 다.
    transtions 를 사용 하고 Activity 의 끝 exit transtion 으로 설정 하려 면 다음 과 같은 방식 으로 다른 Activity 를 시작 하면 활성 화 됩 니 다.
    
    startActivity(intent,
           ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    
    다른 Activity 에 enter transtion 을 설정 하면 시작 할 때 활성 화 됩 니 다.disable transitions 를 사용 하려 면 다른 Activity 를 시작 할 때:
    
    startActivity(intent,null); //  null  options bundle
    
    Start an activity with a shared element  공유 요소 로 Acitvity 시작 하기
    1.테마 에서 window content 사용 하기
    2.style 에서 공 유 된 과도 transitions 를 정의 합 니 다.
    3.transitions 의 xml 자원 을 정의 합 니 다.  res/transition
    4.layot 에서 android:transition Name="3 단계 에서 정 의 된 이름 을 호출 합 니 다.
    5.Activity Options.makeSceneTransition Animation()을 호출 하여 해당 하 는 Activity Options 대상 을 생 성 합 니 다.
    
    // get the element that receives the click event
    final View imgContainerView = findViewById(R.id.img_container);
    
    // get the common element for the transition in this activity
    final View androidRobotView = findViewById(R.id.image_small);
    
    // define a click listener
    imgContainerView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
          .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
      }
    });
    
    
    코드 에서 View.setTransition Name()을 사용 하여 과도 애니메이션 을 설정 할 수 있 습 니 다.
    두 번 째 Activity 를 닫 으 려 면 과도 애니메이션 을 반전 시 키 려 면 Activity.finish AfterTransition()방법 을 사용 할 수 있 습 니 다.Activity.finish()가 아 닌 Activity.finish AfterTransition()방법 을 사용 할 수 있 습 니 다.
    Start an activity with multiple shared elements  다 중 공유 요소 로 Activity 시작
    만약 에 두 개의 Activity 가 하나의 공유 요 소 를 가지 고 있 지 않 으 면 그들 사이 에서 장면 transition 애니메이션 을 시작 하려 면 layot 에서 android:transition Name(또는 Activity 에서 코드 에서 View.setTransition Name()을 사용 하여 정의 하고 다음 과 같은 Activity Options 대상 을 만 듭 니 다.
    
    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));
    
    곡선 운동 사용 하기
    Material 디자인 에서 애니메이션 은 곡선의 시간 삽입 값 과 공간 운동 모델 에 의존 합 니 다.안 드 로 이 드 5.0(api 21)이상 에서 애니메이션 시간 곡선 과 곡선 운동 모델 을 사용자 정의 할 수 있 습 니 다.
    PathInterpolator 류 는 베 어 셀 곡선 이나 경로 대상 을 기반 으로 한 새로운 삽입 기 입 니 다.이 삽입 기 는 1 x1 정사각형 운동 곡선 을 지정 하 였 으 며,(0,0)을 닻 점 으로 하고,(1,1)을 제어점 으로 하여 구조 함수 의 매개 변수 로 한다.path interpolator 의 xml 자원 을 정의 할 수 있 습 니 다:
    
    <pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
      android:controlX1="0.4"
      android:controlY1="0"
      android:controlX2="1"
      android:controlY2="1"/>
    
    시스템 은 세 가지 기본 적 인 곡선,XML 자원 을 제공 합 니 다.
  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml
  • PathInterpolator 대상 을 Animator.setInterpolator()방법의 매개 변수 로 사용 할 수 있 습 니 다.
    Object Animator 류 는 새로운 구조 함수 가 있어 서 좌 표를 하나의 path 를 따라 두 가지 또는 두 가지 이상 의 속성 을 동시에 사용 할 수 있 습 니 다.예 를 들 어 다음 animator 는 path 대상 을 사용 하여 View 의 x 와 y 속성 을 동시에 조작 합 니 다.
    
    ObjectAnimator mAnimator;
    mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
    ...
    mAnimator.start();
    
    Animate View State Changes  보기 상태 변경 애니메이션
    StateListAnimator 클래스 는 애니메이션 이 실 행 될 때 보기 의 상태 변 화 를 정의 할 수 있 습 니 다.다음 예 는 xml 에서 StateList Animator 를 정의 하 는 방법 을 보 여 줍 니 다.
    
    <!-- animate the translationZ property of a view when pressed -->
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true">
      <set>
       <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
           here for "x" and "y", or other properties -->
      </set>
     </item>
     <item android:state_enabled="true"
      android:state_pressed="false"
      android:state_focused="true">
      <set>
       <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
      </set>
     </item>
    </selector>
    
    위의 예 에서 하나의 View 에 보기 상태 애니메이션 을 추가 하고 selector 요 소 를 사용 하 는 xml 자원 을 정의 하 며 view 에 부여 하 는 android:stateListAnimator 속성 을 정의 합 니 다.코드 에서 View 에 보기 상태 애니메이션 을 지정 하려 면 Animation Inflater.loadStateListAnimator()를 사용 하여 xml 자원 을 불 러 오고 View.setStateListAnimator()를 사용 하여 View 에 지정 할 수 있 습 니 다.
    테마 가 Material 테 마 를 계승 하면 단 추 는 기본적으로 z 애니메이션 을 가지 고 있 습 니 다.이러한 행동 이 단추 에 있 는 것 을 피하 기 위해 안 드 로 이 드:stateListAnimator 속성 값 을 null 로 설정 합 니 다.
    Animated StateListDrawable 클래스 는 관련 View 의 상 태 를 보 여 주 며 애니메이션 을 변경 할 수 있 도록 그림 을 만 들 수 있 습 니 다.일부 시스템 의 Widget 은 5.0 에서 기본적으로 이 애니메이션 을 사용 합 니 다.다음 예 는 XML 자원 으로 Animated State List Drawable 을 정의 하 는 방법 을 보 여 줍 니 다.
    
    <!-- res/drawable/myanimstatedrawable.xml -->
    <animated-selector
      xmlns:android="http://schemas.android.com/apk/res/android">
    
      <!-- provide a different drawable for each state-->
      <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
      <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
      <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>
    
      <!-- specify a transition -->
      <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
          <item android:duration="15" android:drawable="@drawable/dt1"/>
          <item android:duration="15" android:drawable="@drawable/dt2"/>
          ...
        </animation-list>
      </transition>
      ...
    </animated-selector>
    
    
    Animate Vector Drawables  벡터 이미지 애니메이션
    벡터 그림 은 신축 이 가능 하지만 진실 을 잃 지 않 는 다.Animated Vector Drawable 류 는 벡터 그림 을 움 직 일 수 있 습 니 다.
    보통 세 가지 xml 에서 동적 벡터 그림 을 정의 합 니 다.
  • 요소 의 벡터 그림 을 사용 하여 res/drawable/
  • 동적 벡터 그림 입 니 다.요 소 를 사용 하여 res/drawable/
  • 하나 이상 의 object animator,요 소 를 사용 하여 res/animator/벡터 그림 에서 정의 할 수 있 는 속성 요 소 는가 있 습 니 다.의 집합 이나 하위,가 그 려 진 경 로 를 정의 합 니 다.
    벡터 그림 을 정의 할 때에 이름 을 지정 할 수 있 습 니 다.예 는 다음 과 같 습 니 다.
    
    <!-- res/drawable/vectordrawable.xml -->
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:height="64dp"
      android:width="64dp"
      android:viewportHeight="600"
      android:viewportWidth="600">
      <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
          android:name="v"
          android:fillColor="#000000"
          android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
      </group>
    </vector>
    
    벡터 애니메이션 에서 벡터 그림 정의 이름 참조:
    
    <!-- res/drawable/animvectordrawable.xml -->
    <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:drawable="@drawable/vectordrawable" >
      <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
      <target
        android:name="v"
        android:animation="@anim/path_morph" />
    </animated-vector>
    
    다음 예 는 ObjectAnimator or Animator Set 대상 을 대표 합 니 다.동작 은 회전 360 도 입 니 다.
    
    <!-- res/anim/rotation.xml -->
    <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
    
    아래 의 예 는 벡터 그림 path 가 한 도형 에서 다른 도형 으로 이동 하 는 것 을 나타 낸다.두 가지 그 라 데 이 션 경 로 는 일치 해 야 합 니 다.그들 은 같은 수량의 명령 과 같은 수량의 모든 명령 의 인 자 를 가 져 야 합 니 다.
    
    <!-- res/anim/path_morph.xml -->
    <set xmlns:android="http://schemas.android.com/apk/res/android">
      <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0  -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
        android:valueType="pathType" />
    </set>
    
       
  • 좋은 웹페이지 즐겨찾기