抓取要在画布区域内使用的body背景区域

Question

我是画布的新手，我对它如何从源代码到源代码有一些了解，但我试图实现的是动态的。我想在我的页面上加载一个正文背景(使用带封面的位置中心进行响应)，提取一个区域，然后用绿卡翻转进行操作。

从本质上讲，我会有一个木制的面板背景，我想创建一个秘密的面板门，它可以在悬停或单击时旋转，以显示其背后的内容。

明确地说，我会在架子上放一瓶col-sm-4的BS排，就像西方沙龙一样。当你悬停时，它会取下背景，上面有png瓶子，然后复制它，让我旋转它，以显示一个关于产品的简短简介。

我不喜欢直接来这里，这就是为什么我的帖子/分数这么少的原因。。但这真的让我很为难。如果能帮助我朝着正确的方向前进，我很乐意"小费"。谢谢大家。

这是我现在的密码笔。。。

`http://codepen.io/dtek516/pen/vKLOBp`

Answer 1

Tweenlite可以(间接)为画布绘制动画

• 画布绘图可以使用JavaScript对象进行控制
• Tweenlite可以为JavaScript对象上的属性设置动画

总之，您可以使用Tweenlite为JavaScript对象的属性设置动画，该对象反过来控制画布上的图形。

以下是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var PI=Math.PI;
var PI2=PI*2;
var wheel={
cx:cw/2,
cy:ch/2,
radius:Math.min(cw,ch)/2-20,
startAngle:PI/4,
angle:PI/4,
draw:function(){
ctx.translate(this.cx,this.cy);
ctx.rotate(this.angle);
ctx.clearRect(0,0,cw,ch);
ctx.beginPath();
ctx.arc(0,0,this.radius,0,PI2);
ctx.fillStyle='skyblue';
ctx.strokeStyle='lightgray';
ctx.lineWidth=3;
ctx.fill();
ctx.stroke();
ctx.fillStyle='red';
ctx.font='18px verdana';
ctx.textBaseline='middle';
ctx.fillText('You Win!',40,0);
ctx.setTransform(1,0,0,1,0,0);
ctx.beginPath();
ctx.moveTo(cw/2,ch/2);
ctx.lineTo(cw/2+30,ch/2);
ctx.strokeStyle='green';
ctx.stroke();
},
}
var tl=TweenLite.to(wheel,5,{
paused:true,
angle:PI2*2,
ease:"Quart.easeOut",
onUpdate:function(){this.target.draw();},
onComplete:function(){console.log('complete',wheel);}
}
);
wheel.draw();
$('#play').click(function(){ tl.play(); });
$('#replay').click(function(){  tl.restart(); });

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

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<button id=play>Play</button>
<button id=replay>Replay</button>
<br><canvas id="canvas" width=300 height=300></canvas>

但像这样进行悬停翻转显示可能更容易(不需要画布)：

• 将背景划分为8个img元素。背景是4个img，显示的"信息卡"是4张图片
• 监听那些背景img元素上的悬停/模糊事件
• 在悬停时，使用Greensock的Tweenlite为悬停的背景图像设置动画，直到它靠近用户
• 然后Tweenlite动画"信息卡"img从旋转的边缘开始，直到它对用户是平的(平==完全显示)
• 在模糊时，反转2个显示动画，以便再次显示背景img

您可以使用Greenstock的TimelineLite来安排&运行两部分动画。