HTML5 Hammer.js 阿米巴变形虫交互动画

amoeba animation, 可用来模拟细胞分裂的交互效果。

h5, worm

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function() {

var html = '\n\t\t\t<svg viewBox="0 -8 63.3 55">\n\t\t\t  <title>creative coding club logo</title>\n\t\t\t<g>\n\t\t\t  <path fill="#fff" d="M1093.5,81.7V81.5a1,1,0,0,1,.4-0.7l14.8-9a0.8,0.8,0,0,1,1.2.7v3.7a0.9,0.9,0,0,1-.3.6l-8.1,4.8,8.1,4.6a0.9,0.9,0,0,1,.3.6v3.7a0.8,0.8,0,0,1-1.2.7l-14.8-8.7A1,1,0,0,1,1093.5,81.7Z" transform="translate(-1093.5 -63.9)"></path>\n\t\t\t  <path fill="#fff" d="M1140.4,86.7a0.9,0.9,0,0,1,.3-0.6l8.1-4.6-8.1-4.8a0.9,0.9,0,0,1-.3-0.6V72.5a0.8,0.8,0,0,1,1.2-.7l14.8,9a1,1,0,0,1,.4.7v0.2a1,1,0,0,1-.4.7L1141.6,91a0.8,0.8,0,0,1-1.2-.7V86.7Z" transform="translate(-1093.5 -63.9)"></path>\n\t\t\t</g>\n\t\t\t\t<g class="brush">\n\t\t\t\t<path fill="#fff" d="M1113.5,97c-4.4,1-1.5,5.8-8.3,6.3,2.1,1.3,6.1,1.4,8.2.9s4.6-2.4,4.1-4.8A3.3,3.3,0,0,0,1113.5,97Z" transform="translate(-1093.5 -63.9)"></path>\n\t\t\t\t  <path fill="#fff" d="M1134.8,64.1a0.6,0.6,0,0,1,.7-0.2l1.7,1.2a0.6,0.6,0,0,1,.2.7l-17.6,31.6a0.6,0.6,0,0,1-.7.2L1115,95a0.6,0.6,0,0,1-.2-0.7Z" transform="translate(-1093.5 -63.9)"></path>\n\t\t\t\t</g>\n\t\t\t</svg>\n\n\t\t\t<div class="h1-container">\n\t\t\t\t<h1>\n\t\t\t\t\t<span>C</span>\n\t\t\t\t\t<span>r</span>\n\t\t\t\t\t<span>e</span>\n\t\t\t\t\t<span>a</span>\n\t\t\t\t\t<span>t</span>\n\t\t\t\t\t<span>i</span>\n\t\t\t\t\t<span>v</span>\n\t\t\t\t\t<span>e</span>\n\t\t\t\t\t<br>\n\t\t\t\t\t<span>C</span>\n\t\t\t\t\t<span>o</span>\n\t\t\t\t\t<span>d</span>\n\t\t\t\t\t<span>i</span>\n\t\t\t\t\t<span>n</span>\n\t\t\t\t\t<span>g</span>\n\t\t\t\t\t<br>\n\t\t\t\t\t<span>C</span>\n\t\t\t\t\t<span>l</span>\n\t\t\t\t\t<span>u</span>\n\t\t\t\t\t<span>b</span>\t\n\t\t\t\t</h1>\n\t\t\t</div>';

document.head.insertAdjacentHTML('beforeend', css);

var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.setAttribute('target', '_blank');
    a.setAttribute('class', 'ccc-box');
    a.innerHTML = html;

var animationFrame$ = Rx.Observable.interval(0, Rx.Scheduler.animationFrame);

/**
 * Create an observable stream to handle drag gesture
 */
var drag = function drag(_ref) {
    var element = _ref.element,
        pan$ = _ref.pan$,
        onStart = _ref.onStart,
        onEnd = _ref.onEnd;

return panStart$.switchMap(function() {
        var _getStartInfo = getStartInfo(element),
            start = _getStartInfo.start,
            w = _getStartInfo.w,
            h = _getStartInfo.h;

return panMove$.map(scaleToCanvas({
            start: start,
            w: w,
            h: h
        })).takeUntil(panEnd$);
    });
};

/**
 * Generate the drag handler for a DOM element
 */
function handleDrag(element) {
    var hammerPan = new Hammer(element, {
        direction: Hammer.DIRECTION_ALL
    });

hammerPan.get('pan').set({
        direction: Hammer.DIRECTION_ALL
    });
    var pan$ = Rx.Observable.fromEvent(hammerPan, 'panstart panmove panend');

var drag$ = drag({
        element: element,
        pan$: pan$
    });

return animationFrame$.withLatestFrom(drag$, function(_, p) {
        return p;
    });
}

/**
 * Amoeba drag location as an observable
 */
var amoebaDrag$ = handleDrag(amoeba.child.ectoplasm);

// Derive lerped location from amoebaDrag$
var dragWithLerp = function dragWithLerp() {
    var lerpiness = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.05;
    var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [400, 600];
    return amoebaDrag$.scan(lerp(lerpiness)).map(function(p) {
        return [p.x, p.y];
    }).startWith(start);
};

/**
 * Movement and mitosis logic
 */
var mitosis$ = new Rx.Subject();

// Move individual parts based on drag$
var membrane$ = dragWithLerp(0.03).do(function(loc) {
    moveTo(loc, amoeba.parent.membrane);
    moveTo(loc, amoeba.parent.ectoplasm);
    moveTo(loc, amoeba.parent.nucleus);
}).takeUntil(mitosis$).share();
var nucleus$ = dragWithLerp(0.075).do(function(loc) {
    return moveTo(loc, amoeba.child.nucleus);
}).share();
var core$ = dragWithLerp(0.07).do(function(loc) {
    moveTo(loc, amoeba.child.membrane);
    moveTo(loc, amoeba.child.ectoplasm);
}).share();

/**
 * Various metaball style connectors
 */
var membraneConnector$ = Rx.Observable.combineLatest(membrane$, core$, function(membraneLoc, coreLoc) {
    return metaball(SIZES.PARENT_MEMBRANE, SIZES.CHILD_MEMBRANE, membraneLoc, coreLoc, function() {
        mitosis$.next(true);
    });
}).share().do(function(path) {
    amoeba.membraneConnector.setAttribute('d', path);
}).takeUntil(mitosis$).do(null, null, function() {
    amoeba.membraneConnector.setAttribute('d', '');
    amoeba.child.membrane.setAttribute('opacity', 1);
    amoeba.parent.core.setAttribute('opacity', 1);
});

Rx.Observable.merge(membrane$, nucleus$, core$, membraneConnector$, ectoplasmConnector$, nucleusConnector$).subscribe(function() {});

/**
 * Based on Metaball script by SATO Hiroyuki
 * http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
 */
function metaball(radius1, radius2, center1, center2) {
    var onMitosis = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function() {};
    var handleLenRate = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 2.4;
    var v = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.5;

var HALF_PI = Math.PI / 2;
    var d = dist(center1, center2);
    var maxDist = radius1 + radius2 * 2.5;
    var u1 = void 0,
        u2 = void 0;

if (radius1 === 0 || radius2 === 0) {
        return '';
    }

if (d > maxDist) {
        onMitosis();
        return '';
    }

if (d <= Math.abs(radius1 - radius2)) {
        return '';
    } else if (d < radius1 + radius2) {
        u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) / (2 * radius1 * d));
        u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) / (2 * radius2 * d));
    } else {
        u1 = 0;
        u2 = 0;
    }

