Android 아 날로 그 스위치 단 추 를 누 르 면 애니메이션 열기(속성 애니메이션 의 이동 애니메이션)

안 드 로 이 드 에서 일부 시 크 한 애니메이션 은 확실히 사람 을 끌 어 당 기 는 곳 이다.보면 눈 과 마음 을 즐겁게 하고 예 쁜 애니메이션 은 사용자 가 소프트웨어 에 대한 사용률 을 높 일 수 있다.또한 애니메이션 은 안 드 로 이 드 에서 두 가지 애니메이션 을 지원 합 니 다.보충 애니메이션 과 속성 애니메이션 입 니 다.이 두 가지 애니메이션 의 차 이 는 여기 서 소개 하지 않 고 개발 자 들 이 사용 하 는 과정 에서 이들 의 차 이 를 체험 하 기 를 바 랍 니 다.
본 고 는 속성 애니메이션 을 사용 하여 완성 되 었 습 니 다.속성 애니메이션 이 라면 JakeWharton 대신 이 쓴 Nine Old Androids 애니메이션 라 이브 러 리 를 언급 해 야 합 니 다.만약 에 app 이 android 3.0 이하 에서 속성 애니메이션 을 사용 해 야 한다 면 이 라 이브 러 리 는 매우 효과 적 입 니 다.만약 에 높 은 버 전에 서 만 사용 하면 시스템 에서 제공 하 는 애니메이션 API 를 직접 사용 하면 됩 니 다.
먼저 본 고 에서 실현 하고 자 하 는 애니메이션 효 과 를 살 펴 보 자.손가락 을 위로 스위치 버튼 으로 이동 한 다음 에 동작 을 클릭 하고 스위치 를 닫 을 때 부터 애니메이션 을 열 때 까지 실행 하 는 동시에 손가락 을 아래로 이동 하여 원래 의 위치 로 돌아간다.
그림 을 클릭 하여 해당 링크 로 이동 하여 애니메이션 보기

애니메이션 사용 장면
사용자 로 하여 금 특정한 기능 의 스위치 단 추 를 열 게 하거나 시스템 의 특정한 설정 을 열 게 할 때 애니메이션 을 추가 하면 사용자 의 조회 수 를 높 일 수 있 고 표현 하 는 의미 도 더욱 명확 하 다.
실현 되 기 전에 먼저 다음 과 같은 준 비 를 잘 해 야 한다.
1.나 인 올 드 안 드 로 이 드-2.4.0.jar 의 라 이브 러 리 를 다운로드 하여 안 드 로 이 드 studio 프로젝트 디 렉 터 리 의 libs 폴 더 에 넣 습 니 다.
2.build.gradle 파일 에 도입

dependencies {
compile files('libs/nineoldandroids-2.4.0.jar')
}

3.관련 이미지 자원 준비

다음 에 사용자 정의 컨트롤 을 패키지 하여 전체 애니메이션 을 실현 합 니 다.
첫 번 째 단계:레이아웃 파일 finger 정의switch_on_guide_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/switch_anim_root"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="42dp"
android:layout_height="25dp"
android:background="@drawable/switch_container" />
<ImageView
android:id="@+id/switch_anim_circle_point"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="2.5dp"
android:layout_marginTop="2.5dp"
android:background="@drawable/switch_off_circle_point" />
</FrameLayout>
<ImageView
android:id="@+id/finger_switch"
android:layout_width="34dp"
android:layout_height="41dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="25dp"
android:background="@drawable/finger_normal" />
</merge>

레이아웃 파일 의 프 리 케이블 길 이 는 다음 과 같 습 니 다:

두 번 째 단계:사용자 정의 컨트롤(SwitchOnAnimView)을 정의 하여 전체 애니메이션 을 실현 합 니 다.

package com.androidanimation.animationview;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.FrameLayout;
import android.widget.ImageView;
import com.androidanimation.R;
import com.androidanimation.animations.BaseAnimatorListener;
import com.androidanimation.utils.ViewUtil;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.ObjectAnimator;
import com.nineoldandroids.view.ViewHelper;
/**
* Created by popfisher on 2016/9/3.
*/
public class SwitchOnAnimView extends FrameLayout {
private Handler mHandler = new Handler();
/**        View */
private ImageView mCirclePtImgv;
/**   View */
private ImageView mFingerImgv;
/**         */
private float mFingerMoveDistance;
/**        View        */
private float mCirclePtMoveDistance;
private static final int FINGER_ANIM_DURATION = 300;
private static final int CIRCLE_PT_ANIM_DURATION = 500;
private boolean isStopAnim = false;
public SwitchOnAnimView(Context context) {
this(context, null);
}
public SwitchOnAnimView(Context context, AttributeSet attrs) {
super(context, attrs);
//     
LayoutInflater.from(context).inflate(R.layout.finger_switch_on_guide_layout, this, true);
initView();
}
private void initView() {
mCirclePtImgv = (ImageView) findViewById(R.id.switch_anim_circle_point);
mFingerImgv = (ImageView) findViewById(R.id.finger_switch);
//          UI     
mFingerMoveDistance = ViewUtil.dp2px(getContext(), 20f);
mCirclePtMoveDistance = ViewUtil.dp2px(getContext(), 17.5f);
}
/**
*     
*/
public void startAnim() {
isStopAnim = false;
//              
ViewHelper.setTranslationX(mCirclePtImgv, 0);
mCirclePtImgv.setBackgroundResource(R.drawable.switch_off_circle_point);
mFingerImgv.setBackgroundResource(R.drawable.finger_normal);
startFingerUpAnim();
}
/**
*     
*/
public void stopAnim() {
isStopAnim = true;
}
/**
*      View    
*/
private void startCirclePointAnim() {
if (mCirclePtImgv == null) {
return;
}
ObjectAnimator circlePtAnim = ObjectAnimator.ofFloat(mCirclePtImgv, "translationX", 0, mCirclePtMoveDistance);
circlePtAnim.setDuration(CIRCLE_PT_ANIM_DURATION);
circlePtAnim.start();
}
/**
*         
*/
private void startFingerUpAnim() {
ObjectAnimator fingerUpAnim = ObjectAnimator.ofFloat(mFingerImgv, "translationY", 0, -mFingerMoveDistance);
fingerUpAnim.setDuration(FINGER_ANIM_DURATION);
fingerUpAnim.addListener(new BaseAnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
if (mFingerImgv == null || mHandler == null) {
return;
}
//                View          
mFingerImgv.setBackgroundResource(R.drawable.finger_click);
//                ，  200        
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
if (mCirclePtImgv == null || mHandler == null) {
return;
}
//      View                   
mCirclePtImgv.setBackgroundResource(R.drawable.switch_on_circle_point);
startCirclePointAnim();
//   100            
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
//                      
if (mFingerImgv != null) {
mFingerImgv.setBackgroundResource(R.drawable.finger_normal);
}
startFingerDownAnim();
}
}, 100);
}
}, 200);
}
});
fingerUpAnim.start();
}
/**
*         
*/
private void startFingerDownAnim() {
if (mFingerImgv == null) {
return;
}
ObjectAnimator fingerDownAnim = ObjectAnimator.ofFloat(mFingerImgv, "translationY", -mFingerMoveDistance, 0);
fingerDownAnim.setDuration(FINGER_ANIM_DURATION);
fingerDownAnim.addListener(new BaseAnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
//           ，        ，         ，      ，  1 
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
if (isStopAnim) {
return;
}
startAnim();
}
}, 1000);
}
});
fingerDownAnim.start();
}
} 

