Count Down app Animation

Question

Я создаю приложение обратного отсчета. Я закончил все коды, и все это работает отлично, но я новичок в анимации Android. Мне нужно применить анимацию к моему приложению. Я пробовал использовать слайд в/из, но он не работает хорошо, я также пробовал несколько других анимаций, но ничего не сравнимо с анимацией ниже.

После нажатия кнопки воспроизведения запускается таймер, а затем снова нажата кнопка паузы и textView под значком паузы, на котором у нас есть текущее время обратного отсчета. если снова снова нажать на начало отсчета. Я только ищу анимацию всех других кодов, которые я уже сделал. У меня есть ImageButton, который показывает значок каждого пользователя таймера, нажмите play/pause и TextView, который показывает таймер обратного отсчета и еще один TextView, который показывает текущий таймер, когда пользователь нажимает кнопку паузы. Там все равно я могу реализовать эту анимацию для приложения?

Таким образом, любая помощь будет присваиваться, поскольку я новичок в анимации Android. Благодаря!

Вот XML:

<FrameLayout 
     android:layout_width="228dp" 
     android:layout_height="228dp" 
     android:layout_marginTop="7dp" 
     android:layout_marginLeft="7dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginBottom="8dp" 
     android:id="@+id/circlea" 
     android:visibility="visible" 

     android:background="@drawable/circle"> 

<ImageButton 
    android:layout_width="142dp" 
    android:layout_height="142dp" 
    android:layout_marginTop="43dp" 
    android:layout_marginBottom="43dp" 
    android:layout_marginLeft="43dp" 
    android:id="@+id/play" 
    android:background="#000" 
    android:layout_marginRight="43dp" 
    android:src="@mipmap/icon" 
    android:visibility="visible" /> 
     <TextView 
      android:layout_width="134dp" 
      android:layout_height="73dp" 
      android:text="" 
      android:textColor="#FFFFFF" 
      android:textSize="55sp" 
      android:layout_marginTop="78dp" 
      android:layout_marginStart="48dp" 
      android:id="@+id/countText" 
      android:fontFamily="sans-serif-light" 
      android:background="#000" 
      android:visibility="invisible" /> 
     <TextView 
      android:layout_marginTop="180dp" 
      android:layout_marginLeft="90dp" 
      android:text="" 
      android:id="@+id/pusetext" 
      android:textSize="24sp" 
      android:textColor="#1EFFFFFF" 
      android:layout_width="61dp" 
      android:layout_height="32dp" /> 

    </FrameLayout> 

Java:

//some code 
super.onCreate(savedInstanceState); 
play=(ImageButton)findViewById(R.id.play); 
pausetext=(TextView) findViewById(R.id.pusetext); 
CountText=(TextView)findViewById(R.id.countText); 
play.OnClickListener startListener = new View.OnClickListener() {//first public void onClick(View v){ 
play.setVisibility(View.INVISIBLE); 
CountText.setVisibility(View.VISIBLE); 

ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0); 
      slideDownAnimTextView.start(); 
} 
CountText.setOnClickListener 
public void onClick(View v){//pause click 
play.setVisibility(View.VISIBLE); 
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(play.getTop() + play.getHeight()), 0); 

      ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f); 
      ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f); 
      AnimatorSet animatorSet = new AnimatorSet(); 
      animatorSet.setDuration(1000); 
      animatorSet.playTogether(slideDownAnimPlayButton,scaleDownAnimTextViewX,scaleDownAnimTextViewY); 
      animatorSet.start(); 
} 
play.setOnClickListener 
public void onClick(View view) {resume click 
play.setVisibility(View.INVISIBLE); 
      CountText.setVisibility(View.VISIBLE); 
} 
CountText.setOnClickListener(new View.OnClickListener() //pause click agine 
       @Override 
       public void onClick(View view) { 

//some code 

Answer 1

Вы можете использовать HTextView библиотеку для достижения первой части анимации (с указанием текста). Затем используйте ObjectAnimator s, чтобы сдвинуть и масштабировать текст вниз, и сдвинуть кнопку воспроизведения вниз (используйте AnimatorSet, чтобы воспроизвести их все вместе).

Вот пример кода (вы должны, конечно, изменить значение в соответствии с вашими потребностями) -

ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(CountText.getTop()), 0); 
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY",0, (CountText.getTop())); 
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f); 
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f); 
AnimatorSet animatorSet = new AnimatorSet(); 
animatorSet.setDuration(1000); 
animatorSet.playTogether(slideDownAnimPlayButton,slideDownAnimTextView,scaleDownAnimTextViewX,scaleDownAnimTextViewY); 
animatorSet.start(); 

Edit: Видя новый код сейчас, проблема с первой анимацией текста является то, что вы называете это от onCreate(), поэтому вид еще не нарисован, что означает, что у него нет действительных параметров высоты или сверху. Вы можете решить эту проблему, предоставив анимацию небольшой задержке или используя ViewTreeObserver. Смотрите следующие примеры -

Запуск анимации с задержкой -

new Handler().postDelayed(new Runnable() { 
    @Override 
    public void run() { 
     ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0); 
     slideDownAnimTextView.start(); 
    } 
}, 300); 

Или, возможно, лучший способ, использовать ViewTreeObserver -

CountText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
    @Override 
    public void onGlobalLayout() { 
     CountText.getViewTreeObserver().removeOnGlobalLayoutListener(this); 
     ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0); 
     slideDownAnimTextView.start(); 
    } 
});