HTML5 Canvas 翻转卡片动画答案

【问题标题】：HTML5 Canvas Flip Card AnimationHTML5 Canvas 翻转卡片动画
【发布时间】：2015-03-11 14:36:54
【问题描述】：

我正在尝试通过在画布中绘制它来使用 html 画布创建翻转卡片效果。

不需要 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/

【问题讨论】：

您要翻书还是翻卡片？对于卡片翻转，只需沿 X 方向缩放图像正面（因此它会缩小），然后一旦宽度为 0 左右，将图像更改为背面并将其在背面缩放为正常。另外，您能否提供一个小提琴或 sn-p，以便我们可以看到您的示例正在运行？
翻牌。但我想在上面的链接中获得 turn.js 的动画。
为什么我的问题被否决了？

标签： javascript html html5-canvas phaser-framework turnjs

【解决方案1】：

这是一个基于画布的卡片翻转（带旋转），我不久前为了好玩而做了。

它的工作原理是仅在 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;}

&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;

另一方面...

您链接到一个翻页演示 - 这是一个完全不同的动物。如果这就是你在 Rick Barraza 写了一篇关于如何做到这一点的精彩文章之后的内容：http://rbarraza.com/html5-canvas-pageflip/

【讨论】：

rbarraza 已经不存在了 :(