Animazione di avvio per un'app simile a borsa in Android

Utilizzando l'app Wallet, ho notato che l'animazione di avvio è piuttosto divertente, quindi l'ho imitata e realizzata.

Esempio di effetto GIF:

animation.gif

Pensiero di realizzazione:

Osservando attentamente, si può vedere che l'esecuzione dell'animazione è divisa in due fasi:
La prima fase è la caduta delle monete.
La seconda fase è la rimbalzata della borsa.

Il file XML di layout è il seguente:

<?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>

Caduta della moneta:

Durante la caduta della moneta vengono eseguite due animazioni, lo spostamento e la rotazione.
L'animazione di spostamento utilizza l'animazione di interpolazione, il file xml è il seguente:

<?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%"/>

La animazione di rotazione utilizza la sovrascrittura di Animation e l'uso della classe 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);  
  // Coordinate del punto centrale
  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(); 
  // Rotazione attorno all'asse Y
  camera.rotateY(360 * interpolatedTime);  
  camera.getMatrix(matrix);  
  // Impostazione del punto di inversione della riflessione 
  matrix.preTranslate(-centerX, -centerY); 
  matrix.postTranslate(centerX, centerY);   
  camera.restore();  
 }
}

Ecco una spiegazione rapida dei metodi preTranslate e postTranslate dell'animazione: preTranslate si riferisce a una traslazione prima di rotateY, mentre postTranslate si riferisce a una traslazione dopo rotateY, attenzione che i loro parametri sono la distanza di traslazione, non la posizione di destinazione!
Poiché la rotazione è centrata su (0,0), per allineare il centro della moneta con (0,0), è necessario eseguire preTranslate(-centerX, -centerY), una volta completata la rotazione attorno a Y, chiamare postTranslate(centerX, centerY), poi spostare l'immagine indietro, così l'effetto visivo dell'animazione sarà la moneta che ruota continuamente dal centro.
Infine, eseguire contemporaneamente entrambe le animazioni per ottenere l'effetto di caduta e rotazione.

private void startCoin() {
// Caduta
Animation animationTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
// Rotazione
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()); 
  // Execute x, y axis scaling animation simultaneously 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

Such a simple wallet start animation effect is about to come out, the only regret is that when scaling the wallet along the y-axis, the entire y-axis will be scaled. To keep the bottom of the wallet stationary, only the top of the wallet can rebound, and there is still no good method thought of. The little brother is not talented and hopes that the great god will give instructions! Thank you!

Complete source code:

Complete source code inGitHub
If you think it's not bad, remember to star╰(￣▽￣)╮~

That's all for this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support and cheer for the tutorial.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo manual editing, nor assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once confirmed, this site will immediately delete the suspected infringing content.

Guida di base