圆形和弹性线条之间的碰撞动画

用鼠标拖动小球去碰撞弹性收缩带关节的线条，线条能避让开来。

gsap, path，运动学

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();
var log = console.log.bind(console);
//
// POINT
// ========================================================================
var Point = (function() {
    function Point(parent, prev, config) {
        this.parent = parent;
        this.prev = prev;
        this.config = config;
        this.endX = 0;
        this.endY = 0;
        this.radius = config.radius || 5;
        this.speed = config.speed || 20;
        this.minDist = config.minDist || 0;
        this.maxDist = config.maxDist || 50;
        this.element = createSvg("circle", {
            appendTo: parent,
            transforms: true,
            class: "point" + (!prev ? " first" : ""),
            r: this.radius
        });
        this.transform = this.element._gsTransform;
        this.firstRun = true;
        this.next = null;
        _.bindAll(this, "setMove", "startMove");
        if (this.prev)
            prev.next = this;
        this.setMove();
        this.firstRun = false;
    }
    Object.defineProperty(Point.prototype, "x", {
        get: function() {
            return this.transform.x;
        },
        set: function(x) {
            TweenLite.set(this.element, {
                x: x
            });
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Point.prototype, "y", {
        get: function() {
            return this.transform.y;
        },
        set: function(y) {
            TweenLite.set(this.element, {
                y: y
            });
        },
        enumerable: true,
        configurable: true
    });
    Point.prototype.setMove = function(updateNext) {
        var lastX = this.endX;
        var lastY = this.endY;
        if (this.prev) {
            var scale = this.firstRun ? 2 : 1;
            var signX = randomSign();
            var signY = randomSign();
            var min = this.minDist * scale;
            var max = this.maxDist * scale;
            this.endX = screen.randomX(this.prev.endX + min * signX, this.prev.endX + max * signX);
            this.endY = screen.randomY(this.prev.endY + min * signY, this.prev.endY + max * signY);
        } else {
            this.endX = screen.randomX();
            this.endY = screen.randomY();
        }
        var sameX = fuzzyEqual(lastX, this.endX, 1);
        var sameY = fuzzyEqual(lastY, this.endY, 1);
        if (sameX || sameY) {
            _.defer(this.setMove);
            return;
        }
        this.startMove();
    };
    Point.prototype.startMove = function() {
        TweenLite.to(this.element, this.duration, {
            x: this.endX,
            y: this.endY,
            ease: Power1.easeInOut,
            onComplete: this.setMove
        });
    };
    Object.defineProperty(Point.prototype, "duration", {
        get: function() {
            if (this.firstRun)
                return 0.01;
            var dx = this.x - this.endX;
            var dy = this.y - this.endY;
            var dist = Math.sqrt(dx * dx + dy * dy);
            return dist / this.speed * _.random(0.9, 1.1);
        },
        enumerable: true,
        configurable: true
    });
    Point.prototype.onHit = function(x, y) {
        TweenLite.to(this.element, 0.25, {
            x: x,
            y: y,
            onComplete: this.setMove
        });
    };
    return Point;
})();
//
// PATH
// ========================================================================
var Path = (function() {
    function Path(parent, config) {
        var _this = this;
        this.parent = parent;
        this.config = config;
        this.points = [];
        this.group = createSvg("g", {
            appendTo: parent,
            class: "path-group"
        });
        this.path = createSvg("path", {
            appendTo: this.group,
            class: "path"
        });
        this.k = _.isNumber(config.tension) ? config.tension : 1;
        _.bindAll(this, "render");
        var pointProps = "minDist,maxDist,speed,radius".split(",");
        var pointConfig = _.pick(config, pointProps);
        var min = Math.max(config.minPoints, 3);
        var max = Math.max(config.maxPoints, 3);
        var prev = null;
        _.times(_.random(min, max), function(i) {
            prev = new Point(_this.group, prev, pointConfig);
            _this.points.push(prev);
        });
        TweenLite.ticker.addEventListener("tick", this.render, null, false, 1);
    }
    Path.prototype.getRect = function() {
        return this.group.getBoundingClientRect();
    };
    Path.prototype.render = function() {
        var data = _.reduce(this.points, function(res, point) {
            res.push(point.x, point.y);
            return res;
        }, []);
        var size = data.length;
        var last = size - 4;
        var path = "M" + data[0] + "," + data[1];
        for (var i = 0; i < size - 2; i += 2) {
            var x0 = i ? data[i - 2] : data[0];
            var y0 = i ? data[i - 1] : data[1];
            var x1 = data[i + 0];
            var y1 = data[i + 1];
            var x2 = data[i + 2];
            var y2 = data[i + 3];
            var x3 = i !== last ? data[i + 4] : x2;
            var y3 = i !== last ? data[i + 5] : y2;
            var cp1x = x1 + (x2 - x0) / 6 * this.k;
            var cp1y = y1 + (y2 - y0) / 6 * this.k;
            var cp2x = x2 - (x3 - x1) / 6 * this.k;
            var cp2y = y2 - (y3 - y1) / 6 * this.k;
            path += " C" + cp1x + "," + cp1y + "," + cp2x + "," + cp2y + "," + x2 + "," + y2;
        }
        this.path.setAttribute("d", path);
    };
    return Path;
})();
//
// REPELLER
// ========================================================================
var Repeller = (function() {
    function Repeller(parent, radius) {
        if (radius === void 0) {
            radius = 50;
        }
        this.parent = parent;
        this.radius = radius;
        this.vRatio = 0.05;
        this.x = screen.randomX();
        this.y = screen.randomY();
        this.endX = this.x;
        this.endY = this.y;
        this.element = createSvg("circle", {
            appendTo: parent,
            class: "repeller",
            r: this.radius,
            x: this.x,
            y: this.y
        });
        this.tracker = VelocityTracker.track(this, "x,y");
        _.bindAll(this, "update", "checkHit", "onMove");
        document.addEventListener("mousemove", this.onMove);
        TweenLite.ticker.addEventListener("tick", this.update, null, false, 100);
    }
    Object.defineProperty(Repeller.prototype, "vx", {
        get: function() {
            return this.tracker.getVelocity("x") || 10;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Repeller.prototype, "vy", {
        get: function() {
            return this.tracker.getVelocity("y") || 10;
        },
        enumerable: true,
        configurable: true
    });
    Repeller.prototype.update = function() {
        var _this = this;
        TweenLite.set(this.element, {
            x: this.x,
            y: this.y
        });
        var rect1 = this.getRect();
        _.forEach(paths, function(path) {
            var rect2 = path.getRect();
            if (rectIntersects(rect1, rect2)) {
                _.forEach(path.points, _this.checkHit);
            }
        });
    };
    Repeller.prototype.checkHit = function(point) {
        var dx = this.x - point.x;
        var dy = this.y - point.y;
        var distSq1 = dx * dx + dy * dy;
        var distSq2 = Math.pow((this.radius + point.radius), 2);
        if (distSq1 < distSq2) {
            var dist1 = Math.sqrt(distSq1);
            var dist2 = Math.sqrt(distSq2);
            var angle = Math.atan2(dy, dx);
            var x1 = this.x + dist1 * Math.cos(angle);
            var y1 = this.y + dist1 * Math.sin(angle);
            var x2 = this.x + dist2 * Math.cos(angle);
            var y2 = this.y + dist2 * Math.sin(angle);
            var vx = this.vx * this.vRatio;
            var vy = this.vy * this.vRatio;
            var x = point.x + x1 - x2 + vx;
            var y = point.y + y1 - y2 + vy;
            point.onHit(x, y);
        }
    };
    Repeller.prototype.getRect = function() {
        return this.element.getBoundingClientRect();
    };
    Repeller.prototype.onMove = function(event) {
        this.x = event.pageX;
        this.y = event.pageY;
    };
    return Repeller;
})();
//
// SCREEN
// ========================================================================
var Screen = (function() {
    function Screen(space) {
        if (space === void 0) {
            space = 100;
        }
        this.space = space;
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        window.addEventListener("resize", _.bind(this.onResize, this));
    }
    Object.defineProperty(Screen.prototype, "minX", {
        get: function() {
            return this.space;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Screen.prototype, "minY", {
        get: function() {
            return this.space;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Screen.prototype, "maxX", {
        get: function() {
            return this.width - this.space;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Screen.prototype, "maxY", {
        get: function() {
            return this.height - this.space;
        },
        enumerable: true,
        configurable: true
    });
    Screen.prototype.randomX = function(min, max) {
        min = clamp(_.isNumber(min) ? min : this.minX, this.minX, this.maxX);
        max = clamp(_.isNumber(max) ? max : this.maxX, this.minX, this.maxX);
        return _.random(min, max);
    };
    Screen.prototype.randomY = function(min, max) {
        min = clamp(_.isNumber(min) ? min : this.minY, this.minY, this.maxY);
        max = clamp(_.isNumber(max) ? max : this.maxY, this.minY, this.maxY);
        return _.random(min, max);
    };
    Screen.prototype.onResize = function(event) {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
    };
    return Screen;
})();
//
// HELPERS
// ========================================================================
function createSvg(type, config) {
    var node = document.createElementNS(xmlns, type);
    if (config) {
        if (config.appendTo)
            config.appendTo.appendChild(node);
        if (config.transforms)
            _.defaults(config, {
                x: "+=0"
            });
        var attrs = "id,class,cx,cy,r,d,points".split(",");
        var css = _.assign(_.omit(config, attrs, "appendTo", "attr", "transforms"));
        css.attr = _.assign(_.pick(config, attrs), _.omit(config.attr));
        TweenLite.set(node, css);
    }
    return node;
}

function fuzzyEqual(a, b, epsilon) {
    if (epsilon === void 0) {
        epsilon = 0.0001;
    }
    return Math.abs(a - b) < epsilon;
}

function randomSign() {
    return Math.random() < 0.5 ? -1 : 1;
}

function rectIntersects(r1, r2) {
    return !(r1.left + r1.width < r2.left || r1.top + r1.height < r2.top ||
        r2.left + r2.width < r1.left || r2.top + r2.height < r1.top);
}

编译

CSS

HTML

用鼠标拖动小球去碰撞弹性收缩带关节的线条，线条能避让开来。

gsap, path，运动学

编辑器支持Emmet

快捷键

用鼠标拖动小球去碰撞弹性收缩带关节的线条，线条能避让开来。

gsap, path，运动学

GSAP和Three.js做的雪花粒子动画形成海盗标志

基于jQuery和GSAP实现的页面滚动图像过渡切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：