// All the angles
    var angle1 = angle(center2, center1);
    var angle2 = Math.acos((radius1 - radius2) / d);
    var angle1a = angle1 + u1 + (angle2 - u1) * v;
    var angle1b = angle1 - u1 - (angle2 - u1) * v;
    var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
    var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
    // Points
    var p1a = getVector(center1, angle1a, radius1);
    var p1b = getVector(center1, angle1b, radius1);
    var p2a = getVector(center2, angle2a, radius2);
    var p2b = getVector(center2, angle2b, radius2);

// Define handle length by the
    // distance between both ends of the curve
    var totalRadius = radius1 + radius2;
    var d2Base = Math.min(v * handleLenRate, dist(p1a, p2a) / totalRadius);

// Take into account when circles are overlapping
    var d2 = d2Base * Math.min(1, d * 2 / (radius1 + radius2));

var r1 = radius1 * d2;
    var r2 = radius2 * d2;

var h1 = getVector(p1a, angle1a - HALF_PI, r1);
    var h2 = getVector(p2a, angle2a + HALF_PI, r2);
    var h3 = getVector(p2b, angle2b - HALF_PI, r2);
    var h4 = getVector(p1b, angle1b + HALF_PI, r1);

return metaballToPath(p1a, p2a, p1b, p2b, h1, h2, h3, h4, d > radius1, radius2);
}

