使用html5 canvas模拟聊天界面动画

mock chat app with canvas_template.js

h5, chat, app

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2863
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let amountOfColors = 18;
let hueRot = 360 / amountOfColors;
let messages = [];
let nextAt = 0;

let chatLineWidth = 500;
let chatLineWidth40 = chatLineWidth * 0.4;
let chatLineWidth60 = chatLineWidth * 0.6;
let chatLineMaxHeight = chatLineWidth40;
let chatLinePadding = 10;
let chatLineRadius = chatLinePadding * 0.5;
let chatLineColor = hsl(0, 0, 14);
let chatProfileImgSize = 60;
let chatProfileImgRadius = chatLinePadding * 0.4;
let chatTextTiming = Array(10).fill(null).map((n, i) => i * 50 + 100);
let chatTextRadius = chatLinePadding * 0.2;
let chatTextWidth = chatLineWidth - chatLinePadding * 3 - chatProfileImgSize;
let chatTextHeight = 16;
let chatNameTimeWidth = chatTextWidth * 0.122;
let chatNameTimeColor = hsl(0, 0, 22);
let chatLineTextLightness = 28;
let richBodyAndImgLightness = 20;
let chatInputHeight = 40;
let chatInputHeight30 = chatInputHeight * 0.3;
let chatInputHeight40 = chatInputHeight * 0.4;
let chatInputHeight50 = chatInputHeight * 0.5;

class Message {
	constructor(e = performance.now()) {
		this.name = max(0.3, random()) * 0.5 * chatTextWidth;
		this.text = round(random(4)) + random(0.2, 0.85);
		this.hue = Math.floor(random(amountOfColors)) * hueRot;
		this.color = hsl(this.hue, 90, 50);
		this.profileImgColor = hsl(this.hue, 40, 55);
		this.img = random() > 0.9;
		this.richBody = !this.img && random() > 0.85;
		let bodyHeight = Math.max(chatProfileImgSize, (chatLinePadding + chatTextHeight) * ceil(this.text + 1) - chatLinePadding);
		this.totalHeight = chatLinePadding * 2 + (this.img || this.richBody ? chatLineMaxHeight : Math.min(chatLineMaxHeight, bodyHeight));
		this.easeHeightTime = ease.expo.out(this.totalHeight, 0, 500, chatLineMaxHeight);
		this.easeHeightTimeI = 1 / this.easeHeightTime;
		this.created = e;
	}
	anim(e = performance.now()) {
		let elapsed = e - this.created;
		let cT = ease.quart.inOut(constrain(elapsed * this.easeHeightTimeI, 0, 1), 0, 1, 1);
		let h = cT * this.totalHeight;
		let mB = cT * chatLinePadding;
		let y = -h - mB;
		let text = chatTextTiming.map(n => {
				let t = ease.quart.inOut(constrain((elapsed - n) / 500, 0, 1), 1, -1, 1);
				return { t, y: t * chatTextHeight * 2 };
			});
		return { elapsed, cT, h, mB, y, text };
	}
	draw(e = performance.now()) {
		push();
		
		let anim = this.anim(e);
		let { h, text, cT }  = anim;
		
		translate(-100, 0);
		scale(cT);
		translate(100, 0);
		
		translate(0, anim.y);
		
		let containerRadius = h < chatLineRadius * 2 ? h * 0.5 : chatLineRadius;
		
		beginPath();
		rect(0, 0, chatLineWidth, h, containerRadius);
		fill(chatLineColor);
		clip();
		
		translate(chatLinePadding, chatLinePadding + text[0].y);
		
		beginPath();
		rect(0, 0, chatProfileImgSize, chatProfileImgSize, chatProfileImgRadius);
		fill(this.profileImgColor);
		
		translate(chatProfileImgSize + chatLinePadding, 0);
		
		beginPath();
		rect(0, 0, this.name, chatTextHeight, chatTextRadius);
		fill(this.color);
		
		beginPath();
		rect(this.name + chatLinePadding, 0, chatNameTimeWidth, chatTextHeight, chatTextRadius);
		fill(chatNameTimeColor);
		
		translate(0, chatTextHeight + chatLinePadding);
		
		let ind = 0;
		for(let i = this.text; i > 0; i--, ind++) {
			let w = i > 1 ? chatTextWidth : i * chatTextWidth;
			let { y, t } = text[ind + 1];
			beginPath();
			rect(0, y, w, chatTextHeight, chatTextRadius);
			fill(hsl(0, 0, chatLineTextLightness, 1 - t));
			translate(0, chatTextHeight + chatLinePadding);
		}
		
		if(this.img || this.richBody) {
			let { y, t } = text[ind + 1];
			beginPath();
			if(this.richBody) {
				rect(0, y, 4, chatLineWidth60, 1);
				translate(chatLinePadding + 4, 0);
				rect(0, y, chatLineWidth40, chatTextHeight, chatTextRadius);
				translate(0, chatLinePadding + chatTextHeight);
			}
			rect(0, y, chatLineWidth60, chatLineWidth60, chatLineRadius);
			fill(hsl(0, 0, richBodyAndImgLightness, 1 - t));
		}
		
		pop();
		
		return anim;
	}
}

编译

CSS

HTML

mock chat app with canvas_template.js

h5, chat, app

编辑器支持Emmet

快捷键

mock chat app with canvas_template.js

h5, chat, app

使用html5 canvas绘制丝绸缎带形状飘扬的动画

html5 canvas上绘制无穷大符号粒子加载动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：