famo.us scale and rescale, save scale data from event to event

Question

I have a simple problem I am stuck on. I want to implement a ScaleSync on an ImageSurface. Everytime I end the scale action the data value is reset to 1 and if I perform another scale the ImageSurfaces starts transforming from 1.

define(function(require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var Surface = require('famous/core/Surface');
    var ScaleSync = require("famous/inputs/ScaleSync");

    var mainContext = Engine.createContext();

    var start = 1;
    var update = 0;
    var end = 0;
    var growShrink = "";

    var objectScale = 1;

    var scaleSync = new ScaleSync();

    var logo = new ImageSurface({
        size: [200, 200],
        content: '/content/images/famous_logo.png',
        classes: ['backfaceVisibility']
    });

    var centerModifier = new Modifier({
        align: [0.5, 0.5],
        origin: [0.5, 0.5]
    });

    logo.pipe(scaleSync);

    scaleSync.on("update", function(data) {
        objectScale = data.scale
        centerModifier.setTransform(
            Transform.scale( objectScale, objectScale, 1)
        );
    });

    scaleSync.on("start", function(){
        start ++;
    });
    scaleSync.on("end", function() {
        end++;
    });

    mainContext.add(centerModifier).add(logo);
});

I tried achieving this using an Accumulator, but I think that's for different purposes. I think I have to somehow alter the data in the on.update callback, but have no clue how to do that. Your help is much appreciated!

score 0 · Answer 1 · answered Dec 01 '14 at 15:24

I found the solution. Hope this helps anybody with similar issues. The modifier should have a scale variable that is referenced as follows:

    var scale = 1;

    var centerModifier = new Modifier({
        align: [0.5, 0.5],
        origin: [0.5, 0.5],
        transform: function(){
             return Transform.scale(scale, scale, 1);
        }
    });

And the state of the variable is changed on event update (I divide data.delta by 10 to normalize the value):

scaleSync.on("update", function(data) {
    scale += data.delta / 10;
});

famo.us scale and rescale, save scale data from event to event

1 Answers1