famo.us JavaScript中的意外行为

Question

下面的代码为网格创建元素，并使用变换方法对其进行安排。这部分工作正常，但是我希望电网塌陷到Mousedown的中心，然后在MouseUp上再次弹出。但是，所有随后拨打转化蛋白或转换功能的调用都会导致进出的项目。一个有效的例子在这里：http://codepen.io/timsig/pen/jdxywe代码如下，感谢您的任何帮助。

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var View            = require('famous/core/View');
    var Surface         = require('famous/core/Surface');
    var Modifier        = require('famous/core/Modifier');
    var StateModifier   = require('famous/modifiers/StateModifier');
    var EventHandler    = require('famous/core/EventHandler');
    var PhysicsEngine   = require('famous/physics/PhysicsEngine');
    var Transitionable  = require('famous/transitions/Transitionable');
    var SpringTransition= require('famous/transitions/SpringTransition');
    var Particle        = require('famous/physics/bodies/Particle');
    var Drag            = require('famous/physics/forces/Drag');
    var RepulsionForce  = require('famous/physics/forces/Repulsion');
    var Wall            = require('famous/physics/constraints/Wall');
    var Random          = require('famous/math/Random');
    var Transform       = require('famous/core/Transform');
    Transitionable.registerMethod('spring', SpringTransition);

    var context = Engine.createContext();
    var cols = 5;
    var rows = 5;
    var gridSize = Math.min(window.innerWidth, window.innerHeight) / 1.5;
    var itemSize = gridSize / (cols + 1);
    var gridItems = [];
    var transformOutArray = [itemSize / 2 - gridSize / 2,
                            (itemSize / 2 - gridSize / 2) / 2,
                            0,
                            (gridSize / 2 - itemSize / 2) / 2,
                            gridSize / 2 - itemSize / 2];
    var transformInArray = Array.prototype.slice.call(transformOutArray);
    transformInArray.reverse();

    var cameraView = new View();
    var camera = new Modifier({
        origin: [0.5, 0.5],
        align: [0.5, 0.5]
    });
    context.add(camera).add(cameraView);


    function createGridItems(){
        for (var r = 0; r < rows; r += 1){
            for (var c = 0; c < cols; c += 1){
               var gridItem = new Surface({
                    size: [itemSize, itemSize],
                    properties:{
                        backgroundColor: '#aa62bb'
                    },
                    content: r + "," + c
                });
                gridItem.mod = new StateModifier({
                    origin: [0.5, 0.5],
                    align: [0.5, 0.5],
                    transform: Transform.identity
                });
                gridItem.idx = gridItems.length;
                gridItem.transformOutrs = transformOutArray[r];
                gridItem.transformOutcs = transformOutArray[c];
                gridItem.transformInrs = transformInArray[r];
                gridItem.transformIncs = transformInArray[c];
                gridItems.push(gridItem);
                cameraView.add(gridItem.mod).add(gridItem);
            }
        }
    }

    function transformOut(){
      console.log('transform out')
        for (var i = 0; i < gridItems.length; i+=1){
            var index = i;
            var gridItem = gridItems[index];
            var tran = Transform.translate(gridItem.transformOutrs, gridItem.transformOutcs);
            gridItem.mod.setTransform(tran, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }
    }
    function transformIn(){
        console.log('transform in');
        for (var j = 0; j < gridItems.length; j+=1){
            var index = j;
            var gridItem = gridItems[index];
            var tran = Transform.translate(gridItem.transformInrs, gridItem.transformIncs);
            gridItem.mod.setTransform(tran, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }

    }
    createGridItems();
    console.log (transformOutArray);
    console.log (transformInArray);
    transformOut();
    Engine.on('mousedown', transformIn);
    Engine.on('mouseup', transformOut);
});

Answer 1

将Transform设置回身份将返回项目返回其默认变换上的项目。当前，一旦设置了新变换，它们就会过渡到原始，然后应用新的变换。您只会用新的变换来逆转他们的顺序。

    function transformIn(){
        console.log('transform in');
        for (var j = 0; j < gridItems.length; j+=1){
            var index = j;
            var gridItem = gridItems[index];
            gridItem.mod.setTransform(Transform.identity, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }
    }

示例片段：

define('main', function (require, exports, module) {
	var Engine = require('famous/core/Engine');
	var View            = require('famous/core/View');
    var Surface         = require('famous/core/Surface');
    var Modifier        = require('famous/core/Modifier');
    var StateModifier   = require('famous/modifiers/StateModifier');
    var EventHandler    = require('famous/core/EventHandler');
    var PhysicsEngine   = require('famous/physics/PhysicsEngine');
    var Transitionable  = require('famous/transitions/Transitionable');
    var SpringTransition= require('famous/transitions/SpringTransition');
    var Particle        = require('famous/physics/bodies/Particle');
    var Drag            = require('famous/physics/forces/Drag');
    var RepulsionForce  = require('famous/physics/forces/Repulsion');
    var Wall            = require('famous/physics/constraints/Wall');
    var Random          = require('famous/math/Random');
    var Transform       = require('famous/core/Transform');
    Transitionable.registerMethod('spring', SpringTransition);
    var context = Engine.createContext();
    var cols = 5;
    var rows = 5;
    var gridSize = Math.min(window.innerWidth, window.innerHeight) / 1.5;
    var itemSize = gridSize / (cols + 1);
    var gridItems = [];
    var transformOutArray = [itemSize / 2 - gridSize / 2,
                            (itemSize / 2 - gridSize / 2) / 2,
                            0,
                            (gridSize / 2 - itemSize / 2) / 2,
                            gridSize / 2 - itemSize / 2];
    var transformInArray = Array.prototype.slice.call(transformOutArray);
    transformInArray.reverse();
    var cameraView = new View();
    var camera = new Modifier({
        origin: [0.5, 0.5],
        align: [0.5, 0.5]
    });
    context.add(camera).add(cameraView);
    function createGridItems(){
        for (var r = 0; r < rows; r += 1){
            for (var c = 0; c < cols; c += 1){
               var gridItem = new Surface({
                    size: [itemSize, itemSize],
                    properties:{
                        backgroundColor: '#aa62bb'
                    },
                    content: r + "," + c
                });
                gridItem.mod = new StateModifier({
                    origin: [0.5, 0.5],
                    align: [0.5, 0.5],
                    transform: Transform.identity
                });
                gridItem.idx = gridItems.length;
                gridItem.transformOutrs = transformOutArray[r];
                gridItem.transformOutcs = transformOutArray[c];
                gridItem.transformInrs = transformInArray[r];
                gridItem.transformIncs = transformInArray[c];
                gridItems.push(gridItem);
                cameraView.add(gridItem.mod).add(gridItem);
            }
        }
    }
    function transformOut(){
      console.log('transform out');
        for (var i = 0; i < gridItems.length; i+=1){
            var index = i;
            var gridItem = gridItems[index];
        
            var tran = Transform.translate(gridItem.transformOutrs, gridItem.transformOutcs);
            gridItem.mod.setTransform(tran, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }
    }
    function transformIn(){
        console.log('transform in');
        for (var j = 0; j < gridItems.length; j+=1){
            var index = j;
            var gridItem = gridItems[index];
        
            gridItem.mod.setTransform(Transform.identity, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }
    }
    createGridItems();
  	console.log (transformOutArray);
  	console.log (transformInArray);
    transformOut();
    
    Engine.on('mousedown', transformIn);
  	Engine.on('mouseup', transformOut);
    
});
require(['main']);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

注意： setTransform现在已在famo.us

中弃用

弃用：优先使用静态变换转换，或使用TransitionAbleTransForm。