Friday, July 19, 2013

DevBytes: Anticipation and Overshoot, Part 1

Some principles of cartoon animation can be used to provide more engaging and more interactive experiences in applications.

This episode demonstrates principles of anticipation and overshoot with a simple button click, showing how to animate changes in the button's appearance to make it interact more playfully with the user.

This and other cartoon animation techniques were discussed in the talk A Moving Experience at Google I/O 2013

Code: http://developer.android.com/shareables/devbytes/LiveButton.zip

YouTube: https://www.youtube.com/watch?v=uQ7PTe7QMQM


Friday, July 12, 2013

DevBytes: Curved Motion

This is a demo that +Romain Guy and I showed in our A Moving Experience talk at Google I/O this year, showing how to use the existing TypeEvaluator and Animator APIs to get curved motion for your animations.

In the real world, things don't move in straight lines. Moving items around on the screen should feel as natural as possible; sometimes curved motion can help.

This episode shows how to use the existing animation APIs to get easy curved motion for your UIs.

The helper classes come from an article I posted on my blog last year:
http://graphics-geek.blogspot.com/2012/01/curved-motion-in-android.html

YouTube: https://www.youtube.com/watch?v=JVGg4zPRHNE

Code: http://developer.android.com/shareables/devbytes/CurvedMotion.zip

Friday, June 28, 2013

DevBytes: Animating Multiple Properties in Parallel

Suppose you want to animate multiple properties in parallel on some target object. How would you do it? ValueAnimator? Multiple ObjectAnimators?

This episode covers different ways of animating multiple properties, and specifically covers the use of the lesser-known PropertyValuesHolder class.

YouTube: https://www.youtube.com/watch?v=WvCZcy3WGP4

Code: http://developer.android.com/shareables/devbytes/MultiPropertyAnimations.zip

Friday, June 21, 2013

DevBytes: Animating ListView Deletion: Now on Gingerbread!

In this episode, I tried to anticipate the question I knew would come up on my previous show about animating ListView deletion: "But how would I do this on Gingerbread?"

Here's how.

YouTube: https://www.youtube.com/watch?v=PeuVuoa13S8&list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0&index=1

Code: http://developer.android.com/shareables/devbytes/ListViewItemAnimations.zip

Friday, June 14, 2013

DevBytes: Animating ListView Deletion

It's Friday: must be time for another DevBytes episode.

Finally, here is the DevBytes episode around the ListView animation demo in the talk A Moving Experience that I gave with Romain Guy at Google I/O last month.

The code is nearly the same as that in the I/O talk, except I tweaked it to make it more general-purpose. Specifically, it no longer depends on the setHasTransientState() method (introduced in Jellybean 4.1) to keep the views around while fiddling with layout. Instead, it uses an adapter with stable itemIds, and uses those Ids to track where the content is before and after layout.

As written, the code is still dependent on Android 4.1, but that's only because of the use of ViewPropertyAnimator.withEndAction() method, which is really just syntactic sugar around adding a listener and running the end-action code in the onAnimationEnd() callback. So you could totally port this code all the way back to Android 3.1 (when ViewPropertyAnimator was introduced) or even 3.0 (if you use ObjectAnimator instead).

Watch the video. Check out the code. Play with ListView. Animate. Enjoy.

A Moving Experience: http://www.youtube.com/watch?v=ihzZrS69i_s

DevBytes on YouTube: http://www.youtube.com/playlist?list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0

Code: http://developer.android.com/shareables/devbytes/ListViewRemovalAnimation.zip

Friday, June 7, 2013

DevBytes: Custom Activity Animations

It's Friday: time for another DevBytes.

It's been a while, but they're back. At least until the queue runs out again and I write another glut of demos to talk about.

This episode, and most of the upcoming ones (teaser alert!) are around demos/code that we showed in A Moving Experience, the animation talk that +Romain Guy and I gave at Google I/O 2013.

Custom Activity Animations:
Window animations provide an easy way to animate transitions between activities. The animations can be customized to some extent, but there's only so much interaction between the launching and launched activities that you can take advantage of with the standard window animations.
This episode covers a different technique for fully customizable animations.

Video: http://www.youtube.com/watch?v=CPxkoe2MraA

Code: http://developer.android.com/shareables/devbytes/ActivityAnimations.zip

Friday, May 17, 2013

Google I/O Presentations Now Live

Romain Guy and I gave two talks at Google I/O yesterday which are now live on YouTube:

Android Graphics Performance: http://www.youtube.com/watch?v=vQZFaec9NpA



Slides for Android Graphics Performance are posted on Romain's blog.


A Moving Experience: http://www.youtube.com/watch?v=ihzZrS69i_s



A Moving Experience Slides:

The code from the animation demos will be posted soon, probably in conjunction with future DevBytes episodes.