Hello friends, In this android tutorial i explained how to give animations using XML.Creating animation is very simple to give animation effect on object. Animations can be performed through either XML or JAVA code.Here i covered basic animations like fade in, fade out, scale, rotate, slide up-down etc.here i wrote only XML code.
Let's Understand XML animation attributes
When we working with XML animations it is better to have through knowledge about some of the important attributes of XML which create major differentiation in animation. Following are the important attributes you must known about all.
This file should be located res/anim/animation.xml. If you don’t have anim folder in your res/ directory create one. Following is example of simple animation using XML.
blink.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="2"/>
</set>
bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
flip.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="@android:anim/linear_interpolator"
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotY="100%"
android:fillAfter="false"
android:duration="200" />
<translate
android:fromYDelta="1.0"
android:toYDelta="100%"
android:duration="300"/>
</set>
move.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>
rotate.xml
<?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="600"
android:repeatMode="restart"
android:repeatCount="4"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>
sequential.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Use startOffset to give delay between animations -->
<!-- Move -->
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="300"
android:toXDelta="75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="1100"
android:toYDelta="70%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="1900"
android:toXDelta="-75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="2700"
android:toYDelta="-70%p" />
<!-- Rotate 360 degrees -->
<rotate
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/cycle_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:startOffset="3800"
android:toDegrees="360" />
</set>
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
together.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Use startOffset to give delay between animations -->
<!-- Move -->
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="2"
android:toYScale="2" >
</scale>
<!-- Rotate 180 degrees -->
<rotate
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="4"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
wav_scale2.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator" >
<alpha
android:duration="100"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<scale
android:duration="200"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<scale
android:duration="100"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="200"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
</set>
zoom_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
Let's Understand XML animation attributes
When we working with XML animations it is better to have through knowledge about some of the important attributes of XML which create major differentiation in animation. Following are the important attributes you must known about all.
android:duration – Set duration of animation in which the animation should
complete
android:startOffset – It is the waiting time before an animation
starts.This property is mainly used to perform multiple animations in a
sequential manner.
android:interpolator – It is the rate of change in animation.
android:fillAfter – This defines whether to apply the animation
transformation after the animation completes or not. When set to true, the
animation transformation is applied after the animation is over. This attribute should be use with <set>
node.
android:fillBefore – This defines whether to apply the animation
transformation before the animation completes or not. When set to true or when
fillEnabled is not set to true, the animation transformation is applied before
the animation has started. This
attribute should be use with <set> node
android:repeatMode – This is useful when you want your animation to be
restart mode or reverse mode.
android:repeatCount – This defines number of repetitions on animation
e.g."4" then animation will repeating 4 time. If you set this value
to infinite then animation will repeat infinite times.
android:pivotX - to perform zoom from the center of the
element.(X-direction)
android:pivotY - to perform zoom from the center of the
element.(Y-direction)
android:fromXScale - attributes which defines scaling of the object from
X.(X-direction)
android:fromYScale - attributes which defines scaling of the object from
Y.(Y-direction)
android:toXScale - attributes which defines scaling of the object from X
and that values are lesser than android:fromXScale.(X-direction)
android:toYScale - attributes which defines scaling of the object from Y
and that values are lesser than android:fromYScale.(Y-direction)
android:fromDegrees - it defines rotation angles (Starting point).
android:toDegrees - it defines rotation angles (Ending point).
Clock wise – use positive to Degrees value (Rotation).
Anti clock wise – use negative to Degrees value (Rotation).
android:fromXDelta - attributes is use for move object from X-direction.
android:fromYDelta - attributes is use for move object from Y-direction.
android:toXDelta - attributes is use for move object from to X-direction.
android:toYDelta - attributes is use for move object from to Y-direction.
android:zAdjustment - Allows for an adjustment of the Z ordering of the
content being animated for the duration of the animation.
Click here for Complete example.
No comments :
Post a Comment