Android仿Handbag APP Startup Animation

While using the荷包App, I found that the startup animation is quite fun, so I imitated and implemented it.

GIF effect diagram:

animation.gif

Implementation idea:

Upon close observation, it can be seen that the animation execution is divided into two stages:
The first stage is the coin drop.
The second stage is the wallet bounce back.

The layout XML file is as follows:

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

Coin fall:

Two animations, translation and rotation, are executed during the coin falling process.
The position animation uses an interpolator animation, the xml file is as follows:

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

The rotation animation uses a rewritten Animation and utilizes the android.hardware.Camera class to implement.

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 point 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 flip center point 
  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 translation destination!
Since the rotation is centered at (0,0), in order to align the center of the coin with (0,0), it is necessary 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() {
// Falling
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);
}

Wallet bounce:

While executing the coin drop, start a ValueAnimator animation to determine the timing of the wallet bounce.

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();
    // About to fall to the top edge of the wallet, cancel the ValueAnimator animation and perform the wallet bounce effect
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  });
valueAnimator.start();
}

Finally, perform the wallet bounce effect animation, using ObjectAnimator .

private void startWallet() {
  // x-axis scaling
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,}} 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // y-axis scaling 
  ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
  objectAnimator2.setDuration(600);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new LinearInterpolator()); 
  // Simultaneously execute x, y-axis scaling animation 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

Such a simple wallet startup 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. I haven't thought of a good method yet. I'm not talented enough and hope the great gods will give me some advice! Thank you!

Complete source code:

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

That's all for this article. Hope it helps with your learning and that everyone supports the Yelling Tutorial more.

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