"Buttery" fragment animations in "pre-butter" Android - android

I'm using Google's compat lib to enable fragments in my app (Target SDK 16, Min SDK 8) for devices running on 2.2+. From a functional point of view this runs all fine, but the performance of the view animations that are set up via
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.setCustomAnimations(inTransition, outTransition, popInTransition, popOutTransition);
where inTransition is a simple translation like
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator">
<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="#integer/animation_duration" />
</set>
and outTransition is a fade animation like
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="#integer/animation_duration" />
</set>
is just plain awful on my Galaxy S2 (4.0.3), i.e. for an animation that lasts about 350ms I'd say approx. half of the frames are dropped. I noticed that the performance gets a little (but not much) better if I disable the fade out, but then of course the complete effect of the animation is gone, because the origin fragment turns black instantly. I also tried a release version of the code, but the performance did not improve either.
What am I doing wrong? How can I make fragment animations smoother?

The first thing I'd recommend is enable hardware acceleration in the Manifest. This will only be enabled on devices with API 3.0+, but will significantly improve performance. With API 11 (3.0) and up, you can also take advantage of View LayerTypes. Set whatever you're animating to LAYER_TYPE_HARDWARE then set it back to LAYER_TYPE_SOFTARE or LAYER_TYPE_NONE upon completion.
Pre-honeycomb it becomes far more difficult. You don't have hardware acceleration at all. You may be better off checking if(api < 11) *use this animation* else *use this animation*. Sliding animations tend to work fairly smooth. Alpha animations are a burden on the CPU, especially when views have many layers. Apply any animation on the top-most parent view you can get away with (you're animating entire fragments so it's already happening).

Related

Shared Element in Marshmallow and Oreo have different result

I want to make a Activity of browsing pictures which likes the WeChat in Chatting Activity by shared element.
But I found that. Using the same code , the animation is very smooth in the my first phone(Android 6.0). And in the second phone(Android 8.0), the animation has a little unsmooth.
Have you ever encountered such a situation? Do you know the reason? Any Solutions?
I found in my demo, if your activity is as follows
getWindow().setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.changebounds_with_test))
And your transition is as follows
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500">
<changeBounds/>
<changeImageTransform/>
<changeClipBounds/>
<changeTransform/>
</transitionSet>
The point is the duration which is greater than 300ms(default duration). Then the animation of Shared Element is unsmooth in Oreo.
But I had not set SharedElementEnterTransition in my project, the animation is also unsmooth in Oreo.
I think my project has any logic of code that influence the animation, which leads to the duration greater than 300ms.
Now I don't use shared element, and use value animation to make transition animation.

Unknown behaviour of Object Animator

I am trying to animate a view using ObjectAnimator defined in xml file. What I see is the animation rotates first half of the view(left part if you see the screen), but there is no animation in second half of the view. I am using Samsung phone(Lollipop version 5.0.1) to test the same.
My xml is:
<objectAnimator
android:valueFrom="0"
android:valueTo="-90"
android:propertyName="rotationY"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:duration="#integer/card_flip_time_half" />
Can anyone explain why this is happening?
Do you want a complete rotation? In that case use valueTo="360".
Or do you want it to rotate back, then use REVERSE.
There are a lot of things to do with property animations. Check the docs-
http://developer.android.com/reference/android/view/animation/Animation.html#REVERSE
http://developer.android.com/reference/android/view/animation/Interpolator.html

Genie Effect Animation in Android

I have requirement of implementing Genie Effect animation shown below.
Reference:
https://github.com/Ciechan/BCGenieEffect
I could not understand where to start. Can anyone suggest me some ideas?
I tried some code with basic animation like translation and scaling but not succeed.
I have implemented this code with Game Library AndEngine
Kindly find the attached code below that will help u to move further..
you can use this code as fragment to ur android code OR make instance
of this code and again extend from activity for reusing this code.
This zip file contain 2 project :
Code implementation for above effect and
AndEngine library which u need to add to my project .
Click here to Download My Code
I tried to make animation like Genie Effect. But its not as perfect as your image show, but It will help you during your research.
Example Video of demo.
Create anim folder in res. copy falling.xml
falling.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator" >
<translate
android:duration="750"
android:fromXDelta="0%p"
android:fromYDelta="10%p"
android:toXDelta="0%"
android:toYDelta="50%" />
<scale
android:duration="750"
android:fillAfter="false"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="100%"
android:toXScale="0"
android:toYScale="0" />
</set>
Use following java code to apply animaiton on button click.
final Animation animationFalling = AnimationUtils
.loadAnimation(GenieEffectActivity.this, R.anim.falling);
imgview.startAnimation(animationFalling);
Hope it helps you.
I have a browser solution.
Check out https://github.com/kamilkp/geniejs
and http://kamilkp.github.io/ for demo.
It works in every browser including mobile (not always smoothly on firefox though). It supports Genie Effect transitions in every direction (top, bottom, left, right). It works even if the target html element is a child of some container that has overflow auto or hidden. It is library agnostic itself, but i also wrote a convenience jQuery plugin. And if you also include the html2canvas library in your project, the plugin lets you animate HTML elements with genie effect (expanding example here: http://kamilkp.co.nf/genie/canvas/)
The only requirement for the browser is that it needs to support CSS transitions. It's a pure javascript + CSS solution.
PS. You can use Phonegap to create an Android app from a web application.

WebView loadDataWithBaseUrl - weird issue in android 4.0.3

In my project there are two WebViews and I am switching these WebViews alternatively to get a smooth animation while loading my url. When I am using Webview.loadUrl() method, it works fine in all devices. But when I am using the same code with loadDataWithBaseUrl() then its not working in 4.0.3 but it's working fine in 2.2, 2.3, 4.0.4, 4.1 devices.
Is this a bug jumping from WebKit?
I tried so many ways to get this done but no way out. I am really frustrated and messed-up with this.
It will be so helpful if someone could show me a right way to get this done.
You can try to add these property with webview-
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
and can use animation because its working well for me like-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:interpolator="#android:anim/cycle_interpolator"
android:fromXDelta="100%p" android:toXDelta="0" android:duration="1000"/>
</set>
There appears to be a bug with 4.0.3 altogether with WebView animations.
What fixed it for me was removing alpha from animation.
Basic translate animation is behaving correctly.

Android R.anim,shake not found

I have followed the tutorial at:
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/Animation1.html
The code is fine until I get to:
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
It would appear that R.anim does not exist, eclipse suggests creating a field in in type R or creating a constant in type R. Correct me if I'm wrong but I don't believe either are the solution.
I am running Google APIs, platform 2.2, API 8 - I have tried higher levels but it didn't make a difference. All that I am trying to accomplish is a button shake on click...
Any feedback is appreciated,
Thanks
You need to create the shake animation xml file. It will reside in
/res/anim/shake.xml
and it would look like this:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0" android:toXDelta="10" android:duration="1000"
android:interpolator="#anim/cycle_7" />
You then also need the interpolator (cycle_7.xml):
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="7" />
These files can both be found in
/path/to/android_sdk/samples/android-15/ApiDemos/res/anim

Categories

Resources