In my app a large text in textview scroll up automatically with translate animation, and i designed two button for decrease and increasing speed, but when I change the duration it's work after last duration so it is not on-the-fly, but I want whenever I clicked, in that moment duration changed.In fact I want to do like how to change the duration of AnimationDrawable on the fly/runtime? ,but, with "Translation animation"
Here is what I did for randomly blinking light
final ImageView imageLight = (ImageView)findViewById(R.id.imageLight);
lastLightAlpha = (float) Math.random();
AlphaAnimation blinkLightAnimation = new AlphaAnimation(1.0f, lastLightAlpha);
blinkLightAnimation.setDuration((long) (Math.random() * 3000));
blinkLightAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
float newAlpha = (float) Math.random();
AlphaAnimation blinkLightAnimation = new AlphaAnimation(lastLightAlpha, newAlpha);
blinkLightAnimation.setAnimationListener(this);
blinkLightAnimation.setDuration((long) (Math.random() * 3000));
lastLightAlpha = newAlpha;
imageLight.startAnimation(blinkLightAnimation);
}
});
imageLight.startAnimation(blinkLightAnimation);
You can also reset your animation by
gearAnimation.cancel();
gearAnimation.reset();
I hope you can use parts of this code to solve your issue.
Related
I have a question of RotationAnimation.
First.
Is there a Listener to during animation?
start, start animation
repeat, repeat animation
stop, stop animation.
but there are no animation listener to check the on going.
second,
is any other get a current rotate angle of image?
I think, ImageView is rotate by rotationAnimation function.
so I made a timer thread and run 1second
'''
timer = new Timer();
timerTask = new TimerTask() {
public void run(){
Log.e("LOG", " [angle]: " + String.format("%3.1f", rotateImage.getRotation());
}
};
timer.schedule(timerTask, 0, 1000);
'''
but, I can't see the changed value during rotate.
how can I get the current angle during rotate?
thanks.
For Rotation Animation, Yes There is as shown below:
RotateAnimation rotateAnimation = new RotateAnimation();
rotateAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
You can also use Object Animators to animate Rotation:
ObjectAnimator rotateAnimation = ObjectAnimator.ofFloat(targetView, View.ROTATION, startAngle, endAngle);
rotateAnimation.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
To get the angle of your ImageView simply use imageView.getRotation(); this will give you an int value of the current angle of rotation.
You also don't need Timer because both ObjectAnimator and rotateAnimator provide time control for you:
rotateAnimation.setDuration(1000); // run animation for 1000 milliseconds or 1 second
rotateAnimation.setStartDelay(1000); // delay animation for 1000 milliseconds or 1 second
Finally, To get rotation Angle DURING the time animation is running there is a listener method called addUpdateListener :
rotateAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue(); // dynamic value of angle
}
});
I have two things.
The first is a looping scale animation doing a kind of permanent zoom in / zoom out.
The second thing is a TimerTask that set the duration of this scale animation every 20 seconds.
The problem is that sometimes there is kind of "jump" in the animation when the setDuration() occurs.
First i put this setDuration() in the TimerTask, then I just tried to put a flag in the TimerTask and changed the duration in onAnimationEnd(), it didn't work neither, same problem. In he code below I use this flag technic.
In case it's not enough clear the goal of all this is to have an "infinite" zoom in / out of a drawable circle, the zoom in / out speed decreasing in time. It actually works but it's not smooth, as said above.
Is there a way to do this smoothly ?
The TimeTask that sets the flag "changeDurationFlag"
private void setRegularRythmeDecrease() {
final Handler handler = new Handler();
Timer timer = new Timer();
TimerTask task = new TimerTask() {
#Override
public void run() {
handler.post(new Runnable() {
public void run() {
try {
if (elapsedTime > sessionLengthInSec) {
circle.clearAnimation();
}
zoomDuration = zoomDuration + (toDecreaseEveryUpdate / 2);
changeDurationFlag = true;
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
};
timer.schedule(task, 0, BREATH_RYTHME_UPDATE_INTERVAL_IN_SECONDS*1000);
}
The ScaleAnimation I use to zoom in and out
public Animation scaleAnimation(View v, float startScale, float endScale, long duration) {
Animation anim = new ScaleAnimation(
startScale, endScale,
startScale, endScale,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
anim.setFillAfter(true);
anim.setDuration(duration);
return anim;
}
The Animation listeners where the duration is set
zoomDuration = ZOOM_DURATION_START;
animZoomIn = scaleAnimation(circle, 1f, ZOOM_FACTOR,zoomDuration);
animZoomOut = scaleAnimation(circle, ZOOM_FACTOR, 1f,zoomDuration);
animZoomIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// If the flag is true (modified in the TimerTask) I set the Duration to decrease the speed
// it's where the not smoothly thing happens
if(changeDurationFlag) {
Log.d("beat ","Set breath to " + String.valueOf(zoomDuration * 2d));
animZoomIn.setDuration(zoomDuration);
animZoomOut.setDuration(zoomDuration);
changeDurationFlag = false;
}
circle.startAnimation(animZoomOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animZoomOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
circle.startAnimation(animZoomIn);
currentDateTime = Calendar.getInstance().getTime();
elapsedTime = currentDateTime.getTime() - startDateTime.getTime();
long elapsedTimeInSeconds = TimeUnit.MILLISECONDS.toSeconds(elapsedTime);
beatCount++;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
I had a problem with the value update of the variables elapsedTime and sessionLengthInSec. It means that sometimes (elapsedTime > sessionLengthInSec) was true when it shouldn't and a circle.clearAnimation() happened... so sure it produced a jump !
Sure the jump can still happen if the duration change is too much big, but it's kind of normal since the speed would increase rapidly. In my code it was not the case because the speed increasing is less than 200ms so hardly viewable with eyes/
Sorry for this, actually this code works perfectly...
Small question, in android after you use the TranslateAnimation how do you get the position it has taken.
In my app when the user touches an image it will move up and show a input screen.
But when the image reaches its final position i want to stick the image to its new location.
But when i use getHeight or getLayoutParams i always get the old position.
public void moveProducts() {
float addAmmountY = -250;
TranslateAnimation anim = new TranslateAnimation(0,0,0,addAmmountY); //(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
anim.setDuration(1000);
final LinearLayout product_buttons = (LinearLayout)findViewById(R.id.product_buttons);
anim.setAnimationListener(new TranslateAnimation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
//TODO set new location of the linearlayout
}
});
product_buttons.startAnimation(anim);
}
try this:
#Override
public void onAnimationEnd(Animation animation) {
product_buttons.requestLayout();
}
After the animation try to get the new position of the image.
Hi I am applying multiple animations to a view using AnimatorSet and ValueAnimator.
When the user touches the view, successive animations are applied to the view. I do this to have a "zooming effect" when the user is moving his fingers on the view.
The view is a custom gallery.
Here is the code for animation:
private void createAnim(final View v) {
animating = true;
if (D)
Log.i(TAG, "sarting animation");
try {
v.clearAnimation();
v.getAnimation().reset();
} catch (Exception e) {
}
set = new AnimatorSet();
set.addListener(new AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
if (D)
Log.i(TAG, "Animation ended");
animating = false;
}
#Override
public void onAnimationCancel(Animator animation) {
animating = false;
if (D)
Log.i(TAG, "Animation cancelled");
}
});
set.setDuration(100);
ValueAnimator v1 = ObjectAnimator.ofFloat(v, "scaleX", mScaleFactor);
ValueAnimator v2 = ObjectAnimator.ofFloat(v, "scaleY", mScaleFactor);
animationList.add(v1);
animationList.add(v2);
set.playTogether(v1, v2);
set.start()
}
I have an onTouchListener and on action move I successively call this method increasing or decreasing the mScaleFactor.
When the user releases the finger I would like the view to go back to previous state, I mean to erase all animations applied as if they were never applied to view. The problem is you can easily do that for one animation but for many like that I just can't find the right way. Here is what I have tried:
-Adding the animations to an ArrayList and doing animation.reverse() on each one of them with a delay of +100 added to each of them so the execute one after another but the end result just doesn't seem exactly the same as before animations.
v.clearAnimation(); only cancels the last animation
v.getAnimation().reset(); same only works for last/active animation.
Is there a method to just get the view back as it was before any animation has been started?
Thanks a lot
Reversing the effects of an AnimatorSet can be tricky simply because there is no "reverse" method. The easiest method in this case, would probably simply be another AnimatorSet that does the opposite of the original. The issue here would be is your AnimatorListener could be out of sync. If you do this way and you want to keep the boolean, then you'd have to implement it as somewhat of a semaphore.
public static class AnimatorTracker implements AnimatorListener{
int counter;
public AnimatorTracker() {
counter = 0;
}
public boolean isAnimating() {
return counter == 0;
}
#Override
public void onAnimationStart(Animator animation) {
counter++;
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
counter--;
}
#Override
public void onAnimationCancel(Animator animation) {
// Canceling an animation invokes onAnimationEnd, so nothing needs to be done.
}
}
Then just make the sets the same way you just did:
AnimatorTracker tracker = new AnimatorTracker(); // or make it a global reference
AnimatorSet set = new AnimatorSet();
AnimatorSet reverseSet = new AnimatorSet();
ValueAnimator v1 = ObjectAnimator.ofFloat(v, "scaleX", mScaleFactor);
ValueAnimator v2 = ObjectAnimator.ofFloat(v, "scaleY", mScaleFactor);
ValueAnimator reverseV1 = ObjectAnimator.ofFloat(v, "scaleX", 1.0f);
ValueAnimator reverseV2 = ObjectAnimator.ofFloat(v, "scaleY", 1.0f);
set.addListener(tracker);
set.setDuration(100);
set.playTogether(v1, v2);
reverseSet.addListener(tracker);
reverseSet.setDuration(100);
reverseSet.playTogether(reverseV1, reverseV2);
Call set.start() when you want to animate forward. Call reverseSet.start() when you want to animate back.
I have several ImageViews in a RelativeLayout.
When the user taps any of the ImageViews, I want the ImageView to be moved to a specified location using a subtle animation.
Eg; I have initially set margins for LayoutParams associated with an ImageView as layoutparams1.setMargins(90,70,0,0); and I have then added it to the layout.
When the ImageView is tapped, I'd like its new location to be 200,200, done with animation.
So, is it possible? if yes, then how?
Note that I have both RelativeLayout and all of its child ImageViews created programmatically.
And I'm new to Android development so an elaborative answer is expected.
TranslateAnimation animation = new TranslateAnimation(0, 50, 0, 100);
animation.setDuration(1000);
animation.setFillAfter(false);
animation.setAnimationListener(new MyAnimationListener());
imageView.startAnimation(animation);
UPDATE :
The problem is that the View is actually still in it's old position. So we have to move it when the animation is finished. To detect when the animation is finished we have to create our own animationListener (inside our activity class):
private class MyAnimationListener implements AnimationListener{
#Override
public void onAnimationEnd(Animation animation) {
imageView.clearAnimation();
LayoutParams lp = new LayoutParams(imageView.getWidth(), imageView.getHeight());
lp.setMargins(50, 100, 0, 0);
imageView.setLayoutParams(lp);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
}
So the onClickEvent will get fired again at it's new place.
The animation will now move it even more down, so you might want to save the x and y in a variable, so that in the onAnimationEnd() you move it not to a fix location.
It is better to use ObjectAnimator which actually moves the ImageView to the new position.
E.g.:
ImageView splash;
#Override
public boolean onTouchEvent(MotionEvent event) {
float tx = event.getX();
float ty = event.getY();
int action = event.getAction();
switch(action) {
case MotionEvent.ACTION_DOWN:
tx = event.getX();
ty = event.getY();
// findViewById(R.id.character).setX(tx-45);
// findViewById(R.id.character).setY(ty-134);
ObjectAnimator animX = ObjectAnimator.ofFloat(splash, "x", tx-45);
ObjectAnimator animY = ObjectAnimator.ofFloat(splash, "y", ty-134);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();
break;
default:
}
return true;
}
you can use this code
imageView.animate().x(80).y(212).setDuration(300);
or
for soft animation you can use this library
https://github.com/wirecube/android_additive_animations
In below code I am adding a image view in center on frame layout dynamically. After add I am increase scaling and set alpha to give zoom effect and after complete animation I am just translate my image view one position to another position.
Add image view on framelayout
imgHeart = new ImageView(getBaseContext());
imgHeart.setId(R.id.heartImage);
imgHeart.setImageResource(R.drawable.material_heart_fill_icon);
imgHeart.setLayoutParams(new FrameLayout.LayoutParams(50, 50, Gravity.CENTER));
mainFrameLaout.addView(imgHeart);
Add animation on image view
imgHeart.animate()
.scaleXBy(6)
.scaleYBy(6)
.setDuration(700)
.alpha(2)
.setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
imgHeart.animate()
.scaleXBy(-6f).scaleYBy(-6f)
.alpha(.1f)
.translationX((heigthAndWidth[0] / 2) - minusWidth)
.translationY(-((heigthAndWidth[1] / 2) - minusHeight))
.setDuration(1000)
.setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
// remove image view from framlayout
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}).start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}).start();
you can use this code :)
private void animeView(View imageView){
Handler handler = new Handler();
final int[] deltaX = {50};
final int[] deltaRotation = {45};
handler.postDelayed(new Runnable() {
#Override
public void run() {
imageView.animate().translationX(deltaX[0])
.rotation(deltaRotation[0]).setDuration(1000) ;
deltaX[0] *=-1 ;
deltaRotation[0] *=-1 ;
handler.postDelayed(this , 1000);
}
},1000);
}