Анимация View без XML описания

Данная статья продолжает описание процесса анимации View компонентов. В предыдущей статье параметры трансформации компонентов описывались в XML файле. Сейчас мы рассмотрим процесс анимации без использования XML файла. Для этого будем использовать наследники класса Animation. Но прежде чем переходить к описанию наследников рассмотрим слушателя AnimationListener класса анимации Animation, включающего методы, вызываемые :

• перед началом анимации onAnimationStart (Animation);
• после завершения анимации onAnimationEnd (Animation);
• при повторном старте анимации onAnimationRepeat(Animation).

Пример AnimationListener

В следующем примере слушатель анимации ничего полезного не делает, просто выводит сообщения в консоль. У нас же в примере, который мы рассмотрим далее, этот слушатель будет зеркально повторять процесс перехода из одного состояния в другое. Так, например, при анимации масштабированием компонент сначала будет уменьшаться в размерах, а потом восстанавливаться. Процесс уменьшения и восстановления будем привязывать к методу onAnimationEnd. Можно, конечно же, привязать и к методу onAnimationStart. Здесь самое главное определиться с началом анимации, т.е. из какого «состояния» компонента будем стартовать процесс анимации.

Context   context = MainActivity.this;
Animation a;

a = AnimationUtils.loadAnimation(context, R.anim.alpha);

a.setAnimationListener(new AnimationListener ()
{
    @Override
    public void onAnimationStart(Animation animation) {
        System.out.println("animation start");
    }
    @Override
    public void onAnimationEnd(Animation animation) {
        System.out.println("animation end");
    }
    @Override
    public void onAnimationRepeat(Animation animation) {
        System.out.println("animation repeat");
    }
});

В статье рассматриваются следующие классы анимации View компонентов, наследующие свойства Animation :

• AlphaAnimation – класс анимации прозрачностью;
• ScaleAnimation – класс анимации масштабированием;
• TranslateAnimation – класс анимации перемещением;
• RotateAnimation – класс анимации вращением;
• AnimationSet – класс комбинированной анимации.

Анимация прозрачностью, класс AlphaAnimation

Класс AlphaAnimation имеет два конструктора :

AlphaAnimation(Context context, AttributeSet attrs);

AlphaAnimation(float fromAlpha, float toAlpha);

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. Бо́льшее распространение получил второй конструктор, в котором параметры fromAlpha и toAlpha определяют соответственно начальное и конечное значение прозрачности (от 0.0 до 1.0).

В следующем примере анимация изменяет прозрачность компонента от 0.2 до 1.0 в течение 3-х секунд.

AlphaAnimation  mAlphaAnimation;

mAlphaAnimation = new AlphaAnimation(0.2f, 1.0f);

mAlphaAnimation.setDuration(3000);
mView.startAnimation(mAlphaAnimation);

Анимация масштабированием, класс ScaleAnimation

Класс ScaleAnimation имеет 4 конструктора :

ScaleAnimation (Context context, AttributeSet attrs);

ScaleAnimation (float fromX, float toX, 
                float fromY, float toY);
ScaleAnimation (float fromX, float toX, 
                float fromY, float toY, 
                float pivotX, float pivotY);
ScaleAnimation (float fromX, float toX, 
                float fromY, float toY, 
                int pivotXType, float pivotXValue, 
                int pivotYType, float pivotYValue);

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. В других конструкторах используются параметры fromX, toX, fromY, toY, pivotX, pivotY, описанные в предыдущей статье. Назначение параметров pivotXType, pivotXValue, pivotYType, pivotYValue следующее :

• pivotXType и pivotYType формат значения; возможны следующие форматы :
  • Animation.ABSOLUTE – абсолютное значение относительно левой/верхней границы в пикселях;
  • Animation.RELATIVE_TO_SELF – значение в процентах относительно размеров элемента; значение 1.0 соответствует 100%;
  • Animation.RELATIVE_TO_PARENT – значение в процентах относительно размеров родительского контейнера; значение 1.0 соответствует 100%.
