Android 애니메이션 컬렉션 트윈 애니메이션


이 섹션 소개:

이 섹션에서는 Android의 세 가지 애니메이션 중 두 번째인 트윈(Tween) 애니메이션을 가져옵니다. 앞서 배운 프레임 애니메이션과 다릅니다. 그림을 지속적으로 재생하여 애니메이션 효과를 시뮬레이션하며 트윈 애니메이션 개발자는 애니메이션 시작 및 애니메이션 종료 "키 프레임"만 지정하면 됩니다. 애니메이션 변경의 "중간 프레임"은 시스템에 의해 계산되고 완료됩니다! 자, 이 부분부터 배워볼까요~

1. 트위닝 애니메이션과 인터폴레이터의 분류

안드로이드에서 지원하는 트위닝 애니메이션 효과는 5개, 4개, 다섯번째는 이전것들 그냥 조합이에요~

  • AlphaAnimation: 투명도 그라디언트 효과, 생성 시 시작 및 끝 투명도 지정, 애니메이션 지속 시간 시간, 투명도 범위(0,1), 0은 완전히 투명하고 1은 <alpha/> 태그에 해당합니다.
  • ScaleAnimation: 스케일 그라디언트 효과를 만들 때 시작 및 끝 스케일링 비율과 스케일링 기준점을 지정해야 합니다. <scale/> 태그에 해당하는 애니메이션 길이도 있습니다.
  • TranslateAnimation: 변위 그라데이션 효과, 생성 시 시작 및 끝 위치 지정, 애니메이션 지속 시간 지정 <translate/> 태그에 해당하는 시간을 설정하세요!
  • RotateAnimation: 회전 그라데이션 효과, 생성 시 애니메이션의 시작 및 끝 회전 각도 지정 및 애니메이션 <rotate/> 라벨
  • AnimationSet에 해당하는 지속 시간 및 회전 축: 조합 그라데이션은 <set/> 라벨에 해당하는 이전 그라데이션의 조합입니다. 다양한 애니메이션의 사용법을 설명하기 전에 먼저 설명해야 할 것이 있습니다.
    • Interpolator

는 애니메이션의 변경 속도를 제어하는 ​​데 사용됩니다. 물론 Interpolator를 직접 구현할 수도 있습니다. . 인터페이스를 통해 애니메이션 변경 속도를 직접 제어할 수 있으며 Android는 선택할 수 있는 5가지 구현 클래스를 제공합니다.

  • LinearInterpolator: 애니메이션이 일정한 속도로 변경됩니다.
  • AccelerateInterpolator: 애니메이션 시작 부분에서 변경 속도가 느려졌다가 가속되기 시작합니다.
  • AccelerateDecelerateInterpolator: 시작 부분에서 변경 속도가 느려집니다. 그리고 애니메이션의 끝, 중간에 시간 가속도
  • CycleInterpolator: 애니메이션이 특정 횟수만큼 반복되고 변경 속도가 사인파 곡선에 따라 변경됩니다. Math.sin(2 * mCycles * Math.PI * 입력)
  • DecelerateInterpolator: 애니메이션 시작 부분에서 속도를 더 빠르게 변경한 다음 천천히 시작합니다.
  • AnticipateInterpolator: 역방향, 먼저 섹션을 변경합니다. 반대 방향으로 가속한 다음 가속 재생
  • AnticipateOvershootInterpolator: 뒤로 시작한 다음 특정 값을 앞으로 던지고 최종 값으로 돌아갑니다.
  • BounceInterpolator: 점프, 목표 값에 접근하면 값이 점프합니다. 목표값은 100이고, 다음 값이 순서대로 나올 수 있습니다. 85, 77, 70, 80, 90, 100
  • OvershottInterpolator: 반동, 최종적으로 목표값을 초과한 후 천천히 목표값으로 변경됩니다

그리고 이것은 애니메이션 xml 파일을 작성할 때 일반적으로 사용합니다. 속성은 android:interpolator, 위의 해당 값은 @android:anim/linear_interpolator입니다. 이는 실제로 낙타 표기법이 밑줄로 변경된 것입니다. AccelerateDecelerateInterpolator는 @android:anim/accelerate_decelerate_interpolator에 해당합니다!

2. 다양한 애니메이션에 대한 자세한 설명

android:duration은 애니메이션의 지속 시간이며 단위는 밀리초입니다~

1) AlphaAnimation(투명도 그라데이션)

anim_alpha.xml : 

<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromAlpha="1.0"  
    android:toAlpha="0.1"  
    android:duration="2000"/>

속성 설명:

fromAlpha: 시작 투명도
toAlpha: 끝 투명도
투명도 범위: 0-1, 완전 투명 - 완전 불투명

2) ScaleAnimation(스케일 그라데이션)

anim_scale.xml: 

<scale xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_interpolator"  
    android:fromXScale="0.2"  
    android:toXScale="1.5"  
    android:fromYScale="0.2"  
    android:toYScale="1.5"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="2000"/>

