Блог

Мне нужна помощь с анимацией.

Я работаю над простой игрой, в которой пользователи будут решать математические задачи. У каждого раунда есть 60 секунд, теперь я использую CountDownTimer для проверки времени. Вместо текстового представления оставшегося времени я хочу изменить цвета фона. Пожалуйста, проверьте ссылку, например.

Теперь у меня синий RelativeLayout, и я хочу изменить цвет этого макета (или, может быть, просто переместить влево) в зависимости от оставшегося времени. Когда игра только началась, весь макет будет синим, через 30 секунд половина макета должна стать темнее, это должно быть ясно из примера gif.

Важно: пользователи могут использовать «super power» для увеличения времени раунда. Когда у пользователя остается всего 10 секунд до конца, он может использовать «супермощность» и добавить 30 секунд, это должно повлиять на фоновую анимацию.

Не могли бы вы мне помочь, пожалуйста, как я могу создать этот эффект.

Просто идея, вы можете достичь этого, используя два отдельных фона / макета, которые перекрывают друг друга.

Используя таймер обратного отсчета, вы можете горизонтально перевести один из фонов с помощью ObjectAnimator, передавая время для значения перевода. Это позволит фону перемещаться в любом направлении в зависимости от того, увеличивается или уменьшается время.

Вот и все…

Я реализовал код для изменения цвета фона представления слева направо. Я делал это в течение 10 секунд. Позже вы можете увеличить в соответствии с вашими требованиями.

Я создал еще один вид, ширина и высота которого будут соответствовать родительскому. Также, чтобы получить анимацию для просмотра, я использовал класс «Animation», в котором для перевода представления использовался API «TranslateAnimation».

Также в манифесте активности, чтобы получить первое представление о приоритете, я использовал атрибут «высота».

Перейдите к приведенному ниже коду.

1. activity_main.xml

`

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.golevr.changebackgroundcolor.MainActivity"
    android:id="@ id/constraint">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="10dp"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@ id/view"
        android:elevation="0dp"></View>

</android.support.constraint.ConstraintLayout>
  

`

2. MainActivity.java

`

 public class MainActivity extends AppCompatActivity {

    ConstraintLayout constraintLayout;
    View view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        constraintLayout = (ConstraintLayout) findViewById(R.id.constraint);
        view = (View)findViewById(R.id.view);

        view.startAnimation(inFromLeftAnimation());
        constraintLayout.bringToFront();

    }

    private Animation inFromLeftAnimation() {

        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        view.setBackgroundColor(Color.BLUE);
        inFromRight.setDuration(10000);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }

}
  

`