Question

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

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

我需要实现这样的目标，旋转并不重要。 a busy cat

在此先感谢您的帮助！

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() function，其中可以指定圆角半径的值。

Answer 2

我使用p5.js为您开发了此动画。但是你必须努力

我没有完全使用p5.js

。但是可以肯定的是，通过这个示例，您可以开发自己的动画

html：

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.js"></script>

css：

html,
body {
  padding: 0;
  margin: 0;
  background-color: black;
  overflow: hidden;
}

js：

var theta=0;
var n = 0, a, b;
var frms = 120, num = 25;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(51);

  translate(width/2, height/2);
  push();
  rotate(theta);
  noFill();
  stroke(238, 150);

  for (var i=0; i<num; i++) {
    var offSet = PI/3/num*i;
    n = map(sin(theta+offSet), -1, 1, 0.1, 3);
    a = map(sin(theta), -1, 1, 100, 200);
    b = a;
    beginShape();
    for (var angle = 0; angle<TWO_PI; angle+= 0.1) {
      var na = 2/n;
      var x = pow(abs(cos(angle+offSet)), na)*a*sgn(cos(angle));
      var y = pow(abs(sin(angle+offSet)), na)*b*sgn(sin(angle));
      vertex(x, y);
    }
    endShape(CLOSE);
  }
  pop();
  theta += TWO_PI/frms;
}

function sgn(val) {
  if (val>0) {
    return 1;
  } else if (val<0) {
    return -1;
  } else {
    return 0;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Answer 3

我为你写信

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

如何使矩形平滑地变为圆形？

3 个答案: