I am wondering how do we do this properly.
I have seen some apps that does this and the animation is smooth.
Above my camera preview.
I put an ImageView, and then I animate the ImageView's bottom margin. But I can see that the animation is laggy and stuttering.
Here is how I do the animation
final RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) imageView.getLayoutParams();
fromValue = dpToPx(fromValue);
toValue = dpToPx(toValue);
final ValueAnimator valueAnimator = ValueAnimator.ofInt(fromValue, toValue);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
params.bottomMargin = (Integer) valueAnimator.getAnimatedValue();
imageView.requestLayout();
}
});
valueAnimator.setDuration(duration);
valueAnimator.setInterpolator(timeInterpolator);
Any ideas?
Related
I am trying to take a CardView (in a RecycleView) from actual width to 0. I am a newbie in android and in android animations. Could you say me what I am doing wrong?
This is my code:
final View v = cardViewHolder.cv;
int actualWidth = v.getMeasuredWidth();
ValueAnimator anim = ValueAnimator.ofInt(actualWidth, 0);
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.width = val;
v.setLayoutParams(layoutParams);
}
});
anim.setDuration(R.integer.card_flip_time_full);
anim.start();
With a breakpoint I see that val is always 728 (the width) and never changes. What is my fail?
I solved it:
final View v = cardViewHolder.cv;
int actualWidth = v.getMeasuredWidth();
ValueAnimator anim = ValueAnimator.ofInt(actualWidth, 0);
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// This needs to be declared as Integer instead of int
v.requestLayout(); // #mhenryk advice
Integer val = (Integer) valueAnimator.getAnimatedValue();
int value = val.intValue(); // Then get the int value
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.width = value;
v.setLayoutParams(layoutParams);
}
});
anim.setDuration(R.integer.card_flip_time_full);
anim.start();
I am making an animated tutorial for the application. I am using a fragment over the activity to show image view sliding effect. I am using Translate animation to move the image view to the specific view to describe its working, but actually I want to animate the image view to move infinite times after reaching to the view.
Assume that view v is suppose to animate
public void ViewExapand(View v)
{
v.setVisibility(View.VISIBLE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
v.measure(widthSpec, heightSpec);
ValueAnimator mAnimator = slideAnimator(0, v.getMeasuredHeight(),v);
mAnimator.start();
}
private ValueAnimator slideAnimator(int start, int end, final View v)
{
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
return animator;
}
You can also use ObjectAnimator
ObjectAnimator.ofInt(your view, "left", 100, 250)
.setDuration(250)
.start();
I'm new to android.
I have the following code:
// layoutParams of type WindowManager.LayoutParams
layoutParams.x = someX;
layoutParams.y = someY;
windowManager.updateViewLayout(someView, layoutParams);
How do I animate this change? Something like translation...
You can use ValueAnimator:
int beginValue = 0;
int endValue = 100;
ValueAnimator animator = ValueAnimator.ofInt(beginValue, endValue);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
WindowManager.LayoutParams layoutParams =
(WindowManager.LayoutParams) view.getLayoutParams();
layoutParams.x = (Integer) animation.getAnimatedValue();
layoutParams.y = (Integer) animation.getAnimatedValue();
getWindowManager().updateViewLayout(view, params);
}
});
animator.start();
Rather use Property Value Holders when animating across x an y.
public void animate(final View v, int startX, int endX, int startY, int endY) {
PropertyValuesHolder pvhX = PropertyValuesHolder.ofInt("x", startX, endX);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofInt("y", startY, endY);
ValueAnimator translator = ValueAnimator.ofPropertyValuesHolder(pvhX, pvhY);
translator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
WindowManager.LayoutParams layoutParams = (WindowManager.LayoutParams) v.getLayoutParams();
layoutParams.x = (Integer) valueAnimator.getAnimatedValue("x");
layoutParams.y = (Integer) valueAnimator.getAnimatedValue("y");
windowManager.updateViewLayout(v, layoutParams);
}
});
translator.setDuration(100);
translator.start();
}
The easiest solution I've found to similar problem is shown here: https://www.youtube.com/watch?v=55wLsaWpQ4g
In my case I have a RelativeLayout and want to change its android:layout_below value programmatically (it's parent is also RelativeLayout).
So in onCreate I've put:
LayoutTransition layoutTransition = rlListLayout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
and then for example in onClick method changed layout params:
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) rl.getLayoutParams();
params.addRule(RelativeLayout.BELOW, R.id.dummy);
rl.setLayoutParams(params);
That's it. 5 lines of code and no need to calculate position nor measure anything.
I want to shrink and animate the Relative layout into right side like below Image, am using translate animation to move the layout to right side(translate animation working fine), but not able to shrink the view.Am not able to achieve like image.Can any one know help me to solve this issue.
Whenever click the button(Three line button) in relative layout.shrink the view and move it right side.
Translate animation code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_mediumAnimTime"
android:fillAfter="true"
android:fillEnabled="true" >
<translate
android:fromXDelta="0"
android:toXDelta="90%" />
</set>
Java Code
bt1 = (Button)findViewById(R.id.button1);
bt1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
if (view_moved != 1) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
anim_lay.startAnimation(animation);
view_moved = 1;
}
}
});
View animation does not resample the views drawable, only applies scale matrix to it so it might become blurry or have artifacts. Use object/value animator to animate layout's height/width instead so that it is redrawn on every change.
ValueAnimator widthAnim = ValueAnimator.ofInt(viewGroup.getMeasuredWidth(), desiredWidth);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = viewGroup.getLayoutParams();
layoutParams.width = val;
viewGroup.setLayoutParams(layoutParams);
}
});
ValueAnimator heightAnim = ValueAnimator.ofInt(viewGroup.getMeasuredHeight(), desiredHeight);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = viewGroup.getLayoutParams();
layoutParams.height = val;
viewGroup.setLayoutParams(layoutParams);
}
});
AnimatorSet scaleAnimation = new AnimatorSet();
scaleAnimation.playTogether(widthAnim, heighthAnim);
scaleAnimation.setDuration(500).start();
where viewGroup is your RelativeLayout
I'm making an animation that a View moving and transform it self to another form at the same time.
Here is animation description:
I don't know how to do it. Any solution for me?
Any advice is appreciated.
=================================================================
UPDATE
I've tried TranslateAnimation + ScaleAnimation with AnimationSet but my ImageView scaled very urgly.
Here is start image, using centerCrop:
Here is result of Translate + ScaleAnimation:
But this is result that I want (centerCrop with same src above):
How to transform + moving but keep image ratio like that ? I don't want my image ratio changed.
Thanks for help.
Here's what you can expect from this answer:
Also note that the code provided here was written for test purposes, and thus isn't optimized.
I have used Animator (available for api >= 11) to achieve the effect you have described as I don't find TranslateAnimation and ScaleAnimation 'good' enough in terms of outcome.
There are 3 things happening here:
width is changing
height is changing
'x' value for the imageview is changing
You will need to provide the final values for these 3 parameters: finalWidth, finalHeight and final X placement.
We will use valueAnimator to get animated values for the width and height on every update, and then use these values to update the LayoutParams of ImageView.
The animate button (in the gif above) calls the following method:
public void animate() {
// This is to get the screen dimensions
final Point p = new Point();
getWindowManager().getDefaultDisplay().getSize(p);
// First, define the starting values
final int startingWidth = mImageView.getWidth();
final int startingHeight = mImageView.getHeight();
final int startingXValue = mImageView.getX():
// Next, define the final values
// For this example, the final width will be half of screen-width
final int finalWidth = p.x / 2;
// Just an arbitrary final value for height. You will have to decide
// what the final height should be
final int finalHeight = p.y - ivv.getTop() - 300;
// final `X` placement of the imageview
int finalXValue = p.x / 2 - finalWidth / 2;
// ValueAnimator to generate changes in width
final ValueAnimator vaW = ValueAnimator.ofInt(startingWidth, finalWidth);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// Get animated width value update
int newWidth = (int) vaW.getAnimatedValue();
// Get and update LayoutParams from imageview
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.width = newWidth;
mImageView.setLayoutParams(lp);
}
});
// ValueAnimator to generate changes in height
final ValueAnimator vaH = ValueAnimator.ofInt(startingHeight, finalHeight);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// Get animated height value update
int newHeight = (int) vaH.getAnimatedValue();
// Get and update LayoutParams from imageview
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.height = newHeight;
mImageView.setLayoutParams(lp);
}
});
// Used to provide translate animation
ObjectAnimator oa = ObjectAnimator.ofFloat(
mImageView, "X", startingXValue,
finalXValue);
// To play these 3 animators together
AnimatorSet as = new AnimatorSet();
as.playTogether(vaW, vaH, oa);
as.setDuration(5000);
as.start();
}
The layout used for the activity in this example is nothing special:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/holo_blue_dark" >
<Button
android:id="#+id/bAnimate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="animate"
android:layout_gravity="center_horizontal" />
<ImageView
android:id="#+id/ivToAnimate"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="animate"
android:layout_gravity="right"
android:src="#drawable/index"
android:scaleType="centerCrop" />
</LinearLayout>
Edit: To reset ImageView's position, size & scale:
Declare starting and final values as class variables:
int startingWidth, startingHeight, startingXValue,
finalWidth, finalHeight, finalXValue;
// this method will only be called ONCE.
// Use appropriate values to initialize starting and final values
public void initialize() {
final Point p = new Point();
getWindowManager().getDefaultDisplay().getSize(p);
startingWidth = mImageView.getWidth();
startingHeight = mImageView.getHeight();
startingXValue = mImageView.getX():
finalWidth = p.x / 2;
finalHeight = p.y - ivv.getTop() - 300;
finalXValue = p.x / 2 - finalWidth / 2;
}
// Call this method whenever you need to animate forward
// `animate()` method // refer above for comments
public void animate() {
final ValueAnimator vaW = ValueAnimator.ofInt(startingWidth, finalWidth);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int newWidth = (int) vaW.getAnimatedValue();
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.width = newWidth;
mImageView.setLayoutParams(lp);
}
});
final ValueAnimator vaH = ValueAnimator.ofInt(startingHeight, finalHeight);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int newHeight = (int) vaH.getAnimatedValue();
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.height = newHeight;
mImageView.setLayoutParams(lp);
}
});
ObjectAnimator oa = ObjectAnimator.ofFloat(
mImageView, "X", startingXValue,
finalXValue);
AnimatorSet as = new AnimatorSet();
as.playTogether(vaW, vaH, oa);
as.setDuration(5000);
as.start();
}
Animate back:
// `animateBack()` method // similar execution to `animate()`
// Notice how the starting and final values have been switched
public void animateBack() {
final ValueAnimator vaW = ValueAnimator.ofInt(finalWidth, startingWidth);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int newWidth = (int) vaW.getAnimatedValue();
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.width = newWidth;
mImageView.setLayoutParams(lp);
}
});
final ValueAnimator vaH = ValueAnimator.ofInt(finalHeight, startingHeight);
vaW.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int newHeight = (int) vaH.getAnimatedValue();
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)
mImageView.getLayoutParams();
lp.height = newHeight;
mImageView.setLayoutParams(lp);
}
});
ObjectAnimator oa = ObjectAnimator.ofFloat(
mImageView, "X", finalXValue, startingXValue);
AnimatorSet as = new AnimatorSet();
as.playTogether(vaW, vaH, oa);
as.setDuration(5000);
as.start();
}
first link is to create a set of animtions.
second link - Animation for Translate.
third link - Animation for Scaling.
create the translate and scaling animation add them to the Animationset
AnimationSet
TranslateAnimation
ScaleAnimation
To keep the same ratio in the ImageView, try to use these attributes:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/your_image" />