Zoomin animation on picture in android

Zoomin animation falls under the category of View Animation. The view animation framework animations, which can both be declared in XML.

The  zoomin animation xml file is given below :

Zoomin.xml


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/decelerate_interpolator">
 <scale android:fromXScale="2.0" android:toXScale="1.0"
 android:fromYScale="2.0" android:toYScale="1.0"
 android:pivotX="50%p" android:pivotY="50%p"
 android:duration="@android:integer/config_longAnimTime" />
</set>
  • <set> contains other animation elements.
  • <scale > is a  resizing animation tag. You can specify the center point of the image from which it grows outward (or inward) by specifying pivotX and pivotY.
  • fromXScale/fromYScale represents the initial state and toXScale/toYScale represent the final state .

Hence , in this example the image is zoomed to its double size as “1.0” scale specifies no change.

Note: The zoomin.xml is created in anim folder which is a part of res folder.

The code for loading and starting the animation is given below.

 


public void onItemClick( View v)

{

Animation animLinear = AnimationUtils.loadAnimation(mContext, R.anim.zoomin);

v.startAnimation(animLinear);//starts the animation

}

android.view.animation.AnimationUtils  defines common utilities for working with animations and loadAnimation .loads an animation object from a resource anim folder.

Hence ,create the animation xml file first and then add the above code

Srcreenshots:

Screenshot1                   Screenshot 2                 Screenshot 3

translate animation in android example

Translate Animation controls the position and location of a layout or button or any view on which animation is being applied. It can move an object either in x direction or y direction.

Syntax :

TranslateAnimation transAnimation= new TranslateAnimation(fromXposition, toXPosition, fromYPosition, toYPosition);

  • fromXposition- x coordinate from  where animation should start
  • toXPosition- x coordinate at which animation would end
  • fromYPosition- y coordinate from where animation should start.
  • toYPosition- y coordinate at which animation would end.
  1. If we want to translate only in X direction then we set fromYPosition and toYPosition as zero.
  2. If we want to translate only in Y direction then we set fromXPosition and toXPosition as zero.

There is  another method in which we ,create an anim folder in the res folder. In this folder  we add our animation xml .We use a translate tag  in which we specify the attribute values.

In the below xml

android:duration defines the time of execution of animation

android:repeatCount specifies the no. of times the animation should be repeated ,

android:fromYDelta defines y coordinate from  where animation should start

android:toYDelta defines y coordinate at which animation would end.

line_translate.xml


<set  xmlns:android="http://schemas.android.com/apk/res/android">

<translate android:duration="300" android:repeatCount="1 android:fromYDelta="0.0" android:toYDelta="174.0" />

</set>

Code:


Animation lineTranslate;

//loading xml from anim folder

Animation localAnimation = AnimationUtils.loadAnimation(this, R.anim.line_translate);

//You can now apply the animation to a view

view.startAnimation(transAnimation);

Translate Animation can change the visual appearance of an object, but they cannot change the objects themselves. That is, if you apply a translate animation to a view, it would move to a new position but its click events would not get fired whereas the click events would still get fired at its previous position. This happens because the view is still at its original position. In order to overcome this, we can use ObjectAnimation which actually moves an object. Object Animation is the only animation which actually moves an object. You can create Translate animation using ObjectAnimator.


ObjectAnimator transAnimation= ObjectAnimator.ofFloat(view, propertyName, fromX, toX);

transAnimation.setDuration(3000);//set duration

transAnimation.start();//start animation

Here,

  • view  -this is the view on which animation is to be applied
  • propertyName-The property being animated.
  • FromX,toX-A set of values that the animation will animate between over time.