如何将矩形平滑地更改为圆形？

Question

我正在尝试使用 p5.js 库在 javascript 中制作动画。 我想让一个正方形改变它的形状变成一个圆形。

我尝试在正方形后面画一个圆圈并更改形状的大小，但这不是我想要的效果。

我需要实现这样的事情，旋转并不重要。

在此先感谢您的帮助！

Answer 1

根据这一点，你应该做些什么：

 var sideLength = 100; var increment = 0; function setup() { createCanvas(400, 400); fill(0); } function draw() { if(increment <= sideLength/2){ clear(); increment++; } rect(10, 10, sideLength, sideLength, increment); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> 

关键部分是使用rect（）函数 ，其中可以指定圆角半径的值。

Answer 2

我写信给你

<style>
.spinner {
    width: 50px;
    height: 50px;
    margin: 100px auto 0 auto;
    -webkit-animation: spin-rectangle-to-circle 2.5s ease-in-out infinite normal;
            animation: spin-rectangle-to-circle 2.5s ease-in-out infinite normal;
    background-color: tomato;
    border-radius: 1px;
}


@-webkit-keyframes spin-rectangle-to-circle {
    50% {
        border-radius: 50%;
        -webkit-transform: scale(0.5) rotate(360deg);
                transform: scale(0.5) rotate(360deg)
    }

    0%, 100% {

        -webkit-transform: scale(2) rotate(720deg);

                transform: scale(2) rotate(720deg)
    }
}


@keyframes spin-rectangle-to-circle {
    50% {
        border-radius: 50%;
        -webkit-transform: scale(0.5) rotate(360deg);
                transform: scale(0.5) rotate(360deg)
    }

    0%, 100% {

        -webkit-transform: scale(2) rotate(720deg);

                transform: scale(2) rotate(720deg)
    }

    </style>
    <div class="spinner"></div>