i have an ImageView and would like to scale it smaller with animation.
i use
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.7"
android:fromYScale="1.0"
android:toYScale="0.7"
android:pivotX="50%"
android:pivotY="10%"
android:duration="1500" />
</set>
This works good. But after the animation is finished the image gets back to its original size. Any ideas why?
Try with this code, it will not reset the image size after animation, here view is the imageview you want to animate.
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(view, "scaleX", 0.5f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(view, "scaleY", 0.5f);
scaleDownX.setDuration(1000);
scaleDownY.setDuration(1000);
AnimatorSet scaleDown = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
scaleDown.start();
Ok, i found a solution. is this correct like this? or it is quick and dirty? ^^
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(image, "scaleX", 0.7f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(image, "scaleY", 0.7f);
scaleDownX.setDuration(1500);
scaleDownY.setDuration(1500);
ObjectAnimator moveUpY = ObjectAnimator.ofFloat(image, "translationY", -100);
moveUpY.setDuration(1500);
AnimatorSet scaleDown = new AnimatorSet();
AnimatorSet moveUp = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
moveUp.play(moveUpY);
scaleDown.start();
moveUp.start();
A simplier answer is below;
imageview.animate().translationY(-200F).duration = 500
imageview.animate().scaleY(0.4F).duration = 500
imageview.animate().scaleX(0.4F).duration = 500
Related
I have the followin animation that scales an image from "invisible" to 60dp x 60dp adding a bounce effect. When this finishes it disappears with another scale effect
bounce_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
<set android:interpolator="#android:anim/bounce_interpolator">
<scale
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1600" />
</set>
<set>
<scale
android:startOffset="1900"
android:duration="200"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="0" />
</set>
</set>
This is my code to use this
MainActivity.java
final ImageView likeBig = findViewById(R.id.like_big);
final Animation bounceAnimation = AnimationUtils.loadAnimation(this, R.anim.bounce_animation);
bounceAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
likeBig.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
likeBig.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
The problem is that when I do likeBig.setVisibility(View.VISIBLE); image becomes visible for a fraction of a second in full size before the scale animation starts. I need the image to be invisible until the animation begins.
What's wrong with my approach?
I con only guess why the View is visible in full size at the beginning of the animation: maybe onAnimationStart() fires when the animation begins calculating the next changes but before the screen is updated for the first time?
That being said, you can use property animations instead of View animations to achieve the desired effect:
First, let your View have a size of just 1dp x 1dp in the beginning. Instead of setting a pivot, embed it at the center of a FrameLayout of size 60dp x 60dp. If required, you can set the visibility of the FrameLayout to GONE after the animation has finished (in this case, you need to register an Animator.AnimatorListener).
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp">
<ImageView
android:id="#+id/like_big"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:background="#0000ff"/>
</FrameLayout>
Next, the animations:
ObjectAnimator growX = ObjectAnimator.ofFloat(like_big,"scaleX", 1f, 60.0f);
ObjectAnimator growY = ObjectAnimator.ofFloat(like_big,"scaleY", 1f, 60.0f);
AnimatorSet growAnim = new AnimatorSet();
growAnim.playTogether(growX, growY);
growAnim.setDuration(1600);
growAnim.setInterpolator(new BounceInterpolator());
ObjectAnimator shrinkX = ObjectAnimator.ofFloat(like_big,"scaleX", 60.0f, 0.0f);
ObjectAnimator shrinkY = ObjectAnimator.ofFloat(like_big,"scaleY", 60.0f, 0.0f);
AnimatorSet shrinkAnim = new AnimatorSet();
shrinkAnim.playTogether(shrinkX, shrinkY);
shrinkAnim.setDuration(200);
shrinkAnim.setInterpolator(new LinearInterpolator());
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(growAnim, shrinkAnim);
Start the animation by calling
animatorSet.start();
I want image to zoom out and scale as Twitter Splash screen animation but I am not able to first zoom out the image and scale. Here's is my code
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
imageView.animate()
.setStartDelay(500)
.setDuration(1000)
.scaleX(20)
.scaleY(20)
.alpha(0);
}
});
You didn't mention scale from variable
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
You can do almost any animations with ObjectAnimator and it's very smooth.
Here is a sample code. In this case image will scale up from 1x to 2x, You can adjust the values as your need.Now if you want to scale down then change 2x to 0.5x which will scale down image to 50% of original image.
ObjectAnimator scaleXAnimation = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f);
scaleXAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleXAnimation.setDuration(1500);
ObjectAnimator scaleYAnimation = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 2.0f);
scaleYAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleYAnimation.setDuration(1500);
ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView, "alpha", 1.0F, 0F);
alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
alphaAnimation.setDuration(1500);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scaleXAnimation).with(scaleYAnimation).with(alphaAnimation);
animatorSet.setStartDelay(500);
animatorSet.start();
I want to make a rotate animation for my view but in both sides (java and xml) I cant find any way to rotate view from it's centre
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="180" />
and this:
RotateAnimation animation = new RotateAnimation(0,180,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
both of them rotate view from its corner
please help me
Looks like you try rotate all layout, not view. That you need.
worked code
View view = findViewById( R.id.image );
aRotate = new RotateAnimation(fStartAngle, fEndAngle,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
aRotate.setStartOffset(0);
aRotate.setDuration(2000);
aRotate.setFillAfter(true);
aRotate.setInterpolator(context, android.R.anim.decelerate_interpolator);
view.startAnimation(aRotate);
I want to make an edittext which aligns in its parent's left and when users click it, edittext's width'll increase to right side. Here is the code that i used. But when animation ended, edittext width come to first size.Can any one help me.?And is there any solution to set "fillparent" to width's final size in animation?
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
editText.startAnimation(scaleAnimation);
I added scaleAnimation.setFillAfter(true); before animation starts but i get this;
After 750ms, edittext is going to its first width.
This will definitely work for you.
Dynamic way of doing this:
ScaleAnimation animate = new ScaleAnimation(1, 2, 1, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
animate.setDuration(700);
animate.setFillAfter(true);
target.startAnimation(animate);
Way of Using XML
scale.xml (Put this in res/anim folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="400"
android:fillAfter="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="0%"
android:toXScale="2.0"
android:toYScale="1.0" >
</scale>
</set>
Java Code:
Animation anim = AnimationUtils.loadAnimation(Anims.this, R.anim.scale);
mEdittext.startAnimation(anim);
Do this
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setFillAfter(true);
editText.startAnimation(scaleAnimation);
Give a try to this one.
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
//Set your editext width to match parent using layout params
}
});
editText.startAnimation(scaleAnimation);
Use
scaleAnimation.setFillAfter(true);
Or use ObjectAnimator:
ObjectAnimator animWidth = ObjectAnimator.ofInt(your_view, "width", startWidth,endWith);
animWidth.setDuration(yourDuration);
animWidth.start();
Qus :
What is the possible Solution for make the Animation and change the View Position simultaneously LIKE: Bird Flying ?
A arrow_anim.xml file for Animation :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/arrow" android:duration="1000" />
<item android:drawable="#drawable/arrow1" android:duration="1000" />
<item android:drawable="#drawable/arrow2" android:duration="1000" />
<item android:drawable="#drawable/arrow3" android:duration="1000" />
</animation-list>
Code snippet for Animation :
imageView.setBackgroundResource(R.drawable.arrow_anim);
AnimationDrawable anim = (AnimationDrawable) imageView.getBackground();
anim.start();
This is like standing Animation And I need to change Animation and their Position asa well as.
What class is helped me to acheive this bird functionality.
Edit 1 for the Code what I'm trying
imageView.setBackgroundResource(R.drawable.movie);
AnimationDrawable anim = (AnimationDrawable) imageView.getBackground();
anim.start();
TranslateAnimation trans = new TranslateAnimation(0, 0,
TranslateAnimation.ABSOLUTE, 250, 0, 0,
TranslateAnimation.ABSOLUTE, 250);
trans.setDuration(0);
AnimationSet animationSet=new AnimationSet(true);
animationSet.addAnimation(trans);
imageView.startAnimation(animationSet);
But this not working simultaneously. If something is missing, suggest me to correct it.
Now that i know what you want, you can just start() your AnimationDrawable and then start translate animation for a imageView like:
View.startAnimation(Animation);
This might give you an idea..
private void runAnimation(View view){
ValueAnimator vAnimator = ObjectAnimator.ofFloat(view, "alpha", 1,0f);
vAnimator.setDuration(1000);
vAnimator.setRepeatMode(ValueAnimator.REVERSE);
vAnimator.setRepeatCount(ValueAnimator.INFINITE);
ValueAnimator vAnimator2 = ObjectAnimator.ofFloat(view, "translationX", 100f);
vAnimator2.setDuration(1000);
vAnimator2.setRepeatMode(ValueAnimator.REVERSE);
vAnimator2.setRepeatCount(ValueAnimator.INFINITE);
AnimatorSet set = new AnimatorSet();
set.playTogether(vAnimator,vAnimator2);
set.setStartDelay(0);
set.start();
}