I need to have an animation that scales a view to the screen width over 1500 seconds.
I haven't got a clue how to achieve this. I searched for an hour now on the internet...
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0"
android:toXScale="?"
android:fromYScale="1.0"
android:toYScale="1.0"
android:fillAfter="false"
/>
</set>
The method where the animation gets called:
tab1.Click += delegate
{
ResetMenuItem();
animation = AnimationUtils.LoadAnimation(ApplicationContext, Resource.Animation.grow_anim1);
animation.Duration = duration;
// int width = Resources.DisplayMetrics.WidthPixels;
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams((int)ConvertDpToPix(3f),RelativeLayout.LayoutParams.MatchParent);
selector1.LayoutParameters = p;
selector1.StartAnimation(animation);
animation.AnimationEnd+=delegate
{
drawer.CloseDrawers();
};
tabIndex=1;
};
I ended up solving this by using a thread to edit the width of the view.
Related
I am trying to do an animation on an imageview, were i need to scale up and scale down the image so that it will have a shadow feel effect for another animation.
I tried adding two xml in anim folder -
scale_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:shareInterpolator="false">
<scale
android:duration="1250"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
scale_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:shareInterpolator="false">
<scale
android:duration="1250"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
and in my activity class
AnimationSet s = new AnimationSet(false);
View shadowView = view.findViewById(R.id.shadowView);
final Animation scaleDownAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_down);
final Animation scaleUpAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_up);
s.addAnimation(scaleUpAnimation);
s.addAnimation(scaleDownAnimation);
shadowView.startAnimation(s);
But animation is not happening. What i am doing wrong? Anyone please help. Thanks
AnimationSet performs animation simultanuously, not sequentaly by default. So it does zoom in and zoom out at the same time. That's why you see no effect. But you can set a start offset to the animation:
AnimationSet s = new AnimationSet(false);
View shadowView = view.findViewById(R.id.shadowView);
final Animation scaleDownAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_down);
final Animation scaleUpAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_up);
scaleDownAnimation.setStartOffset(1250); //this line
s.addAnimation(scaleUpAnimation);
s.addAnimation(scaleDownAnimation);
shadowView.startAnimation(s
I want to increase/decrease the text size in text view but not by .setTextSize() method . Like when I click a button the size must change from one to another smoothly and not abruptly. The transition must be visible as it is increasing so that a good UI experience is obtained. I tried to use a loop where the size changes by small-small bits but thats also to quick to be visible. So please someone suggest me a method to do this. I am just a beginner in Android
This could be achieved with a ValueAnimator.
Try this :
final TextView tv = new TextView(getApplicationContext());
Button btnPlay = (Button) findViewById(R.id.btnPlay);
btnPlay.setOnClickListener(MainActivity.this);
final float startSize = 42; // Size in pixels
final float endSize = 12;
final int animationDuration = 600; // Animation duration in ms
ValueAnimator animator = ValueAnimator.ofFloat(startSize, endSize);
animator.setDuration(animationDuration);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float animatedValue = (float) valueAnimator.getAnimatedValue();
tv.setTextSize(animatedValue);
}
});
#Override
public void onClick(View view)
{
if(view == btnPlay)
{
animator.start();
}
}
Use this code in on click listner of button, where you want to achieve this.
You can perform this using View Animation.
You should refer it from here
create one textanim.xml inside tour res/anim folder. (here add anim folder first in res file if not created.)
your textanim.xml should be look like this.
<set android:shareInterpolator="false">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set android:interpolator="#android:anim/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400" />
</set>
</set>
Moving on to the associated java file (inside your Activity), you have to use this animation like this,
TextView mT = (TextView) findViewById(R.id.yourTextViewId);
Animation myAnim = AnimationUtils.loadAnimation(this, R.anim.textanim);
mText.startAnimation(myAnim);
Hey I have the following problem whan I animate my floating buttons - namely they are scaling badly. First of all, fab buttons on the second Image are higher than they should. Event main floating button with "+" is not rotating. I anyone know how to deal with it please answer me.
Image left HTC One MAX, screen HD - SKD21 lolipop, emulator 768x1280 SKD 17 jelly bean
my code in Activity.PhotoGallery
private void showFabs(){
Animation show_fab_photo = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_add_photo_show);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fabAddPhoto.getLayoutParams();
layoutParams.bottomMargin += (int) (fabAddPhoto.getHeight() * 1.7);
fabAddPhoto.setLayoutParams(layoutParams);
fabAddPhoto.startAnimation(show_fab_photo);
fabAddPhoto.setClickable(true);
Animation show_fab_gallery = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_add_from_gallery_show);
FrameLayout.LayoutParams layoutParamsGallery = (FrameLayout.LayoutParams) fabAddFromGallery.getLayoutParams();
layoutParamsGallery.bottomMargin += (int) (fabAddFromGallery.getHeight() * 3.4);
fabAddFromGallery.setLayoutParams(layoutParamsGallery);
fabAddFromGallery.startAnimation(show_fab_gallery);
fabAddFromGallery.setClickable(true);
Animation rotateFabAdd = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_gallery_show);
fabAdd.startAnimation(rotateFabAdd);
}
private void hideFabs(){
Animation hide_fab_photo = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_add_photo_hide);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fabAddPhoto.getLayoutParams();
layoutParams.bottomMargin -= (int) (fabAddPhoto.getHeight() * 1.7);
fabAddPhoto.setLayoutParams(layoutParams);
fabAddPhoto.startAnimation(hide_fab_photo);
fabAddPhoto.setClickable(false);
Animation hide_fab_gallery = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_add_from_gallery_hide);
FrameLayout.LayoutParams layoutParamsGallery = (FrameLayout.LayoutParams) fabAddFromGallery.getLayoutParams();
layoutParamsGallery.bottomMargin -= (int) (fabAddFromGallery.getHeight() * 3.4);
fabAddFromGallery.setLayoutParams(layoutParamsGallery);
fabAddFromGallery.startAnimation(hide_fab_gallery);
fabAddFromGallery.setClickable(false);
Animation rotateFabAdd = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_gallery_hide);
fabAdd.startAnimation(rotateFabAdd);
}
And my animations XML files
Fab with camera
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!-- Rotate -->
<rotate
android:duration="500"
android:fromDegrees="30"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:repeatMode="reverse"
android:toDegrees="0"></rotate>
<!--Move-->
<translate
android:duration="800"
android:fromXDelta="0%"
android:fromYDelta="170%"
android:interpolator="#android:anim/linear_interpolator"
android:toXDelta="0%"
android:toYDelta="0%"></translate>
<!--Fade In-->
<alpha
android:duration="1500"
android:fromAlpha="0.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="1.0"></alpha>
</set>
Fab with image
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!-- Rotate -->
<rotate
android:duration="500"
android:fromDegrees="30"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:repeatMode="reverse"
android:toDegrees="0"></rotate>
<!--Move-->
<translate
android:duration="800"
android:fromXDelta="0%"
android:fromYDelta="340%"
android:interpolator="#android:anim/linear_interpolator"
android:toXDelta="0%"
android:toYDelta="0%"></translate>
<!--Fade In-->
<alpha
android:duration="1500"
android:fromAlpha="0.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="1.0"></alpha>
</set>
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)