Group Transitions

[nodd13]

I want to create a group transition which consists of a slide followed by a tile transition. So that for the "in" transition the slide transition happens first, then when that's completed the tile transition happens, and vice-versa for the "out" transition.

I've done this by defining a transition using a RadAnimationGroup in the following way:

RadTransition transition = new RadTransition();
RadAnimationGroup GroupBackwardInAnimation = new RadAnimationGroup();
GroupBackwardInAnimation.Children.Add(new RadMoveAnimation()
{
    MoveDirection = MoveDirection.RightIn,
    Easing = new CubicEase() { EasingMode = EasingMode.EaseIn }
});
GroupBackwardInAnimation.Children.Add(new RadTileAnimation()
{
    InitialDelay = TimeSpan.FromMilliseconds(300),
    PerspectiveAngleX = 0.0,
    PerspectiveAngleY = -60.0,
});
transition.BackwardInAnimation = GroupBackwardInAnimation;

RadAnimationGroup GroupBackwardOutAnimation = new RadAnimationGroup();
GroupBackwardOutAnimation.Children.Add(new RadTileAnimation()
{
    PerspectiveAngleX = 0.0,
    PerspectiveAngleY = -60.0,
    InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.Out
});
GroupBackwardOutAnimation.Children.Add(new RadMoveAnimation()
{
    MoveDirection = MoveDirection.RightOut,
    Easing = new CubicEase() { EasingMode = EasingMode.EaseOut },
    InitialDelay = TimeSpan.FromMilliseconds(800)
});
transition.BackwardOutAnimation = GroupBackwardOutAnimation;

RadAnimationGroup GroupForwardInAnimation = new RadAnimationGroup();
GroupForwardInAnimation.Children.Add(new RadMoveAnimation()
{
    MoveDirection = MoveDirection.LeftIn,
    Easing = new CubicEase() { EasingMode = EasingMode.EaseIn }
});
GroupForwardInAnimation.Children.Add(new RadTileAnimation()
{
    InitialDelay = TimeSpan.FromMilliseconds(300)
});
transition.ForwardInAnimation = GroupForwardInAnimation;

RadAnimationGroup GroupForwardOutAnimation = new RadAnimationGroup();
GroupForwardOutAnimation.Children.Add(new RadTileAnimation()
{
    InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.Out
});
GroupForwardOutAnimation.Children.Add(new RadMoveAnimation()
{
    MoveDirection = MoveDirection.LeftOut,
    Easing = new CubicEase() { EasingMode = EasingMode.EaseOut },
    InitialDelay = TimeSpan.FromMilliseconds(800)
});
transition.ForwardOutAnimation = GroupForwardOutAnimation;

In the view I have the following code 

<telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTransition x:Name="CustomTransition"/>
</telerikPrimitives:RadTransitionControl.Transition>

Finally in the codebehind I do

// transition is the RadTransition defined in the code block above
CustomTransition.BackwardInAnimation = transition.BackwardInAnimation;

CustomTransition.BackwardOutAnimation = transition.BackwardOutAnimation;

CustomTransition.ForwardInAnimation = transition.ForwardInAnimation;

CustomTransition.ForwardOutAnimation = transition.ForwardOutAnimation;

Although this works the way I want it to it seems like a bit of a hack since I'm using a delay to tell the second transition to happen after the first. 

Is there a way to tell the RadAnimationGroup object to run its child animations consecutively perhaps by ordering them? So that the second child automatically starts running after the first has completed.

Secondly I guess the code would look a lot nicer if the transition was in the xaml, could you give me some pointers on how to do this?I'm a bit new to .NET programming and was struggling putting this more complicated tranistion into the XAML.

[Valentin.Stoychev]

Hello Umar,

What you have done is perfectly fine. There is no way to have subsequent animations right now. It is an interesting feedback and we will log it for future release.

Kind regards,
Valentin.Stoychev
the Telerik team