p5.js入門教程之平滑過渡(Easing)
更新時間：2018年03月16日 08:36:24 作者：西河某人
本篇文章主要介紹了p5.js入門教程之平滑過渡(Easing)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、跟隨鼠標(biāo)移動的小球
使用mouseX,mouseY可以創(chuàng)建一個跟隨鼠標(biāo)移動的小球。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(mouseX,mouseY,20,20);
}
二、讓小球更加平滑的移動——使用Easing
一般制作精良的UI界面都會用到平滑移動這一效果，也就是利用了名為“Easing”的方法。
實現(xiàn)思路是另外設(shè)置變量以進行位置的過渡，代碼如下：
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
當(dāng)然，不僅僅是在物體運動，一切涉及數(shù)值變化的都可以使用Easing來進行過渡。
以下代碼是一個按鈕，當(dāng)鼠標(biāo)移到上方時，會逐漸變色，也是用了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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
今天小編就為大家分享一篇layer彈出層擴展主題的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要是對js+div實現(xiàn)圖片滾動效果的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
前端使用JS內(nèi)置Blob實現(xiàn)下載各種形式的文件實例
通過使用JavaScript我們可以很方便地實現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實現(xiàn)下載各種形式文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
JavaScript(js)設(shè)置默認輸入焦點(focus)
常常會在回復(fù)和引用里使用此功能，即單擊回復(fù)或引用，如讓輸入焦點出現(xiàn)在留言輸入框中，如果使用錨來定位，輸入焦點就不能激活了,需要了解的朋友可以參考下2012-12-12
Canvas實現(xiàn)動態(tài)粒子文字效果的代碼示例
這篇文章主要介紹了如何用Canvas實現(xiàn)動態(tài)粒子文字效果,文中有完整的代碼示例,文章通過代碼介紹的非常清楚,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
JS實現(xiàn)駝峰字符串轉(zhuǎn)下劃線字符串的三種方法
這篇文章主要介紹了js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-11-11
這篇文章主要介紹了可以用JavaScript實現(xiàn)的常用的三種網(wǎng)頁特效：offset系列、client系列、scroll系列。文中示例代碼簡潔易懂，感興趣的小伙伴可以了解一下2021-12-12
echarts地圖繪制自定義標(biāo)記實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts地圖繪制自定義標(biāo)記實現(xiàn)的相關(guān)資料,ECharts地圖是一個功能強大的數(shù)據(jù)可視化工具,基于百度ECharts開源項目開發(fā)而成,它主要用于在網(wǎng)頁中展示各種地理數(shù)據(jù)和地圖的信息,需要的朋友可以參考下2023-11-11
js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
使用clipboard.js庫實現(xiàn)復(fù)制剪切功能
這篇文章介紹了clipboard.js實現(xiàn)復(fù)制功能的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06