HTML5解释数学弧度（圆周率PI）的动画

radians explained with html5(svg+js)

html5, svg, math

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const D = {} /* demo components */, 
			C = {} /* list of constants */;

let ease = function(t, typ) {
	switch(typ) {
		case 'eInOutSin':
			return .5*(1 + sin(PI*(t - .5)));
	}
	
	return t;
};

(function init() {
	(function genConstVals() {
		C.BA = 1; /* base angle */
		C.CA = .5*PI - C.BA; /* complem of base */
		C.RA = PI - 3*C.BA; /* remainder angle */
		C.CV = 180/PI; /* converstion to degrees */
		C.DG = C.BA*C.CV; /* in degrees */
		C.F = .345; /* curve factor */
		C.NF = 40; /* basic uni no of frames */
		C.BT = 500; /* ms break time after ani */
		C.FF = 2*C.NF; /* for full circ */
		C.R = ~~$$('#circle')._attr('r'); /* rad */
		C.S = C.F*C.R; /* scaled radius */
		C.C = 1.5*C.R; /* clipping radius */
		C.L = round(2*PI*C.R); /* circle len */
		C.PF = ['M', 'C']; /* path dir prefs */
	})();
	
	(function genDemoComps() {
		let act = [
			'exp', 'drw', 'vrt', 'arc', 'rot'
		], na = act.length, 
				sel = '#rlines', nr, nt, 
				cb = 'M0,0H' + C.C + 'A' + [C.C, C.C] + ' 0 0 1 ';
		
		D.rotID = 0;
		D.curr = 0;
		
		D.morphr = {
			'rt': $$('#anim'), 
			'el': $$('#morphr'), 
			'pts': [], 
			'csets': {
				'ini': [], 
				'exp': [], 
				'vrt': [], 
				'arc': []
			}, 
			'init': function() {
				let ids = ['s', null, null, 'e'], 
						x = C.R*cos(C.BA), 
						y = C.R*sin(C.BA);
				
				for(let i = 0; i < 4; i++) {
					let j = ~~(.5*i), k = 1 - j;
					
					this.pts.push(new Point(ids[i]));
					this.csets.ini.push([0, 0]);
					this.csets.exp.push([j*C.R, 0]);
					this.csets.vrt.push([C.R, k*C.R])
					this.csets.arc.push([j*C.R + k*x, k*y])
				}
				
				x += C.S*cos(C.CA);
				y -= C.S*sin(C.CA);
				this.csets.arc[2][1] = C.S;
				this.csets.arc[1][0] = x;
				this.csets.arc[1][1] = y;
			}
		};
		
		D.slicer = $$('#slicer path');
		D.cutter = $$('#cutter path');
		
		D.base = {
			'el': $$('#base'), 
			'init': function() {
				this.el._attr({
					'stroke-dasharray': C.L, 
					'stroke-dashoffset': C.L
				});
			}
		};
		
		D.rlines = $$(sel + ' use');
		nr = D.rlines.length;
		D.labels = $$(sel + ' text');
		nt = D.labels.length;
		
		D.over =  $$('#over')
		
		/* extend point to radius */
		D[act[0]] = function(k) {
			let p = this.morphr.pts, 
					s = this.morphr.csets, 
					d = 'M0,0C0,0', 
					a = s.ini, b = s.exp, j = 1 - k, 
					x = j*a[2][0] + k*b[2][0];
			
			if(k === 0) {
				let u = C.C*cos(C.BA), 
						v = C.C*sin(C.BA), 
						d = cb + [u, v];
				
				this.slicer._attr({'d' : d})
				
				p[0].move({'x': 0, 'y': 0});
				p[1].move({'x': 0, 'y': 0});
				this.morphr.rt.style.opacity = .99;
				this.morphr.rt._attr({
					'transform': 'rotate(0)'
				});
				this.morphr.pts[0].el._attr({
					'transform': 'rotate(0)'
				});
				this.base.el._attr({
					'stroke-dashoffset': C.L
				});
				this.over.style.opacity = .001;
				
				for(let i = 0; i < nt; i++) {
					if(i < nr) 
						this.rlines[i].style.opacity = .001;
					this.labels[i].style.opacity = .001;
				}
				this.rlines[4]._attr({
					'transform': 
					'rotate(' + C.DG.toFixed(3) + ')'
				});
			}
			
			for(let i = 2; i < 4; i++) {				
				p[i].move({'x': x});
				d += ' ' + x + ',0';
			}
			
			this.morphr.el._attr({
				'd': d, 'clip-path': 'none'
			});
		};
		
		/* rotate radius to draw circle */
		D[act[1]] = function(k) {
			D.morphr.rt._attr({
				'transform': 'rotate(' + k*360 + ')'
			});
			D.base.el._attr({
				'stroke-dashoffset': (1 - k)*C.L
			});
		};
		
		/* rotate radius to vertical */
		D[act[2]] = function(k) {
			this.morphr.rt._attr({
				'transform':
				'rotate(' + k*-90 + ' ' + C.R +  ' 0)'
			})
		};
		
		/* bend radius to arc */
		D[act[3]] = function(k) {
			let p = this.morphr.pts, 
					s = this.morphr.csets, 
					d = '', 
					a = s.vrt, b = s.arc, j = 1 - k;
			
			if(k === 0) {
				this.morphr.rt._attr({
					'transform': 'rotate(0)'
				})
			}
			
			if(k === 1) {
				this.rlines[0].style.opacity = 
				this.rlines[1].style.opacity = 
				this.rlines[4].style.opacity = 
				this.labels[0].style.opacity = 
				this.labels[1].style.opacity = 
				this.over.style.opacity = '.999';
			}
			
			for(let i = 0; i < 3; i++) {
				let x = j*a[i][0] + k*b[i][0], 
						y = j*a[i][1] + k*b[i][1];
				
				p[i].move({'x': x, 'y': y});
				d += (C.PF[i] || ' ') + [x, y];
			}
			
			d += ' ' + [C.R, 0];
			this.morphr.el._attr({'d': d});
		};
		
		/* rotate radius-len arc by 1 more BA */
		D[act[4]] = function(k) {
			let a = (D.rotID + k)*C.DG, 
					b = 180 - C.DG;
			
			this.morphr.rt._attr({
				'transform': 
				'rotate(' + a.toFixed(3) + ')'
			});
			
			this.rlines[4]._attr({
				'transform': 
				'rotate(' + min(180, a + C.DG).toFixed(3) + ')'
			});
			
			if(a > b) {
				let t = C.BA + (b - a)/C.CV, 
						x = round(C.C*cos(t)), 
						y = round(C.C*sin(t)), 
						d = cb + [x, y];
				
				this.slicer._attr({'d' : cb + [-C.C, 0]});
				this.cutter._attr({'d' : d});
				this.morphr.el._attr({
					'clip-path': 'url(#cutter)'
				});
				
				this.morphr.pts[0].el._attr({
					'transform': 'rotate(' + (b - a) + ')'
				});
			}
			else {
				let t = a/C.CV + C.BA, 
						x = C.C*cos(t), 
						y = C.C*sin(t), 
						d = cb + [x, y];
				
				this.slicer._attr({'d' : d})
				this.rlines[4]._attr({
					'transform': 
					'rotate(' + (a + C.DG).toFixed(3) + ')'
				});
			}
			
			if(k === 1) {				
				if(D.rotID < 2) {
					let idx = D.rotID + 2;
					this.rlines[idx].style.opacity = 
					this.labels[idx].style.opacity = .999;
				}
				else {
					this.labels[4].style.opacity = 
					this.labels[5].style.opacity = 
					this.labels[6].style.opacity = .999;
					this.morphr.rt.style.opacity = .001;
				}
			}
		};
		
		/* return next action */
		D.next = function() {
			if(D.curr === act.indexOf('rot') && 
				 D.rotID < 2) {
				++D.rotID;
			}
			else {
				D.rotID = 0;
				D.curr = (D.curr + 1)%na;
			}
			
			return act[D.curr];
		};
		
		/* return duration for next action */
		D.dur = function() {
			if(D.curr === act.indexOf('drw'))
				return C.FF
			return C.NF;
		};
	})();
	
	(function iniDemoComps() {
		D.morphr.init();
		D.base.init();
	})();
	
	ani({'t': 0, 'n': D.dur(), 'ani': 'exp'});
})();