속성 설명:

  • fromXScale/fromYScale: X축/Y축을 따라 크기 조정을 위한 시작 배율
  • toXScale /toYSc 에일 ：along 스케일링의 종료 비율 중심은 중심축 점
  • 3) TranslateAnimation(변위 그라데이션)
anim_translate.Delta

: 애니메이션 X/Y 좌표의 시작 위치

toXDelta

/toYDelta: X 애니메이션 종료 위치의 /Y 좌표

  • 4) RotateAnimation(회전 그라데이션)anim_rotate.xml
    • :
  • <translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromXDelta="0"  
    android:toXDelta="320"  
    android:fromYDelta="0"  
    android:toYDelta="0"  
    android:duration="2000"/>
    속성 설명:
    • fromDegrees/toDegrees: 회전의 시작/끝 각도
    • repeatCount: 회전 횟수, 기본값은 0이며, 이는 3과 같은 다른 값인 경우 1회를 의미합니다. 4번 회전하게 됩니다. 또한 값이 -1 또는 무한인 경우 애니메이션이 절대 멈추지 않음을 의미합니다.
    • repeatMode: 반복 모드를 설정합니다. 기본값은 restart입니다. 단, RepeatCount가 0보다 크거나 무한 또는 -1인 경우에만 해당됩니다. 효과적이다. reverse로 설정할 수도 있습니다. 즉, 애니메이션이 짝수 번 표시되면 반대 방향으로 움직입니다!

    5) AnimationSet(결합된 그라디언트)

    는 매우 간단합니다. 이전 애니메이션을 결합하기만 하면 됩니다~

    anim_set.xml: 

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromDegrees="0"  
    android:toDegrees="360"  
    android:duration="1000"  
    android:repeatCount="1"  
    android:repeatMode="reverse"/>

    3 경험해 볼 수 있는 예제를 작성해 보세요. 위에 작성된 애니메이션을 사용하여 예제를 작성해 보겠습니다. 그러면 트윈 애니메이션이 무엇인지 이해할 수 있습니다. 간단한 레이아웃부터 시작하겠습니다:

    activity_main.xml

    : 

      
  <set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/decelerate_interpolator"  
    android:shareInterpolator="true" >  
  
    <scale  
        android:duration="2000"  
        android:fromXScale="0.2"  
        android:fromYScale="0.2"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:toXScale="1.5"  
        android:toYScale="1.5" />  
  
    <rotate  
        android:duration="1000"  
        android:fromDegrees="0"  
        android:repeatCount="1"  
        android:repeatMode="reverse"  
        android:toDegrees="360" />  
  
    <translate  
        android:duration="2000"  
        android:fromXDelta="0"  
        android:fromYDelta="0"  
        android:toXDelta="320"  
        android:toYDelta="0" />  
  
    <alpha  
        android:duration="2000"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1" />
