Basic Animation
description
Transcript of Basic Animation
![Page 1: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/1.jpg)
Basic Animation
![Page 2: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/2.jpg)
Animation
• 4 options– Animated .gif– Frame by Frame animation– Tweened animation• This is our focus
– OpenGL ES• Graphics API for more robust animation
– Popular for mobile game programming– Supports 3D
![Page 3: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/3.jpg)
Tweened animation
• Components of tweened animation– Drawable
• image file (.png, .jpg, .gif)• xml file• ShapeDrawable instance
– Anim resource• anim folder within the res folder must be created• contains xml describing the animation
– Java code• AnimationUtils class• Animation class• AnimationListener class• AnimationSet class
![Page 4: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/4.jpg)
Anim resource
anim folder within res folder
![Page 5: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/5.jpg)
Tweened animation
• Types of tweened animation– rotate (spin)– translate (move)– alpha (fade)– scale (shrink/stretch)
![Page 6: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/6.jpg)
Tweened animation
• Rotate options– Setting rotation parameters• fromDegrees• toDegrees
– Setting the pivot point• pivotX• pivotY
– Duration• duration
– time in milliseconds
![Page 7: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/7.jpg)
Tweened animation
• Sample rotate .xml file
<?xml version="1.0" encoding="utf-8" ?><rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"android:toDegrees="720"android:pivotX="25%"android:pivotY="75%"
/>
![Page 8: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/8.jpg)
Tweened animation
• Translate options– Setting movement parameters• toXDelta
– positive is number of pixels to the right
• toYDelta– positive is number of pixels down
– Duration• duration
– time in milliseconds
![Page 9: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/9.jpg)
Tweened animation
• Sample translate .xml file
<?xml version="1.0" encoding="utf-8" ?><translate
xmlns:android="http://schemas.android.com/apk/res/android" android:toYDelta="80" android:duration="1000"/>
![Page 10: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/10.jpg)
Tweened animation
• Alpha options– Setting alpha (transparency) parameters• fromAlpha and toAlpha
– Number between 0.0 and 1.0– 1.0 is non-transparent, 0.0 is fully-transparent
– Duration• duration
– time in milliseconds
![Page 11: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/11.jpg)
Tweened animation
• Sample alpha .xml file
<alpha xmlns:android="http://schemas.android.com/apk/res/android"android:fromAlpha= "0.75"android:toAlpha="0.25"android:duration="2000"
/>
![Page 12: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/12.jpg)
Tweened animation
• Scale options– Setting scaling (shrink/stretch) parameters• fromXScale and toXScale (or YScale)
– numbers are relative to each other
– Setting the pivot point• pivotX• pivotY
– Duration• duration
– time in milliseconds
![Page 13: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/13.jpg)
Tweened animation
• Sample scale .xml file
<scale xmlns:android="http://schemas.android.com/apk/res/android"android:fromXScale="1.0"android:toXScale="0.33"android:fromYScale="1.0"android:toYScale="0.33"android:pivotX="50%"android:pivotY="50%"android:duration="5000"
/>
![Page 14: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/14.jpg)
Java code
Relevant animation classes
![Page 15: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/15.jpg)
AnimationUtils class
• AnimationUtils class– a way to manage animations– loadAnimation ties an animation xml file to an
instance of an Animation
![Page 16: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/16.jpg)
Animation class
• Animation class– An animation that can be applied to views– relevant methods
• setRepeatCount– default is 0
• setFillAfter– If argument is true, Animation persists after it ends
» i.e. If object is moved, it stays where it was moved to– default is false
• setAnimationListener– a way to execute code as soon as an animation starts, repeats,
or ends– must assign a user defined class that extends AnimationListener
![Page 17: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/17.jpg)
Sample codeSingle animation – without Listener
ImageView iv = (ImageView)findViewById(R.id.myIV);
Animation an = AnimationUtils.loadAnimation(this, R.anim.myXMLFile);an.setRepeatCount(3);
iv.startAnimation(an);
![Page 18: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/18.jpg)
AnimationListener class
• Allows an Animation to ‘Listen’ for:– animation start– animation repeat– animation end
• Is often written as an Inner class
![Page 19: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/19.jpg)
AnimationListener sample codeclass MyAnimationListener implements AnimationListener {
public void onAnimationEnd(Animation animation) { //Code to execute when animation ends }
public void onAnimationRepeat(Animation animation) {//Code to execute when animation repeats
}
public void onAnimationStart(Animation animation) {//Code to execute when animation starts
} }
![Page 20: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/20.jpg)
Sample codeSingle animation – with Listener
ImageView iv = (ImageView)findViewById(R.id.myIV);
Animation an = AnimationUtils.loadAnimation(this, R.anim.myXMLFile);an.setRepeatCount(3);an.setAnimationListener(new MyAnimationListener());
iv.startAnimation(an);
![Page 21: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/21.jpg)
AnimationSet
• Collection of a group of animations that will be played simultaneously
• Any properties set at the AnimationSet level override properties at individual Animation level– duration
• Constructor accepts boolean– true for our purposes– indicates to share an Interpolator (allows acceleration and
deceleration of animation)• Sets can listen in the same way individual animations can• Known issue – Sets do not respond to setRepeatCount()
![Page 22: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/22.jpg)
AnimationSet – implemented via java
ImageView iv = (ImageView)findViewById(R.id.myImageView); AnimationSet animations = new AnimationSet(true);
Animation an1 = AnimationUtils.loadAnimation(this, R.anim.xmlFile1);animations.addAnimation(an1);
Animation an2 = AnimationUtils.loadAnimation(this, R.anim.xmlFile2);animations.addAnimation(an2); animations.setDuration(4000);
iv.startAnimation(animations);
![Page 23: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/23.jpg)
AnimationSet – implemented via xml
Advantage of doing a set in xml is that each animation can be given a different duration (duration cannot be put at the set level in xml)
<set xmlns:android="http://schemas.android.com/apk/res/android"><translate android:toYDelta="80"android:duration="10000"/><alphaandroid:fromAlpha="0.75"android:toAlpha="0.25"android:duration= "2000"android:startOffset= "4000"/>
</set>
![Page 24: Basic Animation](https://reader036.fdocuments.in/reader036/viewer/2022062518/56814937550346895db67b82/html5/thumbnails/24.jpg)
AnimationSet – implemented via xmlJava code treats as normal animation
ImageView iv = (ImageView)findViewById(R.id.myIV);
Animation an = AnimationUtils.loadAnimation(this, R.anim.myAnimXMLFile);
iv.startAnimation(an);