d3泡泡球生成动画效果
代码语言:html
所属分类:动画
代码描述:d3泡泡球生成动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body, html { height: 100%; } body { margin: 0; } html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; } .bubbles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: manipulation; width: auto; height: auto; } .bubble { position: absolute; background-color: var(--color); border: 4px solid var(--color); border-radius: calc(var(--radius) * 1px); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0); color: rgba(52, 73, 94, 0.75); cursor: pointer; font-size: 3rem; font-weight: lighter; outline: 0; padding: 0; -webkit-tap-highlight-color: transparent; transform: translate(-50%, -50%) translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) scale(var(--scale)); transition: box-shadow 200ms; width: calc(var(--radius) * 2px); height: calc(var(--radius) * 2px); } .bubble--active { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.9); } </style> </head> <body translate="no"> <section class="bubbles"></section> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script> <script > class Bubbles { static CLASS_BUBBLE = 'bubble' static CLASS_BUBBLE_ACTIVE = 'bubble--active' static CLASS_BUBBLES = 'bubbles' container = null data = [ ] element = null selection = null simulation = null constructor() { this.bindMethodContexts([ 'bubbleClick', 'bubbleDragStart', 'bubbleDragMove', 'bubbleDragEnd', 'joinEnter', 'simulationTick' ]) } bindMethodContexts(methodNames) { methodNames.forEach((methodName) => { this[methodName] = this[methodName].bind(this) }) } bubbleClick(datum) { const noParent = datum.parent === null if (noParent) { if (datum.active) { const parentDatum = datum const { CLASS_BUBBLE } = this.constructor this.selection .selectAll(`.${CLASS_BUBBLE}`) .filter((datum) => datum.parent === parentDatum.id) .transition() .delay(() => Math.random() * 200) .duration(800) .styleTween('--scale', (datum) => { return (ratio) => { const scale = d3.easeCubicIn(1 - ratio) datum.scale = scale this.refreshSimulation() return scale } }) .on('end', () => { this.data = this.data.filter((datum) => datum.parent !== parentDatum.id) this.setUpSelection() this.refreshSimulation() }) } else { this.data = this.data.concat(datum.subdata.map((subdatum) => { subdatum.x = datum.x subdatum.y = datum.y return subdatum })) this.setUpSelection() this.refreshSimulation() } } datum.active = !datum.active } bubbleDragStart(datum) { this.restartSimulation() datum.ox = datum.x - d3.event.x datum.oy = datum.y - d3.event.y datum.fx = datum.x datum.fy = datum.y } bubbleDragMove(datum) { datum.fx = d3.event.x + datum.ox datum.fy = d3.event.y + datum.oy } bubbleDragEnd(datum) { datum.fx = null datum.fy = null } generateData(parent) { const amount = parent ? 6 : 7 const colors = ['#1ABC9C', '#2ECC71', '#3498DB', '#9B59B6', '#E67E22', '#E74C3C', '#F1C40F'] const da.........完整代码请登录后点击上方下载按钮下载查看
网友评论0