I want to scale image from bottom center to center of the screen. This is my animation xml, image scales from just above top left of the center to center of the screen. Please help me to understand what is wrong here.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator" >
<translate
android:duration="750"
android:fromYDelta="100%"
android:toYDelta="0%"
android:fromXDelta="0%"
android:toXDelta="0%" />
<scale
android:duration="500"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:pivotX="0.5"
android:pivotY="0.5"
android:toXScale="1"
android:toYScale="1"
android:fillBefore="false" />
</set>
private void moveViewToScreenCenter( final View view ){
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics( dm );
int originalPos[] = new int[2];
view.getLocationOnScreen( originalPos );
int xDelta = (dm.widthPixels - view.getMeasuredWidth() - originalPos[0])/2;
int yDelta = (dm.heightPixels - view.getMeasuredHeight() - originalPos[1])/2;
AnimationSet animSet = new AnimationSet(true);
animSet.setFillAfter(true);
animSet.setDuration(1000);
animSet.setInterpolator(new BounceInterpolator());
TranslateAnimation translate = new TranslateAnimation( 0, xDelta , 0, yDelta);
animSet.addAnimation(translate);
ScaleAnimation scale = new ScaleAnimation(1f, 2f, 1f, 2f, ScaleAnimation.RELATIVE_TO_PARENT, .5f, ScaleAnimation.RELATIVE_TO_PARENT, .5f);
animSet.addAnimation(scale);
view.startAnimation(animSet);
}
Related
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 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
I'm trying to do a splashscreen where a logo appears from the top of the screen, and stop at the center of the screen.
I am using XML in my anim file:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="75%p"
android:duration="3000" />
</set>
And this method to load the movement:
Animation fadein = AnimationUtils.loadAnimation(getActivity(), R.anim.fadein);
background.startAnimation(fadein);
background.setVisibility(ImageView.VISIBLE);
// load the animation
Animation animMoveDown = AnimationUtils.loadAnimation(getActivity(), R.anim.movedown);
// set animation listener
animMoveDown.setAnimationListener(this);
overlay.startAnimation(animMoveDown);
How I can put the logo above the screen and have it slide down to the center? Is it possible?
Thank you all, in my case the XML is:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
**android:fromYDelta="-50%p"**
android:toYDelta="75%p"
android:duration="3000" />
</set>
It is absolutely possible! You'll have to play around with this a bit, but you'll basically just want to start at a negative YDelta
Here's what I used in my app, where I needed the very bottom of the image to start on the screen.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="-84%"
android:toYDelta="0%"
android:duration="500" />
</set>
You're going to want to start at -100% and end at 50%, I think, so try this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="-100%"
android:toYDelta="50%"
android:duration="3000" />
</set>
Just as simple define android:fromYDelta with negative value.
private fun buildSlideDownAndScaleAnimation(view: View): AnimationSet {
val animSet = AnimationSet(true)
animSet.fillAfter = false
val duration: Long = 1000
animSet.duration = duration
animSet.interpolator = AccelerateDecelerateInterpolator()
val translate = TranslateAnimation(0f, 0f, -1000f, 0f)
animSet.addAnimation(translate)
val scale = ScaleAnimation(0f,
1f,
0f,
1f,
ScaleAnimation.RELATIVE_TO_SELF,
.5f,
ScaleAnimation.RELATIVE_TO_SELF,
.5f)
animSet.addAnimation(scale)
val alphaAnimation = AlphaAnimation(0f, 1f)
alphaAnimation.startOffset = duration / 3
animSet.addAnimation(alphaAnimation)
return animSet
}
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 am trying to animate an ImageView when the said image view is clicked.
Specifically I want the size of the ImageView gets bigger (say .20 bigger) and the immediately shrink back to its original size).
So far I have been experimenting with this code with no luck.
// thumbLike is the imageView I would like to animate.
button.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.5f, 1.0f, 2.5f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnim.setInterpolator(new LinearInterpolator());
scaleAnim.setDuration(1500);
thumbLike.startAnimation(scaleAnim);
thumbLike.setAnimation(null);
}
});
Can anyone suggest me with a possible solution?
Edit #1
It is working through XML as answered by Hardik4560:
// finally i use this code to execute the animation
Animation animationScaleUp = AnimationUtils.loadAnimation(this, R.anim.scale_up);
Animation animationScaleDown = AnimationUtils.loadAnimation(this, R.anim.scale_down);
AnimationSet growShrink = new AnimationSet(true);
growShrink.addAnimation(animationScaleUp);
growShrink.addAnimation(animationScaleDown);
thumbLike.startAnimation(growShrink);
and the XML
SCALE_UP
<?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="1.5"
android:fromYScale="1.0"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
SCALE_DOWN
<?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.5"
android:toXScale="1.0"
android:fromYScale="1.5"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
ps: this is awkward, since I already accepted an answer. I am trying to combine between #tharkbad and #Hardik4560 's answers yet now the way it animates does not look smooth.
during the scale_up animation, it kinda look like being "skip" to the end of animation and then immediately starting scale_down animation. I guess I have to play around with it a bit.
If you want to implement this without XML you could do so as follows
final float growTo = 1.2f;
final long duration = 1200;
ScaleAnimation grow = new ScaleAnimation(1, growTo, 1, growTo,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
grow.setDuration(duration / 2);
ScaleAnimation shrink = new ScaleAnimation(growTo, 1, growTo, 1,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
shrink.setDuration(duration / 2);
shrink.setStartOffset(duration / 2);
AnimationSet growAndShrink = new AnimationSet(true);
growAndShrink.setInterpolator(new LinearInterpolator());
growAndShrink.addAnimation(grow);
growAndShrink.addAnimation(shrink);
thumbLike.startAnimation(growAndShrink);
Of course, you could also use NineOldAndroids and use the new animation methods.
I think your original error is this line, it removes the animation you just started from the view again.
thumbLike.setAnimation(null);
I use this to achieve popin popout effect,
See if its of any use to you
Pop Out.
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator" >
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:toXScale="1.0"
android:toYScale="1.0"
android:duration="500" />
</set>
Pop In
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator" >
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.0"
android:toYScale="0.0"
android:duration="500" />
</set>
I created the same animation using kotlin:
Repo: https://github.com/David-Hackro/Bounce-Animation
You need create your element and extend of anything (ImageView,Button etc)
in my case y created a class named BounceWidget
Add element in xml
<hackro.tutorials.com.bounceWidget.widget.BounceWidget
android:layout_width="match_parent"
android:layout_height="match_parent" />
Add element programmatically
val xpp = resources.getXml(R.xml.bouncewidget)
val attr = Xml.asAttributeSet(xpp)
val layout : LinearLayout = findViewById(R.id.layout)
val octocat1 : BounceWidget = BounceWidget(this,attr)
//you can change this values and have default values
//octocat1.id_resource(R.mipmap.bounceimage) // change image --> default : R.mipmap.ic_launcher
//octocat1.positionX = 1 //position X starting --> default : 0
//octocat1.positionY = 1 //position Y starting--> default : 0
//octocat1.velocityX = 1 //Velocity X --> default : 20
//octocat1.velocityY = 1 //Velocity Y --> default : 15
octocat1.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
layout.addView(octocat1)