animations 1 fall 2012 cs2302: programming principles

1

Animations

Fall 2012 CS2302: Programming Principles

Animation Category

1. Tweened Animations– Scale animations– Rotate animations– Alpha animations– Translate animations

2. Frame-by-Frame Animations

Fall 2012 CS2302: Programming Principles2

Procedure to create Tweened Animations


1. Create an object of AnimationSet2. Create an object of Animation

– TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

– AlphaAnimation(float fromAlpha, float toAlpha)

– ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

– RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

3. Setting parameters for the object of Animation4. Add the object of Animation to the object of AnimationSet5. startAnimation(animationSet);

Attributes of Animations


ANIMSTION YPE

ATTRIBUTES VALID VALUES

Alpha fromAlpha / toAlpha float from 0 to 1

Scale fromXScale / toXScale float from 0 to 1

fromYScale / toYScale float from 0 to 1

pivotX / pivotY String of the percentage of graphic width/height from 0% to 100%

Translate fromX / toX float from 0 to 1

fromY / toY float from 0 to 1

Rotate fromDegrees / toDegrees float from 0 to 360

pivotX / pivotY String of the percentage of graphic width/height from 0% to 100%

Common Methods of Tweened Animations


setDuration(long durationMills)– set the amount of time (in milliseconds) for the animation to run

setFillAfter(boolean fillAfter)– If fillAfter is set to true, then the animation transformation is

applied after the animation is over.

setFillBefore(boolean fillBefore)– If fillBefore is set to true, then the animation transformation is

applied before the animation has started.

setStartOffSet(long startOffset)– Set the delay in milliseconds before the animation runs.

setRepeatCount(int repeatCount)– Defines how many times the animation should repeat.

Create Tweened Animations by editing xml file


Create a folder called anim under res folder Create new xml files in the anim folder. Add a set tag in the xml

files: <set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/accelerate_interpolator"></set>

Add rotate, alpha, scale, or translate tag in the set tag.

Use AnimationUtils.loadAnimation to load the xml file, and then create an object of Animation

startAnimation

Alpha Animation’s xml file


<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/accelerate_interpolator">

<alpha android:fromAlpha="1.0"android:toAlpha="0.0"android:startOffset="500"android:duration="500" />

</set>

Rotate Animation’s xml file




<rotate android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:duration="5000" />

</set>

Translate Animation’s xml file




<translate android:fromXDelta="50%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="100%" android:duration="2000" />

</set>

Scale Animation’s xml file




<scale android:fromXScale="1.0" android:toXScale="0.0"android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%"android:pivotY="50%" android:duration="2000" />

</set>

Load xml file

In the MainActivity.java file– Animation animation = (Animation) AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);

– imageView.startAnimation(animation);

11 Fall 2012 CS2302: Programming Principles

Frame-By-Frame Animations

Create a xml file under res/drawable <animation-list xmlns:android="http://schemas.android.com/apk/res/android"

android:oneshot="false"><item android:drawable="@drawable/nv1"

android:duration="500" /><item android:drawable="@drawable/nv2"



android:duration="500" /></animation-list>


Frame-By-Frame Animations

Load the xml file– imageView.setBackgroundResource(R.drawable.anim);

Get AnimationDrawable– AnimationDrawable animationDrawable =

(AnimationDrawable)imageView.getBackground();

– Start the animation– animatinDrawable.start();


animations 1 fall 2012 cs2302: programming principles

Documents