Animation Effects

[Android] Jun 10, 2013

About This Document

This document is a developer guide which describes the ways to use and implement animations in android.
This document is addressed to people with a basic knowledge of Android programming.
The application shows the effects possible using android animations and allows creation and modification in real time.

Introduction

For an application to be appealing to its users, it should be reliable, intuitive and have both well made graphics and graphic effects. This document focuses on the latter trait and the Android SDK provides the developer with tools which allow effects to be defined via xml or implemented in code.

Animations

Animations provided by the Android SDK can be divided into the following groups:

  • Property Animation
  • View Animation
  • Tween Animation
  • Frame Animation

We will present how to use and implement these animations later in this document.

1. Property animation

This type of animation is created from a property values object modification, which is set as a target of this animation. This animation is represented via an ObjectAnimator object and in xml is used as an objectAnimator tag. The xml with property animation should be the in animator folder in the application’s resources. Two ways of how to get and use animations from xml are shown below:

  • In code : R.animtor.xml_file_name*
  • In other xml @[package] animator/xml_file_name *

* Where ‘xml_file_name’ is the name of the xml_file_name.xml file.

The form, which is used to generate xmls and to show the effects of this animation, is shown in the image below.

[Image 1] Form which is used to create ObjectAnimator object

[Image 1] Form which is used to create ObjectAnimator object

The form above is used to create an ObjectAnimator object. The Fields of this form define the properties of the ObjectAnimator object. There are two possible ways to set the values of these parameters:

  • In xml as a tag attribute
  • In code as an object member

Setting the appropriate properties has an impact on the action of animation.

The propertyName is used to define the name of the object’s properties which will be animated. A few sample properties which are used via the AutoCompleteTextEditTextWithLabel object such as x, y, rotate, rotateX, rotateY e.t.c are defined in the application. The propertyName can be set via the android:propertyName attributes or via the setPropertyName(String) method.

The duration is used to set the time which defines how long the animation will last. Similar to the propertyName, it is possible to set the android:duration value through an xml attribute or the setDuration(long) method.

The next attributes define the initial and final values. In xml these values are set via the android:valueFrom and android:valueTo attributes. A few methods following the same scheme are used in the code: set[type]Values(type... ), where type is the type of values property whose name is set in propertyName. It is important to define the proper property value type, because if the type of value is be poorly defined, the animation will not start.

The startOffset is used to define the waiting time before the start of the animation. This property is set via the android:startOffset attribute or the setStartDelay(long) method.

repeatCount is used to define the number of repeat animations. This property is set via the android:repeatCount attribute or the setRepeatCount(long) method. The default value is zero and it is important to remember, that when the value is set to “1”, the animation will run twice.

The repeatMode property defines the way an animation will be repeated. There are two ways to repeat animations:

  • repeat
  • reverse

In the first mode, animations are repeated by a standard procedure: when the animation ends, it starts again from the initial value. In the second mode the animation will run from the initial value to the final value and in the next step will be run from the final value to the initial value. It makes sense to set this attribute, when the repeatCount value is more than zero.

The last attribute defines the value type. This parameter can be set via the android:valueType attribute or via the setRepeatMode(int) method. This method should take one of these constants as a parameter: ValueAnimator.RESTART, ValueAnimator.REVERSE.

The method which is used in the ObjectAnimator to create animations programmatically is shown in the code below:

public void crateAndRunAnimForView(View pViewToAnim) {
    final ObjectAnimator objAnim = new ObjectAnimator();
    objAnim.setPropertyName(mPropertyName);
    objAnim.setDuration(mDuration);
    if (mValueTypeSpinner.getValue() == 0) {
        objAnim.setIntValues(mValueIntFrom, mValueIntTo);
    } else {
        objAnim.setFloatValues(mValueFloatFrom, mValueFloatTo);
    }
    objAnim.setStartDelay(mStartOffset);
    objAnim.setRepeatCount(mRepeatCount);
    int repatMode;
    if (mRepeadModeSpinner.getValue() == 0) {
        repatMode = ValueAnimator.RESTART;
    } else {
        repatMode = ValueAnimator.REVERSE;
    }
    objAnim.setRepeatMode(repatMode);
    objAnim.setTarget(pViewToAnim);
    objAnim.start();
}

[Code 1] The way to create programmatically objectAnimator

The sample xml which was generated via the application is shown in the image below:

[Image 2] Example xml which was generated via the application

[Image 2] Example xml which was generated via the application

2. View animation

As was written above, the view animation is divided into two parts. In the following paragraphs these parts will be described.

