I am new to famo.us like everybody else.
I cannot think of a way to increase the height of each item (probably surface) inside my scrollview on clicking that item.
Eg. like below list view below
item 1
item 2
item 3
Now Clicked item 2
item 1
item 2
details of item 2
item 3
Here is a way I was able to achieve clicking to adjust height. It gets a bit more complicated is you want to animate the size.
Here is the simple click example..
Hope it helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Scrollview = require('famous/views/Scrollview');
var surfaces = [];
var scrollview = new Scrollview();
scrollview.sequenceFrom(surfaces);
for (var i = 0; i < 5; i++) {
var surface = new Surface({
size:[undefined,200],
properties: {
backgroundColor:'hsl('+(i*360/8)+',100%,50%)'
}
});
surface.open = false;
surface.on('click',function(){
var size = this.open ? [undefined,200] : [undefined,400] ;
this.setSize(size);
this.open = !this.open;
}.bind(surface));
surfaces.push(surface);
surface.pipe(scrollview);
};
context.add(scrollview);
Related
I'm trying to implement a pull to reload/refresh type effect, that you see in lots of apps, with scrollview. I've got multiple pain points on this.
Just stopping a scrollview past where it wants to sit is a pain. Setting velocity or speed limit doesn't work, just setting the position just makes it bounce because it wants to continue back.
Then setting up an event call that doesn't just fire when they scroll too hard up while doing their normal browsing.
If anyone has thoughts on how to accomplish this I'd appreciate it. If I don't get any responses in a day I'll start posting my specific attempts and where they fell short. I can't believe I'm the only one trying to implement this pretty common feature.
You could use the FlexScrollView which supports this feature out of the box (it is nearly impossible to do it right with the stock famo.us scrollview..):
var FlexScrollView = require('famous-flex/FlexScrollView');
var RefreshLoader = require('famous-refresh-loader/RefreshLoader');
var scrollView = new FlexScrollView({
autoPipeEvents: true,
pullToRefreshHeader: new RefreshLoader({
size: [undefined, 60],
pullToRefresh: true,
color: 'green',
backgroundColor: 'white',
particleCount: 8,
particleSize: 7
})
});
Demo: https://rawgit.com/IjzerenHein/famous-flex-chat/master/dist/index.html
Repo: https://github.com/IjzerenHein/famous-flex
RefreshLoader: https://github.com/IjzerenHein/famous-refresh-loader
Tutorial: https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md
I finally have a solution for you. It relies only on start, and end events of the scrollview sync. To start you will see the scrollview.reset function. This function is taken for scrollviews internals to return _scroller to its default behavior.
We will use a transitionable and scrollview._scroller.positionFrom to control the behavior of the scrollview when it should not be default. Essentially everything is normalized on scrollview.sync.on 'start' and the update is carried out on scrollview.sync.on 'end' if the position of the scrollview has reached the refresh offset.
Much of the functionality is tied to the fact that I am using a timeout to simulate the load time of the refresh. It may be more appropriate to have a variable that is keeping track of whether a request is still being made.
Anyway, I hope this gives you some ideas.. Here is the full example.
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 Transitionable = require('famous/transitions/Transitionable');
var SnapTransition = require('famous/transitions/SnapTransition');
Transitionable.registerMethod('snap',SnapTransition);
var snap = { method:'snap', period:200, dampingRatio:0.4 }
var context = Engine.createContext();
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0; i < 20; i++) {
var surface = new Surface({
size: [undefined, 200],
properties: {
backgroundColor: "hsl(" + (i * 360 / 20) + ", 100%, 50%)",
}
});
surface.pipe(scrollview);
surfaces.push(surface);
}
scrollview.trans = new Transitionable(0);
// Timeout that will simulate loading time
scrollview.timer = null;
// Total simulated load time
scrollview.timeout = 500;
// Vertical offset scrollview will start load at
scrollview.refreshOffset = 100;
// Reset scroller to default behavior
scrollview.reset = function(){
scrollview._scroller.positionFrom(scrollview.getPosition.bind(scrollview));
}
scrollview.sync.on('start',function(){
clearTimeout(scrollview.timer);
scrollview.trans.halt();
var pos = scrollview.trans.get()
if (pos != 0) scrollview.setPosition(pos);
scrollview.reset()
});
scrollview.sync.on('end',function(){
var pos = scrollview.getPosition();
if (pos < (-scrollview.refreshOffset)) {
scrollview.trans.halt();
scrollview.trans.set(pos);
scrollview._scroller.positionFrom(function(){
return scrollview.trans.get();
});
scrollview.trans.set(-scrollview.refreshOffset,snap,function(){
scrollview.timer = setTimeout(function(){
scrollview.trans.halt();
scrollview.trans.set(0,snap,function(){
scrollview.reset()
});
}, scrollview.timeout );
});
} else {
scrollview.trans.halt();
scrollview.trans.set(0);
}
});
context.add(scrollview);
I am new to famo.us. I am interested in creating animation where surface/object is in continuous motion and also its opacity keeps changing( ranging from 0->1 and back). I have am able to continuously rotate a surface and change its opacity from 1 to 0 once. I am stuck here as I am not sure how to proceed forward. Can someone suggest me some ideas ?
There are a couple ways you can go about doing this. It really depends on the exact effect you are trying to achieve. Here is an example using Modifier and its opacityFrom method to achieve a never ending sine effect.
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');
var context = Engine.createContext();
surface = new Surface({
size:[200,200],
properties:{
backgroundColor:'green'
}
})
surface.node = new RenderNode();
surface.mod = new Modifier({origin:[0.5,0.5]});
var startTime = Date.now();
var period = 1000;
surface.mod.opacityFrom(function(){
currentTime = Date.now();
return Math.abs(Math.sin((((currentTime - startTime) / period))));
});
surface.node.add(surface.mod).add(surface);
context.add(surface.node);
Or if you would like, you could achieve a never ending animation by just using StateModifier the callback function in setOpacity. Here I am recursively calling the same function, in a nested callback. This is what that looks like.
Hope some of this helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var context = Engine.createContext();
surface = new Surface({
size:[200,200],
properties:{
backgroundColor:'green'
}
})
surface.node = new RenderNode();
surface.mod = new StateModifier({origin:[0.5,0.5]});
surface.state = 0
surface.setState = function(state,transition){
surface.state = (state == 0) ? 1 : 0;
surface.mod.setOpacity(state,transition,function(){
surface.setState(surface.state,transition);
});
}
surface.node.add(surface.mod).add(surface);
context.add(surface.node);
surface.setState(surface.state,{duration:1000, curve:Easing.inOutQuad});
i'd like to manipulate the sizes of surfaces in a famo.us ScrollView, ideally with a transition.
the RenderNode() trick for doing this in a SequentialLayout, (Surface->Modifier->RenderNode) doesn't apply because it can't handle the .pipe()..
and wrapping each Node in another containerSurface with size:[true,true] just collapses it.
so i can't figure out a configuration that allows manipulation of sizes inside a Scrollview.
thanks, in advance
I found an interesting bug with undefined width surfaces that was not allowing me to do achieve this with a StateModifier. I used a Modifier and everything worked as expected.
I set up a normal looking scrollview and loop through the creation of the surfaces. To animate size, I prefer to wrap an [undefined,undefined] sized surface in a sized Modifier. This allows me to animate the size with more control.
After the creation of each surface, I create a RenderNode and a Modifier and then add the Modifier and the Surface to the RenderNode. I am still only piping events from surface, and that is all that is needed.
To animate the size, I define a Transitionable and use it in the return statement of Modifiers sizeFrom method. Now animating the height of the surface is as easy as setting the transitionable. I do so on click.
Here is the example. Good Luck!
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var RenderNode = require("famous/core/RenderNode");
var Modifier = require("famous/core/Modifier");
var Scrollview = require("famous/views/Scrollview");
var Transitionable = require("famous/transitions/Transitionable");
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
var snap = { method: 'snap', period: 600, dampingRatio: 0.6 }
var mainContext = Engine.createContext();
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0; i < 20; i++) {
var surface = new Surface({
content: "Surface: " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface.open = false;
surface.state = new Modifier();
surface.trans = new Transitionable(200);
surface.state.sizeFrom(function(){
return [undefined, this.trans.get()];
}.bind(surface));
surface.node = new RenderNode();
surface.node.add(surface.state).add(surface);
surface.pipe(scrollview);
surface.on('click',function(e){
if (this.open) {
this.trans.halt();
this.trans.set(200,snap);
} else {
this.trans.halt();
this.trans.set(400,snap);
}
this.open = !this.open;
}.bind(surface));
surfaces.push(surface.node);
}
mainContext.add(scrollview);
Alternatively you can use the FlexScrollView, which supports a flow-mode for smooth inserting/removing/updating/swapping:
var scrollView = new FlexScrollView({
flow: true // flow-mode causes renderables to smoothly flow to their new position
});
scrollView.push(...);
scrollView.push(...);
scrollView.insert(1, ...); // insert item in between
https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md
https://github.com/IjzerenHein/famous-flex
I'm searching for an code example of the Lightbox demo from famo.us. Unfortunately, the interesting part of the app in the codepen is uglified in the pens version of the famous.lib.js.
It's not the whole gallery thing I'm interested in, its "just" a scollable view with multiple elements in one row, depending on their size and the screen size.
Has anyone experiences in developing a View/Layout like this?
Thanks in advance
I have been doing some work with Scrollview and GridLayout. You can calculate grid dimensions based on contextSize and target/min cell size.
Here is an example to get you started. I am essentially adding a gridLayout as the sole view in Scrollview. I know this may work against scrollviews efficient rendering in that scrollview will always be rendering the entire grid, but I am doing it for the examples sake. I use Modifier around the gridLayout to ensure the size of the view is always calculated and scrollview always scrolls the right amount. So anyway, here is what I did..
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier'); // edited
var Scrollview = require('famous/views/Scrollview');
var GridLayout = require('famous/views/GridLayout');
var context = Engine.createContext();
var scrollViews = [];
var scrollview = new Scrollview();
scrollview.sequenceFrom(scrollViews);
var gridCells = [];
var grid = new GridLayout();
grid.sequenceFrom(gridCells);
grid.mod = new Modifier();
var cellCount = 24;
var cellMinWidth = 200.0;
grid.mod.sizeFrom(function(){
var size = context.getSize();
var cellsX = Math.floor(size[0] / cellMinWidth);
var cellsY = Math.ceil(cellCount * 1.0 / cellsX);
var cellHeight = size[0] * 1.0 / cellsX;
grid.setOptions({dimensions:[cellsX,cellsY]});
return [undefined,cellsY*cellHeight];
});
grid.node = new RenderNode();
grid.node.add(grid.mod).add(grid);
for (var i = 0; i < cellCount; i++) {
var surface = new Surface({
size:[undefined,undefined],
properties: {
backgroundColor:'hsl('+(i*360/12)+',75%,50%)'
}
});
gridCells.push(surface);
surface.pipe(scrollview);
};
scrollViews.push(grid.node);
context.add(scrollview);
FWIW To really maximize the efficiency of scrollview, you need to have a list of views that are rendered sequentially. Since we are only rendering one view in scrollview, we are always rendering everything, all the time. I have thought of a couple ways to get around this though, that both extend beyond the scope is this example.
You could do the visibility check yourself and render nodes based on the position of the scrollview.
You could create a gridLayout for each row, then manage the cells within each grid using list manipulation techniques.
BONUS:
If you just want to use GridLayout just for the modifiers, I found using _modifiers property rather helpful (Note: only available after deploy!). I was able to create a rearrangeable layout using this technique. The surfaces are all floating outside the gridlayout and only being positioned via their draggable modifier based on the gridlayouts modifiers. Here is that working demo of that..
http://higherorderhuman.com/examples/rearrangeable.html
Hope this helps!
If I have a transform translate thats animating something vertically between say 0 -> 1000, over 5 seconds, is there a way if I have click events to change the horizontal position without interrupting the vertical animation?
p.setTransform(Transform.translate(20,1000,0),
{
duration: 5000,
curve: 'linear'
});
then on some random click, I want to start changing the x position over 100ms or so, and it might have multiple of these before the 5000 duration has finished
I can play with the origin and animate that independently, but I really need pixel control. So is there a way to animate just the x?
If I add a setTransform, it chains after the first one rather than concurrently.
Yes, you most certainly can achieve this. You will want to use a ModifierChain. ModifierChain allows you to chain your modifiers together and control the transforms independently. Check out this example..
Hope this helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var ModifierChain = require('famous/modifiers/ModifierChain');
var Easing = require('famous/transitions/Easing');
var context = Engine.createContext();
var surface = new Surface({
size:[200,200],
properties: { backgroundColor:'green' }
});
surface.yState = new StateModifier();
surface.xState = new StateModifier();
var x = 0;
var y = context.getSize()[1] - 200;
surface.on('click',function(){
x += 100;
surface.xState.halt();
surface.xState.setTransform(Transform.translate(x,0,0),{duration:200});
});
surface.chain = new ModifierChain();
surface.chain.addModifier(surface.yState);
surface.chain.addModifier(surface.xState);
context.add(surface.chain).add(surface);
surface.yState.setTransform(Transform.translate(0,y,0), {duration:5000});