After card is activated, the blinking border should be well layed out.
This commit is contained in:
marcins78@gmail.com
@@ -36,8 +36,7 @@ var GameAnimations = Class.extend({
|
||||
.switchClass("borderOverlay", "highlightBorderOverlay", that.getAnimationLength(that.cardActivatedDuration / 6))
|
||||
.switchClass("highlightBorderOverlay", "borderOverlay", that.getAnimationLength(that.cardActivatedDuration / 6))
|
||||
.switchClass("borderOverlay", "highlightBorderOverlay", that.getAnimationLength(that.cardActivatedDuration / 6))
|
||||
.switchClass("highlightBorderOverlay", "borderOverlay", that.getAnimationLength(that.cardActivatedDuration / 6));
|
||||
setTimeout(next, that.getAnimationLength(that.cardActivatedDuration));
|
||||
.switchClass("highlightBorderOverlay", "borderOverlay", that.getAnimationLength(that.cardActivatedDuration / 6), next);
|
||||
}
|
||||
else {
|
||||
next();
|
||||
@@ -71,40 +70,40 @@ var GameAnimations = Class.extend({
|
||||
var cardWidth = card.getWidthForHeight(cardHeight);
|
||||
|
||||
$(cardDiv).css(
|
||||
{
|
||||
position: "absolute",
|
||||
left: (gameWidth / 2 - cardWidth / 4),
|
||||
top: gameHeight * (3 / 8),
|
||||
width: cardWidth / 2,
|
||||
height: cardHeight / 2,
|
||||
"z-index": 100,
|
||||
opacity: 0});
|
||||
{
|
||||
position: "absolute",
|
||||
left: (gameWidth / 2 - cardWidth / 4),
|
||||
top: gameHeight * (3 / 8),
|
||||
width: cardWidth / 2,
|
||||
height: cardHeight / 2,
|
||||
"z-index": 100,
|
||||
opacity: 0});
|
||||
|
||||
$(cardDiv).animate(
|
||||
{
|
||||
left: "-=" + cardWidth / 4,
|
||||
top: "-=" + (gameHeight / 8),
|
||||
width: "+=" + (cardWidth / 2),
|
||||
height: "+=" + (cardHeight / 2),
|
||||
opacity: 1},
|
||||
{
|
||||
duration: that.getAnimationLength(that.playEventDuration / 8),
|
||||
easing: "linear",
|
||||
queue: false,
|
||||
complete: next});
|
||||
{
|
||||
left: "-=" + cardWidth / 4,
|
||||
top: "-=" + (gameHeight / 8),
|
||||
width: "+=" + (cardWidth / 2),
|
||||
height: "+=" + (cardHeight / 2),
|
||||
opacity: 1},
|
||||
{
|
||||
duration: that.getAnimationLength(that.playEventDuration / 8),
|
||||
easing: "linear",
|
||||
queue: false,
|
||||
complete: next});
|
||||
}).queue(
|
||||
function(next) {
|
||||
setTimeout(next, that.getAnimationLength(that.playEventDuration * (5 / 8)));
|
||||
}).queue(
|
||||
function(next) {
|
||||
$(cardDiv).animate(
|
||||
{
|
||||
opacity: 0},
|
||||
{
|
||||
duration: that.getAnimationLength(that.playEventDuration / 4),
|
||||
easing: "easeOutQuart",
|
||||
queue: false,
|
||||
complete: next});
|
||||
{
|
||||
opacity: 0},
|
||||
{
|
||||
duration: that.getAnimationLength(that.playEventDuration / 4),
|
||||
easing: "easeOutQuart",
|
||||
queue: false,
|
||||
complete: next});
|
||||
}).queue(
|
||||
function(next) {
|
||||
$(cardDiv).remove();
|
||||
@@ -158,26 +157,26 @@ var GameAnimations = Class.extend({
|
||||
}
|
||||
|
||||
$(cardDiv).css(
|
||||
{
|
||||
position: "absolute",
|
||||
left: shadowStartPosX,
|
||||
top: shadowStartPosY,
|
||||
width: shadowWidth,
|
||||
height: shadowHeight,
|
||||
"z-index": 100,
|
||||
opacity: 1});
|
||||
{
|
||||
position: "absolute",
|
||||
left: shadowStartPosX,
|
||||
top: shadowStartPosY,
|
||||
width: shadowWidth,
|
||||
height: shadowHeight,
|
||||
"z-index": 100,
|
||||
opacity: 1});
|
||||
$(cardDiv).animate(
|
||||
{
|
||||
opacity: 0,
|
||||
left: "-=" + (shadowWidth / 2),
|
||||
top: "-=" + (shadowHeight / 2),
|
||||
width: "+=" + shadowWidth,
|
||||
height: "+=" + shadowHeight},
|
||||
{
|
||||
duration: that.getAnimationLength(that.cardAffectsCardDuration),
|
||||
easing: "easeInQuart",
|
||||
queue: false,
|
||||
complete: null});
|
||||
{
|
||||
opacity: 0,
|
||||
left: "-=" + (shadowWidth / 2),
|
||||
top: "-=" + (shadowHeight / 2),
|
||||
width: "+=" + shadowWidth,
|
||||
height: "+=" + shadowHeight},
|
||||
{
|
||||
duration: that.getAnimationLength(that.cardAffectsCardDuration),
|
||||
easing: "easeInQuart",
|
||||
queue: false,
|
||||
complete: null});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -191,7 +190,7 @@ var GameAnimations = Class.extend({
|
||||
$(this).remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
);
|
||||
next();
|
||||
});
|
||||
}
|
||||
@@ -267,29 +266,29 @@ var GameAnimations = Class.extend({
|
||||
var cardWidth = card.getWidthForHeight(cardHeight);
|
||||
|
||||
$(cardDiv).css(
|
||||
{
|
||||
position: "absolute",
|
||||
left: (gameWidth / 2 - cardWidth / 4),
|
||||
top: gameHeight * (3 / 8),
|
||||
width: cardWidth / 2,
|
||||
height: cardHeight / 2,
|
||||
"z-index": 100,
|
||||
opacity: 0});
|
||||
{
|
||||
position: "absolute",
|
||||
left: (gameWidth / 2 - cardWidth / 4),
|
||||
top: gameHeight * (3 / 8),
|
||||
width: cardWidth / 2,
|
||||
height: cardHeight / 2,
|
||||
"z-index": 100,
|
||||
opacity: 0});
|
||||
|
||||
$(cardDiv).animate(
|
||||
{
|
||||
opacity: 1},
|
||||
{
|
||||
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 8),
|
||||
easing: "linear",
|
||||
step: function(now, fx) {
|
||||
layoutCardElem(cardDiv,
|
||||
(gameWidth / 2 - cardWidth / 4) - now * (cardWidth / 4),
|
||||
gameHeight * (3 / 8) - now * (gameHeight / 8),
|
||||
cardWidth / 2 + now * (cardWidth / 2),
|
||||
cardHeight / 2 + now * (cardHeight / 2), 100);
|
||||
},
|
||||
complete: next});
|
||||
{
|
||||
opacity: 1},
|
||||
{
|
||||
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 8),
|
||||
easing: "linear",
|
||||
step: function(now, fx) {
|
||||
layoutCardElem(cardDiv,
|
||||
(gameWidth / 2 - cardWidth / 4) - now * (cardWidth / 4),
|
||||
gameHeight * (3 / 8) - now * (gameHeight / 8),
|
||||
cardWidth / 2 + now * (cardWidth / 2),
|
||||
cardHeight / 2 + now * (cardHeight / 2), 100);
|
||||
},
|
||||
complete: next});
|
||||
}).queue(
|
||||
function(next) {
|
||||
setTimeout(next, that.getAnimationLength(that.putCardIntoPlayDuration * (5 / 8)));
|
||||
@@ -304,20 +303,20 @@ var GameAnimations = Class.extend({
|
||||
var startHeight = cardDiv.height();
|
||||
|
||||
$(cardDiv).animate(
|
||||
{
|
||||
left: oldValues["left"]},
|
||||
{
|
||||
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 4),
|
||||
easing: "linear",
|
||||
step: function(now, fx) {
|
||||
var state = fx.state;
|
||||
layoutCardElem(cardDiv,
|
||||
startLeft + (oldValues["left"] - startLeft) * state,
|
||||
startTop + (oldValues["top"] - startTop) * state,
|
||||
startWidth + (oldValues["width"] - startWidth) * state,
|
||||
startHeight + (oldValues["height"] - startHeight) * state, 100);
|
||||
},
|
||||
complete: next});
|
||||
{
|
||||
left: oldValues["left"]},
|
||||
{
|
||||
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 4),
|
||||
easing: "linear",
|
||||
step: function(now, fx) {
|
||||
var state = fx.state;
|
||||
layoutCardElem(cardDiv,
|
||||
startLeft + (oldValues["left"] - startLeft) * state,
|
||||
startTop + (oldValues["top"] - startTop) * state,
|
||||
startWidth + (oldValues["width"] - startWidth) * state,
|
||||
startHeight + (oldValues["height"] - startHeight) * state, 100);
|
||||
},
|
||||
complete: next});
|
||||
}).queue(
|
||||
function(next) {
|
||||
var cardDiv = $(".card:cardId(" + cardId + ")");
|
||||
@@ -353,7 +352,7 @@ var GameAnimations = Class.extend({
|
||||
if (index != -1)
|
||||
cardData.attachedCards.splice(index, 1);
|
||||
}
|
||||
);
|
||||
);
|
||||
|
||||
var card = $(".card:cardId(" + cardId + ")");
|
||||
var cardData = card.data("card");
|
||||
@@ -389,12 +388,12 @@ var GameAnimations = Class.extend({
|
||||
function(next) {
|
||||
$(".card:cardId(" + cardRemovedIds + ")")
|
||||
.animate(
|
||||
{
|
||||
opacity: 0},
|
||||
{
|
||||
duration: that.getAnimationLength(that.removeCardFromPlayDuration),
|
||||
easing: "easeOutQuart",
|
||||
queue: false});
|
||||
{
|
||||
opacity: 0},
|
||||
{
|
||||
duration: that.getAnimationLength(that.removeCardFromPlayDuration),
|
||||
easing: "easeOutQuart",
|
||||
queue: false});
|
||||
setTimeout(next, that.getAnimationLength(that.removeCardFromPlayDuration));
|
||||
});
|
||||
}
|
||||
@@ -419,7 +418,7 @@ var GameAnimations = Class.extend({
|
||||
if (index != -1)
|
||||
cardData.attachedCards.splice(index, 1);
|
||||
}
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
card.remove();
|
||||
|
||||
Reference in New Issue
Block a user