HTML5 SVG在文章中使用钢笔圈词画线连接的动画

Connect Words

svg, pen, draft, note

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var paddingX = 8;
var paddingY = 4;

var svg = document.querySelector("#svg");
var srcText = document.querySelector(".src-text");
var tgtText = document.querySelector(".tgt-text");
var randomBtn = document.querySelector("#random-btn");
var replayBtn = document.querySelector("#replay-btn");
var arrowPath = document.querySelector(".arrow-path");
var circlePath = document.querySelector(".circle-path");

var split = new SplitText(".text-block", {
    type: "words"
});
var allWords = split.words;
var numWords = allWords.length;

var circleBox = circlePath.getBBox();

var animation = new TimelineMax();

var srcWord = null;
var tgtWord = null;
var requestId = null;

window.addEventListener("resize", resize);
replayBtn.addEventListener("click", replay);
randomBtn.addEventListener("click", randomize);

TweenLite.set([arrowPath, circlePath], {
    autoAlpha: 1,
    drawSVG: 0
});

selectWords();

function selectWords() {

cancelAnimationFrame(requestId);

var index1 = Math.floor(Math.random() * numWords);
    var index2 = Math.floor(Math.random() * numWords);

if (index1 === index2) {
        return selectWords();
    }

srcWord = allWords[index1];
    tgtWord = allWords[index2];

srcText.innerHTML = "Source Word = " + srcWord.textContent;
    tgtText.innerHTML = "Target Word = " + tgtWord.textContent;

animation.seek(0);

updateAnimation();
}

function updateAnimation() {

// Save animation progress
    var progress = animation.progress();

// Clear animation
    animation.seek(0).clear();

var svgBounds = getBounds(svg, 0, 0);
    var srcBounds = getBounds(srcWord, paddingX, paddingY);
    var tgtBounds = getBounds(tgtWord, 0, 0);

var x1 = (srcBounds.left - svgBounds.left) + srcBounds.width / 2;
    var y1 = (srcBounds.top - svgBounds.top) + paddingY;

var x2 = (tgtBounds.left - svgBounds.left) + tgtBounds.width / 2;
    var y2 = (tgtBounds.top - svgBounds.top) + paddingY;

var dx = x1 - x2;
    var dy = y1 - y2;

var rx = Math.abs(dx * 0.6);
    var ry = Math.max(Math.abs(dy * 1.35), 100);

var sweepFlag = dx < 0 ? 1 : 0;

var data = "M" + x1 + " " + y1 + " A " + rx + " " + ry + " 0 0 " + sweepFlag + " " + x2 + " " + y2;

arrowPath.setAttribute("d", data);

TweenLite.set(circlePath, {
        scaleX: srcBounds.width / circleBox.width,
        scaleY: srcBounds.height / circleBox.height,
        x: srcBounds.left - svgBounds.left,
        y: srcBounds.top - svgBounds.top
    });

// Rebuild animation
    animation
        .to(circlePath, 1, {
            drawSVG: true
        })
        .to(arrowPath, 0.5, {
            drawSVG: true
        })
        .to(tgtWord, 0.2, {
            color: "red"
        })
        .progress(progress || 0)

requestId = null;
}

function getBounds(element, paddingX, paddingY) {

paddingX = paddingX || 0;
    paddingY = paddingY || 0;

var rect = element.getBoundingClientRect();

return {
        left: rect.left - paddingX,
        top: rect.top - paddingY,
        width: rect.width + paddingX * 2,
        height: rect.height + paddingY * 2,
    };
}

function resize() {
    if (!requestId) {
        requestId = requestAnimationFrame(updateAnimation);
    }
}

function replay() {
    animation.play(0);
}

function randomize() {
    selectWords();
}

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background: #000;
}
main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}
.controls {
    padding: 15px;
}
.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}
.text-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.text-block {
    position: relative;
    width: 50%;
    color: #fff;
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: 700;
}
.text-value {
    color: #fff;
    padding: 2px 0;
}
.buttons {
    padding-bottom: 10px;
}
#svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.arrow-path,
.circle-path {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: hidden;
    stroke: #00ffe0;
}

HTML

<main>
    <div class="controls">
        <div class="buttons">
            <button id="random-btn">Random</button>
            <button id="replay-btn">Replay</button>
        </div>
        <div class="src-text text-value">Source Word</div>
        <div class="tgt-text text-value">Target Word</div>
    </div>

<div class="content">
        <div class="text-container">
            <div class="text-block">
                Topping sweet roll liquorice soufflé cake. Caramels ice cream muffin. Brownie sweet biscuit gummies candy chocolate cake tootsie roll jelly-o jelly-o. Sweet gummi bears carrot cake oat cake. Tart chocolate caramels caramels cake jelly beans chocolate
                cake. Jelly-o lemon drops gingerbread halvah liquorice jelly-o fruitcake. Toffee cupcake chocolate bar. Wafer cake sweet roll chocolate bar fruitcake danish marshmallow. Candy jelly-o topping pastry. Sweet roll croissant gummi bears muffin
                ice cream. Chocolate cake candy canes biscuit pudding. Candy canes muffin icing. Chupa chups donut macaroon caramels.
            </div>
        </div>

Connect Words

svg, pen, draft, note

编辑器支持Emmet

快捷键

Connect Words

svg, pen, draft, note

HTML5 SVG使用球体水面波动显示进度动画

HTML5 SVG带虹吸现象的日食动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：