实现具有惯性的可拖动元素

Question

我偶然发现了新的着名的0.5版本，事情看起来很不一样（看起来不错）。我想实现一个具有惯性的可拖动元素，但我无法通过查看新文档来解决这个问题。

任何人都可以给我一些如何做到这一点的提示吗？

Answer 1

这是一个使用GestureHandler跟踪着名引擎中拖动的开始，移动和结束的简单示例。 Position组件将放置我们的节点相对于我们的拖动事件的增量。请注意node如何传递给GestureHandler以跟踪我们的拖动事件。

警告：在此帖子中，引擎仍处于测试版（0.5.2），因此尝试拖动太靠近元素外部时出现边缘情况。它可能与渲染更新的默认间隔有关。

var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);

function Draggable(root) {
  this.node = root;
  this.node
    .setProportionalSize(0.5, 0.5)
    .setMountPoint(0.5, 0.5);

  this.position = new Position(this.node);
  console.log(this.position);

  var base = (Math.random() * 360) | 0;

  this.el = new DOMElement(this.node, {
    properties: {
      'textAlign': 'center',
      'color': 'white',
      'fontSize': '30px',
      'lineHeight': '40px',
      'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
      'cursor': 'pointer'
    }
  });

  this.el.setContent('Drag Me');

  var gestures = new GestureHandler(this.node, [{
    event: 'drag',
    callback: drag.bind(this)
  }]);

  function drag(e) {
    //console.log('drag', e.status, e);
    switch (e.status) {
      case 'start':
        console.log('start drag', this.position.getValue());
        break;
      case 'end':
        console.log('end drag', this.position.getValue());
        break;
      case 'move':
        var d = e.centerDelta;

        console.log('move drag', this.position.getValue(), d);
        var pos = this.position.getValue();
        this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
        break;
    }
  }
}

var dragger = new Draggable(rootNode);
FamousEngine.init();

运行代码段示例

＆＃13;

＆＃13;

var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;

var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);

function Draggable(root) {
  this.node = root;
  this.node
    .setProportionalSize(0.5, 0.5)
    .setMountPoint(0.5, 0.5);

  this.position = new Position(this.node);
  console.log(this.position);

  var base = (Math.random() * 360) | 0;

  this.el = new DOMElement(this.node, {
    properties: {
      'textAlign': 'center',
      'color': 'white',
      'fontSize': '30px',
      'lineHeight': '40px',
      'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
      'cursor': 'pointer'
    }
  });

  this.el.setContent('Drag Me<hr>');

  var gestures = new GestureHandler(this.node, [{
    event: 'drag',
    callback: drag.bind(this)
  }]);

  function drag(e) {
    //console.log('drag', e.status, e);
    switch (e.status) {
      case 'start':
        console.log('start drag', this.position.getValue());
        break;
      case 'end':
        console.log('end drag', this.position.getValue());
        break;
      case 'move':
        var d = e.centerDelta;

        console.log('move drag', this.position.getValue(), d);
        var pos = this.position.getValue();
        this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
        break;
    }
  }
}

var dragger = new Draggable(rootNode);
FamousEngine.init();

＆＃13;

html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  body {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-perspective: 0;
    perspective: none;
    overflow: hidden;
  }

＆＃13;

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Draggable Famous@0.5.2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>

＆＃13;

＆＃13;

＆＃13;