Group Transitions

2 posts, 0 answers
  1. nodd13
    nodd13 avatar
    4 posts
    Member since:
    Feb 2011

    Posted 11 Mar 2011 Link to this post

    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.
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 17 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
Back to Top