Android 에서 Lottie 의 간단 한 사용

오랫동안 블 로 그 를 쓰 지 않 았 지만 사실은 게으르다.게다가 프로젝트 가 출시 되 어 정말 피곤 하 다!오늘 우리 무슨 얘 기 할 까요?최근 에 우리 미 공 들 도 어디서 Lottie 라 는 물건 을 발 견 했 는 지 모 르 기 때문에 제 이 슨 파일 의 애니메이션 을 만 들 었 습 니 다. 달 려 와 서 저 는 이 애니메이션 효 과 를 보 겠 다 고 했 습 니 다. 사실은 예전 에 Lottie 에 대해 어느 정도 알 고 있 었 습 니 다!그래서 직접 Demo 를 써 서 보 여 드 렸 는데 제 일 관 된 오줌 성에 대해 서 재 미 있 는 것 같 아서 연 구 를 해 봤 습 니 다. 그래서 여기 서 공유 해 드 리 겠 습 니 다.
\ # 본문 지식 포인트:

Lottie 의 소개

Lottie 의 간단 한 사용

Lottie 가 프로젝트 에 사용 할 수 있 는 내용

Lottie 의 사례 분석

1. Lottie 의 소개
Lottie 는 Android 와 iOS 의 모 바 일 라 이브 러 리 로 Adobe After Effects 애니메이션 을 Bodymovin 과 함께 json 으로 내 보 내 고 모 바 일 장치 에 보 여 줍 니 다!사실은 모 바 일 에서 json 파일 을 통 해 해당 하 는 애니메이션 을 보 여 주 는 것 입 니 다. 사실은 이렇게 하면 애니메이션 을 동적 으로 바 꾸 는 능력 을 잘 해결 하고 해당 하 는 josn 파일 만 동적 으로 불 러 오 면 애니메이션 의 변 화 를 실현 할 수 있 습 니 다!아 끼 는 모 바 일 에서 버 전 변경 이 진행 되 고 있 습 니 다!제 이 슨 파일 을 어떻게 얻 었 는 지 에 대해 저 는 여기 서 연구 할 준비 가 되 어 있 지 않 습 니 다. AE, PS 가 무엇 인지 저 는 정말 할 줄 모 릅 니 다!나 에 게 너희들 이 미술 을 할 줄 모른다 고 말 하지 마라, 할 줄 모 르 면 그들 에 게 배우 라 고 해라, 그들 이 배우 지 않 으 면 어 떡 하지?당신들 은 이 사이트 에 가서 해당 하 는 애니메이션 을 찾 을 수 있 습 니 다. 여기까지 만 도와 줄 수 있 습 니 다!만약 당신 이 정말 AE, PS 따위 에 관심 이 있다 면, 스스로 미 공학 을 찾 으 면 됩 니 다!어쩌면 친 한 척 하면 서 아 내 를 데 리 고 집에 갈 지도 몰라!하하
2. Lottie 의 간단 한 사용
사실 간단하게 사용한다 면 정말 바보 같은 조작 이다!그래도 여기 서 설정 할 수 있 는 속성 을 말씀 드 려 야 될 것 같 아 요.

lottie_fileName 에 해당 하 는 json 파일 (app / src / main / assets 디 렉 터 리 에 있 는 애니메이션 json 파일 이름 을 설정 합 니 다. 이 파일 의 생 성에 대해 서 는 다음 에 제 가 그림 을 붙 여 드 리 면 알 수 있 습 니 다!!)

lottie_loop 설정 애니메이션 의 순환 여 부 는 기본적으로 순환 되 지 않 습 니 다. (이것 은 새 버 전에 서 사용 하 는 것 을 권장 하지 않 습 니 다!)

lottie_colorFilter 는 애니메이션 의 착색 색 을 설정 합 니 다. 이것 은 바로 당신 의 애니메이션 을 하나의 색 으로 만 든 것 입 니 다!하지만 어떤 애니메이션 은 너무 깊 으 면 흐릿 해 집 니 다!그래서 이 물건 이 제 이 슨 파일 의 내용 과 관련 이 있 는 것 같 아 요!!

lottie_자동 재생 설정 애니메이션 자동 재생 여부

lottie_repeatCount 반복 횟수

lottie_imageAssetsFolder 애니메이션 이 의존 하 는 이미지 자원 파일 주소

lottie_scale 애니메이션 의 비율 을 설정 하지만 제 가 설정 하면 소 용이 없습니다!!

lottie_repeat Mode 설정 애니메이션 의 중복 모드 RESTART: 중복, REVERSE: 역방향

assets 폴 더 를 만 드 는 방법, 그림 의 위치 에 따라 클릭 하면 다음 단계 로 넘 어가 면 됩 니 다!!

"@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="biking_is_cool.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

위 에서 이렇게 하면 해당 하 는 애니메이션 이 나 옵 니 다!여기에 해당 하 는 애니메이션 효 과 를 보 여 드 리 겠 습 니 다!!!
3. Lottie 가 프로젝트 에 사용 할 수 있 는 내용
프로젝트 에서 Lottie 를 사용 할 때 애니메이션 취소, 애니메이션 일시 정지 등 많은 문제 가 발생 합 니 다!여 기 는 간단하게 여러분 과 나 눠 보도 록 하 겠 습 니 다!
3.1 Lottie 코드 에 애니메이션 불 러 오기
어떤 사람들 은 XML 로 애니메이션 을 불 러 오 는 것 을 좋아 하지 않 을 수도 있 습 니 다. 왜냐하면 이것 도 인터넷 에서 해당 하 는 애니메이션 을 가 져 올 수 없 기 때문에 일부 사람들 은 코드 로 애니메이션 을 불 러 옵 니 다!밑 에 이렇게!

    mLottieAnimationView = findViewById(R.id.lav_animation);
    mLottieAnimationView.setAnimation("giftbox.json");
    //         
    // mLottieAnimationView.loop(true);
    //    -1            ！
    mLottieAnimationView.setRepeatCount(-1);
    mLottieAnimationView.playAnimation();

