I checked out the transition animation that comes with API code and i found animation zoom_enter and zoom_exit in which activity 1 sinks IN to show activity 2. I need the other way round. I need activity 2 to zoom out from inside and come on top. (I hope you are getting me). This type of animation is the same on iphone screen transition.
The code below is what i have for the effect that i don't need.
Here is the code for zoom_enter.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale android:fromXScale="2.0" android:toXScale="1.0"
android:fromYScale="2.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
And here is the code for zoom_exit.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:zAdjustment="top">
<scale android:fromXScale="1.0" android:toXScale=".5"
android:fromYScale="1.0" android:toYScale=".5"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
<alpha android:fromAlpha="1.0" android:toAlpha="0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
Then right after startActivity i call the method below:
overridePendingTransition(R.anim.zoom_enter, R.anim.zoom_exit);
Can anyone suggest how i can make changes to the above files to have the screen transition i explained?
Try this in zoom_enter.xml and remove animations from zoom_exit.xml. You will see better effects.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="0.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
Hope this helps.
overridePendingTransition(zoom_enter_new, zoom_exit_actual);
First param is for the incoming Activity (so the new)
Second param is for the outgoing Activity (the actual)
So if you want to make the same effect of the video where seems that
the actual activity is hide instantly than second param need to be set to 0 (means no animation)
overridePendingTransition(zoom_enter_new, 0);
And for making the new activity zoomin like the video this is the anim xml resource explained (zoom_enter_new.xml in res/anim/ dir)
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<!--scale view fromX fromY are the starting point (.5 is 50% of scale, )-->
<!--scale view toX and toY are the final state (1 is 100%)-->
<!--pivot is the center of animation, so in your case the zoomin on the video is from the exact center (50% pivot x, 50% pivot Y)-->
<scale android:fromXScale=".5" android:toXScale="1"
android:fromYScale=".5" android:toYScale="1"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_longAnimTime" />
<!-- alpha animation is made at the same time of scale animation, and for me make a better and smooth result, alpha 0 is full trasparent, 1 is the normal state. The final alpha state of the activity after this animation is 1, so pay attention toAlpha must be 1 if you don't want glitch-->
<alpha android:fromAlpha="0.5" android:toAlpha="1"
android:duration="#android:integer/config_longAnimTime"/>
</set>
overridePendingTransition(R.anim.zoom_enter_new, 0);
Tobia
Related
I am working on a very basic animation which animates a ball ImageView from left to right within a container. The animation works great, but when it animates to 100%p, the ball gets cut out of the container view.
The ImageView that animates is a static 50dp.
Is there any way to do something like 100%p-50dp to prevent the ball from clipping out of the container?
<?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"
>
<!--animate the ball-->
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="900"
android:repeatMode="reverse"
android:repeatCount="infinite"
/>
</set>
a bit hacky but here it is:
<?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"
>
<!--animate the ball-->
<translate
android:fromXDelta="0"
android:toXDelta="-100%"
android:duration="900"
android:repeatMode="reverse"
android:repeatCount="infinite"
/>
<translate
android:fromXDelta="0%"
android:toXDelta="100%p"
android:duration="900"
android:repeatMode="reverse"
android:repeatCount="infinite"
/>
</set>
basically what we do is to translate the ball both by the parent size and by its own size at the same time
Declaring animation like that will internally use Animation API. It's suggested to refrain from using Animation API if possible. I'm not sure whether it's possible to achieve that using by xml only, that's why I would suggest using Animator API instead, particularly ViewPropertyAnimator.
ball.setOnClickListener {
val animateToX = if (it.translationX == 0F) container.width - ball.width.toFloat()
else 0F
it.animate().translationX(animateToX)
}
This is the output:
To translation in x position (Left to right) upto a perticular distance, here 200f is the tranlation distance.
val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.start()
To show a smooth or slow tranlation use duration property (by default duration is 300).
val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.duration = 1000
animator.start()
To tranlate back to the same position use repetCout and repeatMode.
val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.duration = 1000
animator.repeatCount = 1
animator.repeatMode = ObjectAnimator.REVERSE
animator.start()
Left to Right Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/linear_interpolator">
<translate
android:duration="800"
android:fromXDelta="0%p"
android:toXDelta="75%p" />
</set>
Hope it will help you.
I am trying to code an animation that mimics a pulse animation that resembles this:
Concentrate on the inner blue circle (ignore the outer dark blue circle)
http://www.joedubs.com/wp-content/uploads/2016/01/breathe-now.gif
Here's what I managed to code so far:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:duration="2000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.8"
android:toYScale="0.8" />
<scale
android:duration="2000"
android:fromXScale="0.8"
android:fromYScale="0.8"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="2000"
android:toXScale="1.8"
android:toYScale="1.8" />
<scale
android:duration="2000"
android:fromXScale="1.8"
android:fromYScale="1.8"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="2000"
android:toXScale="1"
android:toYScale="1" />
</set>
While this works for a certain extent, the animation skips and stutters when it repeats again. Can someone tweak it a bit to mimic a smooth pulse animation? (grow and reduce)
You can add a ObjectAnimator like this, creating a pulsating effect in the reverse mode:
ObjectAnimator scaleDown = ObjectAnimator.ofPropertyValuesHolder(ImageView,
PropertyValuesHolder.ofFloat("scaleX", 0.5f),
PropertyValuesHolder.ofFloat("scaleY", 0.5f));
scaleDown.setDuration(300);
scaleDown.setRepeatCount(ObjectAnimator.INFINITE);
scaleDown.setRepeatMode(ObjectAnimator.REVERSE);
scaleDown.start();
Another way to achive that is have a CustomClass and override your OnDraw method, creating a effect of growing or decrease increasing a variable and recalling invalidate(). I did these in another post to make my button background grow, if you want to follow this way it can be useful for you.
Pulsating Button Android
In my Android app, I hava a scale animation.
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
it works fine. it scales the view from left to right. but I need to scale from right to left. so when I modify the fromXScale="-1.0", the animation does not happen and the view is scaled instantly without animation.
My animation xml for the reverse direction is given below:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="-1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
How can I animate the View from reverse direction? what is wrong with my code?
You should also add a android:fillBefore="true" in your animation.
The in the forward animation your view usually will have a scale of 1 which mean you don't need to set it at start. But in the reverse animation you start at default (ie 1) and animate to... 1
using Pivot solved the problem. Its a better practice to control direction of an animation through pivotX and pivotY.
I've had trouble finding good documentation about animations in Android, but I managed to get my animation working. What I'm concerned about the way I did it is efficiency/performance.
My goal was to have a cloud image move across the screen over and over and repeat forever. To do this I ended up putting 2 identical ImageViews positioned over each other and defining 2 animations:
cloud_slide_exit.xml:
<translate
android:fromYDelta="0"
android:toXDelta="-100%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
cloud_slide_enter.xml:
<translate
android:fromYDelta="0"
android:fromXDelta="100%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
I applied the first animation to "image1" and the second to "image2." The first animation moves "image1" from right (on-screen) to left (off-screen) while the second animation moves "image2" (which starts off screen) from right (off-screen) to left (on-screen). The end result when you view both animations is that the image moves across the screen. When it reaches the left end of the screen it will start coming from the right side of the screen. This is the only way I could think of doing this.
Is there a more efficient way to go about doing this animation? I'd like to find a more efficient way because I actually have 3 clouds moving which means that I have 6 ImageViews/TranslateAnimations.
replace your code by following code:
cloud_slide_exit.xml:
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
cloud_slide_enter.xml:
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
I'm very close to getting a "coin flipping" animation to work, but due to the limitations (bugs?) in the current Animation system - I cannot find a way to show BOTH sides of a coin flipping in the air.
For example, I have the following Animation .XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:repeatCount="17"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="60"
/>
<scale
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="2.0"
android:fromYScale="1.0" android:toYScale="2.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
<translate
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="-150%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
</set>
This "fakes" a flipping animation by scaling the coin on the Y-axis and reversing it on a loop. In combination to this, there's a scale to make the overall animation bigger, while also translating it up and down. But it is only ever gonna show the one side of the coin.
I tried having two of these animations, each side of the coin, running at the same time, but I cannot find a way to stagger them due to the REPEATCOUNT not working when applied to an AnimationSet. Otherwise I could introduce some kind of delay after one anim (and before the other one) so they alternate, giving the illusion of a coin flipping.
Does anyone know any way I can tweak this to get the desired result?
I had thought of giving up and doing a frame-based anim (pre-render the flip as frames), but it appears you can't mix Frame & Tween anims, so I'd lose the flip "height" and "distance" effects.
(I have another issue when it comes to the coin landing - e.g. the final result is random, but I'm hoping I can switch in the actual result at the end?)
Thanks in advance!
I recently wanted to implement something like this for a project. I finally came up with a solution and the result was good enough. Hope it helps someone else who is trying to achieve the same animation.
I uploaded the result as a gist on GitHub.
For a preview of the animation click here.
For the full android studio project visit our CoinToss repository.
I was looking for something like this myself, even with the scaling of the image so it appears the imageview is getting closer to the screen.
I combined your animation with this solution to do exactly what you wanted and its fairly lightweight, missing out the need for multiple views.
https://github.com/Lojko/Booty/blob/master/src/game/booty/BootyGameActivity.java
Changed Location of the Original Link: http://www.jasoncavett.com/2011/05/changing-images-during-an-android-animation/#comments
See the FlipCoin class and how its used, I have an animation already existing (created in the same way as detailed by the link)
This code shows the same procedure
http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html