I have 2 images of different color balls. When I press the button I am changing the image on imagebutton from image1(ball1) to image2(ball2). What I want to do is show this image change(ie ball color change with a little animation, effect that it rotates and changes color.
Question: How can I get this effect of rotating ball image1 so that it becomes ball image2 ?
Question: I want to play some sound also along with this effect. How to go about it?
EDIT: basically what I want is: image1 revolves around(180 degree) and becomes image2.
in order to rotate and hide image you will need to use a tween animation framework:http://developer.android.com/guide/topics/resources/animation-resource.html#View. You need to construct animation set that will rotate and reduce alpha of the image.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true" >
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float" />
</set>
Then just use ImageView.startAnimation(AnimationUtils.loadAnimation(context, R.anim.your_anim));
This will allow you to fade and rotate the ImageView, while revealing another ImageView below the current one.
If you want to do transition inside of a single ImageView you need to use TransitionDrawable which is a drawable that cross-fades one image to another. Unfortunately it won't allow you rotating content, so you either need to modify it, which is harder.
You could use RotateDrawable as one of the drawables in TransitionDrawable, but I have never tried this.
Related
How I can reach such behavior with a smooth slider?
I want that first ImageView to increase his width and cover over second ImageView.
I tried three different approaches to this purpose.
First I drew bitmap (two bitmaps combined inside one canvas) inside the canvas of one ImageView. New position generated with ValueAnimation but it gives values with not equals intervals. During rendering the transition do jumps noticeably enough. On a good phone especially.
Second I did my own method for generating sequence numbers without intervals and but occurs another problem: phone cant render new bitmaps a few hundred times per second. If to do intervals jumps occur again.
Then I tried another way: to create two ImageView and first must smooth roll out over the second. But I can't reach the proper effect than the first picture must not stretch (image inside ImageView increased width together) but need a roll-out like on GIF.
Code of my third the attempt:
In fragment
val animation: Animation = AnimationUtils.loadAnimation(ctx, R.anim.scale_right)
imageView.startAnimation(animation)
imageView.visibility = View.VISIBLE
scale_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="6000"
android:fromXScale="0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="0%"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
What do I need to do?
I am using scale animation in Android relative layout , where I have a button and need to scale it to small size at one end .
I have used scale animation and it works fine , but it does have an icon which gets squeezed and its shape gets altered .
I want to prevent it and let the button take its shape without affecting the icon shape when it scales from left to right.
How can I achieve this?.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="0.1"
android:fromYScale="1.0"
android:toYScale="1.0"
android:duration="100"
android:pivotX="100%"
>
</scale>
It sounds like you don't really want a scale animation, you want a resize animation instead. A scale animation will act like you are resizing an image. A resize animation should just affect the layout parameters of the view without altering the size of the contents (just the positioning).
You can do this in XML with a property animator:
https://developer.android.com/guide/topics/resources/animation-resource#Property
Alternatively, here is an example of a resize animation in code:
https://stackoverflow.com/a/8162779/342745
I have an ImageView, initially empty. Its background is set to grey:
<ImageView
android:background="#333" />
After I fetch its bitmap from the internets, I want to set it as the src property, but fade it in gracefully. The animation examples I've seen for this do it like:
// fade_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="2000"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
but this is animating the opacity of the entire ImageView. It has the effect of first hiding the ImageView before fading it in, so you see a little pop at the start of the animation is the view as first set to alpha=0.
Is there a way to animate the opacity of just the "src" attribute instead of the entire ImageView?
Thanks
Animations on imageView's source image is tricky and in most cases involve wraping imageView into some ViewGroup, but if all you want to do is animate its alpha (fade in/out), it is very easy to do using a TransitionDrawable:
TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{
new ColorDrawable(Color.TRANSPARENT),
getResources().getDrawable(R.drawable.my_image)
});
imageview.setImageDrawable(transitionDrawable);
transitionDrawable.startTransition(300);
Wrap the ImageView inside a ViewGroup such as LinearLayout which will wrap_content and will have all the settings you want to keep visible, such as the background color. Something like this:
<LinearLayout
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:background='#ff0000'>
<ImageView src='#drawable/ic_launcher'
android:layout_width='wrap_content'
android:layout_height='wrap_content'/>
</LinearLayout>
Which will result in the following results with an alpha of 0.5 and 1 respectively.
You have 2 options:
1) Put a transparent ImageView in a gray container (easy). The simplest container is FrameLayout.
2) Animate the alpha of the contained image with the ImageView.setAlpha(int) method. This method takes an integer as parameter, that ranges from 0 (fully transparent) to 255 (fully opaque). To animate a custom property like this, you'll need to use an ObjectAnimator or NineOldAndroids.
I am trying to implement zoom image functionality for images in the view. The view is kind of gallery view with images. I have applied the scale animation using xml and the animation works properly. The issue is when the image zooms the sides of image is cut off. I am using circularimageview as the image needs to be shown in a circle. I have tried increasing spacing between images but still the issue persists, the images gets cut off slightly when zoomed.
Can someone point out what may be the issue ?
The xml that I use for scale animation is
<scale
android:duration="300"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.15"
android:toYScale="1.15" >
</scale>
This was an issue with margins that was given around the image. I was able to resolve it by giving different margin values.
I am using following code
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="36000" />
and
Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);
findViewById(R.id.yourImageId).startAnimation(rotate);
rotate.reset();
rotate.start();
The intention was to rotate the image inside the Imageview.
Because this image view has a background colour, this appears to rotate the whole ImageView control and it starts to overlap the text view placed next to it, for example after 45 degree rotation one corner would be overlapping the view placed to left of it
I want to show that the container is not spinning, rather just the image.
I can not remove the background, this will disturb the UI feel in my particular case.
Is it a good idea to place this into a Layout and remove background from this imageview and spin ? or is there a smarter way to it.
You could overlap 2 views (one only with the background and the other with your image) and set the Animation to rotate only the view with the image.
Regards.