Cascades Development

[Dredvard]

In my app I have defined all my animations in QML.  How do I now dynamically change them (either from QML or C++)

So, for example:

Container

{

animations: CustomAnim1{

}

}

}

How do I dynamically change that to CustomAnim2?

[lingBB10Dev]

can you describe more how you would like to change different animations?

If you just want to stop first one and start the second one, then, you might just call "stop()" for the first one and "play()" for the second one?

You might want to check out some example apps?

https://github.com/blackberry/Cascades-Samples

ex.: cowbell, cascadescookbookqml

[hrbuckley]

IingBB10Dev is right but some expansion may be helpful.

You may define multiple animations for each transition. I have only done this in C++ but it may be possible in QML as well. You can then stop and play the animations at the appropriate time. If you simply set a property for which there is an implicit animation, the implicit animation will be used. There is a C++ call to disable implicit animation for the next property value change. When you define an animation through C++ you may set the starting and ending property values, or you may specify those values when you call play. I don't have access to my code base now but I will try to post code examples when I get home.

The interface is really a joy to use and it is quite easy to get some very complex and elegant motion. Look for my 'Mechanical Clock' application in AppWorld (currently awaiting approval) to see some of the things I've been playing with.

[bcs925]

As others said more explanation would be helpful.... But if you are describing what I think you are here's something that I think will help:

I don't think you want to necessarily change the animation, more so you want to change what is being played. So you would still define CustomAnimation1 and CustomAnimation2 but you would dynamically change the signal that calls which animation to be played.  That would happen somewhere else in your code.  Meaning if you want CustomAnimation1 to be played if condition X is satisfied vs CustomAnimation2 to played if condition Y is satisfied you would handle that outside of defining your animations.  Make sense?

[Dredvard]

Thanks.  Actually all these posts have been very helpful.  Brian, you hit it on the head - exactly what I was trying to do.  Just hadn't though what you could do with play().  The approach in Cascades is very different than Android Java so I've had to do some rethinking of my approach.   Here's a sample of my container that I'm constructing:

Container {
    id: animContainer
    
    animations: [
        Comboanim {
            id: entrance1animid
            objectName: "entrance1Anims"
        },
        Fadeout {
            id: exit1animid
            objectName: "exit1Anims"
        },
        InitialOrient {
            id: initialorientid
        }
    ]
    attachedObjects: [
        ImplicitAnimationController {
            id: offScreenController
            enabled: false
        }
    ]
    
    //Entrance animation on image change
    onControlReplaced:{
        offScreenController.enabled=false
        getconfig()
        intialorientationid.play()
      offScreenController.enabled=true
        
    }
    //After exit animation
    onExitChanged: {
        offScreenController.enable=false
        entranceanim.play()
    }

}

 and in cpp

	AbstractAnimation  *anim = mNavPane->findChild<AbstractAnimation*>("Entrance1Anim");
	anim->play();

Don't have a good grasp yet on the implict animator.  Can I both enable and disable it in the same slot as I wrote above?  What is the best way to move it hidden (ie. move it off screen) ?  The catch is each animation (like a slide) will require a different initial position.  Do I need to have a unique initial animation for each entrance?  I can't make it 1 custom animation because I need to turn the implicit controller on and off.

The other catch is I'm going to have at least 10-20 entrance and 10-20 exit animations.  I just need to include them in the main container, right?   There's no way to load and insert an animation from a file from cpp, or do i always need to declare them in the qml file - and then just play when I want to view it?

[bcs925 · Accepted solution]

You've lost me now with your example... I assume you have already read: https://developer.blackberry.com/cascades/documentation/ui/animations/implicit_animations.html right?  Something that may be a bit confusing is the documentation explains it in both QML and C++ you don't have to use both.  Rather it makes more sense to just use one or the other.  I personally like the QML much better for animations so I recommend not using C++ at all for this.

And reading over your example, I don't understand what you are trying to have a control the animation.  Possibly it would be best if you try having a button control it with a simple "onClicked" signal just to test to if you are doing other parts correct.  Then switch it back to some other signal event.  If you still don't have it in a few days I am going to have an animation tutorial where I use explicit animations in my blog (link in signature) later this week/weekend.

[hrbuckley]

I think you are on the right track. In my application I use images that are rotated or translated behind a viewport. I specified my rotation animatiion in QML:

    ImageView {
        id: imageView
        objectName: imageName
        imageSource: imageSourceFile //
        translationX: wheelCorrectionX
        translationY: wheelCorrectionY
        rotationZ: wheelRotationZ
        layoutProperties: AbsoluteLayoutProperties {
        }
        animations: [
            RotateTransition {
                objectName: "rotate"
                duration: rotateDuration
                easingCurve: StockCurve.BounceOut
            }
        ]
    }

Then I call out the animation with C++ calls (but I believe you can do this using JavaScript in QML) to set the to angle and play the animation:

  RotateTransition *rotate = image->
    findChild<RotateTransition*>("rotate");
  ...
  rotate->setToAngleZ(-angle * value);
  rotate->play();

When I want to change the rotation angle with out the animation simply disable the implicit animation first:

  ImplicitAnimationController translateYController =
    ImplicitAnimationController::create(image).enabled(false);
  image->setRotationZ(angle);

[Dredvard]

Thanks guys for the help.  Finally got it. Working

Was forgetting about the asynchronous nature of signals (and didn't have a good grasp on them).  Once I did your suggestion Brian add used ActionItems Buttons for each of the events was able to troubleshoot my sequence.

Been giving it some thought.  I think it I did want to load a new animation dynamically and insert into a container the following should work - I'll try it out sometime when I have a chance.   This is the method you need to use for Android Java so I was having trouble switching to the ->play technique for cascades.

	QmlDocument *qml = QmlDocument::create().load("animation.qml");
	qml->setParent(container);