locked
Applying multiple animations in sequence RRS feed

  • Question

  • I have a control whose color i.e. Fill property needs to change every second. Only 3 colors(Red, Green & Blue) I need to apply in sequence and have to keep changing these 3 colors every second till the specified time elapses e.g.

    Time                  Fill color

    01 sec               Trasnparent -> Red -> Transparent

    02 sec               Transparent -> Green -> Transparent

    03 sec               Transparent -> Blue -> Transparent

    04 sec               Trasnparent -> Red -> Transparent

    05 sec               Transparent -> Green -> Transparent

    06 sec               Transparent -> Blue -> Transparent

    ....                     .........................................

    so on till specified time.

    Using ColorAnimation or DoubleAnimation(on opacity property) color can easily be changed but I'm looking for some way to keep repeating this three color animation sequence. May I know any easy way to repeat this animation sequence?

    I would appreciate if some code snippet is provided along with the reply.

    thanks.


    Krunal C
    • Edited by KrunalC Wednesday, August 18, 2010 4:08 PM writing error
    Wednesday, August 18, 2010 4:06 PM

Answers

  • Hey i've made it more smooth

    use following time lines

     ColorAnimation red = new ColorAnimation(Colors.Transparent, Colors.Red, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          red.BeginTime = TimeSpan.FromSeconds(1);
          red.AutoReverse = true;
          ColorAnimation green = new ColorAnimation(Colors.Transparent, Colors.Green, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          green.AutoReverse = true;
          green.BeginTime = TimeSpan.FromSeconds(5);
          ColorAnimation blue = new ColorAnimation(Colors.Transparent, Colors.Blue, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          blue.AutoReverse = true;
          blue.BeginTime = TimeSpan.FromSeconds(9);
    • Marked as answer by KrunalC Friday, August 27, 2010 1:52 AM
    Thursday, August 19, 2010 4:51 AM

All replies

  • Hi

    Animateion has a property Repeat Forever, plz check this true, then your animation ll remain continue and repeat the same animation untill your application is running.

     

    Regards

    Zee

     

    Wednesday, August 18, 2010 4:20 PM
  • I'm aware of this Repeat Forever thing but not sure how to apply in my scenario. Can you provide some code snippet in context of my problem?

    Thanks.


    Krunal C
    Wednesday, August 18, 2010 4:22 PM
  • If you are using the EXPRESSION BLEND to create storyboard, then select the storyboard you created on the control which is changing the three colors, and in properties window set Repeat Forever to TRUE

    Or in Xaml , you can set

    </Storyboard>

    ...

      RepeatBehavior="Forever" />
    </Storyboard>
    ...

    Regards

    Zee

    Wednesday, August 18, 2010 4:32 PM
  • I have added following code to change the fill color from Red->Green->Blue and back to Red but it always shows the animation for blue color only and not for red and green. May I know what is the problem here? Code is below :

          SolidColorBrush myAnimatedBrush = new SolidColorBrush();
          myAnimatedBrush.Color = Colors.Transparent;
          capsulePath.Fill = myAnimatedBrush;
    
          this.RegisterName("MyAnimatedBrush", myAnimatedBrush);
    
          Storyboard storyBoard = new Storyboard();
          
          ColorAnimation red = new ColorAnimation(Colors.Transparent, Colors.Red, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          red.AutoReverse = true;
          ColorAnimation green = new ColorAnimation(Colors.Transparent, Colors.Green, new System.Windows.Duration(TimeSpan.FromSeconds(1)));
          green.AutoReverse = true;
          ColorAnimation blue = new ColorAnimation(Colors.Transparent, Colors.Blue, new System.Windows.Duration(TimeSpan.FromSeconds(1)));
          blue.AutoReverse = true;
    
          storyBoard.RepeatBehavior = RepeatBehavior.Forever;
          storyBoard.Children.Add(red);
          storyBoard.Children.Add(green);
          storyBoard.Children.Add(blue);
    
          //// Configure the animation to target the Path's Fill property.
          Storyboard.SetTargetName(red, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(red, new PropertyPath(SolidColorBrush.ColorProperty));
          Storyboard.SetTargetName(green, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(green, new PropertyPath(SolidColorBrush.ColorProperty));
          Storyboard.SetTargetName(blue, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(blue, new PropertyPath(SolidColorBrush.ColorProperty));
    
          storyBoard.Begin(capsulePath, true);
    
    

     

    Thanks,


    Krunal C
    Wednesday, August 18, 2010 10:50 PM
  • Hi Krunal ,

    I've tried with ur code and now its working

     SolidColorBrush myAnimatedBrush = new SolidColorBrush();
          myAnimatedBrush.Color = Colors.Transparent;
          capsulePath.Fill = myAnimatedBrush;
    
          this.RegisterName("MyAnimatedBrush", myAnimatedBrush);
    
          Storyboard storyBoard = new Storyboard();
    
          ColorAnimation red = new ColorAnimation(Colors.Transparent, Colors.Red, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          red.BeginTime = TimeSpan.FromSeconds(1);
          
          ColorAnimation green = new ColorAnimation(Colors.Transparent, Colors.Green, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
         //  green.AutoReverse = true;
          green.BeginTime = TimeSpan.FromSeconds(3);
          ColorAnimation blue = new ColorAnimation(Colors.Transparent, Colors.Blue, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
         // blue.AutoReverse = true;
          blue.BeginTime = TimeSpan.FromSeconds(5);
    
          storyBoard.RepeatBehavior = RepeatBehavior.Forever;
          storyBoard.Children.Add(red);
          storyBoard.Children.Add(green);
          storyBoard.Children.Add(blue);
    
          //// Configure the animation to target the Path's Fill property.
          Storyboard.SetTargetName(red, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(red, new PropertyPath(SolidColorBrush.ColorProperty));
          Storyboard.SetTargetName(green, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(green, new PropertyPath(SolidColorBrush.ColorProperty));
          Storyboard.SetTargetName(blue, "MyAnimatedBrush");
          Storyboard.SetTargetProperty(blue, new PropertyPath(SolidColorBrush.ColorProperty));
    
          storyBoard.Begin(capsulePath, true);

    here u need to set Begin Time for every Color Animation

    u might need to play with AccelarationRatio to make it more smooth or there might be some effect to make it more smooth

    or try playing with Timing to make it smoth

    I hope this will help you

    Mark it as answer if it realy helps you

    THanks

    BHavik

    Thursday, August 19, 2010 4:47 AM
  • Hey i've made it more smooth

    use following time lines

     ColorAnimation red = new ColorAnimation(Colors.Transparent, Colors.Red, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          red.BeginTime = TimeSpan.FromSeconds(1);
          red.AutoReverse = true;
          ColorAnimation green = new ColorAnimation(Colors.Transparent, Colors.Green, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          green.AutoReverse = true;
          green.BeginTime = TimeSpan.FromSeconds(5);
          ColorAnimation blue = new ColorAnimation(Colors.Transparent, Colors.Blue, new System.Windows.Duration(TimeSpan.FromSeconds(2)));
          blue.AutoReverse = true;
          blue.BeginTime = TimeSpan.FromSeconds(9);
    • Marked as answer by KrunalC Friday, August 27, 2010 1:52 AM
    Thursday, August 19, 2010 4:51 AM
  • Hi

    Please try this one

    <Storyboard x:Key="ChangeColorAnimation" RepeatBehavior="Forever">
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="rectangle1">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle1">
        <EasingColorKeyFrame KeyTime="0" Value="Black"/>
        <EasingColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
        <EasingColorKeyFrame KeyTime="0:0:1" Value="Red"/>
        <EasingColorKeyFrame KeyTime="0:0:1.5" Value="Lime"/>
        <EasingColorKeyFrame KeyTime="0:0:2" Value="Lime"/>
        <EasingColorKeyFrame KeyTime="0:0:2.5" Value="Blue"/>
        <EasingColorKeyFrame KeyTime="0:0:3" Value="Blue"/>
       </ColorAnimationUsingKeyFrames>
      </Storyboard>

    Regards
    Zee

    • Proposed as answer by Jie Bao Thursday, August 19, 2010 5:24 AM
    Thursday, August 19, 2010 5:01 AM
  • Hi Krunal C,

    For your scenario, KeyFrame may be the good solution.

     <Rectangle Width="100" Height="100" >
      <Rectangle.Fill>
      <SolidColorBrush/>
      </Rectangle.Fill>
      <Rectangle.Triggers>
      <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
       <BeginStoryboard>
       <Storyboard RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <LinearColorKeyFrame KeyTime="0" Value="Red"/>
        <LinearColorKeyFrame KeyTime="0:0:1" Value="Green"/>
        <LinearColorKeyFrame KeyTime="0:0:2" Value="Blue"/>
        <LinearColorKeyFrame KeyTime="0:0:3" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
       </Storyboard>
       </BeginStoryboard>
      </EventTrigger>
      </Rectangle.Triggers>
     </Rectangle>
    

    By the way, the EasingColorKeyFrame in Zee's reply is a new class in WPF 4. For more please refer the new feature in WPF 4 - Easing Functions: http://blogs.msdn.com/b/llobo/archive/2009/10/23/new-wpf-features-easing-functions.aspx

    If you have any problem, please feel free to let me know.

    Sincerely,

    Bob Bao

    MSDN Subscriber Support in Forum 

    If you have any feedback on our support, please contact msdnmg@microsoft.com


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Thursday, August 19, 2010 5:36 AM
  • Another idea, lets suppose you have three storyboards

    RedStoryboard
    GreenStoryboard
    BlueStoryboard

    Register Completed Event of each storyboards

    In load event of window start Redstoryboard,
    In completed event of RedStoryboard start GreenStoryboard
    In completed event of GreenStoryboard start BlueStoryboard
    In completed event of BlueStoryboard start RedStoryboard

    Hope it 'll help you.

    Regards

    Thursday, August 19, 2010 6:54 AM
  • Hi KrunalC,

    How about your problem? If you need help, please feel free to let me know.

    Sincerely,

    Bob Bao


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Friday, August 27, 2010 1:50 AM
  • Thanks Bob, for your concern. For now I have managed to do the required thing without keyframes. Due to proejct pressure couldn't put some time to study your approach but will try it once I'm free.

    I have marked Rao Bhavik's response as reply.

     

    Thanks Bob, Zee soft and Rao Bhavik for quick help.


    Krunal C
    Friday, August 27, 2010 1:54 AM