Android 가 구현 한 드 롭 다운 리 셋 효과

다음은 자신 이 실현 한 효과 입 니 다.

1.분석
애니메이션 을 다음 으로 분해 할 수 있 습 니 다:
눈 을 뜬 당 나 귀 는 중심 지 구 를 돌 며 지구 중심 에 도 착 했 을 때 눈 을 감 은 당나귀 로 전환 하여 마지막 에 발사 되 었 다.
지 구 는 스스로 회전 하 며,내 려 가면 서 천천히 상승 하여,반지름 거리 에 도달 한 후 상승 을 멈 추 었 다.
위 에서 아래로 이동 하 는 위성
2.실현
(1)장 착 app 을 다운로드 한 후 접미사 이름 을 zip 압축 해제 로 바 꾸 어 우리 가 필요 로 하 는 자원 그림 을 가 져 옵 니 다.

(2)우 리 는 먼저 위성의 상하 이동 을 실현 한다.
핵심 코드:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrixPlanet = new Matrix();
        matrixPlanet.setScale(0.4f, 0.4f);
        matrixPlanet.postTranslate(locationX / 2 * 3, locationY /4);
        matrixPlanet.postTranslate(0, upDateY);
        canvas.drawBitmap(flyingPlanet,matrixPlanet,null);

    }
    public void startTranslatePlanet(int duration){
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setFloatValues(-50.0f, 50.0f);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                upDateY = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();
    }

사상:Matrix 를 사용 하여 도형 변환 을 설정 하고 setScale()을 호출 하여 Bitmap 크기 를 설정 한 다음 post Translate()를 호출 하여 Bitmap 를 위성의 초기 위치 로 이동 합 니 다.마지막 으로 ValueAnimator 를 이용 해 위성 이 상하 로 이동 하 는 거 리 를 계산 한 뒤 post Translate()를 호출 하면 된다.
(3)지 구 는 스스로 회전 하 며 내 려 가면 서 천천히 상승 하여 반경 거리 에 도달 한 후에 상승 을 멈춘다.
핵심 코드:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrixBall = new Matrix();
        matrixBall.setScale(0.2f, 0.2f);
        if ((locationY  + upDateY) > (locationY - flyingBall_Height / 2)) {
            matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY  + upDateY);
            matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2)  );
        }
        else {
            matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY - flyingBall_Height / 2);
            matrixBall.postRotate(degreeBall, locationX, locationY);

        }

        canvas.drawBitmap(flyingBall, matrixBall, null);
        canvas.drawBitmap(cloudBig , null , rectfCloudBig , null);
        canvas.drawBitmap(cloudSmall , null , rectfCloudSmall ,null);

    }

    public void startBallAnim(long duration) {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setFloatValues(0.0f, 360.0f);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                degreeBall = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();
    }
    public void UpBall(float offsetY){
        if (upDateY!=offsetY) {
            upDateY = offsetY;
            invalidate();
        }
    }

    public void accelerateBall(long duration) {
        clearAnimation();
        startBallAnim(duration);
    }

사상:마찬가지 로 Matrix 를 사용 하여 크기 를 먼저 설정 합 니 다.호출

matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY  + upDateY);

bitmap 를 view 시각 범위 아래 에 숨 긴 다음 드 롭 다운 리 셋 목록 을 통 해 드 롭 다운 리 셋 된 Y 좌표 의 변 경 량 을 가 져 옵 니 다.post Translate()에서 양 크기 를 변경 하 는 거 리 를 호출 하면 됩 니 다.자전 애니메이션 의 실현 은 post Rotate()방법 으로 ValueAnimator 를 사용 하여 변 경 량 을 얻 는 것 입 니 다.지 구 는 상승 하기 때문에 우 리 는 회전 하 는 중심 을 동태 적 으로 설치 해 야 한다.

matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2)  );

드 롭 다운 리 셋 목록 을 빼 고 드 롭 다운 리 셋 된 Y 좌표 의 변 경 량 을 얻 으 면 됩 니 다.
(3)눈 뜬 당 나 귀 는 중심 지 구 를 돌 며 지구 중심 에 도 착 했 을 때 눈 을 감 은 당나귀 로 전환 하여 마지막 에 발사한다.
핵심 코드:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrix = new Matrix();
        matrix.setScale(0.3f, 0.3f);
        matrix.postTranslate(pointDonkey.getDx(), pointDonkey.getDy());
        matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);
        matrix.postTranslate(0 , upDateY);
        canvas.drawBitmap(flyingDonkey, matrix, null);
    }

사상:위 와 마찬가지 로 setScale()을 사용 하여 크기 를 조정 하고 이동 회전 작업 을 할 때.

 matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);
 matrix.postTranslate(0 , upDateY);

우 리 는 먼저 아직 움 직 이지 않 은 지 구 를 돌 고 나 서 post Translate()를 이용 하여 지구 와 함께 상승 시 켰 다.
원본 주소:
https://github.com/sangenan/DonkeyRefresh
여기까지 면 끝 이 야.
이상 은 안 드 로 이 드 가 실현 한 드 롭 다운 리 셋 효과 에 대한 상세 한 내용 입 니 다.안 드 로 이 드 드 드 롭 다운 리 셋 에 관 한 자 료 는 다른 관련 글 을 주목 하 세 요!