DevBytes: Cartoon Animation Techniques

This time, we wrap up the series on cartoon animation techniques with a demo that shows a few of the techniques in the context of a larger application. Because it's nice to know how to write the code, but you might also be wondering why you might want to.

For some real-world context, you could also check out games such as Candy Crush Saga (a horribly addictive game I've gotten sucked into that's less like casual gaming and more like casual crack). It uses a veritable plethora of cartoon animation techniques to keep the player engaged with the game and disengaged from their life.

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/ToonGame.zip

YouTube: https://www.youtube.com/watch?v=8sG3bAPOhyw&list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0

DevBytes: Squash & Stretch

Cartoon animation uses a technique called "squash & stretch" for achieving different effects of objects interacting with their environment.

This episode shows how we can use similar techniques to get more organic and lively animations in user interfaces.

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/SquashAndStretch.zip

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

Or, in illustrated form:

DevBytes: Anticipation & Overshoot, Part 2

Like my previous DevBytes episode, Anticipation and Overshoot, Part I," this episode covers cartoon animation techniques for making UI elements more engaging and playful. The code in this episode shows how to change and animate how a button is drawn to make it seem more alive and organic.

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/Anticipation.zip

YouTube: DevBytes: Anticipation and Overshoot - Part 2

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

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

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

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

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

DevBytes: Layout Transitions

The LayoutTransition class (added in Android 3.0) enables easy fade/move/resize animations when items are added to or removed from a ViewGroup, usually with just one line of code. This video shows how this works and also shows the new ability added in JellyBean (Android 4.1) to animate other changes to the layout as well, not limited to items being added or removed.

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

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

DevBytes: PictureViewer

PictureViewer: How to use ViewPropertyAnimator to get a cross-fade effect as new bitmaps get installed in an ImageView.

TransitionDrawable is a handy and easy facility for cross-fading between two drawables. But if you want to cross-fade between an arbitrary set of images, you might want something more general-purpose. Here's one approach.

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

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

DevBytes: Request During Layout

Horrible things can result from calling requestLayout() during a layout pass. DON'T DO THIS.

The demo that I wrote to show why this is bad seems very contrived, but I have since run across application code that did nearly the exact same thing, explicitly calling requestLayout() during onLayout(). Ugh. Typically, the cases where this problem occurs are a tad more subtle than that.

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

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

DevBytes: ListView Deletion

How animating ListView views can lead to artifacts if those views are recycled before you animate them.

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

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

DevBytes: ListView Animations

How animating ListView items can lead to problems as views are recycled, and how to perform these types of animations correctly with new API added in Jellybean.

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

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

DevBytes: KeyFrame Animations

How to use AnimationDrawable to construct a keyframe animation where each frame is shown for a specified duration.

YouTube: http://www.youtube.com/watch?v=V3ksidLf7vA

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

DevBytes: Bounce Animations

Simple uses of ValueAnimator, ObjectAnimator, and interpolators to control how a shape is moved around on the screen.


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

Video: https://www.youtube.com/watch?v=vCTcmPIKgpM

DevBytes: Any Requests?

"What is it you wanna hear?"

- Lynyrd Skynyrd

In case you don't follow me on Google+, or you missed my recent G+ post about DevBytes requests, I'll reproduce it here. Comments are welcome either on the original G+ post or here; I'll see them in both places. Writing your suggestion on a nearby tree, probably not as helpful. Scribbling it on a piece of paper and putting it in a bottle that you toss in the ocean, not so much. Shouting it out to the wind to carry it to my ears, not really. Just stick to comments on these posts. Boring, but slightly more effective...

Hey #android developers:

Laundry list time. Now that I've started doing these DevBytes videos (something I've been planning on for a while now), it would be great to hear from you about tutorial topics that you would find helpful. I have a few more episodes in the can that will roll out over the next few weeks, but eventually I'll write some more apps and record shows around them, so I'm up for ideas on what you'd like to see.

Terribly important caveats:
- In general, I code/write/present around the topics of graphics and animation. These are the technology areas, and Android areas, that I'm most familiar with, and where I could be most helpful, because I might have some understanding of the issues to begin with. Having me do a tutorial on, say, location providers, or fragments, or activity lifecycle would take me more time to create something useful and probably would not result in something as useful to you.
- The whole idea of DevBytes (and most of the demos I ever write for presentations) is to be small and focused. If I have to explain, and you have to understand, unrelated bits about the application's architecture in order to understand the point I'm trying to make, I've lost. So rather than giving a tutorial on, say, the optimal architecture design for event processing in a photo viewing application, I'd rather write an app that shows how to display the photos quickly, or load them optimally, or filter them cool-ly. I've sat through presentations with huge impressive applications before, and walked away knowing nothing more than when I got there; I'd rather focus on the little things and build them up one by opne. Maybe it's just me, but that's the way I prefer to do these things.
- I'm not going to get to everything on this, or any, list. So I'm not necessarily going to get to your pet item (sorry!). The items I get to will be because of a combination of how I could contribute something useful, how I could incorporate it into an app and a show, how broadly applicable I thought the problem/solution was, what time of year it is, how warm it is, and whether I completely forgot that you requested it.
- Don't bet on this happening Immediately. It takes me a while to get to these apps, a while to set up a time to shoot the shows, a while to do the minimal post-processing that they take (mostly slapping a banner on each show and supplying a professional actor's voice, of course), and a while for them to roll out into the stream. So these are not short-term "how do you do this, I need it for my homework assignment next week?", but rather medium-term "I'd love to understand this eventually in case I have homework related to this next term" topics.

Enough constraints for you?

So, on with the ideas. Post something you'd like to see an explanation of below. If you like someone else's suggestion, +1 it to give me a [very] rough metric of its popularity (which I will use as a random filter in figuring out what to do in the future).

p.s. Don't worry if you don't have suggestions; I can always come up with some of my own, certainly enough to keep making these shows. I'm more wondering whether there are things that application developers would like to know about that I wouldn't have thought of all on my lonesome.