2.1. Tween Animation

The most popular animations used by developers, extend the Animation object. Like before, there are two ways of defining this animation: programmatically or via the xml file, however this time the xml file should be allocated in the anim folder in resources. Two ways of how to get and use this animation from xml are shown below:

  • In code : R.anim.xml_file_name*
  • In other xml @[package] animator/xml_file_name *

* Where ‘xml_file_name’ is the name of the xml_file_name.xml file.

All animations which are defined in this way have to extend the Animation object. The class diagram which represents all classes which extend the Animation object is shown in the diagram below:

[Diagram 1] Animations class diagram

[Diagram 1] Animations class diagram

As shown above, all animations extend the animation object. All animations have some common properties which are in the Animation object. The AbstractFormAnimFragment<T extends Animation> form fragment which contains common fields has been created in the application. These fields allow the setting of common properties and the part of the form which contains these fields is shown in the image below:

[Image 3] Part of the form which contains common features

[Image 3] Part of the form which contains common features

The interpolator field is used to set the Interpolator. This is an object which defines the rate of change of the animation. It is possible to set a few types of interpolators. All of the interpolators extend the Interpolator object. All interpolators which are provided via the Android SDK are returned by the getInterpolatorValueSpinnerWithLabel(int) method. This method returns an instance of the selected interpolator. The body of this method is shown in the code below:

private Interpolator getInterpolatorValueSpinnerWithLabel(int res) {
    final int value = ((SpinnerWithLabel)getActivity().findViewById(res)).getValue();
    final Interpolator result;
    switch (value) {
        case NONE_INTERPOLATOR:
            result = null;
            break;

        case ACCELERATE_DECELERATE_INTERPOLATOR:
            result = new AccelerateDecelerateInterpolator();
            break;

        case ACCELERATE_INTERPOLATOR:
            result = new AccelerateInterpolator();
            break;

        case ANTICIPATE_INTERPOLATOR:
            result = new AnticipateInterpolator();
            break;

        case ANTICIPATE_OVERSHOOT_INTERPOLATOR:
            result = new AnticipateOvershootInterpolator();
            break;

        case BOUNCE_INTERPOLATOR:
            result = new BounceInterpolator();
            break;

        case CYCLE_INTERPOLATOR:
            result = new CycleInterpolator(1.0f);
            break;

        case DECELERATE_INTERPOLATOR:
            result = new DecelerateInterpolator();
            break;

        case LINEAR_INTERPOLATOR:
            result = new LinearInterpolator();
            break;

        case OVERSHOOT_INTERPOLATOR:
            result = new OvershootInterpolator();
            break;

        default:
            throw new IllegalArgumentException();

    }
    return result;
}

[Code 2] Body of method which returns instance of interpolator

It is possible to set the interpolator programmatically or in the xml file. To set the interpolator programmatically the setInterpolator(Interpolator) method is used, or to set the interpolator in xml the android:interpolator attribute is used. This attribute takes the same values as getInterpolatorNameSpinnerWithLabel(int) returns . The body of this method is shown below:

String getInterpolatorNameSpinnerWithLabel(int res) {
    final int value = ((SpinnerWithLabel)getActivity().findViewById(res)).getValue();
    final String result;
    switch (value) {
        case NONE_INTERPOLATOR:
            result = null;
            break;
        case ACCELERATE_DECELERATE_INTERPOLATOR:
            result = "@android:anim/accelerate_decelerate_interpolator";
            break;
        case ACCELERATE_INTERPOLATOR:
            result = "@android:anim/accelerate_interpolator";
            break;
        case ANTICIPATE_INTERPOLATOR:
            result = "@android:anim/anticipate_interpolator";
            break;
        case ANTICIPATE_OVERSHOOT_INTERPOLATOR:
            result = "@android:anim/anticipate_overshoot_interpolator";
            break;
        case BOUNCE_INTERPOLATOR:
            result = "@android:anim/bounce_interpolator";
            break;
        case CYCLE_INTERPOLATOR:
            result = "@android:anim/cycle_interpolator";
            break;
        case DECELERATE_INTERPOLATOR:
            result = "@android:anim/decelerate_interpolator";
            break;
        case LINEAR_INTERPOLATOR:
            result = "@android:anim/linear_interpolator";
            break;
        case OVERSHOOT_INTERPOLATOR:
            result = "@android:anim/overshoot_interpolator";
            break;
        default:
            throw new IllegalArgumentException();

    }
    return result;
}

[Code 3] Body of method which returns paths to interpolator which can be use as xml attribute value

