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

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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();

}