Android 앱을 모방한 가방 앱 시작 애니메이션

荷包 앱을 사용할 때 시작 애니메이션이 매우 재미있어 보여서, 그를 모방하여 구현했습니다.

gif 시각화 효과：

animation.gif

구현 방법：

주의 깊게观察하면, 애니메이션의 실행이 두 단계로 나뉘어 진행된다는 것을 알 수 있습니다：
첫 번째 단계는 동전이 떨어지는 단계입니다。
두 번째 단계는 지갑 반등입니다。

레이아웃 xml 파일은 다음과 같습니다：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="vertical"
      tools:context=".MainActivity">
  <ImageView
    android:id="@"+id/coin_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@mipmap"/coin"/>
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="70dp"
    android:layout_marginLeft="70dp"
    android:src="@mipmap"/version"/>
  <ImageView
    android:id="@"+id/wallet_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@mipmap"/wallet"/>
  <Button
    android:id="@"+id/start_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center|bottom"
    android:layout_marginBottom="10dp"
    android:text="start"/>
</FrameLayout>

코인 떨어지기:

코인이 떨어지는 동안 두 가지 애니메이션을 실행합니다. 이동과 회전.
위치 이동 애니메이션은 보간 애니메이션을 사용하며, 다음과 같은 xml 파일을 사용합니다:

<?xml version="1.0" encoding="utf-8"?>
<translate
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromYDelta=""-50%p"
  android:interpolator="@android:anim"/accelerate_interpolator"
  android:toYDelta="0%"/>

퍼블릭 클래스 트와이드아니메이션 익스텐즈 애니메이션 그리고 android.hardware.Camera 클래스를 사용하여 구현된 회전 애니메이션을 사용합니다.

public class ThreeDRotateAnimation extends Animation { 
 int centerX, centerY; 
 Camera camera = new Camera(); 
  @Override
  public void initialize(int width, int height, int parentWidth, int parentHeight) {}}  
  super.initialize(width, height, parentWidth, parentHeight);  
  // 중심점 좌표
  centerX = width / 2;  
  centerY = height / 2; 
  setDuration(500);  
  setInterpolator(new LinearInterpolator()); 
 }  
@Override  
protected void applyTransformation(float interpolatedTime, Transformation t) {  
  final Matrix matrix = t.getMatrix();
  camera.save(); 
  // y축을 기준으로 회전
  camera.rotateY(360 * interpolatedTime);  
  camera.getMatrix(matrix);  
  // 회전 중심점 설정 
  matrix.preTranslate(-centerX, -centerY); 
  matrix.postTranslate(centerX, centerY);   
  camera.restore();  
 }
}

여기서는 animation 내의 preTranslate와 postTranslate 메서드에 대해 간단히 설명드리겠습니다. preTranslate는 rotateY 전에 평행이동을, postTranslate는 rotateY 후에 평행이동을 의미합니다. 주의할 점은 이들의 파라미터는 평행이동의 거리이며, 목적지의 좌표가 아닙니다!
회전은 (0,0) 중심으로 이루어지므로, 동전의 중심을 (0,0)과 일치시키기 위해 preTranslate를 호출합니다.-centerX, -centerY), rotateY가 완료되면, postTranslate(centerX, centerY)를 호출하여 이미지를 다시 이동시키면, 볼 수 있는 애니메이션 효과는 동전이 중심에서 끊임없이 회전하는 것입니다.
최종적으로 이 두 가지 애니메이션을 동시에 실행하여 빨리빨리 회전 효과를 구현합니다.

private void startCoin() {
// 빨리빨리
Animation animationTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
// 회전
ThreeDRotateAnimation animation3D = new ThreeDRotateAnimation();
animation3D.setRepeatCount(10);
AnimationSet animationSet = new AnimationSet(true);
animationSet.setDuration(800);
animationSet.addAnimation(animation3D);
animationSet.addAnimation(animationTranslate);
mCoinIv.startAnimation(animationSet);
｝

지갑 반동:

硬貨가 떨어지는 동시에, 지갑 반동 시간을 판단하기 위해 ValueAnimator 애니메이션을 시작합니다.

private void setWallet() {
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(800);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
  @Override  public void onAnimationUpdate(ValueAnimator animation) {
    float fraction = animation.getAnimatedFraction();
    // 대략 지갑 상단 경계 위치에 도달할 때, ValueAnimator 애니메이션을 취소하고 지갑 반동 효과를 실행합니다.
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  }});
valueAnimator.start();
｝

마지막으로 지갑 반동 효과 애니메이션을 실행하고, 여기서 ObjectAnimator를 사용했습니다.

private void startWallet() {
  // x축 축소
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,)}} 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // y축 확대 
  ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
  objectAnimator2.setDuration(600);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new LinearInterpolator()); 
  // 동시에 x, y축 확대 애니메이션을 실행합니다 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

이렇게 간단한 지갑 시작 애니메이션 효과는 거의 나왔습니다. 유일한 불만은 지갑을 y축으로 확대할 때 전체 y축이 확대된다는 것입니다. 지갑 하단을 고정시키려면 지갑 상단만 반동하는 것이 유일한 방법입니다. 아직 좋은 방법을 생각해내지 못했습니다. 나는 무능력하니, 대신 신의를 부탁합니다! 감사합니다!

전체 소스 코드:

전체 소스 코드는GitHub
좋아 보이면, star╰(￣▽￣)╮을 기억해 주세요~

이것이 본 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한, 많이 지지해 주시길 바랍니다.呐喊 튜토리얼을 많이 지지해 주세요.

언급: 본 내용은 인터넷에서 가져왔으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 사이트는 소유권을 가지지 않으며, 인공 편집을하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, notice#w 이메일로 발송하여 주시기 바랍니다.3codebox.com（이메일을 보내면, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 사이트는 즉시 저작권 침해 내용을 삭제합니다. 사실을 확인하면 됩니다. 감사합니다!

기본 가이드

추천해 드립니다