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
}
Related
I would like to do bounce animation of layer.
I have done that layer comes from right to center, now I would like to move it a little back and then back to center. That would create bounce effect.
I was thinking that I can do it with a translate like this:
<translate
android:duration="900"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
<translate
android:duration="900"
android:fromXDelta="0%p"
android:toXDelta="100%p" />
<translate
android:duration="900"
android:fromXDelta="70%p"
android:toXDelta="0%p" />
Well this code does not working, only thing I can achieve is that Layer comes from left to center, and then animation stops.
I cannot use this code: because it does not achieve what I want
setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.bounce_interpolator));
Any help would be appreciated.
You can use the BounceInterpolator to have this effect. The docs contain a very good description how to use it in XML. Just have a animation xml like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator">
<!-- Use your working translate animation here-->
<translate
android:duration="900"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
</set>
use this xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/bounce_interpolator">
<scale
android:duration="600"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
This will show bounce effect with scale ,different from translate,(fits better in some situations),for more check THIS out..
Add code on button or image click
final Animation myAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.bounce);
// Use bounce interpolator with amplitude 0.1 and frequency 15
MyBounceInterpolator interpolator = new MyBounceInterpolator(0.1, 15);
myAnim.setInterpolator(interpolator);
imgVoiceSearch.startAnimation(myAnim);
Add this class
public class MyBounceInterpolator implements android.view.animation.Interpolator {
private double mAmplitude = 1;
private double mFrequency = 10;
public MyBounceInterpolator(double amplitude, double frequency) {
mAmplitude = amplitude;
mFrequency = frequency;
}
public float getInterpolation(float time) {
return (float) (-1 * Math.pow(Math.E, -time / mAmplitude) *
Math.cos(mFrequency * time) + 1);
}
}
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)
I created the following animation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/anticipate_overshoot_interpolator"
>
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="500"
/>
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:startOffset="500"
android:duration="500"/>
</set>
I test it on an Android 2.3.6 phone and the animation goes sequentially but REVERSED.
First it goes from left to the middle then from the middle to the right. How can I play it in the correct order?
final ImageView iv = new ImageView(this);
iv.setScaleType(ScaleType.CENTER);
final Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.layer0);
iv.setImageBitmap(b);
OnClickListener l = new OnClickListener() {
#Override
public void onClick(View v) {
float x = (iv.getWidth() + b.getWidth()) / 2;
AnimationSet set = new AnimationSet(true);
set.setFillBefore(false);
Animation a;
a = new TranslateAnimation(0, x, 0, 0);
a.setDuration(500);
a.setFillAfter(false);
a.setFillBefore(false);
a.setFillEnabled(true);
set.addAnimation(a);
a = new TranslateAnimation(-x, 0, 0, 0);
a.setStartOffset(500);
a.setDuration(500);
a.setFillAfter(false);
a.setFillBefore(false);
a.setFillEnabled(true);
set.addAnimation(a);
iv.startAnimation(set);
}
};
iv.setOnClickListener(l);
setContentView(iv);
As I couldn't modify their orders, I eventually created two separate animations and used an AnimationListener to start the second one.
you can do it simply adding a set attribute element android:repeatMode="reverse". Thus your code should be..
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/anticipate_overshoot_interpolator"
android:repeatMode="reverse"
>
<translate
android:repeatCount="infinite"
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="2500"
/>
<!-- <translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:startOffset="500"
android:duration="500"/> -->
</set>
I have no idea for this animation.
How can I do it via XML like that? Or another solution?
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
......
</set>
Thanks for your help
This code shakes a view in horizontal direction
shake.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:interpolator="#anim/cycle_5"
android:toXDelta="10" />
cycle_5.xml
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="5" />
Method to shake ImageView
public void onShakeImage() {
Animation shake;
shake = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.shake);
ImageView image;
image = (ImageView) findViewById(R.id.image_view);
image.startAnimation(shake); // starts animation
}
1) vibrate or
2) shake
(using property animation)the following code working for me.
ObjectAnimator rotate = ObjectAnimator.ofFloat(animateView, "rotation", 0f, 20f, 0f, -20f, 0f); // rotate o degree then 20 degree and so on for one loop of rotation.
// animateView (View object)
rotate.setRepeatCount(20); // repeat the loop 20 times
rotate.setDuration(100); // animation play time 100 ms
rotate.start();
Create shake.xml inside anim directory
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toDegrees="0" />
<translate
android:duration="70"
android:fromXDelta="40"
android:interpolator="#android:anim/linear_interpolator"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="-40" />
inside your java file add below method
public void animateView(View view){
Animation shake = AnimationUtils.loadAnimation(getActivity(), R.anim.shake);
view.startAnimation(shake);
}
and pass your view inside method for animation
animateView(yourView);
Create animation file in anim directory:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromDegrees="-10"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="10" />
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
your_view.startAnimation(shake);
This works for me smoothly as i Expected
private void Shake(View view)
{
RotateAnimation rotate = new RotateAnimation(-5, 5,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(250);
rotate.setStartOffset(50);
rotate.setRepeatMode(Animation.REVERSE);
rotate.setInterpolator(new CycleInterpolator(5));
view.startAnimation(rotate);
}
I did create the BUZZ like animation for imageView. Here I also have added delay to make it really like Buzzy effect
In your Activity:
Here, animShake is android.view.animation
animShake = AnimationUtils.loadAnimation(this, R.anim.shake)
imageView.startAnimation(animShake)
Don't forget to add AnimationListener for little delay of BUZZ effect
animShake.setAnimationListener(object : Animation.AnimationListener {
override fun onAnimationRepeat(animation: Animation?) {
}
override fun onAnimationEnd(animation: Animation?) {
Handler().postDelayed({
imageView.startAnimation(animShake)
}, 1000)
}
override fun onAnimationStart(animation: Animation?) {
}
})
anim shake XML file having only translate:
android:duration="75"
android:fromXDelta="-18%"
android:repeatCount="11"
android:repeatMode="reverse"
android:toXDelta="18%" />
How can I define this animation xml by java code without using xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<translate android:fromXDelta="-100%p" android:toXDelta="0"
android:duration="900" />
</set>
Yes, why not ?
AnimationSet set = new AnimationSet( true );
Animation translate = new TranslateAnimation( -100, 0, 0, 0);
translate.setDuration( 900 );
set.addAnimation( translate );
Regards,
Stéphane