Animação de Início de APP de Bolsa do Android

Enquanto usava o aplicativo Wallet, descobri que a animação de inicialização era muito divertida, então decidi imitá-la.

Efeito gráfico GIF:

animation.gif

Pensamento em implementação:

Observando cuidadosamente, pode-se ver que a execução da animação é dividida em duas fases:
O primeiro estágio é a queda das moedas.
O segundo estágio é a reação do carteira.

O arquivo XML de layout é o seguinte:

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

Caiu a moeda:

Durante a queda da moeda, são executadas duas animações, deslocamento e rotação.
A animação de deslocamento utiliza animações de interpolação, o arquivo xml é o seguinte:

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

A animação de rotação 3D utiliza a sobrescrita de Animation e a classe android.hardware.Camera para implementar.

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);  
  // Coordenadas do ponto 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(); 
  // Girar em torno do eixo y
  camera.rotateY(360 * interpolatedTime);  
  camera.getMatrix(matrix);  
  // Definir o ponto de rotação 
  matrix.preTranslate(-centerX, -centerY); 
  matrix.postTranslate(centerX, centerY);   
  camera.restore();  
 }
}

Aqui, explico brevemente os métodos preTranslate e postTranslate dentro da animação, preTranslate se refere a uma translação antes da rotação rotateY, e postTranslate se refere a uma translação após a rotação rotateY, note que seus parâmetros são as distâncias de translação, não os pontos de destino da translação!
Como a rotação é centrada em (0,0), para alinhar o centro da moeda com (0,0), é necessário fazer preTranslate(-centerX, -centerY), após a conclusão da rotação rotateY, chame postTranslate(centerX, centerY), e mova a imagem de volta, assim, a animação vista será a moeda girando continuamente no centro.
Finalmente, execute ambas as animações simultaneamente para alcançar o efeito de rotação e queda.

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

Rebote da carteira:

Enquanto a queda da moeda está sendo executada, iniciar um animação ValueAnimator para determinar o momento do rebote da carteira.

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();
    // Quando cai aproximadamente na margem superior da carteira, cancelar a animação ValueAnimator e executar o efeito de rebote da carteira
    if (fraction >= 0.75) {
      valueAnimator.cancel();
      startWallet();
    } 
  }});
valueAnimator.start();
｝

A última execução é o efeito de rebote da carteira, aqui foi usado ObjectAnimator .

private void startWallet() {
  // escala em eixo X
  ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,)}} 1.1f, 0.9f, 1);
  objectAnimator1.setDuration(600);
  // Escala no eixo y 
  ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
  objectAnimator2.setDuration(600);
  AnimatorSet animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new LinearInterpolator()); 
  // Executar animação de escalação em eixos x, y ao mesmo tempo 
  animatorSet.playTogether(objectAnimator1, objectAnimator2);
  animatorSet.start();}

Efeitos de animação de abertura simples de bolsa já são suficientes, a única coisa que falta é que, ao realizar a escalação no eixo y da carteira, toda a escala no eixo y será ajustada. Para manter o fundo da carteira estático, só há a opção de rebote no topo da carteira, ainda não tenho uma boa solução, sou um pequeno irmão, espero que os grandes mestres me ensinem! Obrigado!

Código-fonte completo:

O código-fonte completo está emGitHub
Se achar que está bom, lembre-se de star╰(￣▽￣)╮!

Isso é tudo o que há no artigo, espero que ajude na sua aprendizagem e que você apoie o Tutorial Yell.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)