javascript - Scale ScrollView without breaking scrolling -
short question. how can add size modifier using transitionable scrollview, without breaking scrolling ? seems it's blocking events in way.
code:
define('main', function (require, exports, module) { var engine = require('famous/core/engine'); var surface = require('famous/core/surface'); var transform = require('famous/core/transform'); var scrollview = require('famous/views/scrollview'); var modifier = require("famous/core/modifier"); var transitionable = require("famous/transitions/transitionable"); var context = engine.createcontext(); var sizetrans = new transitionable(0); var sizemodifier = new modifier({ transform : function(){ var s = sizetrans.get() + 1; return transform.scale(s, s, 0); } }); var scrollview = new scrollview(); var surfaces = []; scrollview.sequencefrom(surfaces); (var = 0; < 40; i++) { var surface = new surface({ content: "surface: " + (i + 1), size: [undefined, 200], properties: { backgroundcolor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)", lineheight: "200px", textalign: "center" } }); surface.pipe(scrollview); surfaces.push(surface); } context .add(sizemodifier) .add(scrollview); });
i trying create live example, it's not working unfortunately :/ http://jsfiddle.net/7fzfx19h/1/
fixed code, demo works http://jsfiddle.net/7fzfx19h/2/ :
define('main', function (require, exports, module) { var engine = require('famous/core/engine'); var surface = require('famous/core/surface'); var transform = require('famous/core/transform'); var scrollview = require('famous/views/scrollview'); var modifier = require("famous/core/modifier"); var transitionable = require("famous/transitions/transitionable"); var context = engine.createcontext(); var sizetrans = new transitionable(0); var sizemodifier = new modifier({ transform : function(){ var s = sizetrans.get() + 1; return transform.scale(s, s); } }); var scrollview = new scrollview(); var surfaces = []; scrollview.sequencefrom(surfaces); (var = 0; < 40; i++) { var surface = new surface({ content: "surface: " + (i + 1), size: [undefined, 200], properties: { backgroundcolor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)", lineheight: "200px", textalign: "center" } }); surface.pipe(scrollview); surfaces.push(surface); } context.add(sizemodifier).add(scrollview); });
Comments
Post a Comment