We need to have an animation to push the title bar view out of the screen and pull it into the screen. The title bar locates on top of the screen.
To do this specific animation will cost a lot for the screen that the animation is not smooth. I implement is in this way:
ValueAnimator animDown = ValueAnimator.ofFloat(1f, 0f);
animDown.setDuration(300);
params = (RelativeLayout.LayoutParams) titleView.getLayoutParams();
animDown.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float currentValue = (float) animation.getAnimatedValue();
newHeight = -(int) (titleView.getHeight() * currentValue);
if (newHeight != lastHeight) {
params.setMargins(0, newHeight, 0, 0);
titleView.requestLayout();
}
lastHeight = newHeight;
}
});
this works fine in some places but not here, for I found that the callback method onAnimationUpdate is called very few times (say 6-8 times) during the animation, which means one frame update cost over 40ms, which looks too laggy.
My question is: is there a way to increase the frequency of the callback method onAnimationUpdate, or is there any other way to do this animation more smoothly?
Previously we are using other animations such as fade out and it works well, but push out animation here cost too much while the grid view list below the title view also is quite heavy.
Related
I am trying to learn a little bit about animations and so decided to get an ImageView to go across the screen from left to right, which I achieved with:
TranslateAnimation mAnimation = new TranslateAnimation(0, 180, 0, 0);
mAnimation.setDuration(1000);
mAnimation.setFillAfter(true);
mAnimation.setRepeatCount(-1);
mAnimation.setRepeatMode(Animation.REVERSE);
myImageView.setAnimation(mAnimation);
So, I decided to take on a new challenge. Once the image has gone from left to right, I wanted to try and get the image to return to the start position by arching back from right to left to its starting position (basically, a complete semi-circle). However, once the image has reached the end of the x-axis at position 180, I get stuck.
After reading about different methods for animation, I opted to try out ValueAnimator:
ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
animator.setDuration(1000); // 1 seconds duration from start to end position
animator.setRepeatCount(-1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) (animation.getAnimatedValue());
myImageView.setTranslationX((float)(180.0 * Math.sin(value*Math.PI)));
myImageView.setTranslationY((float)(80.0 * Math.cos(value*Math.PI)));
}
});
animator.addListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
// done
}
});
animator.start();
However, I am unable to get the positioning correct. I do have a semi-circle (good), however, it is moving the image like a backward C rather than a straight line left to right and then arching back to its starting position (bad).
I am not sure if I should be using AnimatorSet to link the left to right movement and the arching back movement together to create one whole animation...
Can anyone give me some guidance on how to achieve what I have described?
In my Android app I want to hide/show a Toolbar in an animation and adjust the FrameLayout below it so that it always fills up the whole screen. I do that by animating the top margin of the FrameLayout according to the display status of the Toolbar:
public void toggleToolbars(final boolean show) {
mToolbarHidden = !show;
final Toolbar tt = getBaseActivity().getToolbar();
final FrameLayout cv = getBaseActivity().getContentView();
int translation = show ? 0 : -tt.getHeight();
ValueAnimator animator = ValueAnimator.ofFloat(ViewHelper.getTranslationY(tt), translation).setDuration(200);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float translationY = (float) animation.getAnimatedValue();
ViewHelper.setTranslationY(tt, translationY);
FrameLayout.LayoutParams clp = (FrameLayout.LayoutParams) cv.getLayoutParams();
clp.topMargin = tt.getHeight() + (int) translationY;
cv.setLayoutParams(clp);
}
});
animator.start();
}
This works fine, except for a flickering in the animation. I assume that using setLayoutParams is a costly method. requestLayout() is equally slow. How can I make this animation smoother? Can I reduce the frame rate somehow?
Note, that for certain reasons I cannot use setTranslationY and the built-in animations of CoordinatorLayout.
I am trying to expand and shrink the width of container with animation.
I am doing both of those with ValueAnimator and both of those are working fine separately.
The expand animation will be perform when the user scroll up the cards and shrink animation will be perform when the user scroll down the cards.
Because all of those cards are in ScrollView container, the user can scroll up / down whenever they want even though the expanding / shrinking Animation is not finished.
To be more clear, it looks like the shrink animation is being triggered when the cards are still expanding. Below is my code for expanding / shrinking.
private void animateResizeWidth(final View vcLogin, int widthReduce){
ValueAnimator anim;
if(widthReduce == 0){
anim = ValueAnimator.ofInt((ScreenUtils.getObjInstance().getPixelFromDPI(CARD_WIDTH) - ScreenUtils.getObjInstance().getPixelFromDPI(widthReduce)), ScreenUtils.getObjInstance().getPixelFromDPI(CARD_WIDTH));
}else{
anim = ValueAnimator.ofInt(ScreenUtils.getObjInstance().getPixelFromDPI(CARD_WIDTH), (ScreenUtils.getObjInstance().getPixelFromDPI(CARD_WIDTH) - ScreenUtils.getObjInstance().getPixelFromDPI(widthReduce)));
}
final RelativeLayout.LayoutParams finalLp2 = new RelativeLayout.LayoutParams(vcLogin.getLayoutParams());
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
finalLp2.width = val;
finalLp2.addRule(RelativeLayout.CENTER_HORIZONTAL);
vcLogin.setLayoutParams(finalLp2);
vcLogin.invalidate();
}
});
anim.setDuration(400);
anim.start();
}
So, whenever that happen, the size of the cards are being set to regular size and the resize animation won't trigger anymore (Need to restart the Host Activity).
I have tried the answer from here. But, it is not helping me.
My Questions are 1: Is there any other Animation Mechanism that
I can use for width animation except ValueAnimator ? I have checked
ObjectAnimator but, not supporting. Ref 2: Is that thread
issue ? 3: I should not be blocking user from scrolling down
just because my expanding animation is not finished. So, what I haven
in mind is if the user scroll down, I will just terminate any of my
pending animations. Is there any thread-related issue that I need to consider for this approach ? (I have written a Custom
ScrollView to detect those scroll-related events.)
I think I am missing a few thread-safe logics in above animation implementation.
Thanks
I have a small irritating behaviour of my sliding Animation.
I made a video and posted it on youtube.
I could'nt find any app that can make a screen video from non-rooted phone, so I hade to do it this way :)
NOTE: look closely at the first animation, starting from 00:07
You will notice a small flash..that happens only for the first time, I trigger animation...
Afterwards, in the video, I trigger animation few more times, and there is no flash and everything runs smoothly.
Here is the code I use:
private void slideDown(){
// Here I calculate the height of a header and the ListView (That is not populated in the video, therefore - white and empty), as it will be different for different screen sizes
float headerHeight = header.getHeight();
float topicNameHeight = topHeader.getHeight()+1;
float totalHeight = headerHeight+topicNameHeight;
float listSize = listView.getHeight();
int theSizeIWant = (int) (listSize+totalHeight);
//slide down
if (counter==0){
listView.setPivotY(0);
ObjectAnimator slideAnimation = ObjectAnimator.ofFloat(listView, "y",topicNameHeight);
ObjectAnimator rotateAnimation = ObjectAnimator.ofFloat(btn_slider, "rotation",0f,180f);
listView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, theSizeIWant));
rotateAnimation.setDuration(800);
slideAnimation.setDuration(800);
slideAnimation.start();
rotateAnimation.start();
counter=1;
}
//slide up
else{
ObjectAnimator slideAnimation = ObjectAnimator.ofFloat(listView, "y",totalHeight);
ObjectAnimator rotateAnimation = ObjectAnimator.ofFloat(btn_slider, "rotation",180f,360f);
listView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int)listSize));
rotateAnimation.setDuration(800);
slideAnimation.setDuration(800);
slideAnimation.start();
rotateAnimation.start();
counter=0;
}
}
What seems to be the source of the problem?
I know it's a small thing, but it is majorly irritating, and needs to be fixed!
I have a LinearLayout (LayoutContentView) which can contain one or two view (SubView1 and SubView2) (they are eitherTextView or ImageView).
This layout is in another LinearLayout (MyScreenLayout).
I want to make an animation on LayoutContentView so it can move and show just a part of it in MyScreenLayout.
Both of these layouts have setClipChildren(false); so it can let it's children draw outside it-self.
Depending on different parameters, I can change the size of the content, and the size of the content I will show.
Basically, I expend from top to bottom to show the two subviews and unexpend for bottom to top to show only the second subview. Before I expend, I increase the size of the LayoutContentView, so it can show the two subviews, and after I unexpend, I decrease the size of the LayoutContentView, so it can only show the second subview, and it let space on the screen for other elements.
Here is my method for expending and un-expending LayoutContentView :
mLayoutContentView.clearAnimation();
float yFrom = 0.0F;
float yTo = 0.0F;
float xFrom = 0.0F;
float xTo = 0.0F;
if (expend) { // if we expend
// I change the height of my LayoutContentView so it we can show it's two subviews
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView1H + subView2H;
setLayoutParams(lp);
invalidate();
// we start the animation so it shows only the second subview
yFrom = -subView1H;
// and we animate from top to bottom until it shows the two subviews
yTo = 0;
} else { // if we un-expend
// we animate from bottom to top starting by showing the two subviews
yFrom = 0;
// and progressively hiding the first subview and showing only the second subview
yTo = -subView1H;
}
Animation anim = new TranslateAnimation(xFrom, xTo, yFrom, yTo);
anim.setDuration(1000);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (!expend) {
// if we un expend at the end of the animation we can set the size of LayoutContentView to the size of the second subview again
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView2H;
mLayoutContentView.setLayoutParams(lp);
invalidate();
}
}
});
mLayoutContentView.startAnimation(anim);
The way I made my animation I need it to apply on LayoutContentView, the layout which contain two subview, and with startAnimation() it doesn't do the animation.
I tried to use a LayoutAnimationController, but instead of doing the animation on the LayoutContentView, it does it on each of its children...
I also tried to do the animation on each children myself, but I don't know why, the second subview isn't shown.
Each time I've tried to use HierarchyViewer, but it's does see the change made by the animation.
Does anyone know a solution or have faced the same problem and found a good solution ?
EDIT :
Well it seems that if you set a background color to your TextView and move them with animation, the background move but even if you have set the fill after parameter to your animation, the background moves back to it's original position or something like that, and therefore as I set a background color to both of my SubViews, somewhat one of the SubView's background hide the background of the other...
And there also a problem if after the animation, one of the SubView is still outside the its layout, there is also a problem during the animation, so I add a limitation to what I intended to here too.