Easing into Cascades Animations

OverView

One of the many elements that makes the Cascades UI so beautiful is the widespread use of animations. Even without programming it yourself, animations are an integral part of your Cascades application. For example, when you pull in a sheet it slides in, or when you push a new pane within a NavigationPane, you see the built in animations in action.

There are many more subtle animations in Cascades that happen automatically, and I am not going to attempt to name them all because I would be here all day. We will just agree that animations are everywhere in Cascades. With that in mind, using any extra animation can easily become overwhelming to the end-user.  However, adding subtle animations in appropriate places in your app can really improve the overall UX and really give your app a premium feel.

Let's Get Started

So, with all this built in animation why would you want more? While it is true that you could easily overdo it with animation upon animation, adding subtle animations in appropriate places can really give your app a premium feel. Let's look at an example from the BlackBerry Cascades documentation.

freeform titlebar

Free-form title bar containing expandable content

The above example is shown in the official docs (http://developer.blackberry.com/cascades/reference/bb__cascades__titlebar.html) and demonstrates how to have an expanable area that drops down from the TitleBar. An example of this in action can be seen in the native BlackBerry World app when viewing any top list.  

IMG 00000147

There are some key differences between the example above and the implementation in the BlackBerry World app, and it's those differences that give the BBW implementation a more premium feel. The list is styled a bit more and uses check marks instead of radio toggle, and there is an arrow in the top right that flips based on whether the exanable area is expanded or collapsed (similiar to in a dropdown).

Let's take the code from the top example from the the official docs...

Page {
    titleBar: TitleBar {
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout { orientation: LayoutOrientation.LeftToRight }
                leftPadding: 10
                rightPadding: 10
                Label {
                    text: "Show expandable content"
                    textStyle {
                        color: Color.White
                    }
                    verticalAlignment: VerticalAlignment.Center
                    layoutProperties: StackLayoutProperties { spaceQuota: 1 }
                }
                CheckBox {
                    id: toggleExpanded
                    verticalAlignment: VerticalAlignment.Center
                }
            }
            expandableArea {
                content: RadioGroup {
                    Option { id: option1; text: "option 1"; selected: true }
                    Option { id: option2; text: "option 2" }
                    Option { id: option3; text: "option 3" }
                }
                indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                expanded: toggleExpanded.checked
                onExpandedChanged: {
                    toggleExpanded.checked = expanded
                }
            }
        }
    }
}

So in the above example a CheckBox is used to toggle the expansion and collapse of the expandableArea, and radio toggles are used to on the list items within the expandableArea. While this is fine, and gets the job done, why not style it a bit to make it a bit fancier? In the code below we take the example from the docs and do the following:

  • Replace the checkbox with an ImageView
  • Add RotateTransition animation to ImageView
  • Create and use a custom bool property
  • Dynamically change label to reflect the selected option

 

Page {
    titleBar: TitleBar {
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                leftPadding: 10.0
                rightPadding: 10.0
                Label {
                    text: radioGroup.selectedOption.text
                    textStyle {
                        color: Color.White
                    }
                    verticalAlignment: VerticalAlignment.Center
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                }
                ImageView {
                    id: toggleExpanded
                    property bool checked: false
                  
                    onTouch: {
                        if (checked == false) {
                            if (event.touchType == TouchType.Down) {
                            } else if (event.touchType == TouchType.Move) {
                            } else if (event.touchType == TouchType.Up) {
                                rt1.play()
                                checked = true
                            }
                        } else {
                            if (event.touchType == TouchType.Down) {
                            } else if (event.touchType == TouchType.Move) {
                            } else if (event.touchType == TouchType.Up) {
                                rt2.play()
                                checked = false
                            }
                        }
                    }
                    animations: [
                        RotateTransition {
                            id: rt1
                            duration: 150
                            toAngleZ: -180.0
                            fromAngleZ: 0.0
                            easingCurve: StockCurve.CubicIn
                        },
                        RotateTransition {
                            id: rt2
                            duration: 150
                            toAngleZ: 0
                            fromAngleZ: -180.0
                            easingCurve: StockCurve.CubicIn
                        }
                    ]
                    imageSource: "asset:///ic_to_bottom.png"
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center
                }
            }
            expandableArea {
                content: RadioGroup {
                    id: radioGroup
                    Option {
                        id: option1
                        text: "Option 1"
                        selected: true
                    }
                    Option {
                        id: option2
                        text: "Option 2"
                    }
                    Option {
                        id: option3
                        text: "Option 3"
                    }
                    onSelectedOptionChanged: {
                        rt2.play()
                        toggleExpanded.checked = false
                    }
                }
                indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                expanded: toggleExpanded.checked
                onExpandedChanged: {
                    toggleExpanded.checked = expanded
                }
            }
        }
    }
}

 

So there you have it. Import the zip attached to this post into the Momentics IDE and run it on your device to see it in action.  Tinker with the code and see what you can improve and/or create.

Relevant Links:

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top