Keyframe Animation

Today we announced the beta launch of Pixate Engine 1.1 for iOS. There are a few notable features, like our new Pixate Bootstrap support, but another I want to focus on today is CSS transitions and keyframe animations. Yes, native iOS animation using CSS.

One quick caveat... since these features are still in beta, many properties and features are not yet finished, but they will quickly be added as we approach the release of 1.1. Ok, let's dive right in!

Transitions

Basically, CSS transitions allow you to specify how to cross-fade to the properties that you specified in a CSS block. That is, if you have a different style between two states, normal and highlighted for example, you could specify if you want that change to happen instantly or over a period of time. To support Pixate Bootstrap, we first started by adding highlighted state support to the text-field type. For example:

text-field:normal {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

text-field:highlighted {
    border-color: rgba(0, 148, 217, 0.8);
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 148, 217, 1.0);
}

Now let's say you want to not 'snap' between those two states, you want to cross-fade between them over 1 second. Let's add a single line to each block saying we want to transition the box-shadow between the two states:

text-field:normal {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: box-shadow 1s linear;
}

text-field:highlighted {
    border-color: rgba(0, 148, 217, 0.8);
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 148, 217, 1.0);
    transition: box-shadow 1s linear;
}

That's it, now when you enter the text-field, it will animate the transition. Here's what it might look like (this animated GIF plays slower than real-time):

You can transition one property or comma delimit multiple properties. The final version will support 'all': specify 'all' to transition all properties (e.g. "transition: all 1s linear").

Important: Pixate Engine 1.1 Beta 1 only supports transitions on UITextField (text-field). Transitions will be available in both the Free and Paid versions of Pixate Engine.

Keyframe Animation

Taking animation to the next level is keyframe animations. This will allow you to change properties of any view over time. Let's take the sample you saw above and slide the buttons in form left to right and right to left, respectively.

First we need to define some keyframe animations, let's do that now:

@keyframes move_right {
    0% {
        left: -200;
        opacity: -1;
    }
    100% {
        left: 160;
        opacity: 1;
    }
}

@keyframes move_left {
    from {
        left: 500;
        opacity: -1;
    }
    to {
        left: 160;
        opacity: 1.0;
    }
}

Notice we named our keyframes move_right and move_left. You can specify the from and to by name or by percentages. Anything in between those has to be specified in percentages (an example follows). Now let's apply those two keyframes to our two buttons.

#button1 {
    animation-name   : move_right;
    animation-duration : 2s;
}

#button2 {
    animation-name   : move_left;
    animation-duration : 2s;
}

That's it, now when the view becomes active, the animation is triggered (the animation repeats automatically):

As of Pixate Engine 1.1 beta 1, you can animate the following properties on any view:

• left
• top
• opacity
• rotation
• scale

Note that rotation and scale are not standard and those will change. Rotation is currently on the Z axis only. Let's apply a simple keyframe animation...

@keyframes rotate {
    from {
        scale: 0;
        rotation: 0;
    }
    75% {
        scale: 1.5;
        rotation: 6.5;
    }
    to {
        scale: 1;
        rotation: 6.2;
    }
}

#vectorView {
    animation-name   : rotate;
    animation-duration : 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

...to a SVG vector file rendered automatically by Pixate Engine:

[[toucananim.gif]

Now let's create a slightly more complex keyframe and apply it to an image in our table-view cells. We wanted a simple 'bubble' effect when the image was displayed. Here's a multi-step keyframe animation:

@keyframes bubble {
    from {
        opacity: .5;
        scale: .2;
    }
    50% {
        scale: 1.1;
    }
    65% {
        scale: .9;
    }
    75% {
        scale: 1.1;
    }
    85% {
        scale: .95;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

This is what it does on this fully CSS-styled table-view (the animation repeats automatically):

Conclusion

As you can see, you can create visually stunning effects with just a few lines of standard CSS. We feel this is a major shift in making it exponentially easier to achieve these sorts of animations with minimal coding on native apps.

If you find bugs or other issues, or if you'd like to suggest what we add or work on next, please add them to our issue tracker.

If you need support, just email Pixate Support at [email protected].

You can read more about CSS3 transitions and animations on the W3C site:

• CSS3 Transitions
• CSS3 Keyframe Animation

[Published: 2013-04-08]