friz and the Illusion of Life

Image of animated bouncing ball

friz—a Flexible Animation Controller for JUCE

As is often the case, I found myself working on a personal project and had some UI elements that really wanted to have some life to them on the screen.

I tucked into the JUCE documentation expecting to see something that I could use to easily add some personality to the interface, and…didn’t find what I was looking for. There’s a ComponentAnimator class that supports moving a single component from one set of coordinates/bounds to another linearly, and also modify the component’s alpha value to have it fade in or out.

I was looking for something…more expressive.


CSS Zentangle

zentangle elepahant, patterns, inspired by a recent trip to Thailand

Thailand, elephants and Micron pens

Making friends in Thailand.After returning from a three month journey through Southeast Asia, I’ve been doodling elephants. Lots and lots of zentangle elephants. I attribute this to the set of Micron pens I bought in Thailand, and wonder if these fine writing instruments are even capable of drawing patternless, non-tropical animals. Testing that theory hardly appeals to me since I’m still in elephant mode. So instead, I decided to challenge myself in other ways by creating the world’s first purely HTML/CSS “hachyderm”.

See what I did there?  (more…)

iOS to Android: Slide In Animations

Photo by Masakaze Kawakami on Unsplash

Porting an iOS app to Android means frequently translating between the divergent UI paradigms of the two operating systems.  Both platforms encourage developers to follow certain interface guidelines, but clients sometimes prefer replicating a familiar interface.  Thankfully, Android offers fairly deep customization.

For one port, the Android app needed to use the same view transition animation as its iOS counterpart.

On iOS, the standard navigation stack defaults to animating a detail page transition (called by [UINavigationController  pushViewController:detailController animated:YES]) by sliding the detail view in from the right, and the root view out to the left.  Navigating back to the root view ([UINavigationController popViewControllerAnimated:YES]) reverses the animation, sliding the detail view out to the right and the root view in from the left.

On Android, the same transition (handled through a FragmentTransaction) defaults to a zoom animation, or sometimes a slide up animation.  How can Android mimic iOS’ transition animation?


Radically Cross Platform: Animation

Animated gif image of parrot flying.

Image of Linnet Kineograph from 1886(This is a continuing series sharing design and implementation notes for a cross platform 2D game or graphical app engine I wrote in C# using Xamarin and Monogame.)

It was hard to choose next between covering the animation system, physics engine, or custom scripting language, as each is essential in its own way, and they’re also tightly integrated. But let’s start with animation. (more…)