New Animation "FlipAnimation"

Oct 20, 2008 at 4:56 PM
Edited Oct 20, 2008 at 5:02 PM

It has been some months since I discovered FluidKit in codeplex.com precisely when I began to program in WPF.

It is an excellent library and they in my work asked me to make a demonstration, they however requested me an effect that the FluidKit doesn't have, Flip to the style iPod. In that moment I devote me to investigating like carry out the effect and could adapt it to the FluidKit (FK), after many investigate only I found a pair of links where they exposed examples but not following the form of the FK

So that I began to develop following the example of the cube, and the result was the following:

http://www.youtube.com/v/MEE96ER2Z3k

</EMBED> I am not good writing in English, so that the comments are in Spanish in the source code

1. Add the project two files more. (how could I send the files?)
    \Controls\Transition\Flip.xaml
    \Controls\Transition\FlipTransition.cs

2. Add to the dictionary of resources< TransitionStoryboards.xaml>:
    < ResourceDictionary Source= "Flip.xaml"/>

3. Add the new resource of FlipAnimation in TransitionTester.xaml
    <Controls:FlipTransition x:Key="FlipTransition" Rotation="LeftToRight"/>

4. Also add wings new properties
 <GroupBox Header="Flip"
      Margin="0,10,0,0">
      <StackPanel Orientation="Vertical">
          <RadioButton Content="Left to Right"
             x:Name="_l2r_f"
             IsChecked="True"/>
          <RadioButton Content="Right to Left"
             x:Name="_r2l_f"/>
          <RadioButton Content="Top to Bottom"
             x:Name="_t2b_f"/>
          <RadioButton Content="Bottom to Top"
             x:Name="_b2t_f"/>
          <Button x:Name="_playFlip"
              Content="Play"
              HorizontalAlignment="Right"
              Click="PlayTransition"/>
      </StackPanel>
  </GroupBox>

5. lastly add in the code of TransitionTester.xaml.cs
private void PlayFlip()
  {
      FlipTransition transition = Resources["FlipTransition"] as FlipTransition;
      transition.Duration = new Duration(TimeSpan.FromSeconds(1));
     
      if (_l2r_f.IsChecked.Value)
      {
          transition.Rotation = Direction.LeftToRight;
      }
      if (_r2l_f.IsChecked.Value)
      {
          transition.Rotation = Direction.RightToLeft;
      }
      if (_t2b_f.IsChecked.Value)
      {
          transition.Rotation = Direction.TopToBottom;
      }
      if (_b2t_f.IsChecked.Value)
      {
          transition.Rotation = Direction.BottomToTop;
      }

      _transContainer.Transition = transition;

      _transContainer.ApplyTransition(_frontItem, _backItem);
  }

and in the PlayTransition method a new case

 case "_playFlip":
    PlayFlip();
    break;

Coordinator
Oct 20, 2008 at 5:31 PM
Nice work ! You could send me the files using the email address I have on the home page of this project. I currently have three versions of the FlipTransition: one is from a friend of mine, one done by me and one is from you ;-)

I think I'll take the best of all three and add the FlipTransition. What say ?


Cheers!
Pavan
Jun 15, 2010 at 2:17 AM

Hi Pavaan,
            CubeTransition handles only two faces. Is there any way to handle all six faces of cube? I think it would be good feature to add that you could bring desired face to the front. Dont you think?

Thanks

Guy

Coordinator
Jun 15, 2010 at 11:49 PM

Hi Guy,

              You can do the six face cube animation with a simple setup. Since you will always be transitioning between two faces, you can create a TransitionPresenter which has all six faces as its children. You can then make an internal map of which child maps to which face. Based on this mapping you can choose the appropriate direction on the CubeAnimation. (LeftToRight, RightToLeft, TopToBottom, BottomToTop). This gives you a pretty good six face animation.

 

Let me know if that can work.

 

Cheers,

Pavan