ItemAdded/-Removed animations

[Bernhard König]

That's a great new feature in the Q3 Beta and I'm just playing around a bit with it.

My first suggestion on how to improve it would be to have some of the standard animations available out of the box - you know some property with a dropdown where we can select from 5 to 10 pre-designed animations. It's always a tricky job to imitate WP7's own animations althought all your base animation classes are a great help. So it would be great to just select one and be happy - and only if someone wants something special, the animation can be templated. Most of the time I go into your sample projects and copy/paste your animation property values :) as you're always doing a great job on animations that imitate the originals, but why not delivering them right with the control?

Another thing is: I like to have an animation where an item moves up and disappears after deleting. Using a standard move animation (like in your sample) works only if it's the top item in the list as when it's in the middle of other items, the animation would move the item into the one above which looks ugly. The item should move up and dissapear on its own upper border. Is there a way to achieve this? In your sample app always the top item gets removed so this is not a problem there ;)

cheers,
Bernhard

[Deyan]

Hello Bernhard,

Thanks for writing and for the valuable feedback. We appreciate it since it is important for us to fine tune all new features introduce in our latest Beta release.

1. We will try to come up with some nice predefined animations and allow the end-users to choose between them. I cannot give an exact time frame when these animations will be ready, but since it is not a great amount of work I believe this can be soon.

2. Currently, the way you would like your items to vertically move is not achievable. We can consider this scenario and try to find a way this can be implemented, but I cannot give you an exact promise. We will do our best to provide more funky out-of-the-box animations though.

Thanks for your feedback and do not hesitate to get back to us as soon as you have somethinkg to share.

Greetings,
Deyan
the Telerik team

[Bernhard König]

Hi Deyan,

thanks, some predifined animations will help to save time when using this feature. :)

I also have looked a little bit closer on how Microsoft does the "remove" animation for example in their mail app. It happens very fast but as far as I can see, the mail item disappears immediately (maybe with a very short fade out animation) and then all other items below move up in a nice smooth animation.

I'm not very talented when it comes to animations but I thought maybe if i combine a fade out animation to make the item disappear fast and then apply a resize animation so that the item scales down vertically would do the trick but besides the fact I didn't got the scale down right (think it has to do that I can't specify a starting height of the item as it can differ from item to item) it also seems that the other items don't move up even if I manage to do some kind of vertical scaling.

So having some kind of animation that would do THAT animation would be great - if it's somehow solvable :)

cheers,
b.

[Deyan]

Hello Bernhard,

Thanks for writing back.

You can create various animations very easily by using our animation framework. Just take a look at the source code of the ItemAnimations example of RadDataBoundListBox:

RadMoveAndFadeAnimation moveAndFade = new RadMoveAndFadeAnimation();
moveAndFade.MoveAnimation.StartPoint = new Point(500, 0);
moveAndFade.MoveAnimation.EndPoint = new Point(0, 0);
moveAndFade.FadeAnimation.StartOpacity = 0;
moveAndFade.FadeAnimation.EndOpacity = 1;
moveAndFade.Easing = new CubicEase();
this.addAnimations.Add(moveAndFade);

You can reuse this snippet in order to create a faster fade out and move animation to mimic  the native behavior in the mail client.

Another possibility would be to use a RadAnimationGroup and fill it with a RadResizeAnimation and RadFadeAnimation. RadAnimationGroup is a RadAnimation itself so you can directly set it to the ItemRemovedAnimation property of RadDataBoundListBox.

As for the issue with setting proper start values for animations: you don't need to do this. In the case of the different heights of your visual items you simply need to define the end value of the animation, not the start one. The animation itself will detect the current value of the property you are animating and will start from it.

I hope this helps.

Let me know if you need further assistance here.

Rad

Kind regards,
Deyan
the Telerik team