Question

我是画布的新手，我对它从源到源的工作原理有所了解，但是我想要实现的有点动态。我想在我的页面上加载一个正文背景（使用带有封面的位置中心进行响应）并提取一个区域然后使用greensock卡片翻转进行操作。

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

要明确一点，我会有一个带有col-sm-4的BS行，在架子上有一个瓶子，就像西方沙龙一样。当你悬停时，它将采用那个背景，顶部有一个png瓶，并复制它，允许我旋转它，以显示关于产品的简短模糊。

我不喜欢直接来这里，这就是为什么我的帖子/得分如此之少......但这真的让我很难过。在正确的方向上帮助我很乐意＆＃34;提示＆＃34;因为，如果它成功了。谢谢大家。

这是我目前的代码笔......

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

Answer 1

Tweenlite可以（间接）为Canvas绘图设置动画......

可以使用JavaScript对象控制画布图。
Tweenlite可以为JavaScript对象设置动画属性。

合在一起，您可以使用Tweenlite为JavaScript对象的属性设置动画，而JavaScript对象又控制画布上的绘图。

以下是示例代码和演示：

＆＃13;

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(); });

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是你可能更容易做到这样的悬停翻转显示（不需要画布）：

将您的背景划分为8个img元素。背景是4 img＆s和显示的＆＃34;信息卡＆＃34;是4张图片。
在那些背景img元素上侦听悬停/模糊事件
在悬停时，使用Greensock的Tweenlite为悬停的背景图像设置动画，直到它与用户边缘为止。
然后Tweenlite动画＆＃34;信息卡＆＃34; img从边缘旋转开始直到它对用户平坦（平坦==完全显示）。
在模糊时，反转2个显示动画，以便再次显示背景img。

您可以使用Greensock的TimelineLite安排＆amp;运行由2部分组成的动画。

抓住在帆布区域内使用的身体背景区域

1 个答案: