تحقيق تأثير مفتاح التطبيق في Android

عند استخدام تطبيق الحقيبة، لاحظت أن فيديو التشغيل للشاشة الرئيسية ممتع جدًا، لذا تم تقليد تنفيذه.

الصورة التوضيحية gif:

animation.gif

فكرة التنفيذ:

بملاحظة دقيقة، يمكن ملاحظة أن تنفيذ الرسوم المتحركة يتكون من مرحلتين:
المرحلة الأولى هي سقوط العملة.
المرحلة الثانية هي ارتداد المحفظة.

الملف 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>

Coin fall:

Two animations, translation and rotation, are executed during the process of the coin falling.
The position animation uses an interpolation animation, and 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 adopts the method of overriding Animation and using 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);  
  // أرقام مركز الوسط
  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();  
 }
}

سأوضح ببساطة طريقة preTranslate و postTranslate داخل animation، حيث أن preTranslate تعني التحرير قبل rotateY، و postTranslate تعني التحرير بعد rotateY، يرجى ملاحظة أن هذه الأرقام هي مسافات التحريك وليست أرقام الأماكن التي يتم تحريكها!
بما أن الدوران يتم حول مركز (0,0)، لذا من أجل تحديد مركز العملة مع (0,0)، يجب القيام بـ preTranslate(-centerX, -centerY)، بعد انتهاء rotateY، يتم استدعاء postTranslate(centerX, centerY)، ثم يتم تحريك الصورة مرة أخرى، مما يوفر تأثير التحريك هو دوران العملة من مركزها باستمرار.
آخرًا، يتم تنفيذ هذين النوعين من التحركات معًا، مما يحقق تأثير السقوط وال περιστροبة.

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);
｝

qián bāo fāng shèng：

zài zhí xíng bìng qí diào luò de shí hòu, qǐng shǐ yī gè ValueAnimator dòng huà, lái piàn shí qián bāo fāng shèng de shí jī .

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();
    // dà gài diào luò dào qián bāo de shàng biān wèi zhì de shí hòu, què xiān ValueAnimator dòng huà, bìng zhí xíng qián bāo fāng shèng xiào
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  }});
valueAnimator.start();
｝

zuì hòu zhí xíng qián bāo fāng shèng xiào dòng huà, zhè lǐ chǎng yòng le ObjectAnimator .

private void startWallet() {
  // xī zhóu suō zhǎng
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1, 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // yī zhóu suō zhǎng 
  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 (عند إرسال البريد الإلكتروني، يرجى استبدال '#' ب '@') لإبلاغنا، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فوراً.