I am using a ViewFlipper to display a series of images, however the animation I am trying to apply (zoom+fade) is only shown on the very last image in the ViewFlipper. Anyone know where I'm going wrong? Below is my code:
mViewFlipper = (ViewFlipper) fragmentView.findViewById(R.id.view_flipper);
mViewFlipper.setVisibility(View.VISIBLE);
for(int i=0;i<galleryGridImages.size();i++)
{
setFlipperImage(galleryGridImages.get(i));
}
AnimationSet as = new AnimationSet(false);
fade = new AlphaAnimation(1.0f,0.0f);
fade.setDuration(transitionSpeed);
as.addAnimation(fade);
zoom = new ScaleAnimation(1, 3, 1, 3, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
zoom.setDuration(transitionSpeed);
as.addAnimation(zoom);
mViewFlipper.setOutAnimation(as);
mViewFlipper.setAutoStart(true);
mViewFlipper.setFlipInterval(interval);
mViewFlipper.startFlipping();
Related
I have a case where I have 2 edittext email and password. When any one gets focus say email the hint moves up and becomes the heading. In this animation i translate the textview(hint) up and at the same time scale it down to 0.8f.
At the same time the second textview say password looses focus, if its still empty i want to reverse the animation and put back the heading as hint.
To sum up hint moves up as heading and gets back to hint position if the edittext remains empty.
I have two different animation set for both the editText views, they work well individually but on parallel execution one of them doesnt show up instead the hint becomes invisible.
My code is as follows :
email.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean b) {
if(b && emailAnimated==false){
Log.d("email1", "called");
AnimationSet animSet = new AnimationSet(true);
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
animSet.setDuration(800);
TranslateAnimation translate = new TranslateAnimation(0, 0, 0, -60);
animSet.addAnimation(translate);
ScaleAnimation scale = new ScaleAnimation(1f, 0.8f, 1f, 0.8f);
animSet.addAnimation(scale);
emailText.startAnimation(animSet);
emailAnimated=true;
}else if(emailAnimated==true)
{
Log.d("email2", "called");
AnimationSet animSet = new AnimationSet(true);
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
animSet.setDuration(800);
TranslateAnimation translate = new TranslateAnimation(0, 0, 0, -60);
animSet.addAnimation(translate);
ScaleAnimation scale = new ScaleAnimation(1f, 0.8f, 1f, 0.8f);
animSet.addAnimation(scale);
//Reverse the animation if losses focus
animSet.setInterpolator(new ReverseInterpolator());
emailText.startAnimation(animSet);
emailAnimated=false;
}
}
});
password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean b) {
if(b && passwordAnimated==false){
Log.d("pass1", "called");
AnimationSet animSet = new AnimationSet(true);
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
animSet.setDuration(800);
TranslateAnimation translate = new TranslateAnimation(0, 0, 0, -60);
animSet.addAnimation(translate);
ScaleAnimation scale = new ScaleAnimation(1f, 0.8f, 1f, 0.8f);
animSet.addAnimation(scale);
passwordText.startAnimation(animSet);
passwordAnimated=true;
}
else if(passwordAnimated==true)
{
Log.d("pass2", "called");
AnimationSet animSet = new AnimationSet(true);
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
animSet.setDuration(800);
TranslateAnimation translate = new TranslateAnimation(0, 0, 0, -60);
animSet.addAnimation(translate);
ScaleAnimation scale = new ScaleAnimation(1f, 0.8f, 1f, 0.8f);
animSet.addAnimation(scale);
animSet.setInterpolator(new ReverseInterpolator());
passwordText.startAnimation(animSet);
passwordAnimated=false;
}
}
});
Just to make it more understandable, else if condition of email will be called whenever if condition of password is true and vies versa and thats how 2 animation sets are called.
You can try to set the layer type of the two EditTexts to hardware while animating.
animSet.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart( Animation animation ) {
emailText.setLayerType(View.LAYER_TYPE_HARDWARE, null);
}
#Override
public void onAnimationRepeat( Animation animation ) {
}
#Override
public void onAnimationEnd( Animation animation ) {
emailText.setLayerType(View.LAYER_TYPE_NONE, null);
}
});
I have two animation with different duration like below:
Anim 1:
TranslateAnimation trans1 = new TranslateAnimation(0, 0, 0, 500);
trans1.setStartOffset(0);
trans1.setDuration(5000);
trans1.setFillAfter(true);
Anim 2:
TranslateAnimation trans2 = new TranslateAnimation(0, -100, -200, -200);
trans2.setDuration(200);
trans2.setRepeatCount(25);
trans2.setFillAfter(true);
As you see these animation have different durations. I would like to animate Anim2 (duration 200) in loop 25 times during one time Anim1 (duration 5000) animation from Y: 0 to 500.
I've tried to do with AnimationSet and addAnimation but it doesn't want to work.
Could You give me some tips how can I solve this problem?
My code:
AnimationSet rootSet = new AnimationSet(true);
rootSet.setInterpolator(new AccelerateInterpolator());
rootSet.setRepeatMode(Animation.INFINITE);
rootSet.setRepeatCount(200);
rootSet.setDuration(5000);
rootSet.setFillAfter(true);
TranslateAnimation trans1 = new TranslateAnimation(0, 0, 0, 500);
trans1.setStartOffset(0);
trans1.setDuration(5000);
trans1.setFillAfter(true);
rootSet.addAnimation(trans1);
AnimationSet rootSet2 = new AnimationSet(true);
rootSet2.setInterpolator(new AccelerateInterpolator());
rootSet2.setRepeatMode(Animation.INFINITE);
rootSet2.setRepeatCount(200);
rootSet2.setDuration(200);
TranslateAnimation trans2 = new TranslateAnimation(0, -100, -200, -200);
trans2.setDuration(200);
trans2.setRepeatCount(25);
trans2.setFillAfter(true);
rootSet2.addAnimation(trans2);
rootSet.addAnimation(rootSet2);
iv.startAnimation(rootSet);
EDIT:
When I play only trans2 animation it repeats 25 times as I wanted (in horizontal way).
And additionally I would like this animation to animate (whole horizontal animation not only imageview) in vertical way (trans1).
I hope that this description will be clearer.
When I added these two animations in one AnimationSet the first animation doesnt work at all and imageview (not animationn) is translated linear to -200,500.
Now I see what you want to do. You probably are better of doing multiple animations - one for each "line". Add an AnimationListener to know when the previous Animation ends (onAnimationEnd callback), jump down one line and go from right to left again.
They all basically are the same, just the fromYDelta and toYDelta values would change for each Animation.
I am creating an animation where my image will translate to a different spot on the screen and then fade in gradually. I completed the translation part(see below) but now when I start the fade in animation it disappears for the duration and then reapears after. I want to show the image being faded in gradually....Any ideas why this is happening?
public static int moveTwo(AnimationListener activity, View apa, int animationmove)
Log.v("MOVETWO", "Started move2");
AnimationSet picMov2 = new AnimationSet(true);
picMov2.setAnimationListener(activity);
RotateAnimation rotate2 = new RotateAnimation(0, 0,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
// rotate1.setStartOffset(50);
rotate2.setDuration(2000);
picMov2.addAnimation(rotate2);
TranslateAnimation trans2 = new TranslateAnimation(-200, -400, 0, 0);
trans2.setDuration(2000);
picMov2.setFillAfter(true);
picMov2.addAnimation(trans2);
apa.startAnimation(picMov2);
animationmove = 3;
return animationmove;
public static int moveThree(AnimationListener activity, View apa, int animationmove)
AlphaAnimation fadein = new AlphaAnimation((float) 0.3, 1);//HERE THE IMAGE IS DISAPPEARING
fadein.setAnimationListener(activity);
fadein.setDuration(2000);
fadein.setFillAfter(true);
apa.startAnimation(fadein);
animationmove=4;
return animationmove;
Just needed to create a translate action in the same place so it doesn't go back to its original position
public static int moveThree(AnimationListener activity, View apa, int animationmove)
{
Log.v("MOVETHREE", "Started move3");
AnimationSet picMov3 = new AnimationSet(true);
picMov3.setAnimationListener(activity);
AlphaAnimation fadein = new AlphaAnimation((float) 0.4, 1);
// rotate1.setStartOffset(50);
fadein.setDuration(duration);
picMov3.addAnimation(fadein);
TranslateAnimation trans1 = new TranslateAnimation(-400, -400, 0, 0);
trans1.setDuration(duration);
picMov3.setFillAfter(true);
picMov3.addAnimation(trans1);
apa.startAnimation(picMov3);
i wanna play scale(from 0 -> 1) animation on 6 balls , duration is 1000 ms on each ball.
and each animation have to wait the previous for 200ms.
ex :
anim1.start -> delay 200ms -> anim2.start (while anim1 is playing) -> ........
but i always got all 6 balls animations started at the same time , i don't know why , could
somebody tell me??
// show animation.
public void showBallAnimation(View v) {
LinearLayout ll = (LinearLayout) findViewById(R.id.ball_container);
RelativeLayout rl;
ScaleAnimation scaleAnim1 = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scaleAnim1.setDuration(500);
scaleAnim1.setStartOffset(0);
scaleAnim1.setFillAfter(true);
rl = (RelativeLayout) ll.getChildAt(0);
rl.setVisibility(View.VISIBLE);
rl.startAnimation(scaleAnim1);
ScaleAnimation scaleAnim2 = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scaleAnim2.setDuration(500);
scaleAnim2.setStartOffset(200);
scaleAnim2.setFillAfter(true);
rl = (RelativeLayout) ll.getChildAt(1);
rl.setVisibility(View.VISIBLE);
rl.startAnimation(scaleAnim2);
ScaleAnimation scaleAnim3 = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scaleAnim3.setDuration(500);
scaleAnim3.setStartOffset(400);
scaleAnim3.setFillAfter(true);
rl = (RelativeLayout) ll.getChildAt(2);
rl.setVisibility(View.VISIBLE);
rl.startAnimation(scaleAnim3);
// Animation anim4 =
// AnimationUtils.loadAnimation(getApplicationContext(),
// R.anim.ball_scale4);
ScaleAnimation scaleAnim4 = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scaleAnim4.setDuration(500);
scaleAnim4.setStartOffset(600);
scaleAnim4.setFillAfter(true);
rl = (RelativeLayout) ll.getChildAt(3);
rl.setVisibility(View.VISIBLE);
rl.startAnimation(scaleAnim4);
}
You should change r1.startAnimation(scaleAnimX) to r1.setAnimation(scaleAnimX)
Calling startAnimation() will start the Animation instantly, ignoring any time offset or start time.
Calling setAnimation() will take into account any time specifications.
OK here's the problem
i have an ImageView in my activity, here's what it looks in main.xml:
<ImageView
android:id="#+id/ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"/>
I want this image to move -200(left) and then to 100(right) and then back to 0 with bouncing effect.
I've implement this with my code:
as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());
TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0);
ta.setDuration(2000);
as.addAnimation(ta);
AnimationSet sa = new AnimationSet(true);
sa.setFillEnabled(true);
sa.setInterpolator(new DecelerateInterpolator());
TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0);
ta2.setDuration(2000);
sa.addAnimation(ta2);
as.addAnimation(sa);
you can see at the code the X transition that i want (-300,100) then (100, 0)
however, the image doesn't move like it should, instead it just stop at 100 and then bouncing...
hmmm...., do you guys know what is wrong or what should i do to accomplish this?
If I'm not mistaking, you're shooting for a sequence of animations.
Interestingly, once you start an AnimationSet, all the animations added are ran simultaneously and not sequentially; therefore you need to setStartOffset(long offSet) for each animation that follows the first animation.
Maybe something like this will work...
as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());
TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0);
ta.setDuration(2000);
as.addAnimation(ta);
TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0);
ta2.setDuration(2000);
ta2.setStartOffset(2000); // allowing 2000 milliseconds for ta to finish
as.addAnimation(ta2);
I suggest you to use ObjectAnimator. It is very easy to implement your case. Your animation may look like this:
ObjectAnimator animator1 = ObjectAnimator.ofFloat(targetView, "translationX", -200f);
animator1.setRepeatCount(0);
animator1.setDuration(1000);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(targetView, "translationX", 100f);
animator2.setRepeatCount(0);
animator2.setDuration(1000);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(targetView, "translationX", 0f);
animator3.setRepeatCount(0);
animator3.setDuration(1000);
//sequencial animation
AnimatorSet set = new AnimatorSet();
set.play(animator1).before(animator2);
set.play(animator2).before(animator3);
set.start();
If you are not familior with ObjectAnimator, you can check this android example tutorial:
Android View Animation Example
Something like this is very easy in 3.0 and above. Here are two links that I used to accomplish something similar.
http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html
http://developer.android.com/reference/android/animation/AnimatorSet.Builder.html