Post navigation

One of the coolest thing in BB10 is the possibility for an app to display informations in it’s Active Frame when the app is minimize. If you’re building your first app, you might want to add Active Frame support, but looking at the official documentation can discourage some of you because it looks hard to code: having to deal with C++, creating a custom class, inherit from SceneCover… For a new developer, this can look like an impossible task.

Fortunately, there’s an easy way to create an Active Frame using almost only QML, with only a few lines of code.

First, let’s register SceneCover and AbstractCover in C++ so that QML knows what we’re talking about. Add this at the top of your applicationUI.cpp file

Animations are perfect for simple games, so let’s create one right now. The game we’ll be building is called ‘No Fly Zone’ and consist of a fly flying around the screen that we need to kill. First, we’ll need a fly image, so I’ve found this one from http://www.openclipart.org:

We’ll separate this image in two parts : the body and wings. Save those 2 images in ‘assets/images/’ folder (you’ll need to create ‘images’ folder).

To make the wings flap, we’ll put both images on top of each other and then set a small back and forth rotation transition to the wings. Let’s create a custom component for that fly and name it FlyImage.qml :

So now we have a fly flying randomly around the screen. Only thing left to do is handling tap event for when the user hit the fly and creating a score board, and there you have a simple game using Cascades built-in animations.

Nowadays, there’s a lot of mobile app developers and your apps need to stand out to catch the user’s attention. Most users like to interact with the app, and animations can bring this interaction to another level, not only letting the user touch a component on the screen and have a reaction, but also having this component to move, scale, fade or rotate to create a real sense of interaction and fluidity.

Hopefully, Cascades makes it easy to use animations with only a few lines of code.

IMPLICIT AND EXPLICIT ANIMATIONS

Cascades support 2 types of animations, implicit and explicit animations. Implicit animations doesn’t need any coding and can be used on 2 types of properties :

Properties that determine how a control looks, such as rotation, translation, and opacity

Properties that determine the layout of a control in a container, such as preferred width and preferred height

So if you set the opacity of a Button to 0, it will fade out gradually instead of becoming invisible right away. Cascades takes care of the animation, you don’t have to write any line of code for this fade out animation.

EXPLICIT ANIMATIONS : FADE, ROTATE, TRANSLATE, SCALE

If you want to have more control on the animation used, then you’ll want to look into explicit animations, where you can set from and to values, duration, easing curve, a delay before the animation start or number of repeat for your animation. Let’s take a fade transition, we want a Button to fade slowly from 1.0 to 0.0 and make it repeat forever :

So we have a better control of the animation with an explicit animation. There are 4 types of animations that can be controlled with explicit animation :

Fade transition

Rotate transition

Translate transition

Scale transition

GROUP ANIMATIONS

It’s even possible to group animations together and make them perform one after the other or all at the same time. Those are called SequentialAnimation and ParallelAnimation. Let’s try both to see the difference.

For now, all the animations used were a little bit useless, but they showed possibilities. For a real life example, let’s say we have a freemium app and we want to invite the user to upgrade to Pro version, we can do it like this :

What’s happening here is when a certain action is performed by the user, it shows a semi-transparent black screen (opacity 0.7) and then 2 buttons comes from out of sight to the middle of the screen, an ‘Upgrade’ button and a ‘No Thanks’ button. User have to click either one to continue to use the app.

Animations can be a lot of fun in Cascades, it’s powerful, simple to code and look nice. It allows your app to stand out from the crowd, so go ahead, and play with it!