Jump to content
Search Community

Animation bug on fast clicking

clung227 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello. 

function moveCard(card, userIndex, winner, image) {
    if(!card) return;
    
    _injectCircularServices();
    var game = BCStage.getGame();
    _clearCardColorTimeouts(card.id);
    _disableMyCards(true);
    self.childCount = self.childCount % 4 + 1;
    if(self.childCount == 4) {
        self.bitaIndex++;
    }
    self.bita[self.bitaIndex] = self.bita[self.bitaIndex] || game.add.group();
    var bita = self.bita[self.bitaIndex];
    bita.add(card);
    _dealPositions(userIndex, self.usersCards[userIndex].children.length, card.id, false);
    self.usersCards[userIndex].remove(card);
    _bitaWatcher(bita, BCUsers.transformSit(winner));
    if(image) {
        card.loadTexture(image);
    }
    BCSound.card_drop.get();
    var isTabInactive = document.hidden ? 1 : null;

    var positionX = BCConfig.dealPositions[userIndex].positionX;
    var positionY = BCConfig.dealPositions[userIndex].positionY;
    var cardAngle = (card.angle < 0? -1: 1) * BCConfig.dealPositions[userIndex].angleInTable;

    card.width = 106;
    card.height = 143;
    card.angle = cardAngle;


    if(isTabInactive) {
        card.scale.setTo(0.9, 0.9);
        card.x = positionX;
        card.y = positionY;
        if(self.childCount == 3 || winner) {
            _removeBita();
        }
        return true;
    } else {
        var cardScaleTween = new TweenMax.to(card.scale, 0.45, {scale: 1, ease: Power3.easeOut});
        var cardPositionTween = new TweenMax.to(card.position, 0.8, { x: positionX, y: positionY, ease: Power4.easeOut});
        var cardTweenLine = new TimelineMax({paused: true});

        cardTweenLine.add(cardScaleTween, 0);
        cardTweenLine.add(cardPositionTween, 0);

        if(bita.children.length > 1) {
            bita.forEachAlive(function(_card) {
                cardTweenLine.add(TweenMax.to(_card.position, 0.4, { x: _card.x + makeMinusOrPlus(randomBetween(1, 6)), y: _card.y + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465);
            }, game);
            cardTweenLine.add(TweenMax.to(card.position, 0.4, { x: positionX + makeMinusOrPlus(randomBetween(1, 6)), y: positionY + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465);
        }
        bita.add(card);

        cardTweenLine.play();
    }

    if(self.childCount == 3 || winner) {
        setTimeout(_removeBita, 950);
    }
}

This code is tween a card. but if you fast clicking on the card (the object that start tween) sometimes animation "breaks"

This function called only one time (called on socket response which is once a time) 

Screen Shot 2017-10-13 at 3.04.30 PM.png

Link to comment
Share on other sites

Hello @clung227 and Welcome to the GreenSock Forum!

 

Sorry your having an issue! This sort of thing will be really impossible to debug just by looking at a partial code snippet and not see how your code interacts in a live editable environment. Please create a limited codepen demo example so we can test your code live to better help you in context.

 

 

Thanks :)

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...