간단 한 이 몇 줄 의 코드 는 해당 하 는 애니메이션 을 실현 할 수 있 습 니 다!쉽 지?
3.2 Lottie 가 서비스 에서 해당 하 는 내용 을 얻 으 려 면 무엇 을 주의해 야 합 니까?
어떤 때 는 프로젝트 의 수 요 는 서버 에서 해당 하 는 json 파일 을 가 져 와 코드 를 보 여 주 는 것 입 니 다!이렇게 하면 애니메이션 의 효 과 를 바 꿀 수 있 을 뿐만 아니 라 동태 적 으로 실시 간 으로 얻 을 수 있어 앱 이 해당 하 는 업 데 이 트 를 하지 않도록 합 니 다!
예전 에 전자상거래 프로젝트 를 했 는데 가끔 밑 에 있 는 Tab 에 해당 하 는 명절 Tab 가 있 었 습 니 다. 이 럴 때 서비스 위 에서 해당 하 는 json 파일 을 얻어 해당 하 는 전 시 를 할 수 있 습 니 다!그러나 한 가지 문 제 를 잊 지 마 세 요. 서버 가 제 이 슨 을 가 져 올 때 사용자 의 네트워크 속도 등 으로 인해 잠시 다운로드 할 수 없 는 상황 일 수 있 습 니 다. 그러면 문제 가 생 겼 습 니까?json 을 가 져 오지 않 았 을 때 어떻게 해결 하 는 지, 이전에 우리 의 방법 은 기본 그림 (setImageResource (R. mipmap. ic launcher) 을 설정 하여 설정 하 는 것 입 니 다. josn 파일 을 다운로드 할 때 해당 코드 를 호출 하여 불 러 옵 니 다!밑 에 이렇게.

        mLottieAnimationView = findViewById(R.id.lav_animation);
        mLottieAnimationView.setImageResource(R.mipmap.ic_launcher);

        new Thread() {
            @Override
            public void run() {
                super.run();
                try {
                    sleep(5000);//       
                    String json = "       ，        json   ";
                    mLottieAnimationView.setAnimationFromJson(json);
                    //    -1            ！
                    mLottieAnimationView.setRepeatCount(-1);
                    mLottieAnimationView.playAnimation();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }.start();

여기 주의 할 점 이 하나 더 있 습 니 다. 하지만 제 가 한번 해 봤 습 니 다. 그러면 몇 초 지연 이 있 습 니 다!!
3.3 Lottie 의 캐 시 메커니즘
Lottie 내부 에 해당 하 는 캐 시 메커니즘 이 존재 합 니 다. 즉, json 을 불 러 올 때 해당 하 는 캐 시 를 사용 하여 불 러 올 수 있 습 니 다!!이렇게...

setAnimation(final String animationName, final CacheStrategy cacheStrategy)

LottieAnimationView. CacheStrategy. None 캐 시 없 음

LottieAnimationView. CacheStrategy. Weak 약 인용 캐 시

LottieAnimationView. Cache Strategy. Strong 은 캐 시 를 강하 게 인용 하여 애니메이션 을 불 러 올 때 해당 하 는 캐 시 를 설정 할 수 있 습 니 다. 캐 시 는 맵 집합 에 있 습 니 다. 다음 에 이 맵 집합 에서 직접 가 져 옵 니 다!!

3.4 Lottie 의 특수 사용
만약 에 여러분 의 미 공 들 이 연구 할 수 있다 면 이 제 이 슨 파일 에 관련 된 그림 도 넣 을 수 있 습 니 다. 구체 적 으로 어떻게 해 야 할 지 모 르 겠 습 니 다. 시간 이 있 으 면 제 가 가서 물 어 보 겠 습 니 다. 관련 사진 을 넣 을 수 있 는 이상 많은 쇼 장의 애니메이션 도 Lottie 로 이 루어 졌 습 니 다. 어떻게 이 루어 졌 습 니까?기본적으로 서 비 스 를 시작 합 니 다. 현재 해당 하 는 제 이 슨 파일 과 그림 을 메모리 카드 에 넣 고 사용 할 때 로 컬 저장 소 에서 직접 스 트림 형식 으로 취하 면 됩 니 다!제 가 예전 에 관련 쇼 애니메이션 을 한 적 이 있 기 때문에 여기 서 조금 알 고 있 습 니 다. 저도 관련 블 로 그 를 찾 았 습 니 다. 관심 이 있 으 면 Lottie - 생방송 선물 애니메이션 에 쓰 인 내용 을 쉽게 동적 으로 불 러 올 수 있 습 니 다!여 기 는 설명 을 하지 않 겠 습 니 다!
기본적으로 프로젝트 에서 Lottie 의 사용 장면 은 이렇게 많 습 니 다. 사실 저 는 제 가 분석 한 것 이 그렇게 투철 하지 않다 고 생각 합 니 다. 일부 소스 코드 부분 에 관 한 내용 을 자세히 보지 못 했 습 니 다. 최근 에 프로젝트 에 대한 수요 가 너무 많 습 니 다!여러분 힘 내세 요!안 드 로 이 드 의 큰 구덩이 에 들 어가 면 언제 구 덩이 를 벗 을 수 있 습 니까!!!오늘 은 여기까지 안녕!!!