• pivotXValue и pivotYValue — значение для координаты центра поворота с учетом формата.

В следующем примере анимация масштабированием увеличивает размер компонента с 10% до 100% в течение 3-х секунд. Центр, относительного которого выполняется масштабирование, находится в точке (0.05, 0.05).

ScaleAnimation mScaleAnimation;

mScaleAnimation = new ScaleAnimation(0.1f, 1.0f, 0.1f, 1.0f, 
                                     0.05f, 0.05f);
mScaleAnimation.setDuration(3000);
mView.startAnimation(mScaleAnimation);

Анимация перемещением, класс TranslateAnimation

Класс TranslateAnimation имеет 3 конструктора :

TranslateAnimation (Context context, AttributeSet attrs);

TranslateAnimation (float fromXDelta, float toXDelta, 
                    float fromYDelta, float toYDelta);
TranslateAnimation (int   fromXType , float fromXValue,
                    int   toXType   , float toXValue  ,
                    int   fromYType , float fromYValue,
                    int   toYType   , float toYValue );

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

В следующем примере анимация перемещением изменяет положение компонента в течение 3-х секунд. Первоначальное положение компонента смещено относительно конечного на -150 пикселей по оси X и на -200 пикселей по оси Y.

TranslateAnimation mAnimation;

mAnimation = new TranslateAnimation(-150.0f, 0.0f, -200.0f, 0.0f);
mAnimation.setDuration(3000);
mView.startAnimation(mAnimation);

Анимация вращением, класс RotateAnimation

Класс RotateAnimation имеет 4 конструктора :

RotateAnimation (Context context, AttributeSet attrs);

RotateAnimation (float fromDegrees, float toDegrees);
RotateAnimation (float fromDegrees, float toDegrees, 
                 float pivotX, float pivotY);
RotateAnimation (float fromDegrees, float toDegrees, 
                 int pivotXType, float pivotXValue, 
                 int pivotYType, float pivotYValue);

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. В остальных конструкторах параметры fromDegrees и toDegrees определяют начальный и конечный углы поворота. Параметры pivotX и pivotY определяют координаты центра поворота в пикселях относительно левой и верхней границы элемента. В последнем конструкторе параметры pivotXType, pivotXValue, pivotYType, pivotYValue имеют такие же значения, как и в классе ScaleAnimation.

Комбинированная анимация, класс AnimationSet

Класс AnimationSet имеет 2 конструктора :

AnimationSet (Context context, AttributeSet attrs);

AnimationSet (boolean shareInterpolator);

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. Во втором конструкторе используется параметр shareInterpolator, определяющий признак общего (для набора анимации) интерполятора или каждая анимация использует свой интерполятор. В первом случае значение равно «true», во втором случае «false». Вопрос использования интерполяторов в анимации View компонентов рассмотрен отдельно. Для добавления в набор анимации необходимо использовать метод addAnimation класса AnimationSet.

В следующем примере создается объект комбинированной анимации mAnimation без использования интерполятора. В набор анимации добавляются объекты анимации прозрачностью mAlphaAnimation и масштабированием mScaleAnimation, рассмотренные выше.

AnimationSet mAnimation;
mAnimation = new AnimationSet(false);

mAnimation.addAnimation(mAlphaAnimation);
mAnimation.addAnimation(mScaleAnimation);
        
mView.startAnimation(mAnimation);

Пример использования класса анимации

Рассмотрим пример анимации View-компонентов с использованием описанных выше классов анимации. Новый модуль/проект создавать не будем, а воспользуемся описанным в предыдущей статье модулем p04Animation, в котором внесем изменения только в активность MainActivity.java. То есть весь интерфейс с кнопками оставим без изменений, а обработчики нажатий на кнопки изменим. При этом, в пример включим слушатели событий, чтобы выполнять зеркальные процессы анимации. Для этого для каждого типа анимации будем создавать по 2 объекта. Один объект будет изменять исходное состояние, а другой объект будет восстанавливать исходное состояние. Нам необходимо :