</set>
    좋아요. 그런 다음

    MainActivity.java

    로 이동하세요. 이 역시 매우 간단합니다. AnimationUtils.loadAnimation()을 호출하세요. 애니메이션을 로드하면 뷰 컨트롤이 startAnimation을 호출하여 애니메이션을 시작합니다~

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明度渐变" />

    <Button
        android:id="@+id/btn_scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放渐变" />

    <Button
        android:id="@+id/btn_tran"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位移渐变" />

    <Button
        android:id="@+id/btn_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转渐变" />

    <Button
        android:id="@+id/btn_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="组合渐变" />

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="48dp"
        android:src="@mipmap/img_face" />
    </LinearLayout>

    렌더링 실행

    :

    1.gif흥미롭네요. 아직 시도하지 마세요. 뭔가 변경하거나 자유롭게 애니메이션을 결합해 보세요. 멋진 효과를 만들어 보세요~

    4. 애니메이션 상태 모니터링

    애니메이션의 실행 상태를 모니터링하고 애니메이션 객체의:

      setAnimationListener(new AnimationListener())
    • 메서드를 호출할 수 있습니다. 다음 세 가지 메소드를 다시 작성하세요. : stOnAnimationStart () : 애니메이션이 시작됩니다 View
    • 에 대한 애니메이션 효과먼저 AnimationUtils.loadAnimation(애니메이션 xml 파일)을 호출한 다음 View 컨트롤이 startAnimation(anim)을 호출합니다. 애니메이션 시작 ~ 정적 로딩 방식입니다. 물론, 직접 애니메이션 객체를 생성하고 자바 코드로 설정을 완료한 후 호출할 수도 있습니다. startAnimation이 애니메이션을 켭니다~
    • 6. Fragment에 대한 전환 애니메이션을 설정합니다
    • 여기서 주목해야 할 점은 Fragment가 v4 패키지를 사용하는지 아니면
      • app 패키지
    아래의 Fragment를 사용하는지입니다!

    FragmentTransaction

    개체의
    setTransition(int transit)

    을 호출하여 조각에 대한 표준 전환 애니메이션을 지정할 수 있습니다. 전송에 대한 선택적 값은 다음과 같습니다.

    TRANSIT_NONE: 애니메이션 없음

    TRANSIT_FRAGMENT_OPEN

    : 양식의 애니메이션 열기

    TRANSIT_FRAGMENT_CLOSE: 양식 닫기 애니메이션위의 표준 프로세스 애니메이션을 모두 호출할 수 있지만 차이점은 사용자 정의 전환 애니메이션에 있습니다

    setCustomAnimations() 메소드!

    • Fragment 앱 패키지 아래: setCustomAnimations(int enter, intexit, int popEnter, int popExit)각각 추가, 제거, 스택에 푸시 및 스택에서 팝업을 위한 애니메이션! 주목해야 할 또 다른 사항은 해당 애니메이션 유형이 애니메이션 파일인 속성 애니메이션(Property)이라는 것입니다. 루트 태그는 <objectAnimator>, <valueAnimator>이거나 처음 두 개는 v4 패키지 아래의 하나의 <set>;에 배치됩니다. v4 패키지는 두 종류의 setCustomAnimations()를 지원합니다

    • 또 한 가지 주목해야 할 점은 해당 애니메이션 유형이 트윈 애니메이션(Tween)이라는 점입니다. 이는 위의 보기와 동일합니다~
    혼란스러울 수도 있습니다. , 해당 애니메이션 유형을 어떻게 알 수 있습니까? 실제로 Fragment 소스 코드만 찾으면 됩니다.

    2.pngonCreateAnimation() 메서드의 반환 값:

    v4 package

    :

    app package

    :

    3.png

    7. 활동용 컷씬 설정

    Activty 컷씬 설정은 매우 간단합니다. 호출 방법은 다음과 같습니다: 4.pngoverridePendingTransition

    (int enterAnim, intexitAnim)

    사용법은 매우 간단합니다:

    in startActivity( 의도)

    또는 finish() 뒤에 추가되는 매개변수는 다음과 같습니다:

    새 활동이 들어갈 때의 애니메이션

    및 이전 활동이 종료될 때의 애니메이션 다음은 비교적 간단하고 일반적으로 사용되는 컷씬 애니메이션입니다. ~

    다운로드 포털:

    Activity 공통 전환 animation.zip

    5.png

    8. 앱 진입 후 하단에 팝업되는 로그인 등록 버튼의 애니메이션 효과 예를 작성하세요:

    렌더링 실행 중 :

    코드 구현:

    첫 번째는 레이아웃 파일입니다.

    activity_main.xml6.gif:

    public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn_alpha;
    private Button btn_scale;
    private Button btn_tran;
    private Button btn_rotate;
    private Button btn_set;
    private ImageView img_show;
    private Animation animation = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
    }

    private void bindViews() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        btn_tran = (Button) findViewById(R.id.btn_tran);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_set = (Button) findViewById(R.id.btn_set);
        img_show = (ImageView) findViewById(R.id.img_show);

        btn_alpha.setOnClickListener(this);
        btn_scale.setOnClickListener(this);
        btn_tran.setOnClickListener(this);
        btn_rotate.setOnClickListener(this);
        btn_set.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_alpha:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_alpha);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_scale:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_scale);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_tran:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_translate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_rotate:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_rotate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_set:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_set);
                img_show.startAnimation(animation);
                break;
        }
    }
}

    다음은 MainActivity.java:

    입니다.
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DDE2E3"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/start_ctrl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:visibility="gone">

        <Button
            android:id="@+id/start_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#F26968"
            android:gravity="center"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="登陆"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />

        <Button
            android:id="@+id/start_register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#323339"
            android:gravity="center"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="注册"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />
    </LinearLayout></RelativeLayout>

    댓글이 매우 명확하므로 여기에서는 설명하지 않겠습니다. TranslateAnimation.RELATIVE_TO_SELF에 대해 의문이 있는 경우, 공간 제한으로 인해(게으르기 때문에) 여기에 작성하지 않겠습니다~7.gif

    9 이 섹션에서 코드 샘플을 다운로드하세요.

    AnimationDemo3.zip

    AnimationDemo4.zip

    이 섹션 요약:

    이 섹션에서는 Android의 두 번째 애니메이션(그라데이션 애니메이션)에 대한 자세한 설명과 네 가지 애니메이션에 대한 자세한 설명 및 애니메이션 리스너를 설정하고 View, Fragment 및 Activity에 대한 애니메이션을 설정하는 방법 및 마지막으로 항목 작성 후 작성 앱 하단에 로그인 버튼과 등록 버튼이 팝업되는 예시는 조금 길 수 있지만 이해하기 매우 쉽다고 믿습니다. 다들 많이 얻으실거에요~! 자, 여기까지입니다 감사합니다~