HTML5 Canvas Flip Card Animation

Я пытаюсь создать эффект флип-карты, используя html-холст, рисуя его на холсте.HTML5 Canvas Flip Card Animation

no ccs3 трюки необходимо. Это должно быть сделано на родном языке;

это мое первое испытание с использованием phaser.js путем изменения масштаба

<html> 
<head> 

</head> 
    <body> 
     <div id="game_canvas"> 


     </div> 
     <script src = "jquery.min.js"></script> 
     <script src = "phaser.min.js"></script> 

     <script> 

     var game; 
     var sprite; 

      $(document).ready(function(){ 

       game = new Phaser.Game(640, 480, Phaser.AUTO, 'game_canvas', { 
        preload : preload, 
        create : create, 
        update : update 

       }); 

       function preload() { 

        game.load.image('card','download.png'); 

       } 

       function create() { 

        this.delay = 1000; 
        this.spawn = 0; 

        sprite = game.add.sprite(game.width/4, game.height/4, 'card'); 

       } 

       function update() { 

        console.log(this.spawn > game.time.now); 

        if (this.spawn > game.time.now) { 
         return; 
        } 

        this.spawn = game.time.now + this.delay; 

        sprite.scale.x *= -1; 

       } 

      }); 

     </script> 

    </body> 
</html>

и то, что я хочу достичь, как это с помощью холста

http://www.turnjs.com/#samples/steve-jobs/10

кто имеет какие-либо идеи о как это сделать было бы очень полезно

заранее заблаговременно

здесь текущая демо http://sopronioli713.github.io/test/

источник

2015-03-11 Oli Soproni B.

Вы ищете книгу флип или флип? Для флешки карты просто масштабируйте лицевую грань изображения вдоль оси X (чтобы он сжимался), а затем, когда ширина шириной 0 или около того изменит изображение на заднюю поверхность и масштабирует его в обратном направлении. Кроме того, можете ли вы предоставить скрипку или фрагмент, чтобы мы могли увидеть ваш пример? –

карта флип. но я хочу достичь анимации turn.js в приведенной выше ссылке. –

Почему мой вопрос ниспровергнут? –

Вот холст карты на основе флип (с вращением), что я сделал некоторое время назад для удовольствия.

Он работает путем масштабирования только в направлении X, так что карта, похоже, переворачивается.

Заметки о влиянии:

Вы можете опустить повороты, если они не требуются.

Этот эффект переводится в горизонтальный центр карты перед масштабированием (переворачиванием), что делает карту «вращением». Если вы хотите, чтобы «дилеры перевернули», вы перевели бы на край карты.

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var x=150; 
 
var y=150; 
 
var scaleX=100; 
 
var angle=0; 
 
var scaleDirection=-1; 
 
var scaleDelta=1; 
 
var PI2=Math.PI*2; 
 

 
var backCanvas=document.createElement('canvas'); 
 
var backCtx=backCanvas.getContext('2d'); 
 
var imgCount=2; 
 
var front=new Image();front.onload=start;front.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png"; 
 
var back=new Image();back.onload=start;back.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcardback.png"; 
 
function start(){ 
 
    if(--imgCount>0){return;} 
 
    animate(); 
 
} 
 

 

 
function draw(x,y,scaleX,angle){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.translate(x,y); 
 
    ctx.rotate(angle); 
 
    ctx.scale(scaleX,1); 
 
    if(scaleX>=0){ 
 
    ctx.drawImage(front,-front.width/2,-front.height/2); 
 
    }else{ 
 
    ctx.drawImage(back,-back.width/2,-back.height/2); 
 
    } 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
} 
 

 
function animate(time){ 
 
    draw(x,y,scaleX/100,angle); 
 
    angle+=PI2/720; 
 
    scaleX+=scaleDirection*scaleDelta; 
 
    if(scaleX<-100 || scaleX>100){ 
 
    scaleDirection*=-1; 
 
    scaleX+=scaleDirection*scaleDelta; 
 
    } 
 
    requestAnimationFrame(animate); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

С другой стороны ...

Вы ссылку на страницу поворота демо - который является совершенно другое животное. Если это то, что после Рика Барразы сделал хорошую запись о том, как это сделать здесь: http://rbarraza.com/html5-canvas-pageflip/

источник

2015-03-11 16:11:07 markE

спасибо за ввод. большая помощь –

ответ

Смежные вопросы