Skip to main content

Posts

Showing posts with the label devbytes

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 (...

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'...