I'm creating an animation for rail items for Android TV. I combined several animations using Value Animator but animations are really slow and there are a lot of frames skipped. It turns out the even if I play just one animation using Value Animator it causes this type of behavior. And I need to use five animations together. Here's my code:
public void setFocus(boolean hasFocus) {
//If card has focus
if (hasFocus) {
animWidth = ValueAnimator.ofInt(rlMain.getMeasuredWidth(), (int)
Utils.convertDpToPixel(215));
animWidth.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.width = val;
rlMain.setLayoutParams(layoutParams);
}
});
animHeight = ValueAnimator.ofInt(rlMain.getMeasuredHeight(), (int)
Utils.convertDpToPixel(328));
animHeight.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.height = val;
rlMain.setLayoutParams(layoutParams);
}
});
animTopMargin = ValueAnimator.ofInt((int) Utils.convertDpToPixel(42),
(int) Utils.convertDpToPixel(12));
animTopMargin.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams)
rlMain.getLayoutParams();
lp.setMargins(0, (Integer) animation.getAnimatedValue(),
(int) Utils.convertDpToPixel(12), 0);
rlMain.setLayoutParams(lp);
}
});
animTranslationX = ValueAnimator.ofFloat(rlContent.getX(),
rlContent.getX() + 15);
animTranslationX.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float xAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setX(xAnimatedValue);
}
});
animTranslationY = ValueAnimator.ofFloat(rlContent.getY(),
rlContent.getY() - 17);
animTranslationY.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float yAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setY(yAnimatedValue);
}
});
animatorSet = new AnimatorSet();
animatorSet.playTogether(animWidth, animHeight, animTopMargin,
animTranslationX, animTranslationY);
animatorSet.setDuration(1000);
animatorSet.start();
//Focus shadow visible
rlFocus.setVisibility(View.VISIBLE);
animWidth = null;
animHeight = null;
animTopMargin = null;
animTranslationX = null;
animTranslationY = null;
animatorSet = null;
} else {
animWidth = ValueAnimator.ofInt(rlMain.getMeasuredWidth(), (int)
Utils.convertDpToPixel(185));
animWidth.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.width = val;
rlMain.setLayoutParams(layoutParams);
}
});
animHeight = ValueAnimator.ofInt(rlMain.getMeasuredHeight(), (int)
Utils.convertDpToPixel(278));
animHeight.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.height = val;
rlMain.setLayoutParams(layoutParams);
}
});
animTopMargin = ValueAnimator.ofInt((int) Utils.convertDpToPixel(12),
(int) Utils.convertDpToPixel(42));
animTopMargin.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams)
rlMain.getLayoutParams();
lp.setMargins(0, (Integer) animation.getAnimatedValue(),
(int) Utils.convertDpToPixel(12), 0);
rlMain.setLayoutParams(lp);
}
});
animTranslationX = ValueAnimator.ofFloat(rlContent.getX(),
rlContent.getX() - 15);
animTranslationX.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float xAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setX(xAnimatedValue);
}
});
animTranslationY = ValueAnimator.ofFloat(rlContent.getY(),
rlContent.getY() + 17);
animTranslationY.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float yAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setY(yAnimatedValue);
}
});
animatorSet = new AnimatorSet();
animatorSet.playTogether(animWidth, animHeight, animTopMargin,
animTranslationX, animTranslationY);
animatorSet.setDuration(1000);
animatorSet.start();
//Set focus shadow invisible with delay
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
rlFocus.setVisibility(View.INVISIBLE);
}
}, 1010);
animWidth = null;
animHeight = null;
animTopMargin = null;
animTranslationX = null;
animTranslationY = null;
animatorSet = null;
}
}
Is there any way to make those animations smooth? Any help would be highly appreciated :)