• объявить переменные;
• изменить метод onClick;
• создать два слушателя AnimationListener;
• создать объекты анимации.

Объявление переменных

При объявлении переменных для каждого типа анимации определяем по два объекта. Объекты с постфиксом «In» будут восстанавливать исходное состояние объекта. Объекты с постфиксом «Out» будут изменять исходное состояние объекта. Что касается анимации вращением, то объект mRotateAhead будет вращать компонент по часовой стрелке, а объект анимации mRotateBackward – против часовой стрелки. Слушатели outListener, inListener будут использоваться для повторного старта соответствующего процесса анимации.

TextView            mView;

AlphaAnimation      mFadeIn     , mFadeOut       ;
ScaleAnimation      mScaleIn    , mScaleOut      ;
TranslateAnimation  mTransIn    , mTransOut      ;
AnimationSet        mComboIn    , mComboOut      ;
RotateAnimation     mRotateAhead, mRotateBackward;

Animation.AnimationListener       outListener   ;
Animation.AnimationListener       inListener    ;

boolean   mAlpha, mScale, mTrans, mRotate, mCombo;

Логические переменные будут использоваться для определения вида анимации. При нажатии на кнопку в соответствующей переменной будет установлено логическое значение "true", после чего начнется анимация. И продолжаться анимация будет до тех пор, пока повторным нажатием эту кнопку значение переменной не сбросится в "false".

Листинг метода onClick

В методе onClick определяется идентификатор компонента (кнопки). Для нажатой кнопки устанавливается (true) или сбрасывается (false) соответствующий флаг (логическая переменная). Если флаг установлен, то стартует анимация, связанная с изменением текущего состояния. Процесс анимации, связанный с восстановлением текущего состояния, будет стартован из слушателя. Анимация вращением выполняет повороты в разные стороны.

@Override
public void onClick(View v)
{
    switch (v.getId()) {
        case R.id.btnAlpha:
                mAlpha = !mAlpha;
                if (mAlpha)
                    mView.startAnimation(mFadeOut);
                break;
        case R.id.btnScale:
                mScale = !mScale;
                if (mScale)
                    mView.startAnimation(mScaleOut);
                break;
        case R.id.btnTrans:
                mTrans = !mTrans;
                if (mTrans)
                    mView.startAnimation(mTransOut);
                break;
        case R.id.btnRotate: 
                mRotate = !mRotate;
                if (mRotate)
                    mView.startAnimation(mRotateBackward);
                break;
        case R.id.btnCombo:
                mCombo = !mCombo;
                if (mCombo)
                    mView.startAnimation(mComboOut);
                break;
    }
}

Примечание : в методе нет проверки параллельного старта нескольких анимаций. Полагаю, что, при необходимости, Вы можете это выполнить самостоятельно.

Листинг слушателей

В примере определяем двух слушателей : outListener, inListener. В каждом из слушателей будем использовать метод, вызываемый при завершении анимации onAnimationEnd. Cлушатель ouListener будет стартовать анимацию восстановления состояния компонента, а слушатель inListener – анимацию изменения исходного состояния. При выборе, какую анимацию стартовать, выполняется проверка установленного флага.

outListener = new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        if (mAlpha)
            mView.startAnimation(mFadeIn);
        else if (mScale)
            mView.startAnimation(mScaleIn);
        else if (mTrans)
            mView.startAnimation(mTransIn);
        else if (mRotate)
            mView.startAnimation(mRotateAhead);
        else if (mCombo)
            mView.startAnimation(mComboIn);
    }
    @Override
    public void onAnimationRepeat(Animation animation) {}
    @Override
    public void onAnimationStart(Animation animation) {}
};

