js实现动感线条曲线动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现动感线条曲线动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        canvas.drawer {
        	position:fixed;
        	top:0px;
        	left:0px;
        	width:100vw;
        	height:100vh;
        }
    </style>

</head>

<body>

    <div></div>

    <script>
        'use strict';
        
        var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
        
        function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
        
        function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
        
        function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
        
        var initialise = function initialise() {
          var application = new Application();
          // application.scaleFactor = 2;
          application.clearOnRedraw = Application.FADE;
          application.fadeColour = 'rgba(0,0,0,.03)';
          application.fillColour = 'rgba(30,30,30,1)';
          application.onResize();
          var vfield = new VectorField();
          vfield.scale = 300;
          vfield.amplitude = 40;
          // vfield.debug = true;
        
          application.addActor(vfield);
        
          var maxNum = 1000;
          var num = 0;
        
          var addTracer = function addTracer(position, colour) {
            if (num > maxNum) return;
        
            num++;
        
            var tracer = new BranchTracer(position.x, position.y);
            tracer.field = vfield;
            var momentum = new Vector(Math.random(), Math.random());
            momentum.length = Math.random() * 2;
            tracer.momentum = momentum;
            tracer.friction = 0.97;
        
            if (colour) {
              tracer.colour = colour;
            } else {
              tracer.colour = 'RGBA(' + Math.round(Math.random() * 255) + ',' + 100 + Math.round(Math.random() * 155) + ',255,0.2)';
            }
        
            application.addActor(tracer);
            return tracer;
          };
          var seed = addTracer(new Vector(window.innerWidth / 2, window.innerHeight / 2), 'RGBA(255, 100, 100, 0.8)');
          seed.branchChance = 5;
          seed.friction = 0.985;
          seed.onBranch = addTracer;
        
          setInterval(function () {
            vfield.z = Math.random() * 10000;
          }, 10000);
        
          var stage = application.stage;
          document.body.appendChild(stage);
          application.onPointerMove({ clientX: window.innerWidth / 2, clientY: window.innerHeight / 2 });
          application.render();
          application.animating = true;
        
          // application.runFor(60 * 120);
        
          return;
        };
        
        var Application = function () {
          function Application() {
            _classCallCheck(this, Application);
        
            this.stage = document.createElement('canvas');
        
            this.animate = this.animate.bind(this);
        
            this.onResize = this.onResize.bind(this);
            this.onPointerDown = this.onPointerDown.bind(this);
            this.onPointerup = this.onPointerup.bind(this);
            this.onPointerMove = this.onPointerMove.bind(this);
        
            this.initialiseEvents();
          }
        
          Application.prototype.initialiseEvents = function initialiseEvents() {
            window.addEventListener('resize', this.onResize, false);
            document.addEventListener('pointerdown', this.onPointerDown, false);
            document.addEventListener('pointerup', this.onPointerup, false);
            document.addEventListener('pointermove', this.onPointerMove, false);
          };
        
          Application.prototype.deInitialiseEvents = function deInitialiseEvents() {
            window.removeEventListener('resize', this.onResize, false);
            document.removeEventListener('pointerdown', this.onPointerDown, false);
            document.removeEventListener('pointerup', this.onPointerup, false);
            document.removeEventListener('pointermove', this.onPointerMove, false);
          };
        
          Application.prototype.addActor = function addActor(actor) {
            if (actor instanceof Actor) {
              this.actors.push(actor);
            }
          };
        
          Application.prototype.runFor = function runFor(ticks) {
            var interval = 1 / 60;
            var i = 0;
        
            for (i; i < ticks; i++) {
              this.triggerEvent('application-animate', { now: this.now, then: this.then, interval: interval, application: this });
        
              this.render();
            }
          };
        
          Application.prototype.animate = function animate() {
            this.now = Date.now();
            var interval = this.now - this.then;
        
            this.triggerEvent('application-animate', { now: this.now, then: this.then, interval: interval, application: this });
        
            this.render();
        
            this.then = this.now;
        
            if (this.animating) {
              requestAnimationFrame(this.animate);
            }
          };
        
          Application.prototype.render = function render() {
            var _this = this;
        
            var dims = this.dimensions;
        
            if (this.clearOnRedraw == Application.CLEAR) {
              this.context.clearRect(0, 0, dims.width, dims.height);
            } else if (this.clearOnRedraw == Application.FADE) {
              this.context.fillStyle = this.fadeColour;
              this.context.fillRect(0, 0, dims.width, dims.height);
            }
        
            this.actors.forEach(function (actor) {
              actor.render(_this);
            });
          };
        
          Application.prototype.onResize = function onResize(e) {
            console.log('resize');
            this.dimensions = new Vector(window.innerWidth, window.innerHeight);
          };
        
          Application.prototype.onPointerDown = function onPointerDown(e) {};
        
          Application.prototype.onPointerup = function onPointerup(e) {};
        
          Application.prototype.onPointerMove = function onPointerMove(e) {
            var pointer = new Vector(e.clientX, e.clientY);
            this.triggerEvent('application-pointermove', { pointer: pointer });
          };
        
          Application.prototype.triggerEvent = function triggerEvent(event, data) {
            if (window.CustomEvent) {
              var event = new CustomEvent(event, { detail: data });
            } else {
              var event = document.createEvent('CustomEvent');
              event.initCustomEvent(event, true, true, data);
            }
        
            document.dispatchEvent(event);
          };
        
          _createClass(Application, [{
            key: 'actors',
            get: function get() {
              if (!this._actors) this._actors = [];
       .........完整代码请登录后点击上方下载按钮下载查看