I have a scrollview and an image as a background in different surface with lower z-index. I want to scroll the image with half the speed of the scrollview.
Any ideas on how to implement it ?
I can't give you a COMPLETE solution, but this should take you down a decent path.
1) Famo.us has worked on multiple scrollViews. Each has a slightly different method to get the 'scrollTop' value from it.
The one created earlier only gives you the scrollTop value for the first visible element in the list. So, in this case you can get how many elements have been scrolled away and calculate the actual value yourself. OR if you have a small, and limited number of the elements in the scrollView you should wrap all the elements in a single view and pass a singleView to the scrollView. This way Famo.us has to do calculations for off-screen elements, but if the number of elements is small enough, it can make many animations/calculations much easier.
The second scrollView was call LimitedScrollView internally. I don't have much experience with it yet, but it should give you the correct values anyway.
2) ScrollView fires events on scroll. use that to update the value of a transitionable.
Pseudo Code:
scrollView.on('scroll', function(){
transitionable.set(scrollView.scrollTop)
});
3) You can now bind the transform value for the background to the transitionable.
Pseudo Code:
background.transformFrom(function(){
return Transform.translate(0, -transitionable.get()/2, 0);
});
Now, things should work correctly.
Hope that helps.
Related
The Famo.us Scrollview has a pagination feature that allows you to snap to the closest item.
Imagine you have a small container which has items with lots of content.
As soon as you want to scroll down to read the content outside the container, it either snaps back to the top, or snaps to the next item.
Does anybody know how to activate pagination only within a thresshold (X pixels) of an edge? That would be awesome.
Codepen demonstrating the problem here: http://codepen.io/markmarijnissen/pen/AGxaC?editors=001
var scroll = new Scrollview({
paginated: true,
pagePeriod: 500,
pageStopSpeed: 0.01, // mysterious option which might provide solution
pageSwitchSpeed: 100, // mysterious option which might provide solution
});
https://github.com/Famous/famous/blob/master/views/Scrollview.js
The TOLERANCE constant is not configurable yet. But you could easily contribute to make it configurable ;)
I currently have the following working fiddle
var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);
I animate a circle along a line.
I also want to make the circle flash at the same time but I can't seem to work out a way to do this?
I thought about adding the circle to a set and applying the additional animation to this but I can't see to get this either!
Any ideas?
This is a hack and I make no attempt to hide it, but it could be made a bit nicer.
There's a couple of problems depending on 'how' you want to animate the flash. The main problem is having 2 simultaneous animation on the same object, as Raphael doesn't do this (to my knowledge). Its easier if you want to animate an alternate attribute than the same one. If you want to animate a scale to indicate a flash, you will need to append the scale transform to the end of the path transform string ('t,s').
Example here, just uses opacity attribute.
Probably the nicest method would be to include something that figures out time running and amends an attribute manually within the animation function (paper.customAttributes.progress). However, that will probably take a bit longer.
Another alternative could be to animate another object off screen, that does all the calculations for you. It feels a bit ugly, but should work.
So earlier we create a dummy object off screen...
var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });
Within the progress func, you can then set the real circles opacity to be the same as the offscreen one.
this.attr('opacity', dummy.attr('opacity'));
And we get the dummy animation triggering later
dummy.animate(flashingAnim);
jsfiddle
As mentioned, I think there are cleaner ways, but may involve you writing a small linear animation func separately, but this may help if performance isn't an issue and you don't mind extra elements in the dom.
An alternative solution that I came up with is a looping callback. The very sound of a looping callback sounds ugly but I guess thats what an animation is?
It does appear that you can attach multiple animations to an element! Here's a an example
function animateIn() {
flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
}
function animateOut() {
flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
}
animateIn();
When I use iCarousel type linear, and wrap is true. I am getting an UI like below:
The problem, I am facing is at the top the number 998 UI is broken, but I want visible 998 number without increasing iCarousel height. So, how can I achieve this? and one more thing I don't bother about UI might break for number 2, if I want a visible 998 number.
There are two reasons why your carousel item is cut off:
1) Your carousel view is not vertically centered in the window. If you center it, 0 will be dead centre and 998 and 2 will both be cut off, but equally
2) You need to set the item view size to exactly fit your view. You're currently using the default images that come with the example project which are 200x200 pixels in size. Presumably you will eventually replace these with your own views. When you do, make sure the size of those views is an exact division of the height of your window, so for example if your windows is 1024 pixels high, and you want to show 5 views, then they need to be 1024/5 pixels high (204.8 px). Obviously that's not a nice number, but you can make them a bit smaller so that they are a nice round number and then adding some spacing between them using the carousel delegate method.
I'm thinking like text fade in and slide effects. I imagine implementing this would be rather trivial and plan to do so myself, but wanted to make sure I'm not reinventing the wheel first. If it doesn't exist then I'm looking on advice on the best way to implement these.
The 2 things I'm looking to do are fade in text and have the window slide down when resizing, eg if I show a label that was previously hidden it would slide down ~20 pixels instead of just instantly growing 20 pixels larger.
The way I was thinking to implement the first one is, assuming it's possible, get the window/bg color and start it at that and transition it to the font color, if there's alpha channel support that would be even simpler to do (I'm not sure if there is since I haven't messed with colors yet). To do this I'd just choose a transition time period and process it with a for loop or something once the color increments have been determined.
Similarly to do the window transitions I would get the height of the change (not sure how to do that yet), determine the increments of change based on the transition time and in a for loop gradually adjust the size. Sorry if I didn't explain those very clear, I'm trying to get this in before I go to work and figure most of you will know what I'm trying to explain. As always thanks for the help!
For window resize transition effect, QPropertyAnimation may be the easiest to do since height is a widget property. Fading text might work the same way if the foreground color can be coerced into a property.
I have a ListView-like control that displays a list of items of various heights. The contents of the list, and the heights of the items can change – a background thread is populating the list and calculating the layout of each item, possibly even while the user is scrolling the content.
Which brings me to my question: How do I display a useful vertical scrollbar for this view? I’ve seen cases (notably web browsers) where the slider “jumps away” from the mouse cursor while the user is dragging it, the result of the underlying content growing in height. I don’t want that.
So far
Instead of the slider representing the viewport height relative to the content height, maybe it could represent a point in a timeline instead? (The items are sorted by timestamp). This would at least prevent the scrollbar from changing as item layouts are calculated.
Get rid of the scrollbar altogether and use a forward/backward rocker switch like the one used in Picasa (the further the slider is pulled upwards or downwards, the faster the view is scrolled, until the user releases the slider). If I take this route, are there any controls you can recommend?
I am using Qt, but this applies to UI design in general.
IMO the fundamental problem with a classic scrollbar is that due to background population, the valid range is changing - and thus, the meaning of a scrollbar position changes.
If you can predict the full range of items, you can still provide a scrollbar and replace yet-unknown items with "loading...".
Otherwise, a rocker (is that an official name?) would be the next best thing to use.
However, since you have a dedicated scale (timeline), it might be better to have separate buttons that jump a dedicated time (e.g. one minute, one hour, one day, ..). For a fancier look, you could create a rocker with "hot" areas that jump for a specific time, whereas the areas inbetween are interpolated (linear or or logarithmic, depending on the scale to cover).
i.e. line this (drawing just the "backward" half):
--------------------------
|##|XXXXXXX|##|XXXXXXX|##|
--------------------------
-1h -1m -1s