It’s difficult to find time these days. However, I always try and make sure that the learning never stops! In this tutorial, I will talk about creating an animation using the Animation resources offered by Android.
Android includes an Animation class using which an animation can be applied to Views, Surfaces or other objects. There are basically two main types of Animations:
1. Property Animation ( android.animation)
The property animation system allows developers to animate object properties of any type, for example, int, float. One can also specify keyframes, group animations and even control the behavior of animations.
2. View Animation ( android.view.animation )
Unlike property animation, View animation is used to create simple animations such as tweened animation and frame by frame animation. Tweened animation creates an animation by performing a series of transformations on a single image where as frame by frame animation creates an animation by showing a sequence of images.
Once the above concepts are clear, we can now proceed towards creating a simple fade in/fade out animation in Android.
Expand your Project under the Package explorer window. You will find a folder named res. Inside the resfolder, create a new folder named anim.
res/anim/anim_fade_in.xml
1
2
3
| <set android:interpolator="@android:anim/linear_interpolator" xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="2000" android:fromalpha="0.1" android:toalpha="1.0"></alpha></set> |
res/anim/anim_fade_out.xml
1
2
3
| <set android:interpolator="@android:anim/linear_interpolator" xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="2000" android:fromalpha="1.0" android:toalpha="0.1"></alpha></set> |
activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
| <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"> <button android:id="@+id/btn_fadein" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="Fade In"> </button><button android:id="@+id/btn_fadeout" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="Fade Out"> <linearlayout android:gravity="center" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical"> <imageview android:id="@+id/my_image" android:layout_height="fill_parent" android:layout_width="fill_parent" android:src="@drawable/android"> </imageview></linearlayout> </button></linearlayout> |
MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| package com.sunil.animation;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView; public class MainActivity extends Activity { private ImageView image; private Animation animFadeIn; private Animation animFadeOut; private Button btnFadeIn; private Button btnFadeOut; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); btnFadeIn = (Button)findViewById(R.id.btn_fadein); btnFadeOut = (Button)findViewById(R.id.btn_fadeout); image = (ImageView)findViewById(R.id.my_image); animFadeIn = AnimationUtils.loadAnimation(this, R.anim.anim_fade_in); btnFadeIn.setOnClickListener(new Button.OnClickListener(){ @Override public void onClick(View arg0) { // TODO Auto-generated method stub image.startAnimation(animFadeIn); }}); animFadeOut = AnimationUtils.loadAnimation(this, R.anim.anim_fade_out); btnFadeOut.setOnClickListener(new Button.OnClickListener(){ @Override public void onClick(View arg0) { // TODO Auto-generated method stub image.startAnimation(animFadeOut); }}); }} |
No comments:
Post a Comment