使用SVG+JS实现的几何夹角测量动画

SVG horizontal angle, svg是用于几何数学教学的很棒的技术。

svg, math

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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;
};

var _SVG = $$('svg'),
    VB = _SVG._attr('viewBox').split(' ').map(function(c) {
        return 1 * c;
    }),
    R = 1 * $$('#c')._attr('r'),
    CF = 180 / PI,
    K = .9,
    AT = 18,
    AT_IN = 30,
    AT_OUT = 15,
    _ME = {};

var f = undefined,
    ox = undefined,
    oy = undefined,
    drag = false,
    end = null,
    mr = undefined,
    ar = undefined,
    tr = undefined,
    ts0 = undefined,
    ts1 = undefined;

var size = function size() {
    var dh = undefined,
        r = _SVG.getBoundingClientRect();

f = VB[2] / min(r.width, r.height);
    dh = .5 * abs(r.width - r.height);
    ox = r.width > r.height ? dh : 0;
    oy = r.width > r.height ? 0 : dh;
};

var getE = function getE(ev) {
    return ev.touches ? ev.touches[0] : ev;
};

var lock = function lock(ev) {
    var e = getE(ev),
        t = e.target.correspondingUseElement || e.target;

drag = true;
    end = -pow(-1, t.parentNode.id === 'rp');
    _SVG.classList.add('drag');
};

var act = function act(ev) {
    if (drag) {
        var e = getE(ev),
            x = VB[0] + f * (e.clientX - ox),
            xr = undefined,
            y = VB[1] + f * (e.clientY - oy),
            yr = undefined,
            θ = undefined,
            θs = undefined,
            t = undefined,
            ts = undefined,
            fx = undefined,
            fy = undefined,
            ra = undefined,
            a = undefined,
            cf = undefined,
            mx = undefined,
            my = undefined,
            σ = undefined,
            σ1 = undefined,
            tx = undefined,
            ty = undefined,
            ax = undefined,
            ay = undefined;

θ = atan2(end * y, end * x);
        t = ceil(CF * θ);
        θ = t / CF;
        σ = sign(θ);
        σ1 = sign(x);
        θs = θ - (σ || -1) * PI;
        ts = t - (σ || -1) * 180;
        fx = cos(θ);
        fy = sin(θ);
        x = R * fx;
        y = R * fy;
        xr = round(x);
        yr = round(y);
        cf = θ ? .5 * (1 - σ) : 1;
        mx = round(mr * fx);
        my = round(mr * fy);
        tx = round(tr * fx);
        ty = round(tr * fy);
        ra = (abs(t) < AT_OUT ? .5 : 1) * ar;
        a = .5 * θ + σ * (abs(t) < AT_OUT) * PI / 6;
        ax = round(ra * cos(a));
        ay = round(K * ra * sin(a));

if (abs(ts) < AT && !_ME.m1.classList.contains('no-mark')) {
            _ME.m1.classList.add('no-mark');
        } else if (abs(ts) >= AT && _ME.m1.classList.contains('no-mark')) {
            _ME.m1.classList.remove('no-mark');
        }

if (abs(t) < AT && !_ME.m0.classList.contains('no-mark')) {
            _ME.m0.classList.add('no-mark');
        } else if (abs(t) >= AT && _ME.m0.classList.contains('no-mark')) {
            _ME.m0.classList.remove('no-mark');
        }

if (abs(t) < AT_IN && !_ME.ang.classList.contains('hidden')) {
            _ME.ang.classList.add('hidden');
        } else {
            _ME.ang._attr({
                x: .5 * ax,
                y: .5 * ay
            });

if (abs(t) >= AT_IN && _ME.ang.classList.contains('hidden')) {
                _ME.ang.classList.remove('hidden');
            }
        }

_ME.rot._attr({
            transform: 'rotate(' + t + ')'
        });
        _ME.h._attr({
            d: 'M' + xr + ',' + yr + 'h' + R + '\n\t\t\t \t\tM' + -xr + ',' + -yr + 'h' + R
        });

_ME.m0._attr({
            d: 'M0,0h' + mr + '\n\t\t\t\t\tA' + [mr, mr, 0, 0, 1 - cf, mx, my]
        });
        _ME.mc0._attr({
            x: -xr,
            y: -yr
        });
        _ME.mt0.textContent = t + '°';
        _ME.mt0._attr({
            x: ax,
            y: ay
        });
        _ME.t0._attr({
            x: -tx + .5 * (-σ1 - 1) * ts0.width,
            y: -ty + .5 * (-σ + 1) * ts0.height
        });

ra = (abs(ts) < AT_OUT ? .5 : 1) * ar;
        a = .5 * θs - σ * (abs(ts) < AT_OUT) * PI / 6;
        ax = round(ra * cos(a));
        ay = round(K * ra * sin(a));

_ME.m1._attr({
            d: 'M0,0h' + mr + '\n\t\t\t\t\tA' + [mr, mr, 0, 0, cf, -mx, -my]
        });
        _ME.mc1._attr({
            x: xr,
            y: yr
        });
        _ME.mt1.textContent = ts + '°';
        _ME.mt1._attr({
            x: ax,
            y: ay
        });
        _ME.t1._attr({
            x: tx + .5 * (σ1 - 1) * ts1.width,
            y: ty + .5 * (σ + 1) * ts1.height
        });
    }
};