function metaballToPath(p1a, p2a, p1b, p2b, h1, h2, h3, h4, escaped, r) {
    // prettier-ignore
    return ['M', p1a, 'C', h1, h2, p2a, 'A', r, r, 0, escaped ? 1 : 0, 0, p2b, 'C', h3, h4, p1b].join(' ');
}

/**
 * Utils
 */
function getStartInfo(element) {
    var start = {
        x: +element.getAttribute('cx'),
        y: +element.getAttribute('cy')
    };
    var w = document.body.clientWidth;
    var h = document.body.clientHeight;
    return {
        start: start,
        w: w,
        h: h
    };
}

function scaleToCanvas(_ref2) {
    var _ref2$start = _ref2.start,
        x = _ref2$start.x,
        y = _ref2$start.y,
        w = _ref2.w,
        h = _ref2.h;

var svgW = w > h ? VIEWBOX_SIZE.W : VIEWBOX_SIZE.W * w / h;
    var svgH = w > h ? VIEWBOX_SIZE.H * h / w : VIEWBOX_SIZE.H;

return function(e) {
        return {
            x: x + mapFromToRange(e.deltaX, 0, w, 0, svgW),
            y: y + mapFromToRange(e.deltaY, 0, h, 0, svgH)
        };
    };
}

function mapFromToRange(x, x1, x2, y1, y2) {
    return (x - x1) * ((y2 - y1) / (x2 - x1)) + y1;
}

function moveTo(_ref3, element) {
    var _ref4 = _slicedToArray(_ref3, 2),
        x = _ref4[0],
        y = _ref4[1];

element.setAttribute('cx', x);
    element.setAttribute('cy', y);
}

function dist(_ref5, _ref6) {
    var _ref8 = _slicedToArray(_ref5, 2),
        x1 = _ref8[0],
        y1 = _ref8[1];

var _ref7 = _slicedToArray(_ref6, 2),
        x2 = _ref7[0],
        y2 = _ref7[1];

return Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 0.5);
}

function angle(_ref9, _ref10) {
    var _ref12 = _slicedToArray(_ref9, 2),
        x1 = _ref12[0],
        y1 = _ref12[1];

var _ref11 = _slicedToArray(_ref10, 2),
        x2 = _ref11[0],
        y2 = _ref11[1];

return Math.atan2(y1 - y2, x1 - x2);
}

function getVector(_ref13, a, r) {
    var _ref14 = _slicedToArray(_ref13, 2),
        cx = _ref14[0],
        cy = _ref14[1];

return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}

/**
 * Lerp
 * based on @davidkpiano's RXCSS
 */
function lerp(rate) {
    return function(_ref15, targetValue) {
        var x = _ref15.x,
            y = _ref15.y;

var mapValue = function mapValue(value, tValue) {
            var delta = (tValue - value) * rate;
            return value + delta;
        };

return {
            x: mapValue(x, targetValue.x),
            y: mapValue(y, targetValue.y)
        };
    };
}

编译

CSS

.move {
    cursor: move;
}
.ew-resize {
    cursor: ew-resize;
}
.no-touch {
    pointer-events: none;
}
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

HTML

<g id="js-parent-core" class="no-touch" opacity="1">
                    <circle cx="500" cy="600" r="48" fill="#080327" stroke="#FFB742" />
                    <circle class="no-touch" cx="500" cy="600" r="12" fill="#FF5645" />
                </g>

<circle id="js-child-nucleus" class="no-touch" cx="500" cy="600" r="12" fill="#FF5645" />

</g>

</svg>
</main>
<script src='https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/Rx.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>

amoeba animation, 可用来模拟细胞分裂的交互效果。

h5, worm

编辑器支持Emmet

快捷键

amoeba animation, 可用来模拟细胞分裂的交互效果。

h5, worm

HTML5 Rx.js+Hammer.js城市规划拿破仑定理交互动画图解

HTML5 Chroma.js交互式色彩层叠波浪动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：