famo.us javascript 中的意外行为

Question

下面的代码创建网格的元素，并使用 transformOut 方法对其进行排列。这部分工作正常，但我希望网格在 mousedown 时折叠到中心，并且 spring 在 mouseup 时再次退出。但是，对 transformIn 或 transformOut 函数的所有后续调用都会导致项目进出。一个工作示例在这里： 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 设置回身份将 return 项目恢复到它们在转换时的默认值。目前，一旦设置了新变换，它们就会过渡回原始状态，然后应用新变换。您只是用新的变换颠倒了它们的顺序。

    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

中弃用

Deprecated: Prefer transformFrom with static Transform, or use a TransitionableTransform.

famo.us javascript 中的意外行为

Unexpected behaviour in famo.us javascript

javascript

famo.us

示例片段：