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

People in this conversation

  • Guest (jackson)

    Buffets Near Me Now: We all know that chinese takeout near me foods are more healthy and easy to digest kind of meals. That is why they are calling Buffet because you get to see more than 150 dishes in one place, so you get to choose whichever you like most. Sometimes it is challenging to search Buffets near me now

    Like 0 Short URL:
  • I too took a look at Cascades Animations and they were looking incredible. The lads at edubirdie talked about it all and I was impressed. Thanks for teaching me all this.

    Like 0 Short URL:
  • Guest (Alina Olive)

    I cherished and truly delighted in perusing this article and I trust that others will like it as well. Do My Homework For Me Online | HomeworkClock.com. I should state they have posted such a decent article with and value them so they will then speak to and thought of all the more great diversion and subject next time.

    Like 0 Short URL:
  • Guest (Anna)

    There are a few key differences among the instance above and the implementation within the BlackBerry international app, and it's those variations that give the BBW implementation a more top rate experience. The list is styled a piece extra and uses check marks in place of radio toggle. <a href="/https://www.courseworkcamp.co.uk/write-my-coursework">Write My Coursework</a>

    Like 0 Short URL:
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top