Panoramic Background animation in Android - android

I have a panoramic background as a sky that i want to move from left to right and then from right to left to simulate a moving clouds animation as a screen background .
This should repeat indefinitely and after goin to the right most then return back to the left most..
I have tried the following:
Animation left = AnimationUtils.loadAnimation(MainActivity.this, com.icare.kids.R.anim.view_transition_out_right);
left.setRepeatCount(Animation.INFINITE);
left.setRepeatMode(Animation.REVERSE);
left.setDuration(3000);
findViewById(id.cloud).startAnimation(left);
But this does not seem to work... any solution for that ?
I am currently setting the image to an ImageView as follows:
<ImageView
android:id="#+id/cloud"
android:layout_width="3000dip"
android:layout_height="wrap_content"
android:layout_below="#id/topbar"
android:scaleType="matrix"
android:src="#drawable/bgpan" />
how can i set the image to the screen to start from the left most like this below, so to help in the panoramic animation effect:

The best solution that is efficient and fast on all phone ranges was to actually only animate the clouds while keeping the background static.
you can also add some variable to the speed that would add some randomization to the speed of the clouds so you don't get a monotonic looping.
Implementation details and solution was taken from this answer

One thing you might be able to try is using a Viewpager object with fake drag, where you continually re-add the background to new views that get generated, while disabling user input.
This will give the illusion of what you are trying to do.
So lets say you have 4 views in your adapter, each view contains just one of the image assets that fills the whole screen, and Viewpager's fake drag pans from View A to View B, draws View C and draws View D, then it fake drags from View B to View C and draws View A again
I'm curious if that would work for you

Related

Create a transparent expanding circle transition animation from one layout to another on swipe

When the user holds down on the screen, it should become transparent by their finger so that they can see the other layout beneath. When they continue holding down their finger and swipe, I'd like to create a transition where the transparency spreads outward from their initial holding location until the upper layout is gone and only the layout underneath is left.
Here are examples of the effect I'm looking to create:
I'm not concerned about the fancy movement of the purple / red squares; I'm just looking to find out how to create the swipe transition between the two layouts.
It seems like using android.R.anim.fade_in and android.R.anim.fade_out would get close to the desired effect but it would be missing the expanding circle centered on the user's finger and the transition would happen all at once instead of the intended effect of giving a peak when just held down and performing the transition only after a swipe.
you can use this npm
react-native-expanding-circle-transition
https://github.com/alexbrillant/react-native-expanding-circle-transition

How to do a scroll animation in Android?

I'm new to Android programming. I'm working on an app that requires some form of animation. Please take a look at
I want an animation where a scroll rolls down at the top with this text in it as soon as this activity starts & rolls up when the connect button is pressed. I have no clue where or how to begin with the animation. Any kind of links to tutorials or posts on StackOverflow will be of much help.
Thank you for your time!
Since your question is really really broad, I'll give you a broad answer as well.
I think by "scrolling animation" you mean an animation in which a black (or some other color) area slowly covers up/reveals the screen. I don't know why would this look cool, but whatever.
Step 1
Create an animation XML file. In this file, you would specify that the view should translate downwards by x pixels where x is the height of the screen. And create another animation file. This time, specify that it should translate upwards.
If you need help creating XML view animations, have a look here
Now you have two animations - move upwards and downwards.
Step 2
Okay, now you should create a custom view. You can start by doing this:
public class ScrollingView extends View {
}
And implement all the required constructors.
Override onDraw like this:
cover the whole view with black or some other color
draw the scroll at the top of the view. The scroll should be an image like this one:
If you don't like using an image, you can draw it yourself, using code!
You can get help on this here
Step 3
In onCreate of your activity, create a ScrollingView. This view should be as wide as the screen and as high as the screen. Position the view at (0, 0) and bring it to front so that it covers up the whole screen.
Step 4
Next, apply the animation you created in step 1 to the scrolling view.

ImageButton animation

I am implementing a animated book in Android and the animations are defined by an XML (not an Android XML). The images are positioned in fixed positions and when user touches in a element on the screen, the app plays a sound and animate the imagebutton, changing the image src and positions (X and Y).
I want to know how can I do that. As images dot not have the same size, I think the sprites solution is not a good way to solve it.
Its like the image 2:
Thank you
There are two types of animations:
View Animation and Proprety Animation.
The view animation can only animate View objects. It also lack a variety of animations, since it can do only stuff as scale, rotate, move... It cannot change background color, for example. Also, the dissadvantage of the View Animation is that it only change the position of where the View object is DRAWN. Phisically, it still stays in the same position. That's why the button is unclickable, after the View Animation is finished upon it.
Property Animation, in the other hand, can animate both View and non-View objects and it doesn't have constraints as the View Animation. When objects are moved, for example, with the property animation, they are not just drawn on some other position on the screen, but they are actually MOVED there.
Now, Property Animation is a lot more complex to write than the View Animation, so if you don't really need all the advantages of the Property Animation, it is suggested to use View Animation.
Source: Property vs ViewAnimation
Tutorial and SupportLybrary up to API 1: Nine Old Androids

How to animate view and meanwhile preserve view in its original location during the animation

I want to implement an animation similar to the animation when an app is opened in Mac OS (view scales, gets bigger and at the same time, it gets transparent, while it is already in its original place too. In the attached picture you can see the animation on calculator app)
How can I do that? I'm trying to use this animation on ActionBar home button if it helps.
thanks a lot
You can create a Bitmap of your View, do some transformations on your Bitmap and then animate it instead of the View.
This pattern is often used when dragging views around.
There is on episode of the DevBytes series which explains this pretty good.
http://www.youtube.com/watch?v=_BZIvjMgH-Q

View Animation (Resizing a Ball)

i am trying to do this:
1) user long touches the screen,
2) a circle/ball pops up (centered around the user's finger) and grows in size as long as the user is touching the screen
3) once the user lets go of the finger, the ball (now in its final size) will bounce around.
i think i have the bouncing around figure out from the DivideAndConquer example, but i am not sure how to animate the ball's growth. i looked at various view flipper examples such as this:
http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html
but it seems like view flipper is best for swapping two static pictures. i wasn't able to find a good view animator example other than the flippers. also, i would prefer to use images as opposed to just a circle. can someone point me in the right direction?
thanks.
Here are two simple tutorials to help you get started with drawing basic animations including touch input: balls bouncing randomly around the screen and basic drag and drop.
In brief: You're right, ViewFlipper is really not suited for this. You want to draw on a Canvas by making your own custom View. This is the basic framework for 2D graphics. Canvases let you draw image files, solid colors and other things to the screen, while applying transformations ot them at the same time. Handling the user input (i.e. the finger on the screen) is done via the onTouchEvent(...) method, which lets you do something when the finger touches the screen, moves on the screen or lifts off. Have a play with those two tutorials, they should give you the basics.
If you're using a bitmap on a canvas to draw it
http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap, android.graphics.Matrix, android.graphics.Paint)
Use a scale matrix, the identity multiplied by the scalar of the size you want the image to be.

Categories

Resources