1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    30
    Vote Rating
    0
    luoyu is on a distinguished road

      0  

    Default Answered: Ext.draw.Component

    Answered: Ext.draw.Component


    Hi,
    I have a problem with "Ext.draw.Component" .
    I have a "click" event,when i check,it will open a window,in the window will have a animation running.
    This is my code :

    Code:
    var drawComponent = Ext.create('Ext.draw.Component',{
                                            viewBox : false
                                    });
                                    Ext.create('Ext.window.Window',{
                                        title : '动画测试1',
                                        width : 300,
                                        height : 300,
                                        layout : 'fit',
                                        items : [drawComponent]
                                    }).show();
                                     drawComponent.stopAnimation();
                                    var surface = drawComponent.surface;
                                    surface.add([{
                                        type : 'circle',
                                        radius : 10,
                                        fill : '#f00',
                                        x : 120,
                                        y : 120,
                                        group : 'circles_1'
                                    },{
                                        type : 'circle',
                                        radius : 10,
                                        x : 120,
                                        y : 120,
                                        fill : '#f00',
                                        group : 'circles_2'
                                    },{
                                        type : 'circle',
                                        radius : 10,
                                        x : 120,
                                        y : 120,
                                        fill : '#f00',
                                        group : 'circles_3'
                                    },{
                                        type : 'circle',
                                        radius : 10,
                                        x : 120,
                                        y : 120,
                                        fill : '#f00',
                                        group : 'circles_4'
                                    },{
                                        type : 'circle',
                                        radius : 10,
                                        x : 120,
                                        y : 120,
                                        fill : '#f00',
                                        group : 'circles_5'
                                    },{
                                        type : 'path',
                                        stroke : 'black',
                                        path :'M 120 120',
                                        'storke-width' : 2,
                                        group : 'lines-1'
                                    },{
                                        type : 'path',
                                        stroke : 'black',
                                        path :'M 120 120',
                                        'storke-width' : 2,
                                        group : 'lines-2'
                                    },{
                                        type : 'path',
                                        stroke : 'black',
                                        path :'M 120 120',
                                        'storke-width' : 2,
                                        group : 'lines-3'
                                    },{
                                        type : 'path',
                                        stroke : 'black',
                                        path :'M 120 120',
                                        'storke-width' : 2,
                                        group : 'lines-4'
                                    }]);
                                    
                                    var circles_1 = surface.getGroup('circles_1');
                                    circles_1.animate({
                                        duration: 5000,
                                        to : {
                                            x : 40,
                                            y : 200
                                        }
                                    });
                                    
                                    var circles_2 = surface.getGroup('circles_2');
                                    circles_2.animate({
                                        duration: 5000,
                                        to : {
                                            x : 40,
                                            y : 40
                                        }
                                    });
                                    
                                    var circles_3 = surface.getGroup('circles_3');
                                    circles_3.animate({
                                        duration: 5000
                                    });
                                    
                                    var circles_4 = surface.getGroup('circles_4');
                                    circles_4.animate({
                                        duration: 5000,
                                        to : {
                                            x : 200,
                                            y : 200
                                        }
                                    });
                                    
                                    var circles_5 = surface.getGroup('circles_5');
                                    circles_5.animate({
                                        duration: 5000,
                                        to : {
                                            x : 200,
                                            y : 40
                                        }
                                    });
                                    
                                    
                                    var lines_1 = surface.getGroup('lines-1');
                                    lines_1.animate({
                                        to : {
                                            path : 'M120 120 L 40 200'
                                        },
                                        duration : 5000
                                    });
                                    
                                    var lines_2 = surface.getGroup('lines-2');
                                    lines_2.animate({
                                        to : {
                                            path : 'M120 120 L 40 40'
                                        },
                                        duration : 5000
                                    });
                                    
                                    var lines_3 = surface.getGroup('lines-3');
                                    lines_3.animate({
                                        to : {
                                            path : 'M120 120 L 200 200'
                                        },
                                        duration : 5000
                                    });
                                    
                                    var lines_4 = surface.getGroup('lines-4');
                                    lines_4.animate({
                                        to : {
                                            path : 'M120 120 L 200 40'
                                        },
                                        duration : 5000
                                    });
    Now,this my problem:
    For example,first I click the button,the it can open a window and running the animation,but if the first animation is running, i click the button again,then the second animation must wait for the first animation run finished,it can be runn.
    so i want to use
    Code:
      drawComponent.stopAnimation();
    to stop all animation,but it can not have effect.
    thanks

  2. Have tried calling stopAnimation on the actual sprite that is doing the animation:

    PHP Code:
    sprite.stopAnimation(); 

  3. #2
    Sencha User stevemc's Avatar
    Join Date
    Sep 2007
    Location
    London
    Posts
    29
    Answers
    1
    Vote Rating
    4
    stevemc is on a distinguished road

      0  

    Default


    Have tried calling stopAnimation on the actual sprite that is doing the animation:

    PHP Code:
    sprite.stopAnimation(); 

  4. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    30
    Vote Rating
    0
    luoyu is on a distinguished road

      0  

    Default


    Quote Originally Posted by stevemc View Post
    Have tried calling stopAnimation on the actual sprite that is doing the animation:

    PHP Code:
    sprite.stopAnimation(); 
    thank you."
    Code:
    sprite.stopAnimation();  
    " is right.Thank you very much.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi