本文最后更新于 1833 天前,其中的信息可能已经有所发展或是发生改变。
最近帮别人采用P5.js写了一个简单小动画,现在将程序记录如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
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() } |
模仿的动画如下
最终代码效果