inListener = new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        if (mAlpha)
            mView.startAnimation(mFadeOut);
        else if (mScale)
            mView.startAnimation(mScaleOut);
        else if (mTrans)
            mView.startAnimation(mTransOut);
        else if (mRotate)
            mView.startAnimation(mRotateBackward);
        else if (mCombo)
            mView.startAnimation(mComboOut);
    }
    @Override
    public void onAnimationRepeat(Animation animation) {}
    @Override
    public void onAnimationStart(Animation animation) {}
};

Листинг метода onCreate класса MainActivity

В заключение рассмотрим метод onCreate класса MainActivity. В первой части метода ничего не изменилось : к каждой кнопке подключается обработчик события. А вот во второй части метода создаются объекты анимации, определяются их параметры и подключаются слушатели событий. Последними создаются комбинированные объекты анимации, которые включают в свой набор по два ранеее созданных объекта анимации.

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mView = findViewById(R.id.tv);

    Button btnAlpha = findViewById(R.id.btnAlpha);
    btnAlpha.setOnClickListener(this);

    Button btnScale = findViewById(R.id.btnScale);
    btnScale.setOnClickListener(this);

    Button btnTrans = findViewById(R.id.btnTrans);
    btnTrans.setOnClickListener(this);

    Button btnRotate = findViewById(R.id.btnRotate);
    btnRotate.setOnClickListener(this);

    Button btnCombo = findViewById(R.id.btnCombo);
    btnCombo.setOnClickListener(this);
    //-----------------------------------------------------
    mFadeIn  = new AlphaAnimation(0.2f, 1.0f);
    mFadeOut = new AlphaAnimation(1.0f, 0.2f);

    mFadeIn .setDuration(2000);
    mFadeOut.setDuration(1500);

    mFadeIn .setAnimationListener(inListener );
    mFadeOut.setAnimationListener(outListener);
    //-----------------------------------------------------
    mScaleIn  = new ScaleAnimation(0.2f, 1.0f, 0.1f, 1.0f,
                                   0.05f, 0.05f);
    mScaleOut = new ScaleAnimation(1.0f, 0.2f, 1.0f, 0.2f,
                                   0.05f, 0.05f);
    mScaleIn .setDuration(3000);
    mScaleOut.setDuration(3000);

    mScaleIn .setAnimationListener(inListener );
    mScaleOut.setAnimationListener(outListener);
    //-----------------------------------------------------
    mTransIn  = new TranslateAnimation(-150.0f, 0.0f,
                                       -200.0f, 0.0f);
    mTransOut = new TranslateAnimation(0.0f, 150.0f,
                                       0.0f, -200.0f);
    mTransIn .setDuration(3000);
    mTransOut.setDuration(2500);

    mTransIn .setAnimationListener(inListener );
    mTransOut.setAnimationListener(outListener);
    //-----------------------------------------------------
    mRotateAhead    = new RotateAnimation(0.0f, 360.0f);
    mRotateBackward = new RotateAnimation(0.0f,-360.0f);
    mRotateAhead   .setDuration(3000);
    mRotateBackward.setDuration(3000);

    mRotateAhead   .setAnimationListener(inListener );
    mRotateBackward.setAnimationListener(outListener);
    //-----------------------------------------------------
    mComboIn  = new AnimationSet(false);
    mComboOut = new AnimationSet(false);

    mComboIn .setAnimationListener(inListener );
    mComboOut.setAnimationListener(outListener);

    mComboIn .addAnimation(mFadeIn  );
    mComboIn .addAnimation(mScaleIn );
    mComboOut.addAnimation(mFadeOut );
    mComboOut.addAnimation(mScaleOut);
}

На этом всё. Полагаю, анимация View компонентов на этих примерах освоена Вами в достаточном объеме.

Связанные страницы

Пример создания проекта Android
Модули Android приложения
Layout интерфейса приложения Android
Анимация в Android
Кадровая анимация в Android
Анимация View кмпонентов с интерполяторами