개시하다

dex.fm라는 안드로이드 과학과 팟캐스트의 ep20에는 에어비앤비Epoxy와 Lottie 두 개의 OSS 라이브러리가 소개됐다.
그 중에서 Lottie는 애니메이션을 간단하게 실현할 수 있는 프로그램 라이브러리로 Android 외에 iOS와 React Native에 대응하는 프로그램 라이브러리Lottie를 제공한다.
자세한 내용은 아래의 내용을 참조하시오.
https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e#.dmmsfvxy5 Epoxy와 Lottie 둘 다 재미있어 보이지만 취미로 만든 애플리케이션이'즐겨찾기 버튼'설치에 고민을 하고 있어 조사 사용Lottie을 시작했다.
나는 일본어에 대한 정보가 매우 적다고 생각하지만 Giithub의 README.MD는 상당히 예의가 바르기 때문에 쉽게 도입할 수 있습니다.그래서 별로 필요하지 않을 수도 있지만 어렵기 때문에 필기를 남기로 했다.

글을 짓다

lottie-android 샘플 중의 페이버릿 스타를 사용하여 이런 샘플을 만들었다. 클릭하면 애니메이션 스타가 색칠을 하고 클릭하면 하얗게 변한다.
그 요점을 적어라.제작된 샘플은 이런 느낌입니다.비록 매우 작지만

여기에 프로젝트 제작 등 상세한 절차는 기재되지 않는다.샘플 코드가 Giithub로 높아질 테니 저쪽을 참조하세요.
https://github.com/hotdrop/favostar-sample-android
(안드로이드 스튜디오에서 샘플 프로젝트를 제작했는데 템플릿은 EnpotyActivity로 최소한의 코드만 쓴다.)
한편 본 기사는 Lottie 할 수 있는 일의 일부분을 소개했다.
Giithub의 README.md에도 다양한 gif가 붙어 있는 것처럼 다양한 애니메이션을 실현할 수 있다.

사용 조건

어차피 API 레벨 23 같은 거겠지, README.md에 다음과 같은 내용이 쓰여 있습니다.
Lottie supports ICS (API 14) and above.
그리고 이번에 제가 검증한 환경은 키트캣(API19)입니다.

1.build.gradle 편집

build 를 사용합니다.gradle에 다음 내용을 추가하십시오.
build.gradle

compile 'com.airbnb.android:lottie:1.5.3'

2. 애니메이션 json 파일 준비

Lottie에서 Lottie 형식으로 애니메이션을 표현합니다.json 항목견본을 참조하십시오.
이번엔 여기서부터lottiefiles.com - Favorite Star.제이슨을 사용할 수 있도록 허락해 주십시오.
자신의 항목Lottie 디렉터리에 Assets 파일을 놓으십시오.
또한 json 이 파일의 이름이 매우 길기 때문에 본 프로젝트를 받았을 때lottiefiles.com - Favorite Star.json 이름을 바꾸었다.

3. layout에 Animation View 추가

모든 애니메이션의 View는 이 FavoriteStar.json에 정의되어 있습니다.LottieAnimationView에 지정된 파일lottie_fileName은 json 디렉토리의 바로 아래에 있습니다.Assets 파일도 코드에서 지정할 수 있다json.
자세한 내용은 xml의 README입니다.md(Using Lotte의 장)를 참조하십시오.
layout

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="FavoriteStar.json"
    app:lottie_loop="false"
    app:lottie_autoPlay="false" />

4. 애니메이션의 실현

java 코드는 다음과 같습니다.
설치 섹션

// AnimationViewのクリック状態を保持するためのフィールドです。
private boolean clickedFav = false;

/* この間は省略 */

final LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(clickedFav) {
            // setProgress(0f)でアニメーション開始前状態にします。
            animationView.setProgress(0f);
            clickedFav = false;
        } else {
            animationView.playAnimation();
            clickedFav = true;
        }
    }
});

나는 애니메이션에 익숙하지 않아서 "어? 스타의 ON/OFF를 어떻게 표현하지?"라고 물었다.나는 한순간에 이해하지 못했다.
애니메이션이기 때문에'스타가 없다/스타가 있다'는 두 가지 상태가 아니라 애니메이션으로 연속된 상태이다.
스타가 없는 상태는 Lottie로 표시한다.애니메이션의 시간 표시줄을 0초로 설정한 이미지입니다.setProgress(0f)면 애니메이션이 완성됩니다.처음부터 스타가 있었으면 좋겠다면 이걸로 하자.setProgress(1f)면 스타 애니메이션이 중간에 멈춘다.
이건 Lottie 샘플 애플리케이션만 움직이면 알 수 있어요.
이번에는'클릭/클릭 없음'이라는 두 가지 상태setProgress(0.5f)만 노려 보여줬다.

총결산

이번에 Favoriite Star를 간단하게 소개했으니 다른 아이콘화된 애니메이션도 같은 이치로 처리할 수 있을 것이다.샘플이 번거롭기 때문에Activity에 설정합니다. 예를 들어 목록boolean(clickedFav)에 CardView를 추가하면 항목마다 폴더 단추를 간단하게 설정할 수 있습니다.
또한 처음에 이 문장LottieAnimationView의 미세한 접촉을 썼기 때문에 상당히 신경 쓰는 애니메이션을 많이 실현할 수 있을 것 같다.
GiithubLottie 창고에도 Lottie Sample라는 샘플 앱이 있어 다양한 애니메이션을 만질 수 있다.
또한 Google Play 상점에서도 샘플 애플리케이션을 제공하는 것과 거의 같다고 생각합니다.
샘플이지만 여러가지 신경을 써서 아주 잘 만들었어요. 관심 있는 분들은 만져보세요.