I need to implement a moving/scrolling textview that got a clickable span. I also need to make the animation look like those banner ads below the news that repeat and repeat endlessly. I used TranslateAnimation before for a tv app and able to have it work because what I get is the keyEvent and the the touch. I need to implement it now on a tablet app which doesn't have any external input source other than the touchscreen itself.
I tried to use TranslateAnimation again for the tablet app but it doesn't work. Upon searching about the different animation I could use, I've learned that TranslateAnimation just animates the look of the view and the the whole view itself. It doesn't move the clickable parts with the look so I looked for a different one.
Then I stumbled upon PropertyAnimator. It's what I clearly need for my problem. But there's also a drawback to it. It doesn't support repeating.
What I currently have is this code below.
lbl.animate();
lbl.animate().x(-lblWidth).y(0);
lbl.animate().setDuration(animDuration);
lbl.animate().setInterpolator(new LinearInterpolator());
lbl.animate().setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
lbl.animate();
lbl.animate().x(lblWidth).y(0);
lbl.animate().setDuration(0);
lbl.animate().x(-lblWidth).y(0);
lbl.animate().setDuration(animDuration);
lbl.animate().setInterpolator(new LinearInterpolator());
lbl.animate().setListener(this);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
After the first run, the animation ends. It repeats because it prints my log but it's not showing on screen.
I was trying to make a repeating effect with that code. I was trying to recreate something like this code below.
transAnim = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_PARENT, 1.0f,
TranslateAnimation.RELATIVE_TO_SELF, -1.0f,
TranslateAnimation.ABSOLUTE, 0f,
TranslateAnimation.ABSOLUTE, 0f
);
transAnim.setRepeatCount(-1);
transAnim.setRepeatMode(Animation.RESTART);
transAnim.setInterpolator(new LinearInterpolator());
transAnim.setDuration(animDuration);
transAnim.setFillAfter(true);
What the code above does is from the right, outside the screen, I start an animation that goes to the left, outside the screen. Then, if the view's end reach the left, outside the screen, tell the animation to restart from the beginning.
I made it work now by adding a single short line of code above everything.
lbl.setX(screenWidth);
lbl.animate().x(-lblWidth).y(0);
lbl.animate().setDuration(animDuration);
lbl.animate().setInterpolator(new LinearInterpolator());
Then using those line of code again on the onAnimationEnd of the animate listener. Now I thought of another thing, can I pause this animation? Because I found a way to do it for TranslateAnimation. Is there a hack way to do it?
Try this I hope it work for you.
lbl.animate();
lbl.animate().x(-lblWidth).y(0);
lbl.animate().setDuration(animDuration);
lbl.animate().setInterpolator(new LinearInterpolator());
lbl.animate().setRepeatCount(Animation.INFINITE);
Related
I created a button and wanted it to move to the bottom of the screen after some event is triggered. So I made an TranslateAnimation object
private TranslateAnimation setupAnimation(float yOffset) {
TranslateAnimation animation = new TranslateAnimation(0, 0, 0, yOffset);
animation.setDuration(1000);
animation.setFillAfter(true);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
return animation;
}
Then I pass in the TranslateAnimation object into the startAnimation() method of the view I wanted to move.
Well that works for what I want to accomplish visually, but I noticed that I can't click on where it is visibly, but I can press where the button used to be and the onClick callback will be executed.
What do I need to do, post translation, to allow the user to press the button at its new location?
A TranslateAnimation only moves the pixels on the screen, it does not change the actual position of your Button, it just looks like it is moving, so your OnClick/OnTouchListener will not animate with it.
Use ObjectAnimator or ViewPropertyAnimator to really change the property of your Button.
Here is an example using ViewPropertyAnimator to get you started :
yourButton.animate()
.translationY(yOffset)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setDuration(1000);
check the Docs for other available methods.
There are two CardViews is in a RecyclerView in a FrameLayout. One CardView has an android:visibility="gone" setting on it. When tapped, the card flips 360 degrees, revealing the 'gone' CardView. Tapping it again flips it, showing the initial card. This sounds simple now.
Used the ObjectAnimator class to do this, like so:
public static void flipView(View viewToFlip, int direction)
{
ObjectAnimator flipAnimator;
if (direction == CLOCKWISE)
{
flipAnimator = ObjectAnimator.ofFloat(viewToFlip, "rotationY", 0f, 360f);
flipAnimator.setDuration(3500);
flipAnimator.start();
}
else
{
flipAnimator = ObjectAnimator.ofFloat(viewToFlip, "rotationY", 360f, 0f);
flipAnimator.setDuration(3500);
flipAnimator.start();
}
}
The issue is that when the CardView shows up initially, the animation does not work, as in there is no flip. The card just gets replaced with the 'gone' card sans any animation. Only on subsequent taps, the animation works beautifully. My questions are:
Why does the animation not work from the word go? (In the title of the question, 'initial' means 'on the first tap on the CardView' when it shows up in the Fragment)
What is the fix?
Please let me know if you need to examine more code.
Thank you for your expert advice!
working in android last couple of days and i am trying to rotate an arrow by pressing a button. Using RotateAnimation and:
setFillAfter(true);
arrow remains in last position as supposed to.
But when i press button again arrow yes starts to rotate from initial position, but there is also the "previous" arrow from the last call of animation which is finally overlapped by "new" arrow. So i guess i need to somehow reset/clear the setFillAfter but i can't find a way.
My code goes like this:
//Animation start
float Xaxis=0.835366f;
float Yaxis=0.676692f;
RotateAnimation rotateAnimation1 = new RotateAnimation(0, 180,
Animation.RELATIVE_TO_SELF, Xaxis,Animation.RELATIVE_TO_SELF, Yaxis);
rotateAnimation1.setInterpolator(new LinearInterpolator());
rotateAnimation1.setDuration(2500);
rotateAnimation1.setRepeatCount(0);
image.startAnimation(rotateAnimation1);
rotateAnimation1.setAnimationListener(this);
#Override
public void onAnimationEnd(Animation animation) {
animation.setFillAfter(true);
}
Any ideas would be usefull..
I have tried invalidate, clearAnimation to image, setting fillafter to false, reset on animation but still same.
It is fixed, emulator is configured with shared GPU and runs perfectly. Fast and without any remainings of previous animations.
I'm trying to make an animation on a layout that has been previously rotated using RotateAnimation. The animation i want to do are fadeIn and FadeOut depending of the situation
aLayout = (LinearLayout) _context.findViewById(R.layout.layoutId);
AlphaAnimation fadeIn = new AlphaAnimation(0, 1.0f);
AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0);
fadeIn.setDuration(500);
fadeOut.setDuration(500);
fadeIn.setFillAfter(true);
fadeOut.setFillAfter(true);
Depending of the situation i apply :
aLayout.startAnimation(fadeIn);
or
aLayout.startAnimation(fadeOut);
I've check and the animations aren't trying to start at the same time. The behaviour is that my layout is partially fadeIn.
Instead of having 'invisible part' and then 'visible part'
i only got part of the layout 'invisible part' to 'in le rt'.
It seems totally random that's why i'm asking you in case you have any idea of where it can come from. Before the rotation this alpha stuff works well but once i do it i start having this unexpected behaviour
I'm working from 2.2 to 4.1 Any help would be appreciated. Thanks
Edit : Can't figure this out. Anyone ?
I use a fadeout animation using this:
public void fadeout(final View view) {
// Start Fade Animation
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);
AnimationSet animation = new AnimationSet(false);
animation.addAnimation(fadeOut);
view.startAnimation(animation);
}
and I call it in the onCreate after setting the Content view of the activity that I want to fade out after grabbing the layout root:
View layoutRoot = findViewById(R.id.splashscreen);
fadeout(layoutRoot);
As for the rotation part you can call the animation in the onConfigurationChanged
Seems it's a bug on android. Couldn't figure how to solve it.
Anyway, i found another way to do this. Instead of making the Layout rotating i rotate only the UIElement i needed to be rotate and create the element i want to animate twice. One for the vertical position the other for the horizontal one.
This is the only way i found
How do they do this? animated drawer rotation possible?
In the screenshots below, touching the 'Touch' circle at the bottom causes that circle to rotate around itself, and then 4 new navigation buttons come out that take me to other screens/activities in the app. I really want to have this in my app..
Is it a sliding drawer or some other strategy? BTW I am targeting android version 2.1
It looks as if it's mainly a animation that rotates an image. Once the animation has finished, the buttons are activated.
ImageView discsAndButtons = (ImageView) findViewById(R.id.discsAndButtons);
Animation anim = new RotateAnimation(0.0f, 90.0f, 0.0f, 480.0f);
anim.setDuration(600);
anim.setFillAfter(true);
anim.setAnimationListener(this);
discsAndButtons.setAnimation(anim);
...
void onAnimationEnd(Animation animation) {
ViewGroup buttonLayer = (ViewGroup) findViewById(R.id.buttonLayer);
buttonLayer.setVisibility(View.VISIBLE);
}
Visually, the buttons are part of the image. But the effective buttons are probably on a separate layer above the image and only made visible after the animation has finished (except for the TOUCH button).