Animation de lancement d'application ressemblant à un sac à dos Android

En utilisant l'application荷包, j'ai découvert que l'animation de lancement est très amusante, donc j'ai imité et mis en œuvre.

Effet visuel en GIF :

animation.gif

Idée de mise en œuvre :

En observant attentivement, on peut voir que l'exécution de l'animation est divisée en deux phases :
La première phase est la chute des pièces.
La deuxième phase est la rébounce du portefeuille.

Le fichier XML de mise en page suivant :

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

Chute de la pièce :

Pendant le processus de chute de la pièce, deux animations sont exécutées : le déplacement et la rotation.
L'animation de déplacement utilise l'animation de transition, le fichier xml est le suivant :

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

L'animation de rotation utilise la redéfinition de Animation et l'utilisation de la classe android.hardware.Camera pour réaliser.

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);  
  // Coordonnées du point central
  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(); 
  // tourner autour de l'axe y
  camera.rotateY(360 * interpolatedTime);  
  camera.getMatrix(matrix);  
  // Définir le centre de flip 
  matrix.preTranslate(-centerX, -centerY); 
  matrix.postTranslate(centerX, centerY);   
  camera.restore();  
 }
}

Voici un bref exposé des méthodes preTranslate et postTranslate de l'animation, preTranslate signifie déplacer avant la rotation Y, et postTranslate signifie déplacer après la rotation Y, attention, leurs paramètres sont la distance de déplacement, et non les coordonnées de destination du déplacement!
Comme la rotation est centrée sur (0,0), pour aligner le centre de la pièce de monnaie avec (0,0), il faut préTranslate(-centerX, -centerY), après la rotation Y, appeler postTranslate(centerX, centerY), puis remettre l'image en place, ainsi, l'effet visuel que vous voyez est que la pièce de monnaie tourne sans cesse autour du centre.
Enfin, exécutez les deux animations ci-dessus simultanément pour réaliser l'effet de tomber et de rotation.

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

Rebond du portefeuille :

En même temps que l'exécution de la chute de la pièce, démarrez une animation ValueAnimator pour déterminer le moment du rebond du portefeuille.

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();
    // Environ lorsque la pièce tombe sur le bord supérieur du portefeuille, annuler l'animation ValueAnimator et exécuter l'animation de rebond du portefeuille
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  }});
valueAnimator.start();
｝

Dernière exécution de l'animation de rebond du portefeuille, ici l'ObjectAnimator est utilisé.

private void startWallet() {
  // l'animation sur l'axe X
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,)}} 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // Échelle de l'axe y 
  ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
  objectAnimator2.setDuration(600);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new LinearInterpolator()); 
  // Animation simultanée de l'échelle des axes x et y 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

Un effet d'animation de lancement de portefeuille simple est à peu près prêt, le seul défaut est que lors de l'ajustement de l'échelle y du portefeuille, l'axe y entier est étiré. Pour maintenir le bas du portefeuille fixe, seule la partie supérieure du portefeuille rebondit, je n'ai pas encore pensé à une bonne méthode, je suis peu compétent et espère que les grands maîtres pourront m'enseigner! Merci !

Code source complet :

Le code source complet est disponible dansGitHub
Si vous trouvez cela sympa, n'oubliez pas de star╰(￣▽￣)╮~

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutiendrez également le tutoriel à cri

Déclaration : le contenu de cet article est issu d'Internet, propriété des auteurs respectifs, contribué et téléversé par les utilisateurs d'Internet. Ce site n'en possède pas la propriété, n'a pas été édité par l'homme, et n'assume pas la responsabilité des responsabilités juridiques pertinentes. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)