23
Animation
| Date post: | 12-Jan-2016 |
| Category: |
Documents |
| Upload: | homer-evelyn-harvey |
| View: | 227 times |
| Download: | 0 times |
Animation
©SoftMoore Consulting
Android Animation
Two main types of animations
• Tween Animation – creates an animation by performing a series of transformations (rotate, scale, etc.) on a single image.
• Frame Animation – creates an animation by showing a sequence of images in order.
Slide 2
Note: Animation can be applied to any View object.
©SoftMoore Consulting
Tween Animation
Four types of tween transformations:
• alpha – translates the transparency of the view from 0.0 (transparent) to 1.0 (opaque)
• rotate – spins the view clockwise or counterclockwise around a pivot point
• scale – stretches the view vertically and horizontally from a pivot point
• translate – moves the view from one position on the screen to another
Slide 3
©SoftMoore Consulting
Defining Tween Animations
• Tween animations can be defined programmatically in the Java code or declaratively as XML resource files in the /res/anim folder.
• Java classes (package android.view.animation)– AlphaAnimation – RotateAnimation– ScaleAnimation – TranslateAnimation
• XML elements– <alpha> – <rotate>– <scale> – <translate>
• It is also possible to define a “set” of transformations to be applied to a view; e.g., rotate and translate.
Slide 4
©SoftMoore Consulting
Example: Tween Animation
• Copy image android.jpg to folder res/drawable.
• Create file res/anim/rotate.xml.<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="3000" />
Slide 5
rotate clockwise 360o
around the center of the view
over a 3-second interval
©SoftMoore Consulting
Example: Tween Animation(continued)
• Define a view within the layout file for the image....<ImageView android:id="@+id/androidImage" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:src="@drawable/android" />...
Slide 6
Note: No file extension.
©SoftMoore Consulting
Example: Tween Animation(continued)
• Define Java code to start the rotation.Button rotateButton = (Button) findViewById(R.id.rotateButton);rotateButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Animation rotate = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); imageView.startAnimation(rotate); } });
Slide 7
©SoftMoore Consulting
Example: Tween Animation(continued)
Slide 8
©SoftMoore Consulting
Example: Alpha Animation
<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="3000" />
Slide 9
©SoftMoore Consulting
Example: Scale Animation
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromXScale="0.5" android:fromYScale="0.5" android:toXScale="1.5" android:toYScale="1.5" android:duration="3000" />
Slide 10
©SoftMoore Consulting
Example: Translate Animation
<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="-200" android:toXDelta="200" android:duration="3000" />
Slide 11
©SoftMoore Consulting
Example: Pulse Animation
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromXScale="0.75" android:fromYScale="0.75" android:toXScale="1.25" android:toYScale="1.25" android:duration="1000" android:repeatCount="4" />
Slide 12
©SoftMoore Consulting
Example: Tumble Animation
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="3000" />
<translate android:fromXDelta="-200" android:toXDelta="200" android:duration="3000" />
</set> Slide 13
Note: Order of animationswithin the set is important.Changing the order canchange the appearance ofthe animation.
©SoftMoore Consulting
Example: Frame Animation
• Copy images asteroid01.png, asteroid02.png, …, asteroid12.png to folder res/drawable.
• Create file res/drawable/astroid_animation.xml.<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/asteroid01" android:duration="200" /> <item android:drawable="@drawable/asteroid02" android:duration="200" /> ... </animation-list> Slide 14
©SoftMoore Consulting
Example: Frame Animation(continued)
• Define a view within the layout file for the image....<ImageView android:id="@+id/asteroidImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" />...
Slide 15
©SoftMoore Consulting
Example: Frame Animation(continued)
• Define Java code to start the rotation.AnimationDrawable asteroidAnimation; @Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView asteroidView = (ImageView) findViewById(R.id.asteroidImage); asteroidView.setBackgroundResource (R.drawable.asteroid_animation); asteroidAnimation = (AnimationDrawable) asteroidView.getBackground(); }
Slide 16
©SoftMoore Consulting
Example: Frame Animation(continued)
• Define Java code to start the rotation (continued).public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { asteroidAnimation.start(); return true; }
return super.onTouchEvent(event); }
Slide 17
©SoftMoore Consulting
Example: Frame Animation(continued)
Slide 18
Imagine theasteroid rotatingin place.
©SoftMoore Consulting
Tween Animation on the Asteroid Image
• In the layout file<ImageView android:id="@+id/asteroidImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center“ android:src="@drawable/asteroid01" />
Slide 19
©SoftMoore Consulting
Tween Animation on the Asteroid Image(continued)
• In resource file anim/fall.xml<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate android:fromDegrees="0" android:toDegrees="720" android:pivotX="50%" android:pivotY="50%" android:duration="3000" /> <translate
android:interpolator="@android:anim/accelerate_interpolator" android:fromXDelta="-250" android:fromYDelta="-30" android:toXDelta="260" android:toYDelta="700" android:duration="3000" /></set>
Slide 20
©SoftMoore Consulting
Tween Animation on the Asteroid Image(continued)
• In the Java source codepublic boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { Animation fall = AnimationUtils.loadAnimation(AnimationDemo.this,
R.anim.fall); asteroidView.startAnimation(fall);
return true; }
return super.onTouchEvent(event); }
Slide 21
©SoftMoore Consulting
Tween Animation on the Asteroid Image(continued)
Slide 22
Imagine theasteroid rotatingas it falls fromleft to right acrossthe screen.
©SoftMoore Consulting
Relevant Links
• Animation and Graphics Overviewhttp://developer.android.com/guide/topics/graphics/overview.html
• Property Animationhttp://developer.android.com/guide/topics/graphics/prop-animation.html
• View Animationhttp://developer.android.com/guide/topics/graphics/view-animation.html
• Drawable Animationhttp://developer.android.com/guide/topics/graphics/drawable-animation.html
• Animation Resourceshttp://developer.android.com/guide/topics/resources/animation-resource.html
Slide 23
