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
New Contributor
Posts: 7
Registered: ‎07-23-2011
My Device: Torch 9800
My Carrier: rogers

fade image in cascades

if there is two images. I want one image fade upto opacity:0 on other one. I am working on cascades BB10.if somebody know, whats qml  

Developer
Posts: 216
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: fade image in cascades

QML property opacity: 0 or use animation for making smooth  fade effect

Developer
Posts: 216
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: fade image in cascades

opacity: 0.0

Developer
Posts: 1,650
Registered: ‎04-08-2010
My Device: Z10 (red Limited Edition), Q10, Z30
My Carrier: Telekom.de, O2, Vodafone

Re: fade image in cascades

see this example

https://github.com/blackberry/Cascades-Samples/tree/master/lightningcrossfadeqml

 

then do the same in an animation

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development Mobile Apps BlackBerry 10 Cascades
Cascades - Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org videos: http://www.youtube.com/user/ekkescorner http://vimeo.com/ekkescorner/videos
bb10-development: http://appbus.org Twitter: @ekkescorner
New Developer
Posts: 50
Registered: ‎03-18-2009
My Device: 8530
My Carrier: Movilnet

Re: fade image in cascades

You can do some like this:

 

                    // The two images are put on top of each other in this container.
                    Container {
                        horizontalAlignment: HorizontalAlignment.Center
                        layout: DockLayout {
                        }
                        
                        ImageView {
                            id: iconTitle
                            imageSource: "asset:///images/icon2-80x80.png"
                            animations: [
                                FadeTransition {
                                    id: animation
                                    fromOpacity: 1
                                    toOpacity: 0
                                    duration: 3000
                                    repeatCount: 30
                                }
                            ]
                        }
                        
                        ImageView {
                            id: iconTitleAnim
                            imageSource: "asset:///images/icon-80x80.png"
                            
                            animations: [
                                FadeTransition {
                                    id: animation2
                                    fromOpacity: 0
                                    toOpacity: 1
                                    delay: 0
                                    duration: 3000
                                    repeatCount: 30
                                }
                            ]
                        }
                    }

 And try to play the animation at the same time with any event

 

onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        animation.play();
        animation2.play();
    }

 

// Code for getting Thanks
if( iWasHelpful && solvedYourProblem ) {
Thanks++;
solution = true;
}