마지막 단계:SwitchOnAnimView 를 추가 하고 startAnim 방법 으로 애니메이션 을 실행 하 는 캐리어 를 찾 습 니 다.여기 서 Activity 에서 이 애니메이션 을 재생 합 니 다.
activity 레이아웃 파일 activity 정의finger_switchon_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_animation_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<com.androidanimation.animationview.SwitchOnAnimView
android:id="@+id/switch_on_anim_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

Activity:FingerSwitchOnAnimActivity 정의 및 구현

package com.androidanimation;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import com.androidanimation.animationview.SwitchOnAnimView;
public class FingerSwitchOnAnimActivity extends Activity {
private Handler mHandler = new Handler();
private SwitchOnAnimView mSwitchOnAnimView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_finger_switchon_anim);
mSwitchOnAnimView = (SwitchOnAnimView) findViewById(R.id.switch_on_anim_view);
}
@Override
protected void onResume() {
super.onResume();
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
mSwitchOnAnimView.startAnim();
}
}, 500);
}
@Override
protected void onPause() {
super.onPause();
mSwitchOnAnimView.stopAnim();
}
}

애니메이션 구현 요약:
Android 의 애니메이션 을 파악 하 는 것 은 어렵 지 않 습 니 다.어 려 울 때 복잡 한 애니메이션 을 어떻게 실현 하 는 지 복잡 한 애니메이션 을 실현 하 는 몇 가지 절 차 를 정리 하 겠 습 니 다.
1.애니메이션 분해:모든 복잡 한 애니메이션 은 여러 원자 애니메이션 의 조합 으로 분해 할 수 있다.
2.애니메이션 연결 시기 분석:복잡 한 애니메이션 이 여러 개의 원자 애니메이션 으로 분 해 된 후에 다시 연결 해 야 한다.
여기 가 바로 각 원자 애니메이션 의 집행 시기 이 고 누가 먼저 하고 누가 나중에 동시에 집행 하 는 지 하 는 것 이다.
3.원자 애니메이션 구현:해 체 된 원자 애니메이션 을 순서대로 구현
　    4.애니메이션 조립:위 에 준 비 된 후에 원자 애니메이션 을 일정한 규칙 에 따라 조립 하고 연결 시 키 면 전체 복잡 한 애니메이션 이 작 동 합 니 다.
원자 애니메이션:본 고 는 더 이상 분할 할 수 없 는 애니메이션 을 말한다.
본 논문 의 애니메이션 을 보면 애니메이션 은 네 가지 로 나 눌 수 있다.
a.손가락 위로 이동 애니메이션
b.손가락 클릭 조작(여 기 는 애니메이션 이 아니 라 간단 한 애니메이션 으로 도 사용 할 수 있 습 니 다)
c.스위치 단추 원점 에서 오른쪽으로 이동 애니메이션
　  d.손가락 아래로 이동 애니메이션.
본 애니메이션 의 실행 시 기 는 다음 과 같다.
a 먼저 실행,a 실행 완료 후 즉시 b 실행,b 실행 완료 후 200 ms 실행 c(클릭 효과 구현)
c 실행 시작 100 ms 후 실행 d
애니메이션 의 해체 와 애니메이션 의 연결 시기 분석 은 쉽 지 않다.육안 으로 는 관찰 할 수 없 기 때문에 애니메이션 을 재생 할 때 천천히 보아 야 한다.만약 에 티 가 나 지 않 는 다 면 회사 의 UI 동 료 를 찾 아 분석 에 협조 하 는 것 이 좋다.우 리 는 애니메이션 을 간단하게 구분 하고 애니메이션 을 확대 하 는 것 이 간단 하지만 사인 알고리즘 애니메이션 이나 다른 알고리즘 이 제어 하 는 애니메이션 을 구분 할 수 없습니다.본 논문 에서 애니메이션 은 상대 적 으로 간단 하고 실현 하기 도 쉽 지만 사상 은 똑 같 습 니 다.