Androidで荷包アプリの起動アニメーションを模倣

荷包Appを使用しているときに、起動アニメーションがとても面白いことに気づき、それを模倣して実現しました。

gif効果画像：

animation.gif

実現方法：

慎重に観察すると、アニメーションの実行は2つの段階に分かれていることがわかります：
第1段階はコインの落下です。
第2段階はウォレットの反発です。

レイアウト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%"/>

回転アニメーションは、Animationをオーバーライドし、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)を呼び出し、その後画像を元に戻します。そうすると、見えるアニメーション効果はコインが中心から回転し続けるように見えます。
最後に上記の2つのアニメーションを同時に実行し、落ちる回転効果を実現します。

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#oldtoolbag.com（メール送信時は、#を@に変更して報告してください。関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。)