java easing_p5.js入门教程之平滑过渡(Easing)
一、跟随鼠标移动的小球
使用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的值越大,跟随的速度会越快。
三、按钮变色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);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java easing_p5.js入门教程之平滑过渡(Easing)相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- js读取http chunk流_极简 Node.js入门 教程双工流
点击上方蓝字关注我们 小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门 教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读 双工流就是同时实现了 Readab ...
- Java基础小白入门教程-----百知教育java基础学习1---胡鑫喆
Java基础小白入门教程(胡大大出品,彩蛋请自寻) 胡鑫喆 https://www.bilibili.com/video/BV1wE411V7Zo?from=search&seid=38511 ...
- Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
- air调用java,AIR2.0入门教程:与Java应用交互
在之前的一篇文章中,我介绍了如何使用AIR2.0新增的NativeProcess类与本地进程进行交互和通讯,在那个例子里面我们使用了C++ 的代码,实际上只要是基于命令行的标准输入输出,AIR2.0的 ...
- JMS(Java消息服务)入门教程
什么是Java消息服务 Java消息服务指的是两个应用程序之间进行异步通信的API,它为标准消息协议和消息服务提供了一组通用接口,包括创建.发送.读取消息等,用于支持JAVA应用程序开发.在J2EE中 ...
- egg.js入门教程视频文件(转载于cnode社区)
记得上篇博客我满怀欣喜的去搞富文本,结果撞的头破血流. 简直是惨不忍睹.后来我也说了,我的那个有比较严重的问题,后期会考虑重构.(第一版已经放弃了) 之后我说我会去看关于后端nodejs koa框架方 ...
最新文章
- MathJax: 让前端支持数学公式
- Linux系统结构学习
- LeetCode Remove Nth Node From End of List
- python获取设备硬件信息_Python实现读取机器硬件信息的方法示例
- JQuery中的API--操作DOM
- flask基础之jinja2模板-语法定义
- pypinyin 获取多音字的拼音组合
- oracle能不能改外键属性,CSS_小议Oracle外键约束修改行为(五), Oracle的外键用来限制子表 - phpStudy...
- 关于在联想电脑管家更新网卡驱动后无法显示可用网络wifi的问题!
- Renesas:RH850的FCL库移植与使用
- 台湾Yahoo联手Mozilla 对抗Google
- 那些年你用过最好的键盘
- 送礼品的禁忌和注意事项
- Memcached学习(五)--LRU删除策略
- 手机网站支付(公钥证书方式)
- 【DB宝35】使用MySQL 8.0 克隆(clone)插件快速添加MGR节点
- IT 圈所谓的凛冬将至
- 论文阅读笔记(一)——铁饼鱼的面部识别:使用数字模型的实验方法
- 【QtScrcpy】开源的投屏控制软件 - 安利
- Kindle Touch 看pdf格式书籍
热门文章
- 《CATIA V5 从入门到精通(第二版)》——2.5 草绘可视化设置(Visualization)
- Linux Shell 函数返回值
- [USACO13DEC]牛奶调度Milk Scheduling
- 学习思考之《编程之美》.
- destoon 自定义session丢失
- Mac下 javac java 进行编译和运行含有包路径及引入jar包的类
- Task 6.2冲刺会议六 /2015-5-19
- 《玩转D语言系列》一、通过四个版本的 Hello Word 初识D语言
- 初识php的笔记(基础知识)
- UIApplication深入研究