最近帮别人采用P5.js写了一个简单小动画，现在将程序记录如下

var CANVASSIDE = 200; //白色背景的边长
var SCHEDULE = 0; //起始位置，该值不得大于SCHEDULEMAX，该值具体动画位置为该值除以最大值
var SCHEDULEMAX = 30; //最大位置，影响动画速度，具体速度为该值/60秒，当前为1秒
var WAITTIME = 180; //状态变化后等待时间，具体时间为该值/60秒，当前为3秒
var sy = 1; //程序内变量
var time = 0; //程序内变量
function setup() {
    createCanvas(CANVASSIDE, CANVASSIDE);
}

function scheduleChange() {
    if (time != 0) {
        time = time -1;
    } else {
        if (SCHEDULE > SCHEDULEMAX || SCHEDULE < 0) {
            sy *= -1;
            time = WAITTIME;
        }
        SCHEDULE = SCHEDULE + sy;
    }
}

function bgDraw() {
    stroke(177, 255 - 255*(SCHEDULE / SCHEDULEMAX));
    strokeWeight(0);
    fill(234 - 151*(SCHEDULE / SCHEDULEMAX), 234 - 21*(SCHEDULE / SCHEDULEMAX), 234 - 229*(SCHEDULE / SCHEDULEMAX));
    ellipse(CANVASSIDE*0.385, CANVASSIDE*0.5, CANVASSIDE*0.27);
    ellipse(CANVASSIDE*0.615, CANVASSIDE*0.5, CANVASSIDE*0.27);
    rect(CANVASSIDE*0.385, CANVASSIDE*0.365, CANVASSIDE*0.23, CANVASSIDE*0.27);
    strokeWeight(CANVASSIDE*0.01);
    ellipse(CANVASSIDE*0.62, CANVASSIDE*0.5, CANVASSIDE*0.08*(1 - SCHEDULE / SCHEDULEMAX));
    strokeWeight(0);
    fill(255, 255*(SCHEDULE / SCHEDULEMAX));
    rect(CANVASSIDE*0.385, CANVASSIDE*(0.5 - 0.05*(SCHEDULE / SCHEDULEMAX)), CANVASSIDE*0.015, CANVASSIDE*0.1*(SCHEDULE / SCHEDULEMAX));
}

function btnDraw() {
    fill(255);
    strokeWeight(0);
    ellipse(CANVASSIDE*(0.3825 + 0.2375*(SCHEDULE / SCHEDULEMAX)), CANVASSIDE*0.5, CANVASSIDE*0.225);
}

function draw() {
    background(255);
    noFill();
    scheduleChange();
    bgDraw();
    btnDraw()
}

模仿的动画如下

最终代码效果