Question

我一直在四处寻找，我似乎无法找到一种清晰的方式，我可以在其中为一个形状设置动画，从一个圆圈变为一个三角形或一个矩形或相反的方式。我会假设我可以以某种方式存储形状并更改其属性以进行转换。

基本上我要问的是，如何画一个圆圈，然后点击按钮将其动画为三角形？帆布形状可以吗？

谢谢！

Answer 1

这是您可以使用一种方法为任意正多边形设置圆形动画。

enter image description here

使用每边的二次曲线创建三角形（或任何正多边形）。

通过这种方式，您可以为二次曲线的控制点设置动画，以控制＆＃34;圆度＆＃34;您的多边形。

如果控制点位于多边形线上，则曲线的圆度为零，结果为多边形。

如果控制点位于多边形线之外，则曲线近似于圆的圆度，结果是多边形看起来像圆形。

To＆＃34; morph＆＃34;在circle-polygon之间，您只需为曲线的控制点设置动画。

我使用＆＃34;近似＆＃34;描述圆，因为二次曲线只能近似圆。如果你想要一个更好的圆，你可以重构我的代码，使用三次贝塞尔曲线而不是二次曲线。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/NMJ58/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // change sideCount to the # of poly sides desired
    //
    var sideCount=3;


    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=2;
    ctx.fillStyle=randomColor();

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var radius=100;

    var xx=function(a){return(cx+radius*Math.cos(a));}
    var yy=function(a){return(cy+radius*Math.sin(a));}
    var lerp=function(a,b,x){ return(a+x*(b-a)); }

    var sides=[];
    for(var i=0;i<sideCount;i++){
        sides.push(makeSide(i,sideCount));
    }

    var percent=0;
    var percentDirection=0.50;

    $("#toShape").click(function(){
        percentDirection=-0.50;
    })

    $("#toCircle").click(function(){
        percentDirection=0.50;
    })

    animate();

    // functions

    function animate(){
        requestAnimationFrame(animate);
        drawSides(percent);
        percent+=percentDirection;
        if(percent>100){percent=100;}
        if(percent<0){percent=0;}
    }

    function drawSides(pct,color){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        if(pct==100){
            ctx.beginPath();
            ctx.arc(cx,cy,radius,0,PI2);
            ctx.closePath();
            ctx.fill();
        }else{
            ctx.beginPath();
            ctx.moveTo(sides[0].x0,sides[0].y0);
            for(var i=0;i<sideCount;i++){
                var side=sides[i];
                var cpx=lerp(side.midX,side.cpX,pct/100);
                var cpy=lerp(side.midY,side.cpY,pct/100);        
                ctx.quadraticCurveTo(cpx,cpy,side.x2,side.y2);
            }
            ctx.fill();
        }
    }

    function makeSide(n,sideCount){
        var sweep=PI2/sideCount;
        var sAngle=sweep*(n-1);
        var eAngle=sweep*n;

        var x0=xx(sAngle);
        var y0=yy(sAngle);
        var x1=xx((eAngle+sAngle)/2);
        var y1=yy((eAngle+sAngle)/2);
        var x2=xx(eAngle);
        var y2=yy(eAngle);

        var dx=x2-x1;
        var dy=y2-y1;
        var a=Math.atan2(dy,dx);
        var midX=lerp(x0,x2,0.50);
        var midY=lerp(y0,y2,0.50);
        var cpX=2*x1-x0/2-x2/2;
        var cpY=2*y1-y0/2-y2/2;

        return({
            x0:x0, y0:y0,
            x2:x2, y2:y2,
            midX:midX, midY:midY,
            cpX:cpX, cpY:cpY,
            color:randomColor()
        });
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

}); // end $(function(){});
</script>
</head>
<body>
    <button id="toShape">Animate to Shape</button>
    <button id="toCircle">Animate to Circle</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

您可能希望使用Raphael（https://dmitrybaranovskiy.github.io/raphael/）或类似的库来为您处理此问题。 raphael网站包含许多与您描述的案例类似的示例。

Answer 3

很难理解你的确切目标以及在形状之间需要什么样的动画，因为你没有指定动画步骤/状态。但你可以看看 CSS3过渡。

我在下面的演示中做了一些演示如何模拟“形状变形”（这是核心术语吗？），如果这是你想要做的：

DEMO （点击圈子为其设置动画）

对于圆到矩形，过渡很容易实现，你只需要为border-radius设置动画：

CSS：

#rec {
    float:left;
    width:200px;
    height:200px;
    background:gold;
    border-radius:50%;
    -webkit-transition: border-radius 1s, width 1s;
    cursor:pointer;
}
#rec.animate {
    border-radius:0%;
    width:300px;
}

对于圆形到三角形，形状过渡有点难以实现，形状变形并不完美，需要改进，但你可以理解。

圆形和三角形用伪元素设置，动画显示一个或另一个有两个不同的过渡：

CSS：

/*CIRCLE TO TRIANGLE 1  */
#tr1{
    float:right;
    position:relative;    
    cursor:pointer;    
    width:200px;
    height:200px;
}
#tr1:before, #tr1:after{
    content:'';
    position:absolute;
}
#tr1:before{
    top:0; left:0;
    background:gold;
    border-radius:50%;
    width:100%;
    height:100%;
    -webkit-transition: width 1s, height 1s, left 1s, top 1s;
}
#tr1:after{
    left:50%;
    top:50%;
    border-left:0px solid transparent;
    border-right:0px solid transparent;
    border-bottom:0px solid gold;
    -webkit-transition: border-left 1s, border-right 1s, border-bottom 1s,left 1s, top 1s;
}
#tr1.animate:before{
    width:0;
    height:0;
    top:50%; left:50%;
}
#tr1.animate:after{
    top:0; left:0;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    border-bottom:200px solid gold;
}

/*CIRCLE TO TRIANGLE 2  */

#tr2{
    float:right;
    position:relative;    
    cursor:pointer;    
    width:200px;
    height:200px;
}
#tr2:before, #tr2:after{
    content:'';
    position:absolute;
}
#tr2:before{
    top:0; left:0;
    background:gold;
    border-radius:50%;
    width:100%;
    height:100%;
    -webkit-transition: width 1s, height 1s, left 1s, top 1s;
}
#tr2:after{
    left:20px;
    top:0;
    border-left:80px solid transparent;
    border-right:80px solid transparent;
    border-bottom:160px solid gold;
    -webkit-transition: border-left 1s, border-right 1s, border-bottom 1s,left 1s, top 1s;
    z-index:-1;
}
#tr2.animate:before{
    width:0;
    height:0;
    top:50%; left:50%;
}
#tr2.animate:after{
    top:0; left:0;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    border-bottom:200px solid gold;
}

Answer 4

（我会奖励@rje，因为他让我朝着正确的方向前进，经过所有的努力，我意识到我的问题对于我的问题的具体细节还不够详细。）

首先，我将解释我实际需要的内容：基本上是在创建一个＆＃34;形状＆＃34;在画布上下文中它很容易用作面具，通过面具我的意思是，让我们说你在画布的中间画一个圆圈，它仍然是透明的，但画布充满了某个颜色。直接使用raphael js是很奇怪的，直到你掌握它，因为它实际上是svg并且有不同的规则。你必须绘制一个与纸张匹配的外部路径（raphael＆＃34; canvas＆＃34;）和一个保持透明的内部路径。我面临的挑战是让它也具有响应性但是我设法使用这样的东西

var tw; // canvas width
var th; // canvas height
var tr; // radius of circle, in my case calculated dynamically smth like (th - 20) / 2
var outerpath = "M0,0L" + tw + ",0L" + tw + "," + th + "L0," + th + "L0,0z";
var innerpath = "M" + (tw/2) + "," + (th/2 - tr) + "A" + tr + "," + tr + "  0 1,0 " + (tw/2 + 0.1) + "," + (th/2 - tr) + "z";
var path = outerpath + innerpath;
var mask = paper.path(path).attr({'stroke': 0, 'fill' :  '#ccc', 'fill-opacity' : 0.9});

关于这一点的好处是使用Raphael你可以为它们设置动画，并使用例如innerpath来创建另一个形状并使用另一种颜色来填充它。惊人的。

谢谢大家。

HTML5 Canvas从圆形到三角形

4 个答案: