一个开关动画的P5JS实现

发布 : 2019-04-12 分类 : 日常随笔

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

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–;
}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(CANVASSIDE0.385,CANVASSIDE0.5,CANVASSIDE0.27);
ellipse(CANVASSIDE
0.615,CANVASSIDE0.5,CANVASSIDE0.27);
rect(CANVASSIDE0.385,CANVASSIDE0.365,CANVASSIDE0.23,CANVASSIDE0.27);
strokeWeight(CANVASSIDE0.01);
ellipse(CANVASSIDE
0.62,CANVASSIDE0.5,CANVASSIDE0.08(1-SCHEDULE/SCHEDULEMAX));
strokeWeight(0);
fill(255,255
(SCHEDULE/SCHEDULEMAX));
rect(CANVASSIDE0.385,CANVASSIDE(0.5-0.05(SCHEDULE/SCHEDULEMAX)),CANVASSIDE0.015,CANVASSIDE0.1(SCHEDULE/SCHEDULEMAX));
}

function btnDraw(){
fill(255);
strokeWeight(0);
ellipse(CANVASSIDE(0.3825+0.2375(SCHEDULE/SCHEDULEMAX)),CANVASSIDE0.5,CANVASSIDE0.225);
}

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

模仿的动画如下
这是模仿的原效果

最终代码效果请自行运行查看。

本文作者 : 锦鲤
原文链接 : http://www.nekolines.com/passages/7a66cb33-4d0d-4c74-a1c8-850c864ee1bd/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

我很可爱,请给我钱

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食