Additionally it is possible to extend interpolators via a java class or via xml.

The duration, start offset, repeat count and repeat mode are the same as in the property animation.

The fillAfter flag defines the view’s behaviour after the end of animation. When it is set to true, the view retains parameters which have been reached via animation. Otherwise the view recovers initial parameters.

The fillBefore value defines whether to set the animation transformation before the animation begins, which works if fillEnabled is set to true.

The part of tag which defines these attributes is shown in the image below:

[Image 4] Part of tag xml which contains sample common attributes

[Image 4] Part of tag xml which contains sample common attributes

The method which sets these parameters programmatically is shown in the code below:

public void crateAndRunAnimForView(View pViewToAnim) {
    final T anim = getAnimObject();
    if (mInterpolator != null) {
        anim.setInterpolator(mInterpolator);
    }
    anim.setDuration(mDuration);
    anim.setStartOffset(mStartOffset);
    anim.setRepeatCount(mRepeatCount);
    final int repatMode;
    if (mRepeadModeSpinner.getValue() == 0) {
        repatMode = Animation.RESTART;
    } else {
        repatMode = Animation.REVERSE;
    }

    anim.setRepeatMode(repatMode);
    anim.setFillAfter(mFillAfter);
    anim.setFillBefore(mFillBefore);
    anim.setFillEnabled(mFillEnabled);
    pViewToAnim.startAnimation(anim);
}

[Code 4] Body of the method which sets the common parameters

* T is an object which extends the Animation object.

2.1.1. Alpha

The alpha animation is used to change the alpha level of a view (fading causes or increases the expressiveness). This animation is represented via the AlphaAnimation object. The alpha tag is used to represent this animation in xml. The form which allows the creation of this animation in the example application is shown in the image below.

[Image 5] Form which is used to create an AlphaAnimation object

[Image 5] Form which is used to create an AlphaAnimation object

This animation has two specific properties. The first is an alphaFrom parameter. This parameter defines the initial alpha level. It can be set via the android:alphaFrom attribute or submitted as a constructor parameter. The second property is alphaTo. This parameter defines the final alpha level and just as alphaFrom it can be set in xml via the android:alphaTo attribute or with a constructor parameter. The image below shows the xml which was generated with the application.

[Image 6] Example alpha xml which was generated via application

[Image 6] Example alpha xml which was generated via application

The code which creates objects which represent this animation is shown below.

AlphaAnimation getAnimObject() {
    return new AlphaAnimation(mFromAlpha, mToAlpha);
}

[Code 5] Method which creates an AlphaAnimation object

2.1.2 Scale

The scale animation is responsible for changing the size of the view. It is possible to change the height or width of the view. This animation has six specific properties. The scale animation is represented as a ScaleAnimation object in Java code or as a scale tag in xml. The form which allows creating this animation in the example application is shown in the image below.

[Image 7] The form which is used to create ScaleAnimation object

[Image 7] The form which is used to create ScaleAnimation object

All the special parameters can be set via the xml attributes or submitted as constructor parameters. The fromXScale and toXScale parameters define the initial and final values for the height of the object. They are represented via the android:formXScale and android:toXScale tags in the xml file. The next two parameters (fromYScale and toYScale) work like the first two, but they are responsible for the width of the view. The last two parameters (pivotX and pivotY) define the point from which the animation will be started. There are three possible ways to define this point in xml

  • In pixels relative to the object for example "1"
  • In percentage relative to the object for example "1%"
  • In percentage relative to the parent for example "5%p"

The image below shows an xml which was generated with the application.

[Image 8] Example scale xml which was generated via the application

[Image 8] Example scale xml which was generated via the application

The code which creates objects which represents this animation is shown below.

ScaleAnimation getAnimObject() {
    return new ScaleAnimation(mFromXScale, mToXScale, mFromYScale, mToYScale, mPivotX, mPivotY);
}

[Code 6] Method which creates the ScaleAnimation object

2.1.3 Translate

The scale animation is responsible for changing the position of the view, specifically the positions of X and Y. This animation is represented in Java code via the TranslateAnimation object which is represented via the translate tag in xml. The form which allows creating this animation in the application is shown below.

[Image 9] The form which is used to create a TranslateAnimation object

[Image 9] The form which is used to create a TranslateAnimation object

The specific attributes define the initial positions and final positions of the view. This animation allows setting four values. The first value, formXDelta, defines the initial X position. The second one (toXDelta) defines the final X position. Similarly, the formYDelta and toYDelta parameters define the Y initial and Y final positon. The specific parameters can be defined via an xml tag attributes, respectively android:formXDelta, android:toXDelta, android:formYDelta and android:toYDelta. It is possible to set these attributes as constructor parameters. The image below shows the xml of this animation which was generated with the application.

[Image 10] Example translate xml which was generated with the application

[Image 10] Example translate xml which was generated with the application

The code which creates the object which represents this animation is shown below.

TranslateAnimation getAnimObject() {
    return new TranslateAnimation(mFromXDelta, mToXDelta, mFromYDelta, mToYDelta);
}

[Code 7] The method which creates the TranslateAnimation object

2.1.4 Rotate

The rotate animation allows rotating the view. This animation is represented as a RotateAniamtion object in Java code or as the rotation tag in xml. The form which allows creating this animation in the application is shown below.

[Image 11] The form which is used to create a RotateAnimation object

[Image 11] The form which is used to create a RotateAnimation object

The specific attributes of this animation allow setting the initial and final degrees. The pivot attributes work as in the ScaleAnimation. These parameters can be set in xml via android:fromDegrees, android:toDegrees, android:pivotX and android:pivotY. The following image shows an xml which represents the rotate animation in xml.

[Image 12] Example of translate xml which was generated via application

[Image 12] Example of translate xml which was generated via application

The code which creates objects which represent this animation is shown below.

RotateAnimation getAnimObject() {
    return new RotateAnimation(mFromDegrees, mToDegrees, mPivotX, mPivotY);
}

[Code 8] Method which creates the RotateAnimation object

2.1.5 Set

The last object which extends Animation is the AnimationSet object. In xml it is represented as the set tag. This animation is used for joining animations. The form which allows defining this animation is shown in the image below.

[Image 11] The form which is used to create the AnimationSet object

[Image 11] The form which is used to create the AnimationSet object

This animation has one specific value: shareInterpolator. This value can be set via the android:shareInterpolator attribute or via the setShareInterpolator(boolean) method. This attribute defines the interpolator which is set for this animation and shared to its children. The image below shows an xml for AnimationSet.

[Image 12] Example set xml which was generated via application

[Image 12] Example set xml which was generated via application

The code which creates objects which represent this animation is shown below.

AnimationSet getAnimObject() {
    final AnimationSet result = new AnimationSet(mShareInterpolator);
    mAnimations = getAnimtionListFromForm();
    for (final Animation animation : mAnimations) {
        result.addAnimation(animation);
    }
    return result;
}

[Code 9] Method which creates AnimationSet objects

2.2. Frame Animation

The last group of animations is the frame animation. This animation is represented as AnimationDrawable in Java code or as an animation-list tag in xml. The xml file should be in the drawable folder in the resources of the application. There are two possible ways to get and use this animation from xml:

  • In code : R.drawable.xml_file_name*
  • In other xml @[package] drawable/xml_file_name *

* Where ‘xml_file_name’ is the name of the xml_file_name.xml file.

The following image shows the form to define this animation.

[Image 13] The form which is used to create AnimationDrawable objects

[Image 13] The form which is used to create AnimationDrawable objects

The animation-list tag which represents AnimationDrawable in xml has only one attribute: android:oneShoot. If this attribute is set to true, the animation will be displayed only one time otherwise it will be displayed as long as the view will be visible. Additionally this tag contains other tags - item. The item tag defines the frame. This tag has two attributes. The first one - android:drawable - defines the drawable resource; the second – android:duration - defines how long the frame will be displayed. This animation is set as the background of a view. The xml file which was created with the application is shown in the image below:

[Image 14] Example animation-list xml which was generated via an application

[Image 14] Example animation-list xml which was generated via an application

The code of the method which creates and uses this animation in code is shown below.

void crateAndRunAnimForView(View pViewToAnim) {
    final AnimationDrawable animDrawable = new AnimationDrawable();
    animDrawable.setOneShot(mOneShoot);
    for (int index = 0; index < FormAnimationFrameFragment.FRAME_COUNT; index++) {
        if (mFrames[index].isSet()) {
            animDrawable.addFrame(getActivity().getResources().getDrawable(mFrames[index].getFrameRes()), mFrames[index].getDutration());
        }
    }
    ((ImageView) pViewToAnim).setImageDrawable(animDrawable);
    animDrawable.start();

}

[Code 10] Method which create AnimationDrawable object

We hope you enjoyed this article and look forward to seeing your animated applications on Samsung Smart devices soon. For more information, check out developer.samsung.com

COPY URL twitter facebook