Animation increase height - android

What I'm doing now is a sound wave and to do it I have created an animation that increase the height
please see this picture
so my problem is that the animation works and it increase the height however I wanted to make it reverse grow
Hope you can help me thank you
So my code is here
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="0.5"
android:duration="2000"
android:fillAfter="false"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
Animation animation = AnimationUtils.loadAnimation(context, R.anim.sound_wave);
view.setAnimation(animation);
view.animate();
animation.start();

I do not know of a way to solve your problem while continuing to use an animation resource. I would instead use ObjectAnimator.
Here's how to build your same animation using ObjectAnimator:
ObjectAnimator anim = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.5f);
anim.setDuration(2000);
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.setRepeatCount(ValueAnimator.INFINITE);
anim.start();
You also have to add an attribute to your View in whatever layout file defines it. In my case, I made my view 400dp tall, so I added this:
android:transformPivotY="400dp"
This will cause the scale animation to be anchored at the bottom of the view (since its pivot is equal to its height).

Related

Rotate animation to an ImageView in FrameLayout does not take effect

I have one ImageView in FrameLayout, and apply rotate animation to it. However, the animation does not take effect.
The animation resource file anim_blog.xml(located in res/anim):
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator" >
<rotate
android:fromDegrees="0.0"
android:toDegrees="360.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:repeatCount="infinite"
android:duration="1200" />
</set>
The code in Activity is listed below:
Animation rotateAnim = AnimationUtils.loadAnimation(mCtx, R.anim.anim_blog);
rotateAnim.setDuration(Integer.MAX_VALUE);
mProgressIV.startAnimation(rotateAnim);
You are setting animation duration too large, change it as follows :
Animation rotateAnim = AnimationUtils.loadAnimation(mCtx, R.anim.anim_blog);
mProgressIV.startAnimation(rotateAnim);
please try what has done successfully from my end:
ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anim_blog);
image.startAnimation(animation);
I created example here, you can check it out.

How can I control the animation speed in android

I have a music app and the music notations perform an animation from right to left, I want to control the animation speed, while they are performing.Can anyone please help me for that?
My animation layout is:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="500%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="10000"
android:fillAfter="true"
android:repeatCount="infinite"/>
And my code to perform the animation is:
Animation am=AnimationUtils.loadAnimation(this, R.anim.note);
music1.startAnimation(am);
set your android:duration with this help you can control your animation speed
android:duration="300"
change in the duration will control the speed of animation in your file.
android:duration="10000" // here you have to change the time in milliseconds.
you can implement onTouchListener to control your animation speed at the run time. inside touch listener event put coding to change your animation duration.
From official documentation:
ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
animation.setDuration(1000);
animation.start()
In your case:
music.setDuration(setValue);

Android image scale animation relative to center point

I have an ImageView and I do a simple scale animation to it. Very standard code.
My scale_up.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="1"
android:fromYScale="1"
android:toXScale="1.2"
android:toYScale="1.2"
android:duration="175"/>
</set>
My animation code:
Animation a = AnimationUtils.loadAnimation(this, R.anim.scale_up);
((ImageView) findViewById(R.id.circle_image)).startAnimation(a);
The problem:
When the image scales it doesn't scale from the center, but from the top left corner. In other words, the scaled version of the image doesn't have the same point as the center, but it has the same top-left point.
Here's an image that explains what I mean:
The first image is how the animation scales and the second image is how I want it to scale. It should keep the center point the same.
I have tried setting up gravity on the image, on the container, aligning left or right, it always scales the same.
I'm using RelativeLayout for the main screen and ImageView is located into another RelativeLayout, but I tried other layouts, no change.
50% is center of animated view.
50%p is center of parent
<scale
android:fromXScale="1.0"
android:toXScale="1.2"
android:fromYScale="1.0"
android:toYScale="1.2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="175"/>
The answer provided by #stevanveltema and #JiangQi are perfect but if you want scaling using code, then you can use my answer.
// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center
ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000); // animation duration in milliseconds
fade_in.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
view.startAnimation(fade_in);
Forget the additional translation, set android:pivotX, android:pivotY to half the width and height and it will scale from the center of the image.
You can use the translate animation in your set to offset that. You'll probably need to tweak the toXDelta and toYDelta values to get it right so it keeps the image centered.
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="1"
android:fromYScale="1"
android:toXScale="1.2"
android:toYScale="1.2"
android:duration="175"/>
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="-20%"
android:toYDelta="-20%"
android:duration="175"/>
</set>

Android fade out animation using Cosine function

I in my Android Honeycomb application there is a View which has a fade in and fade out animation. Here's most part of the animation code:
<scale
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="0%"
android:pivotY="0%"
android:duration="500" />
The way it's working right now the animation happens in a linear time but I want to do it according the Cosine function, that is from Cos(0) until Cos(0,5*pi) the fade out case.
Is it possible to do such thing?
Thank you.
You are free to create your own Interpolator. (See the interface description here.) This can then be applied with Animation.setInterpolator(Interpolator). Or, see this discussion for ways of applying custom Interpolators in XML.
If you don't want linear interpolation, you have choice between:
AccelerateDecelerateInterpolator, AccelerateInterpolator,
AnticipateInterpolator, AnticipateOvershootInterpolator,
BounceInterpolator, CycleInterpolator, DecelerateInterpolator,
LinearInterpolator, OvershootInterpolator
http://developer.android.com/reference/android/view/animation/Interpolator.html
So maybe what is the closest to a Cosine is:
AccelerateDecelerateInterpolator
An interpolator where the rate of change starts and ends slowly but
accelerates through the middle.

Android ScaleAnimation

I'd like to grow a view with each click using a ScaleAnimation. I've managed the effects of the animation persist after it has finished with the fillAfter, but the problem now is, the animation always starts from state 0 (as the View is defined in the XML) - on click the view resets and animates back to the state it was just after the first animation.
The animation is defined in an XML:
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1"
android:toXScale="1.5"
android:fromYScale="1"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true"
/>
I solved the issue by not resorting to animation defined in the XML, but rather doing
anim = new ScaleAnimation(from, to, from, to, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
and adjusting from/to each time I needed to expand it. I'm not so sure that's a good thing regarding performance, but it works nicely.
How exactly is the animation defined?
When defining ScaleAnimation with Java code, you can set fromX/fromY (look here) starting scaling factors, so I assume you can do the same with XML attributes.

Categories

Resources