× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Android library to create easily cool animations

Xaver Kapeller
Mar 13, 2015
<p>Creating animations itself is very easy. You don't need a library for that. There are two options which fit most situations, there are other ways to animate stuff but these are the most important ones:</p> <ul> <li>View Animations</li> <li>Object Animator</li> </ul> <p>There is not much of a difference between those two in terms of how they are used but they can do different things.</p> <p><strong>1) View Animations:</strong></p> <p>For a view animation you first have to write an animation xml. In it you describe what the animation should look like and how long it lasts. You can of course also create those animations programmatically, but creating them in xml is preferable in most situations. For example here are two animation xmls, one slides a view down from the top and the other fades a view out.</p> <p>slide down:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;translate android:fromYDelta="-100%" android:toYDelta="0%" android:duration="1000"/&gt; &lt;/set&gt; </code></pre> <p>fade out:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;alpha android:fromAlpha="1" android:toAlpha="0" android:duration="700"/&gt; &lt;/set&gt; </code></pre> <p>Than you have to load the Animation like this:</p> <pre><code>Animation slide = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down); </code></pre> <p>And then you can apply the animation to your view like this:</p> <pre><code>linearLayout.startAnimation(slide); </code></pre> <p>You can combine those animations in one xml, just put multiple translate/alpha/etc. tags into one set tag. You can delay the start of one animation in the set by setting the <code>startOffset</code> like this:</p> <pre><code>android:startOffset="500" </code></pre> <p>For completeness: This is how you would create a fade out animation programatically:</p> <pre><code>Animation fadeOut = new AlphaAnimation(1, 0); fadeOut.setStartOffset(offset); fadeOut.setDuration(duration); </code></pre> <p><strong>2) Object Animator:</strong></p> <p>Object Animators can again be created in code and xml, but xml is in most cases preferable. This is what a fade out animation would look like with an Object Animator:</p> <pre><code>&lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:propertyName="alpha" android:valueType="floatType" android:valueFrom="1.0" android:valueTo="0.0" android:duration="1000" /&gt; </code></pre> <p>Object animators may look a bit more complicated in the beginning, but there is not much of a difference in the xml. One thing that arguably makes ObjectAnimators preferable to View Animations is that ObjectAnimators are potentially a lot more powerful as they can animate pretty much any property of any object. For example the following animation will rotate a view around it's Y axis and not many people know that something like this is even possible:</p> <pre><code>&lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="rotationY" android:valueType="floatType" android:valueFrom="0.0" android:valueTo="360.0" android:duration="5000"/&gt; </code></pre> <p>And this is how you would create the same animation programatically:</p> <pre><code>ObjectAnimator animation = ObjectAnimator.ofFloat(view, "rotationY", 0.0f, 360f); animation.setDuration(5000); animation.setInterpolator(new AccelerateDecelerateInterpolator()); animation.start(); </code></pre> <p>The result looks like this: </p> <p><img src="http://i.stack.imgur.com/v6Lfd.gif" alt="enter image description here"></p> <p>You can apply an ObjectAnimator animation from xml like this:</p> <pre><code>AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(getActivity(), R.animator.rotate_axis_y); set.setTarget(targetView); set.start(); </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/22614156/Android%20library%20to%20create%20easily%20cool%20animations/22614257">Stack Overflow</a>.</p>
comments powered by Disqus