var release = function release(ev) {
    if (drag) {
        drag = false;
        _SVG.classList.remove('drag');
    }
};

(function init() {
    var ids = ['rot', 'h', 'm0', 'm1', 't0', 't1', 'mt0', 'mt1', 'mc0', 'mc1', 'ang'],
        nids = ids.length,
        re = /h(.+)\s*A/gi;

for (var i = 0; i < nids; i++) {
        _ME[ids[i]] = $$('#' + ids[i]);
    }
    mr = 1 * _ME.m0._attr('d').match(re)[0].replace(re, '$1');

tr = $$('#p')._attr('r') * 2 + R;

ar = abs(1 * _ME.mt0._attr('x') / cos(.5 * _ME.mt0.textContent.replace('°', '') / CF));

ts0 = t0.getBBox();
    ts1 = t1.getBBox();

size();
})();

addEventListener('resize', size, false);

_ME.rot.addEventListener('mousedown', lock, false);
_ME.rot.addEventListener('touchstart', lock, false);

addEventListener('mousemove', act, false);
addEventListener('touchmove', act, false);

addEventListener('mouseup', release, false);
addEventListener('touchend', release, false);

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    height: 100vh;
}
svg {
    flex: 1;
}
line,
circle,
path {
    fill: currentcolor;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
}
text {
    font: 700 italic 7rem times new roman, serif;
}
tspan {
    font-size: .5em;
    dominant-baseline: baseline;
}
g text {
    font: 700 7rem consolas, monospace;
    text-anchor: middle;
    dominant-baseline: middle;
}
marker {
    fill-opacity: 1;
}
.hidden {
    opacity: 0;
}
.drag {
    user-select: none;
}
g .no-mark {
    marker-end: url(#a);
}
[id='a0'],
[id='arr0'] {
    color: #81d294;
}
[id='a1'],
[id='arr1'] {
    color: #4b447a;
}
[d*='A'] {
    fill-opacity: .17;
}
[id='a0'] {
    marker-end: url(#arr0);
}
[id='a1'] {
    marker-end: url(#arr1);
}
[id='cs'],
[id='o'],
[id='h'] {
    color: #807f85;
}
[id='axx'],
[d*='A'],
[id='h'] {
    stroke-width: 2px;
}
[id='axy'],
[id='c'] {
    opacity: 0.35;
}
[id='c'] {
    fill: none;
    color: #696484;
}
[id='rp'] {
    color: #2f2e58;
    cursor: pointer;
}
[id='rp'] line {
    stroke-width: 4px;
}
[id='rp'] circle {
    fill: #a1d2b4;
    stroke-width: 2px;
}

HTML

SVG horizontal angle, svg是用于几何数学教学的很棒的技术。

svg, math

编辑器支持Emmet

快捷键

SVG horizontal angle, svg是用于几何数学教学的很棒的技术。

svg, math

使用SVG+CSS3实现带旋转星辰背景的动画图标

一组很棒的使用GSAP实现的SVG加载动画+彩色格子布局+悬停放大

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：