Как я могу плавно изменить прямоугольник на круг?

Question

Я пытаюсь сделать анимацию в javascript, используя библиотеку p5.js.Я хочу, чтобы квадрат изменил свою форму, превратившись в круг.

Я попытался нарисовать круг за квадратом и изменить размер фигур, но это не тот эффект, который я ищу.

Мне нужно добиться чего-то подобного, вращение не важно.

Заранее спасибо за помощь!

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>