For my application, I am trying to add [grow / shrink + alpha change] animation for each ImageView in my layout. I managed to get the animation to work, and each of the animations is saved after they are done by setting fillAfter = "true" for both of my XML files (grow.xml and shrink.xml). However, there seems to be some kind of weird animation error that causes unselected images to grow and then “snap” to their normal size when I set fillAfter = "true for shrink.xml! Let me explain how the application works and then gives a script to make it more understandable:
Initially, all images have an alpha level of 50%. When I click on a specific image, it will grow to 120%, and its alpha level will become 100% (the effect of "shine"). When I click on another image, the previously selected image will be reduced to 100%, and its alpha level will return to 50%, and the current selected image will grow as described previously.
In my layout, I have three identical image sizes placed in a row. I click on the first image, then click on the second, and then click on the first again. Well, no problem. Now, I click on the third image and I get a weird binding problem for the first image. Any idea how to fix this?
I tried:
- image.setAlpha (...) to avoid having to set the alpha level to shrink.xml and then call fillAfter = "true" , but unfortunately the API 11 call
- setting the fillAfter attribute only for my true alpha tags in the shrink.xml file
- calls image.startAnimation (fadeOut) right after the compression animation, but it looks awful.
- Override onAnimationEnd () , but this call is never reached (??)
shrink.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
<scale
android:fromXScale="1.2"
android:toXScale="1.0"
android:fromYScale="1.2"
android:toYScale="1.0"
android:duration="300"
android:pivotX="50%"
android:pivotY="50%"/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.5"
android:duration="300"/>
</set>
grow.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="1.20"
android:fromYScale="1.0"
android:toYScale="1.20"
android:duration="300"
android:pivotX="50%"
android:pivotY="50%"
/>
<alpha
android:fromAlpha="0.5"
android:toAlpha="1.0"
android:duration="300"/>
</set>
fade_out.xml:
<?xml version="1.0" encoding="UTF-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="300"
android:fromAlpha="1.0"
android:toAlpha="0.5"
android:fillAfter="true">
</alpha>
main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:id="@+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:src="@drawable/image1"/>
<ImageView
android:id="@+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:src="@drawable/image2"/>
<ImageView
android:id="@+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:src="@drawable/image3"/>
</LinearLayout>
Test.java:
public class Test extends Activity {
private View mSelected;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Animation fadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);
final Animation grow = AnimationUtils.loadAnimation(this, R.anim.grow);
final Animation shrink = AnimationUtils.loadAnimation(this, R.anim.shrink);
OnClickListener listener = new OnClickListener() {
@Override
public void onClick(View v) {
if (mSelected == v)
return;
if (mSelected != null)
mSelected.startAnimation(shrink);
mSelected = v;
mSelected.startAnimation(grow);
}
};
ImageView image1 = (ImageView)findViewById(R.id.image1);
image1.startAnimation(fadeOut);
image1.setOnClickListener(listener);
ImageView image2 = (ImageView)findViewById(R.id.image2);
image2.startAnimation(fadeOut);
image2.setOnClickListener(listener);
ImageView image3 = (ImageView)findViewById(R.id.image3);
image3.startAnimation(fadeOut);
image3.setOnClickListener(listener);
}}