Как добавить простую анимацию флип-карты?

Я создаю одиночную игру. До сих пор у меня все работало, но анимация переворота карты - боль в а **.

Посмотрите на эту скрипку (она может быть немного медленной, так как в ней весь код игры)

При перетаскивании карты ее оборотная сторона заменяется лицевой. Это сделано в этой части кода:

upturn: function () {
            with(this) {
                if (is_downturned()) {
                    element.children('.downturned')
                        .removeClass('downturned').addClass(_SUITS[_suit()].color)
                        .append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
                    element.addClass(_scope());
                    if (element.hasClass('ui-draggable-disabled')) {
                        element.draggable('enable');
                    } else {
                        element.draggable({
                            containment: '#field',
                            revert: 'invalid',
                            revertDuration: 200,
                            zIndex: 99
                        });
                    }
                    if (!element.hasClass('ui-droppable-disabled')) {
                        element.droppable($.extend(DROPPABLE_OPTIONS, {
                            accept: _tableau_pile_scope()
                        }));
                    }
                }
            }
        }

В основном это удаляет заднюю часть карты (.removeClass('downturned')) и добавляет новый класс (.addClass(_SUITS[_suit()].color)) где suits Харт, клевер и т. д. и color черный или красный.

Теперь, когда происходит это действие, я хочу добавить хорошую анимацию переключения.

Я поигрался с некоторыми учебниками в Интернете, но не дал мне рабочего решения (в основном карты начали странно себя вести или игра перестала работать).

Самое близкое, что я мог получить, это добавить:

-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);

/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;

в CSS в классе:

.red,
.black {
  cursor: pointer;
  <<<code added here>>>
}

Это, однако, привело к некоторым странным действиям (хотя карта переворачивается):

  1. Карта переворачивается, но после того, как изображение / фронт уже показано
  2. Все карты зеркальные
  3. Область перетаскивания карточек находится далеко

Так как же добавить хорошую анимацию перелистывания карт? Надеюсь, кто-нибудь может мне помочь.

РЕДАКТИРОВАТЬ:

Путем изменения this.element.addClass('container').append('<div class="downturned">'); в this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">'); в части JS я могу создать дополнительный пустой div (который, я думаю, мне нужен для анимации переворачивания карты), но я все еще не могу заставить его работать

Источник

5 ответов

Решение

Я думаю, что есть несколько способов сделать это. Но я предполагаю, что должен предложить старый способ сделать это, используя только один элемент. По сути, поскольку это 2D-объект, передняя и задняя части никогда не будут отображаться одновременно, и будет точка, в которой карта "исчезнет". Таким образом, мы можем разделить анимацию на две части. "Скрытие" карты (здесь мы можем анимировать ширину до нуля). Изменив изображение на другую карту, затем снова "показывая" карту (снова анимируйте от нуля до исходной ширины). Так что, если мы используем jQuery, с HTML

<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />

jQuery будет выглядеть примерно так:

var CARDWIDTH = 50;
function turnCompatible(elem, src) {
    $(elem).animate({
        width: 0, //animate to zero
        marginLeft: CARDWIDTH / 2,
        marginRight: CARDWIDTH / 2
    }, function () {
        this.src = src //change the image
        $(this).animate({
            width: CARDWIDTH, //show the image again
            marginLeft: 0,
            marginRight: 0,
        })
    })
}
$(".card").click(function(){
   turnCompatible(this, src)
})

И это будет более или менее работать. Хотя анимация может быть лучше улучшена, например, с помощью CSS-преобразований и анимаций, но это решение будет совместимо с браузерами, которые не поддерживают CSS-преобразования (в основном IE. IE<10). И с этим вы можете сделать что-то вроде

function turnCSS(elem, src) {
    $(elem)
        .addClass("flipping")
        .bind("transitionend webkittransitionend", function () { //should add more prefixes
        this.src = src;
        $(this)
            .unbind("transitionend webkittransitionend")
            .removeClass("flipping")
    })
}

со следующим CSS

.card {
    width:50px;
    height:80px;
    -webkit-transition:-webkit-transform 0.5s;
    transition:transform 0.5s;
    background:#FF0;
}
.flipping {
    transform: translate(0, 20px) rotateY(90deg);
    -webkit-transform: translate(0, 20px) rotateY(90deg);
}

демонстрация

Так что, возможно, внешний вид - это не то, что вы ищете, но можно сделать анимацию сальто только с одним элементом.

