rx实现鼠标跟随多彩曲线流动动画效果代码
代码语言:html
所属分类:动画
代码描述:rx实现鼠标跟随多彩曲线流动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #111; } body { background-color: #303030; } #app { width: 100%; height: 100%; } </style> </head> <body> <div id="app"> <svg id="stage" width="200" height="200" xmlns="http://www.w3.org/2000/svg"></svg> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rx.all.2.3.22.js"></script> <script> "use strict"; // Tidier code with webpack and better Typescript in Github // https://github.com/ste-vg/svg-squiggles console.clear(); var SquiggleState; (function (SquiggleState) { SquiggleState[SquiggleState["ready"] = 0] = "ready"; SquiggleState[SquiggleState["animating"] = 1] = "animating"; SquiggleState[SquiggleState["ended"] = 2] = "ended"; })(SquiggleState || (SquiggleState = {})); var Squiggle = /** @class */function () { function Squiggle(stage, settings, grid) { this.sqwigs = []; this.state = SquiggleState.ready; this.grid = grid; this.stage = stage; settings.width = 0; settings.opacity = 1; this.state = SquiggleState.animating; var path = this.createLine(settings); var sqwigCount = 3; for (var i = 0; i < sqwigCount; i++) { this.createSqwig(i, sqwigCount, path, JSON.parse(JSON.stringify(settings)), i == sqwigCount - 1); } } Squiggle.prototype.createSqwig = function (index, total, path, settings, forceWhite) { var _this = this; var sqwig = document.createElementNS("http://www.w3.org/2000/svg", 'path'); sqwig.setAttribute('d', path); sqwig.style.fill = 'none'; sqwig.style.stroke = forceWhite ? '#303030' : this.getColor(); sqwig.style.strokeLinecap = "round"; settings.length = sqwig.getTotalLength(); settings.chunkLength = settings.length / 6; //(settings.sections * 2) + (Math.random() * 40); settings.progress = settings.chunkLength; sqwig.style.strokeDasharray = settings.chunkLength + ", " + (settings.length + settings.chunkLength); sqwig.style.strokeDashoffset = "" + settings.progress; this.stage.appendChild(sqwig); this.sqwigs.unshift({ path: sqwig, settings: settings }); TweenLite.to(settings, settings.sections * 0.1, { progress: -settings.length, width: settings.sections * 0.9, ease: Power1.easeOut, delay: index * (settings.sections * 0.01), onComplete: function () { if (index = total - 1) _this.state = SquiggleState.ended; sqwig.remove(); } }); }; Squiggle.prototype.update = function () { this.sqwigs.map(function (set) { set.path.style.strokeDashoffset = "" + set.settings.progress; set.path.style.strokeWidth = set.settings.width + "px"; set.path.style.opacity = "" + set.settings.opacity; }); }; Squiggle.prototype.createLine = function (settings) { var x = settings.x; var y = settings.y; var dx = settings.directionX; var dy = settings.directionY; var path = [ 'M', '' + x, '' + y, "Q"]; var steps = settings.sections; var step = 0; var getNewDirection = function (direction, goAnywhere) { if (!goAnywhere && settings['direction' + direction.toUpperCase()] != 0) return settings['direction' + direction.toUpperCase()]; return Math.random() < 0.5 ? -1 : 1; }; while (step < steps * 2) { step++; x += dx * (step / 30) * this.grid; y += dy * (step / 30) * this.grid; if (step != 1) path.push(','); path.push('' + x); path.push('' + y); if (step % 2 != 0) { dx = dx == 0 ? getNewDirection('x', step > 8) : 0; dy = dy == 0 ? getNewDirection('y', step > 8) : 0; } } return path.join(' '); }; Squiggle.prototype.getColor = function () { var offset = Math.round(Math.random() * 100); var r = Math.sin(0.3 * offset) * 100 + 155; var g = Math.sin(0.3 * offset + 2) * 100 + 155; var b = Math.sin(0.3 * offset + 4) * 100 + 155; return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b); }; Squiggle.prototype.componentToHex = function (c) { var hex = Math.round(c).toString(16); return hex.length .........完整代码请登录后点击上方下载按钮下载查看
网友评论0