html盒子移动动画代码,HTML5/Canvas 盒子追踪动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
class World {
constructor () {
this.canvas = document.getElementById("canvas");
this.ctx = canvas.getContext("2d");
this.h = this.canvas.height = window.innerHeight;
this.w = this.canvas.width = window.innerWidth;
this.ctx.lineWidth = 2;
this.bounce = 0.1;
this.gravity = 0.1;
this.friction = 0.99;
this.points = [];
this.points.push({
x: 100,
y: 100,
oldx: 95,
oldy: 105
});
this.points.push({
x: 100,
y: 200,
oldx: 95,
oldy: 201
});
this.points.push({
x: 200,
y: 100,
oldx: 201,
oldy: 101
});
this.points.push({
x: 200,
y: 200,
oldx: 201,
oldy: 201
});
this.sticks = [];
// Square
this.connectPoints(0, 1);
this.connectPoints(1, 2);
this.connectPoints(2, 3);
this.connectPoints(3, 0);
// Support cross, diagonals
// Try commenting them out
// and see what happens! ;)
this.connectPoints(0, 2);
this.connectPoints(1, 3);
this.onMove = this.onMove.bind(this);
this.canvas.addEventListener("mousemove", this.onMove);
this.canvas.addEventListener("touchmove", this.onMove);
}
connectPoints(index0, index1) {
this.sticks.push({
p0: this.points[index0],
p1: this.points[index1],
length: this.distance(
this.points[index0],
this.points[index1]),
});
}
onMove(e) {
var x = e.touches ? e.touches[0].clientX : e.clientX;
var y = e.touches ? e.touches[0].clientY : e.clientY;
var p0 = { x: x, y: y };
var p1 = this.getClosestPoint(p0);
var dist = this.distance(p0, p1);
if(dist < 55) {
p1.oldx = x;
p1.oldy = y;
}
}
getClosestPoint(p0) {
var index = 0;
this.points.map(p1 => this.distance(p0, p1)).reduce((prev, curr, i) => {
if(curr < prev) {
index = i;
}
return Math.min(curr, prev);
});
return this.points[index];
}
distance(p0, p1) {
var x = p1.x - p0.x;
var y = p1.y - p0.y;
return Math.sqrt(x*x + y*y);
}
update() {
this.ctx.clearRect(0, 0, this.w, this.h);
this.updatePoints();
this.updateSticks();
this.drawSticks();
}
drawSticks() {
this.ctx.beginPath();
this.sticks.forEach(s => {
this.ctx.moveTo(s.p0.x, s.p0.y);
this.ctx.lineTo(s.p1.x, s.p1.y);
});
this.ctx.stroke();
}
updatePoints() {
this.points.forEach(p => {
if(!p.pinned) {
var vx = (p.x - p.oldx) * this.friction;
var vy = (p.y - p.oldy) * this.friction;
p.oldx = p.x;
p.oldy = p.y;
// Ground friction
if(p.y > this.h - this.ctx.lineWidth) {
vx *= 0.5;
}
p.x += vx;
p.y += vy;
p.y += this.gravity;
if(p.x > this.w) {
p.x = this.w;
p.oldx = p.x + vx * this.bounce;
}
if(p.x < 0) {
p.x = 0;
p.oldx = vx * this.bounce;
}
if(p.y > this.h - this.ctx.lineWidth) {
p.y = this.h - this.ctx.lineWidth;
p.oldy = p.y + vy * this.bounce;
}
if(p.y < 0) {
p.y = 0;
p.oldy = vy * this.bounce;
}
}
});
}
updateSticks() {
this.sticks.forEach(s => {
var dx = s.p1.x - s.p0.x;
var dy = s.p1.y - s.p0.y;
var dist = Math.sqrt(dx*dx + dy*dy);
var diff = s.length - dist;
var percent = diff / dist / 2;
var offsetX = dx * percent;
var offsetY = dy * percent;
s.p0.x -= offsetX;
s.p0.y -= offsetY;
s.p1.x += offsetX;
s.p1.y += offsetY;
});
}
}
var world = new World();
function animate() {
world.update();
requestAnimationFrame(animate);
}
animate();
html盒子移动动画代码,HTML5/Canvas 盒子追踪动画相关推荐
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- 吓人代码html,HTML5 canvas幽灵鬼魂动画代码 (吓人的效果)
[实例简介] [实例截图] [核心代码] HTML5 canvas幽灵鬼魂动画代码 - 源码之家 canvas { position: fixed; top: 0; left: 0; } var bl ...
- html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动 轨迹动画特效.html5运动轨迹,行星动画特效 代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
- HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
最新文章
- Linux系统平台上软件安装心得
- selenium+python headless 爬虫环境配置
- mono-3.4.0 源码安装时出现的问题 [do-install] Error 2 [install-pcl-targets] Error 1 解决方法
- 关于FlexBox的布局
- S/4HANA业务角色概览之订单到收款篇
- 关闭文件夹或打印机共享服务器,局域网共享打印机好用,但文件夹不能访问
- 移动互联网开始降温:“人才热”退烧
- 聊聊3种最常见的响应式设计问题
- MarkDown总结(适合初学者快速入门)
- filetype 在搜索引擎中的使用方法(2)
- 关于范数与正则化详解(转)
- 第一章 http概述
- 【java】 jsp网页session和application,全局变量方法
- logging日志模块 , 序列化json pickle , 随机数random
- 无线通信设备安装工程概预算编制_安装造价工程 电气安装预算编制
- QQ音乐自定义音效通用设置
- bilibilidown 生成证书_哔哩哔哩(bilibili)助手
- 私有化(xx,_x,__xx,__xx__,xx_)
- Arctime——可视化字幕编辑器,解放你的双手
- 泰坦尼克号数据挖掘项目实战——Task1 数据分析