Comments (8)
What is the effect you are going for? Would you like to stop the translation from happening once the size has reached its maximum value?
In this case it's better to limit the maximum displacement at its source, before you map it to the size and translation. This can be accomplished using the filter
method on a stream.
var boundedDisplacement = displacement.filter(function(type, value){
return value <= 400;
})
Here boundedDisplacement
will be just like displacement
except it will stop emitting events once the value
exceeds 400. You can then map this stream to the size
and transform
nodes. The filter
method takes a function that when true
passes events merrily along, but when false
cuts off the events.
Let me know if this helps!
from samsara.
Even when using a filter the accumulation real value is increasing. When you filter all events > 100 but move the mouse 100 more the accumulation value is 200. To again send events the mouse must be moved back 100 - which when is a 2nd move fells strange since no visual feedback to the user. IMHO the accumulation must be prevented to grow.
from samsara.
Ah, I see what you mean. I think that would be a good feature! I'll implement it soon.
from samsara.
I've pointed to a new trial samsara.js file and forked your codepen here http://codepen.io/samsaraJS/pen/BoEVXz
Now Accumulator
can be created with optional parameters for clamping. You can instantiate it with
new Accumulator(0, {min : -100, max : 200});
with defaults set to -Infinity
and Infinity
for min
and max
if unspecified.
Let me know if this is what you're looking for.
from samsara.
The header-picture landscape change can be ignored.
I see two phases.
- touch move down, header picture resizes, plane is rotating
- touch release, header bounces back, plane can be ignored
- while dragging the header size is using the mouse-accumulator
- after release it uses a bounce transition
How can this be made with streams?
from samsara.
The new version http://codepen.io/samsaraJS/pen/BoEVXz is a little strange...
- increase size by mouse move right - release mouse
- 2nd mouse move, starts again with 100px red box, seems that accumulator is reset to 0 somehow
btw. even without {max: 100} the accumulator seems to be reset
from samsara.
Sorry I introduced a bug. It's fixed now.
For your example, I think it's a perfect thing to build in Samsara. For reference you it might be helpful to see how this example works, which also has a "drag to bounce" transition as in your example. The demo relies on the built-in widget DrawerLayout
The way I would think about your example in terms of streams is to have the position of the header be given by an accumulator
stream. The accumulator
should subscribe to two other streams, one providing deltas from the mouse, the other providing deltas from the "bounce transition" (which should be a Transitionable
). Take a look at how this is done inside of DrawerLayout
. But it looks something like this:
var position = new Accumulator(0);
var mouseInput = new MouseInput({scale : .5});
var bounce = new Transitionable(0);
// Transitionable only outputs absolute values, so to get deltas, subscribe it to a differential stream
var bounceDeltas = new Differential();
bounceDeltas.subscribe(bounce);
// now position can listen to both the bounce transition and the mouse
position.subscribe(mouseInput.pluck('delta'));
position.subscribe(bounceDeltas);
// when user lets go, transition the bounce
mouseInput.on('end', function(){
bounce.set(position.get());
bounce.set(0, {duration : 300, curve : 'easeOutBounce'});
});
You may be trying to limit the accumulator
, so that the user can't drag the picture all the way down, but a better approach is to provide a scale
option for the mouseInput
. If scale = 1/2
for instance, if the user drags 100px, the accumulation will only be 50px.
from samsara.
I believe your issue has been addressed with the min/max capping. Let me know if it's still a problem, otherwise I will close.
from samsara.
Related Issues (20)
- Not responsive to split view on iOS HOT 4
- [Question] Min & Max Opacity HOT 8
- EventEmitter incorrectly binds owner on `once`
- EventHandler never turns off upstream events HOT 1
- [Question] will-change size HOT 2
- [Question] How to populate the div within a Surface using Javascript HOT 8
- React Native HOT 3
- Manipulating StyleSheets instead of inline styles HOT 4
- Views added to context after context has been mounted need a resize event to be render HOT 2
- Question : Can Samsara leverage the capabilities of shadow-dom ?? HOT 1
- FYI - FastDom HOT 1
- SequentialLayout can't be align to bottom HOT 7
- Scrollview.goTo(x) goes bananas on iOS HOT 6
- Paginated Scrollview can't handle resize/orientation change HOT 1
- Scrollview bug IE11
- set/toggle/remove classes bug
- Awesome work HOT 2
- Non-nested CSS3D seems to be getting bad in Chrome. HOT 5
- Is Samsara viable when implementing animations designed in Framer? HOT 1
- misalignment with Cube demo HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from samsara.