pixi实现金属球悬挂点击拖动重力回馈动画效果代码-html代码-BFW代码库

pixi实现金属球悬挂点击拖动重力回馈动画效果代码

代码语言：html

所属分类：动画

代码描述：pixi实现金属球悬挂点击拖动重力回馈动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        html, body {
          height: 100%;
          overflow: hidden;
        }
        
        body {
          background: linear-gradient(#5fcdfb, #11b9ff);
        }
    </style>




</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
    <script>
        (function (global) {
        
          var texture = '//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png';
        
          var app;
          var w, h;
          var sprite, graphic;
        
          var constraints = [];
          var nodes = [];
        
          var drag = null;
        
          var touched = false;
          var mouseX, mouseY;
          var dx = 0,dy = 0;
        
          var touch = !!('ontouchstart' in window);
          var touchBegan = touch ? 'touchstart' : 'mousedown';
          var touchMoved = touch ? 'touchmove' : 'mousemove';
          var touchEnded = touch ? 'touchend' : 'mouseup';
        
          var Node = function (node) {
            this.x = node.x;
            this.y = node.y;
            this.oldX = node.x;
            this.oldY = node.y;
            this.fixed = node.fixed || false;
            this.mass = node.mass || 1;
            this.skin = node.skin;
            this.rotation = node.rotation || 0;
            this.gravity = node.gravity || 15;
            this.friction = node.friction || 0.9;
            this.rotateWhenDrag = true;
            this.dragable = false;
          };
        
          Node.prototype.update = function () {
            if (!this.fixed) {
              var x = this.x;
              var y = this.y;
              this.x += (this.x - this.oldX) * this.friction;
              this.y += (this.y - this.oldY) * this.friction + this.gravity;
              this.oldX = x;
              this.oldY = y;
            }
          };
        
          Node.prototype.draw = function () {
            if (this.skin) {
              this.skin.x = this.x;
              this.skin.y = this.y;
              this.skin.rotation = this.rotation;
            }
          };
        
          Node.prototype.checkTouch = function (x, y) {
            if (!this.fixed && this.skin) {
              var bound = this.skin.getBounds();
              return bound.contains(x, y);
            }
            return false;
          };
        
          var Constraint = function (n1, n2) {
            this.n1 = n1;
            this.n2 = n2;
            var dx = this.n1.x - this.n2.x;
            var dy = this.n1.y - this.n2.y;
            this.dist = Math.sqrt(dx * dx + dy * dy);
          };
        
          Constraint.prototype.solve = function () {
            var dx = this.n1.x - this.n2.x;
            var dy = this.n1.y - this.n2.y;
            var currentDist = Math.sqrt(dx * dx + dy * dy);
            var delta = 0.5 * (currentDist - this.dist) / this.dist;
            dx *= delta;
            dy *= delta;
            var m = this.n1.mass + this.n2.mass;
            var m1 = this.n1.mass / m;
            var m2 = this.n2.mass / m;
            if (!this.n1.fixed) {
              this.n1.x -= dx * m2;
              this.n1.y -= dy * m2;
            }
            if (!this.n2.fixed) {
              this.n2.x += dx * m1;
              this.n2.y += dy * m1;
            }
          };
        
          Constraint.prototype.draw = function () {
            var n1 = this.n1;
            var n2 = this.n2;
            graphics.lineStyle(1, 0x333333, 0.3);
            graphics.moveTo(n1.x + 5, n1.y);
            graphics.lineTo(n2.x + 5, n2.y);
        
            graphics.lineStyle(2, 0xffffff, 1);
            graphics.moveTo(n1.x, n1.y);
            graphics.lineTo(n2.x, n2.y);
          };
        
          var obj = {
            init: function () {
              w = window.innerWidth;
              h = window.innerHeight;
              app = new PIXI.Application(w, h, {
                antialias: true,
                resolution: window.devicePixelRatio,
  .........完整代码请登录后点击上方下载按钮下载查看