国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

p5.js入門教程之平滑過渡(Easing)

來源:懂視網 責編:小采 時間:2020-11-27 22:17:33
文檔

p5.js入門教程之平滑過渡(Easing)

p5.js入門教程之平滑過渡(Easing):一、跟隨鼠標移動的小球 使用mouseX,mouseY可以創建一個跟隨鼠標移動的小球。 function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二、讓小球更加
推薦度:
導讀p5.js入門教程之平滑過渡(Easing):一、跟隨鼠標移動的小球 使用mouseX,mouseY可以創建一個跟隨鼠標移動的小球。 function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二、讓小球更加

一、跟隨鼠標移動的小球

使用mouseX,mouseY可以創建一個跟隨鼠標移動的小球。

function setup() { 
 createCanvas(400, 400); 
 
} 
 
function draw() { 
 background(220); 
 ellipse(mouseX,mouseY,20,20); 
} 

二、讓小球更加平滑的移動——使用Easing

一般制作精良的UI界面都會用到平滑移動這一效果,也就是利用了名為“Easing”的方法。

實現思路是另外設置變量以進行位置的過渡,代碼如下:

var x=0; 
var y=0; 
var targetX=0; 
var targetY=0; 
var easing=0.1; 
function setup() { 
 createCanvas(400, 400); 
 x=mouseX; 
 y=mouseY; 
} 
 
function draw() { 
 background(220); 
 targetX=mouseX; 
 targetY=mouseY; 
 x+=(targetX-x)*easing; 
 y+=(targetY-y)*easing; 
 ellipse(x,y,20,20); 
} 

easing的值越大,跟隨的速度會越快。

最終效果:https://alpha.editor.p5js.org/full/Sy96bL-8b

三、按鈕變色Easing

當然,不僅僅是在物體運動,一切涉及數值變化的都可以使用Easing來進行過渡。

以下代碼是一個按鈕,當鼠標移到上方時,會逐漸變色,也是用了Easing進行過渡。

var rectX=0; 
var rectY=0; 
var rectHeight=100*0.618; 
var rectWidth=100; 
var hoverR=255; 
var hoverG=128; 
var hoverB=128 
var exitR=255; 
var exitG=255; 
var exitB=255; 
var R=0; 
var G=0; 
var B=0; 
var ease=0.1; 
 
function setup() { 
 createCanvas(400, 400); 
 rectX=width/2; 
 rectY=height/2; 
 R=exitR; 
 G=exitG; 
 B=exitB; 
} 
 
function draw() { 
 background(220); 
 if(mouseX>=rectX-rectWidth/2 && mouseX<=rectX+rectWidth/2&& 
 mouseY>=rectY-rectHeight/2 && mouseY<=rectY+rectHeight/2){ 
 R+=(hoverR-R)*ease; 
 G+=(hoverG-G)*ease; 
 B+=(hoverB-B)*ease; 
 }else{ 
 R+=(exitR-R)*ease; 
 G+=(exitG-G)*ease; 
 B+=(exitB-B)*ease; 
 } 
 fill(R,G,B); 
 rectMode(CENTER); 
 rect(rectX,rectY,rectWidth,rectHeight,8); 
} 

最終效果:http://alpha.editor.p5js.org/full/BJuEqvW8W

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

p5.js入門教程之平滑過渡(Easing)

p5.js入門教程之平滑過渡(Easing):一、跟隨鼠標移動的小球 使用mouseX,mouseY可以創建一個跟隨鼠標移動的小球。 function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二、讓小球更加
推薦度:
標簽: 平滑 easing p5js
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国偷自产一区二区免费视频 | 夜夜操夜夜 | 精品国产自在在线在线观看 | 在线视频亚洲欧美 | 日本三级韩国三级欧美三级 | 日本成人a | 日本激情一区二区三区 | 国产码欧美日韩高清综合一区 | 亚欧精品一区二区三区 | 国产精品综合一区二区 | 啪啪免费网址 | 91欧美在线| 欧美综合国产精品日韩一 | 久久国产精品久久精 | 亚洲欧美影视 | 精品一区二区三区在线成人 | 国产最新精品视频 | 欧美日本一本 | 91大神在线观看精品一区 | 欧美日韩一区二区三区在线 | 亚洲一区二区三区久久精品 | 国产99久久亚洲综合精品 | 可以看的毛片 | 亚洲国产成人久久一区www妖精 | 亚洲国产精品成人久久 | 亚洲欧美在线综合 | 中文字幕一区二区在线观看 | 国内精品伊人久久久影视 | 精品久久久久国产 | 亚洲一区二区视频在线观看 | 国产成人高清一区二区私人 | 精品国产日韩一区三区 | 国产成人久久777777 | 欧美日本日韩aⅴ在线视频 欧美日韩91 | 国产一区二区三区成人久久片 | 国产亚洲午夜精品a一区二区 | 亚洲欧美日韩成人一区在线 | 精品亚洲一区二区 | 久久国产精品高清一区二区三区 | 国产成人高清亚洲一区久久 | 美女视频黄a视频全免费网站一区 |