使用SVG和GSAP实现的弹性绳索动效

Elastic stroke in SVG，可以用来模拟橡皮筋、琴弦、跳绳等带弹性的线条形状物品。

svg, rope, wire

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var docW, docH, cY, path, initialPath, newPath,
    picked = false,
    $svg = document.querySelector('svg'),
    $line = document.querySelectorAll('.line');

function init() {
    docW = document.body.clientWidth;
    docH = document.body.clientHeight;
    cY = docH / 2;

initialPath = [
        'M-10,' + cY, // initial point
        'C' + 0 + ',' + cY, // bezier initial point
        docW + ',' + cY, // bezier end point
        docW + 10 + ',' + cY // end point
    ];

newPath = initialPath.join(' ');

[].forEach.call($line, function(line) {
        line.setAttribute('d', newPath);
    });
}

init();

function mouseMove(e) {
    x = typeof e.pageX != 'undefined' ? e.pageX : e.touches[0].pageX;
    y = typeof e.pageY != 'undefined' ? e.pageY : e.touches[0].pageY;
    touchend = false;

if (y > cY - 5 && y < cY + 5) {
        picked = true;
    }

if (typeof e.pageY == 'undefined' && y > cY - 50 && y < cY + 50) {
        picked = true;
    }

if (picked) {
        path = [
            'M-10,' + cY, // initial point
            'C' + x + ',' + y, // bezier initial point
            x + ',' + y, // bezier end point
            docW + 10 + ',' + cY // end point
        ];

if (y < cY - cY / 2 || y > cY + cY / 2 || touchend) {
            newPath = initialPath.join(' ');

[].forEach.call($line, function(line) {
                TweenMax.to(line, .5, {
                    attr: {
                        d: newPath
                    },
                    ease: Elastic.easeOut.config(1, 0.3)
                });
            });
            picked = false;
        } else {
            newPath = path.join(' ');
            [].forEach.call($line, function(line) {
                line.setAttribute('d', newPath);
            });
        }
    }
}

('mousemove touchmove').split(' ').forEach(function(e) {
    document.addEventListener(e, mouseMove, true);
});

window.onresize = function() {
    init();
}

编译

CSS

HTML

Elastic stroke in SVG，可以用来模拟橡皮筋、琴弦、跳绳等带弹性的线条形状物品。

svg, rope, wire

编辑器支持Emmet

快捷键

Elastic stroke in SVG，可以用来模拟橡皮筋、琴弦、跳绳等带弹性的线条形状物品。

svg, rope, wire

使用SVG和GSAP实现的跷跷板动画

使用GSAP和SVG实现的摩托车动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：