Android-App-Startanimation im Stil einer Tasche

Beim Verwenden der App "Hut" wurde festgestellt, dass die Startanimation ziemlich unterhaltsam ist, daher wurde eine Nachahmung umgesetzt.

GIF-Diagramm:

animation.gif

Umsetzungsidee:

Bei genauerer Betrachtung lässt sich erkennen, dass die Ausführung der Animation in zwei Phasen unterteilt ist:
Der erste Abschnitt ist das Fallen der Münzen.
Der zweite Abschnitt ist die Geldbörse, die zurückkommt.

Die Layout-XML-Datei lautet wie folgt:

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

Münze fällt:

Während des Fallens der Münze werden zwei Animationen, Verschiebung und Rotation, ausgeführt.
Die Bewegungsszene verwendet Zwischenanimations und das XML-Dokument ist wie folgt:

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

Die Rotationsszene nutzt die Überschreibung von Animation und die Verwendung der Klasse android.hardware.Camera, um umzusetzen.

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);  
  // Center coordinates
  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(); 
  // Rotate around the y-axis
  camera.rotateY(360 * interpolatedTime);  
  camera.getMatrix(matrix);  
  // Set the pivot point for flipping 
  matrix.preTranslate(-centerX, -centerY); 
  matrix.postTranslate(centerX, centerY);   
  camera.restore();  
 }
}

Here is a brief explanation of the preTranslate and postTranslate methods inside the animation, preTranslate refers to the translation before rotateY, and postTranslate refers to the translation after rotateY, note that their parameters are the translation distance, not the coordinates of the destination of the translation!
Since the rotation is centered at (0,0), in order to align the center of the coin with (0,0), we need to preTranslate(-centerX, -centerY), after the rotateY is completed, call postTranslate(centerX, centerY), and then move the image back, so the animation effect seen is that the coin rotates continuously from the center.
Finally, execute both animations at the same time to achieve the falling and rotating effect.

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

Wallet-Sprung:

Während der Ausführung des Coin-Fallens wird eine ValueAnimator-Animation gestartet, um den richtigen Zeitpunkt für den Wallet-Sprungeffekt zu bestimmen.

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();
    // Etwa, wenn der Coin auf die obere Kante des Wallets fällt, wird die ValueAnimator-Animation abgebrochen und der Wallet-Sprungeffekt wird ausgeführt
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  }});
valueAnimator.start();
｝

Die letztendliche Ausführung des Wallet-Sprungeffekts-Animations, hier wurde ObjectAnimator verwendet.

private void startWallet() {
  // Achsenver缩放
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,)}} 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // y-Achsenvergrößerung 
  ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
  objectAnimator2.setDuration(600);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new LinearInterpolator()); 
  // Simultane Ausführung von x, y-Achsenvergrößerungsanimation 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

Diese einfache Geldbörse-Start-Animation ist fast fertig. Der einzige Nachteil ist, dass bei der y-Achsenvergrößerung der gesamte y-Achsenbereich vergrößert wird. Um den unteren Teil der Brieftasche bewegungslos zu lassen, muss nur der obere Teil der Brieftasche springen, und ich habe noch keine guten Methoden überlegt. Ein kleiner Bruder, ich hoffe, die Großmeister können mir lehren! Vielen Dank!

Vollständige Quelldatei:

Vollständige Quelldatei inGitHub
Wenn Ihnen das gefällt, denken Sie daran, star╰(￣▽￣)╮ zu klicken~

Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, er hilft Ihnen bei Ihrem Lernen und ich hoffe, dass Sie die Anleitung von Shouting-Tutorial stark unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Haftung. Wenn Sie verdächtige Inhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald nachgewiesen, wird diese Website die beanstandeten Inhalte sofort löschen.)