Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10
Accepted Solution

Can an Action Item trigger an Animation?

Hey All!

 

I cant get this action to trigger the animation I want. :smileyfrustrated:

if you could tell me what I am doing wrong Id highly appreciate it.

 

I have a main navigation page(holds my actionbar actions) and a container page with my animations.

my animation page can manipulate items on my Nav page but not vice versa. 

 

 

thanks

 

-Ali

 

 

here are my 2 qmls:

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        ControlDelegate {
            id: controlD
            source: "animationPage.qml"
        }
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    animation1.play()
                }
            }
        ]
    }
    onCreationCompleted: {
        console.log("NavigationPane - onCreationCompleted()");
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 animation page:

// animationPage.qml
import bb.cascades 1.0

Container {
    id: animPageContainer
    background: Color.Black
    Container {
        id: animationContainer
        background: Color.White
        opacity: 0
        minHeight: 100
        maxHeight: 100
        minWidth: 100
        maxWidth: 100
        animations: FadeTransition {
            id: animation1
            fromOpacity: 0
            toOpacity: 1
            duration: 300
            onEnded: {
                playAction.enabled = false
            }
        }
    }
}

 

 

 

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

Just by the code you posted, you are calling animation1.play(), but there is no such thing as animation1.

 

Since your animation is in a separate QML, the way I did it for my apps was that I would have function in my animation QML that would call the play() function, therefore I would be able to call it in my main.qml using the id of that particular object.

 

For example if I had an Arrow.qml that has some sort of animated arrow when my page first starts, in my main.qml I would have a section

Page {
...
  Arrow {
    id: Arrow1
  }
onPageCreated:
{
  Arrow1.myPlayAnimationFunction()
}

 

Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

Thanks for the response!

 

On my animationPage code the animation is called "animation1".

 

I see what you did on yours, and that would work but not in my case unfortunately. On my apps launch I do trigger animations BUT i really am trying to use an action item on the actionbar to trigger another animation without leaving the current page.

so if I were to have a qml with a arrow animation that loops infintely to trigger oncreated, Id like an action button to trigger a second arrow. I am really just trying to avoid putting a button within my animation page, think it'll look better on the actionbar. 

 

what I find interesting is that I can have the end of an animation(on animationPage) trigger to disable an action item that is within the mainPage code, but for whatever reason, I cant send commands the other way...

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

Doh, quick eyes, but didn't catch the animation1 in the code above.....

 

Although my example used onPageCreated, I was thinking it would still apply to onTrigger for the actionitem.

Are you sure main.qml has the right or knowledge to call animation1?....hence my original idea of creating a function in AnimationPage that would expose that functionality to main.qml.....

 

I'm not an expert by any means though, and I'm just throwing ideas out!

Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

oooh I see what you mean. I definitely dont think my main has the right, as you put it, to call that. so in my case would it be this:

 

Page {
...
  ControlDelegate {
    id: ControlD
source: "animationPage.qml" } onPageCreated: { ControlD.animation1Function() }

 ???

 

Please use plain text.
Developer
Ebscer
Posts: 867
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha

Re: Can an Action Item trigger an Animation?

Looks to be a scoping issue.

 

You may want to try putting an intermediate function in your animationContainer


Read my thoughts on BlackBerry Development at news.ebscer.com
Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

please forgive my ignorance, but what do you mean by intermediate function? tried searching the api reference for it but no dice...

 

 

thanks

-Ali

Please use plain text.
Developer
bcs925
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30

Re: Can an Action Item trigger an Animation?

To have the animation in a separate QML page, you need to expose the id to to the main page by attaching the qml file to the main page and creating a property alias for the animation1 element.  Which would be a lot extra work for such a short "custom qml page" (what you have as animationPage.qml). Plus you need to tie the animation to whatever element it is that is going to animate, right?

 

Why not define the animation within the main.qml and it should work.  Something like:

 

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        Container {
            ControlDelegate {
                id: controlD
                source: "animationPage.qml"
            }
            Label {
                text: "HelloWorld"
                opacity: 0.0
                animations: FadeTransition {
                    id: animation1
                    fromOpacity: 0
                    toOpacity: 1
                    duration: 300
                    onEnded: {
                        playAction.enabled = false
                    }
                }
            }
        }
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    animation1.play()
                }
            }
        ]
    }
    onCreationCompleted: {
        console.log("NavigationPane - onCreationCompleted()");
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

thanks for the response bcs925!

 

Unfortunately the ControlDelegate ends up being the page so it wont allow another item like a label, container, imageview, etc... there has to be a way to target an item on that page though, right? 

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

What you posted in response to me should work. Did you try that yet? The function in animationPage should call animation1.play()
Please use plain text.