Источник

Я думаю, что большая проблема, которую я имею, состоит в том, что, когда это было построено, никакая анимация щелчка не рассматривалась Так что есть только 1 Div, где нужно больше, чтобы это заработало. Также используемый код перетаскивания является старым и прерывает код анимации.

Полагаю, что единственное решение - начать все заново, на этот раз с анимацией.

Всем спасибо за помощь и за предоставленное решение, но я думаю, что начинать сначала - путь

Привет

Источник

Относительно ваших трех проблем с 3D-преобразованиями CSS.

  1. Карта переворачивается, но после того, как изображение / фронт уже показано
  2. Все карты зеркальные
  3. Область перетаскивания карточек находится далеко

Для пунктов 1 и 2 добавьте:

-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;

И чтобы сосредоточить ваше использование элемента:

transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */
Источник

Попробуй это

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst1 {
      from {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
      to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@-webkit-keyframes myfirst2 {
      from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
      to {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
}

/* Standard syntax */
@keyframes myfirst1 {
      from {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
      to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@keyframes myfirst2 {
      from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
      to {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
}
@-webkit-keyframes mylast1 {
    from {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
    to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@-webkit-keyframes mylast2 {
    from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
    to {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
}
@keyframes mylast1 {
   from {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
    to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@keyframes mylast2 {
   from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
    to {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
}

</style>
<script>
$(document).ready(function()
  {
  $("#btn2").hide();
  $("#btn1").click(function(){
    $("#btn1").hide();
    $("#box1").css({  'z-index':'2', 
    '-webkit-animation': 'myfirst1 5s',
    'animation': 'myfirst1 5s'
    });

    $("#box2").css({ 'z-index':'0' ,
    '-webkit-animation': 'mylast1 5s',
    'animation': 'mylast1 5s'
    });
    setTimeout(function(){
      $("#box1").css({  'z-index':'0', 
      '-webkit-animation': 'myfirst2 5s',
      'animation': 'myfirst2 5s'
      });

      $("#box2").css({ 'z-index':'2' ,
      '-webkit-animation': 'mylast2 5s',
      'animation': 'mylast2 5s'
      });
    }, 5000);
    setTimeout(function(){$("#btn2").show();}, 10000);
  });

  $("#btn2").click(function(){ 
    $("#btn2").hide();   
    $("#box2").css({ 'z-index':'2', 
    '-webkit-animation': 'myfirst1 5s',
    'animation': 'myfirst1 5s'
    });

    $("#box1").css({  'z-index':'0',
    '-webkit-animation': 'mylast1 5s',
    'animation': 'mylast1 5s'
    });
    setTimeout(function(){
     $("#box2").css({ 'z-index':'0', 
     '-webkit-animation': 'myfirst2 5s',
     'animation': 'myfirst2 5s'
     });

     $("#box1").css({  'z-index':'2',
     '-webkit-animation': 'mylast2 5s',
     'animation': 'mylast2 5s'
     });
    }, 5000);
    setTimeout(function(){$("#btn1").show()}, 10000);
  });
});

</script>
</head>
<body>

<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>

</body>
</html>

В этом я только что анимировал два div, сохраняемых спиной к спине (вы можете заменить их необходимыми изображениями, установить позиции и ввести в действие функции для сокращения кода. Я сделал это специально для вас. Поэтому я не оптимизировал его, поэтому я спрашиваю Вы можете настроить, чтобы удовлетворить ваши требования.

Источник

Я сделал простую демонстрацию " 3D-визитка" в качестве побочного проекта, используя CSS/HTML/jQuery несколько лет назад:

http://drewpeifer.com/demo/3d-card/index.html

Не стесняйтесь проверить (или разветвить) код на github: https://github.com/Drewpeifer/3d-card-demo

README объясняет большую часть этого, но он основан на CSS-анимации и трансформациях, с некоторой кросс-браузерной помощью Transit.js (бесплатная библиотека). Я в основном создал "карточный" div, который содержит два дочерних div, лицевую и оборотную стороны карты. Затем я использую CSS-преобразование, чтобы "сложить" родительский div обратно на себя, а затем повернуть родительский div, чтобы показать любую из сторон.

Это может помочь в вашем сценарии или нет, в зависимости от вашей структуры HTML и библиотек JS, которые вы хотите включить. Просто подумал, что это может дать вам хорошие идеи. Удачи!

Источник
Другие вопросы по тегам