Animations 1 Fall 2012 CS2302: Programming Principles.
-
Upload
stuart-norris -
Category
Documents
-
view
213 -
download
0
Transcript of 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
Fall 2012 CS2302: Programming Principles3
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
Fall 2012 CS2302: Programming Principles4
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
Fall 2012 CS2302: Programming Principles5
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
Fall 2012 CS2302: Programming Principles6
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
Fall 2012 CS2302: Programming Principles7
<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
Fall 2012 CS2302: Programming Principles8
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<rotate android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:duration="5000" />
</set>
Translate Animation’s xml file
Fall 2012 CS2302: Programming Principles9
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="50%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="100%" android:duration="2000" />
</set>
Scale Animation’s xml file
Fall 2012 CS2302: Programming Principles10
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<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" /><item android:drawable="@drawable/nv3"
android:duration="500" /><item android:drawable="@drawable/nv4"
android:duration="500" /></animation-list>
12 Fall 2012 CS2302: Programming Principles
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();
13 Fall 2012 CS2302: Programming Principles