[andersfisker]

Hi everyone,

I am trying to make a list with static label items(home menu) where the opacity of a given label decreases as i scroll away from it. The effect would be exactly the same as in Hitchers FTV skin. Now i could solve this by adding a layer of the background image on top of the menu, and diffusing it with a semi-transparent image, and then add some slide animations to make it appear as if the labels are gradually decreasing in opacity as i move away from them(this is how the FTV skins does it). The problems is that my background is not a single color, and therefore i cant do it this way.

Do any of you have any idea how i could solve this? The only way i can think of is by making a grouplist where i define each menu item with fade animations for every focus position in the grouplist, which seems a bit overkill

Thanks in advance.

[smitchell6879]

Make a all white gradient that will act as your fade layer.. then take your multicolored background u have and diffuse the white gradient to it .The multicolored image should take shape and opacity of the gradient if done right.

[andersfisker]

If i understand you correctly - then i already tried this. The problem is, that for the opacity of the labels to change, i need to slide the multicolored image up and down. This means that the multicolored image on top of the labels is "out of sync" with the background multicolored image - if that makes sense

[smitchell6879]

Alright well is it is a static list then do a animation for each label to fade based on the focused label.

[Hitcher]

Try using a fade animation instead of sliding it.

[smitchell6879]

Basically <animation effect="fade" start="100" end="80" condition="container(9000).Hasfocus(1)">Conditional</animation>

Something link that you will have to adjust for your container and effect you want

[andersfisker]

It works - thanks guys

[andersfisker]

Well it kind of works. I just found another problem Lets say i scroll down from item 1 to item 2, now currently item 1 fades from start="100" to end="50" when the control gains focus on item 2(This is what i want). The problem is that when scrolling up again, this same animation happens when the focus gains control on item 2, here item 1 should stay at 50% opacity, and not fade again from start="100" to end="50". So for this to work i guess i would need a to know the direction of scrolling. I tried with the Container().OnNext, but this results in the animation running for 1 frame.

Any ideas?

[badaas]

Can you use absolute positions now in lists?

[andersfisker]

What do you mean? Like the position of the currently focused item, or any item in the list?

[andersfisker]

Okay i finally figured it out. I made a hidden dummy list with two items(representing up and down movement), then i made two dummy buttons in the focused layout of the menu list - which each move the dummy list up or down given the scroll direction of the menu list. Then i made fade animations for all items for both scroll directions, and added a condition to check the dummylist for its focus position, thus making a boolean for the scroll direction. Its crazy ugly code, but it works

But still thanks for your help

[smitchell6879]

Well it kind of works. I just found another problem Lets say i scroll down from item 1 to item 2, now currently item 1 fades from start="100" to end="50" when the control gains focus on item 2(This is what i want). The problem is that when scrolling up again, this same animation happens when the focus gains control on item 2, here item 1 should stay at 50% opacity, and not fade again from start="100" to end="50". So for this to work i guess i would need a to know the direction of scrolling. I tried with the Container().OnNext, but this results in the animation running for 1 frame.

Any ideas?

You could had used string.Is equalorgreater(container.currentitem,2) as the condition then as the item number was 2 or more it would be faded to 50 on the other end you can have them all start at 50 and on focus fade to 100... I am not sure what your layout looks like.