p5.js入门教程之平滑过渡(Easing)


Posted in Javascript onMarch 16, 2018

一、跟随鼠标移动的小球

使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 #Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 #Javascript
p5.js入门教程之小球动画示例代码
Mar 15 #Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 #Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 #Javascript
Angularjs Promise实例详解
Mar 15 #Javascript
p5.js入门教程和基本形状绘制
Mar 15 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
js定时器实例分享
2016/12/20 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python处理数据,存进hive表的方法
2018/07/04 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python生成词云的实现代码
2020/01/14 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
毕业自我鉴定总结
2014/03/24 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Nginx报404错误的详细解决方法
2022/07/23 Servers