编译

CSS

* {
    transition: opacity .3s;
}
body {
    display: flex;
    overflow: hidden;
    margin: 0;
    height: 100vh;
}
svg {
    flex: 1;
}
line,
circle,
path {
    fill: currentColor;
    stroke: currentColor;
}
line {
    vector-effect: non-scaling-stroke;
}
text {
    fill: currentColor;
    text-anchor: middle;
    font: 700 8em courier, monospace;
}
tspan {
    font: 700 italic 1em serif;
}
.vlni {
    fill: none;
    stroke-width: 1.5em;
}
[id='axes'] {
    opacity: .5;
}
[id='axes'] use {
    marker-end: url(#arrow);
}
[id='axes'] text {
    dominant-baseline: middle;
}
[id='base'] {
    color: #dea200;
}
[id='over'] {
    color: #a048b9;
}
[id='over'] circle {
    fill-opacity: .5;
    stroke-width: 4px;
    vector-effect: non-scaling-stroke;
}
[id='rlines'] {
    color: #a048b9;
}
[id='rlines'] use:first-of-type,
[id='rlines'] use:last-of-type {
    stroke-width: 3px;
}
[id='rlines'] > text {
    dominant-baseline: middle;
}
[id='rlines'] > text:first-of-type,
[id='rlines'] > text:last-of-type {
    dominant-baseline: hanging;
}
[id='anim'] {
    color: #d14730;
}
[id='anim'] path {
    stroke-width: 2em;
}
[id='anim'] use {
    stroke-width: 1em;
}

HTML

var $ = document;

var $$ = function $$(sel) {
        var arr = undefined;

if (sel.charAt('0') === '#' && sel.indexOf(' ') < 0) {
            return $.getElementById(sel.replace('#', ''));
        }

arr = [].slice.call($.querySelectorAll(sel));
        if (arr.length < 2) arr = arr[0];
        return arr;
    };

Object.getOwnPropertyNames(Math).map(function(p) {
        window[p] = Math[p];
    });

var rand = function rand() {
        var max = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
        var min = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var _int = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];

var gen = min + (max - min) * random();
        return _int ? round(gen) : gen;
    };

var randsgn = function randsgn() {
        return random() > .5 ? 1 : -1;
    };

Node.prototype._attr = function(a) {
        if (typeof a === 'string') return this.getAttribute(a);
        else {
            for (var p in a) {
                this.setAttribute(p, a[p]);
            }
        }
    };

Node.prototype._add = function(content, before, tag, classes, dataset, ns) {
        var node = undefined,
            n = undefined;

node = tag ? ns ? $.createElementNS(ns, tag) : $.createElement(tag) : $.createTextNode(content);

if (tag) {
            if (classes) {
                n = classes.length;

while (n--) {
                    node.classList.add(classes[n]);
                }
            }
            if (content || content === 0) node.textContent = content;
            if (dataset) node._attr(dataset);
        }

if (typeof before === 'number') this.insertBefore(node, before);
        else this.appendChild(node);

return node;
    };
</script>

radians explained with html5(svg+js)

html5, svg, math

编辑器支持Emmet

快捷键

radians explained with html5(svg+js)

html5, svg, math

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

使用HTML5和ES6（JS）实现的在线数独游戏生成器和解答

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：