PerspectiveRotation and MappedLight Transitions preview of Telerik Q3 2010 - RadControls for Silverlight

Source

Here is the beta preview of 2 highly customizable transitions we are releasing with Q3 2010.

The PerspectiveRotationTransition uses 3D transformation to display its animations. You can set the direction, center and the easing of the rotation. When combined these settings can grant you live and impressive transitions.

The MappedLightTransition blends each pixel from the old content with the new one. What is interesting there is that it uses a grayscale map to determine which pixels blend first and which go last. There is a lot of grayscale thumbs on the web and some may be found in the attached project. The pixel shader does not support SolidColorBrush neither Linear or Radial GradientBrush so your map have to be ImageBrush. The white colors are revealed first while the black go last. Here are some examples of such maps:

The effect also exposes a WaveLength and Color properties. The WaveLength determine how long each pixel will be animated. Values near 0 will almost immediately swap the old color with the new while values near 1 will animate each pixel almost half of the total duration of the transition. During that animation a ColorMultiply (a fancy word for ‘light’) will apply to the pixel using the Color value (the color of that light).

And here is some code that generates the 19 effects displayed above ready for copy-paste. Note that the MVVM: is part of the project so you can ignore it and take the “telerik:” stuff down there.(xmlns:telerik=”http://schemas.telerik.com/2008/xaml/presentation” of course)

<!-- PerspectiveRotation -->
<mvvm:Slide DisplayName="1" Image="Resources/Images/img1.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Left">
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="2" Image="Resources/Images/img2.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Top">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="3" Image="Resources/Images/img3.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Right">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <BounceEase EasingMode="EaseOut" Bounciness="5" Bounces="2">
        </BounceEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <BounceEase EasingMode="EaseOut" Bounciness="5" Bounces="2">
        </BounceEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="4" Image="Resources/Images/img4.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Bottom">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <ElasticEase EasingMode="EaseOut" Springiness="5" Oscillations="2">
        </ElasticEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <ElasticEase EasingMode="EaseOut" Springiness="5" Oscillations="2">
        </ElasticEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="5" Image="Resources/Images/img5.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Left" NewPlaneCenterOfRotationX="0" OldPlaneCenterOfRotationX="1">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="6" Image="Resources/Images/img6.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Left" NewPlaneCenterOfRotationZ="0.5" OldPlaneCenterOfRotationZ="0.5" RotationLength="90">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="7" Image="Resources/Images/img1.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Top" NewPlaneCenterOfRotationZ="0.5" OldPlaneCenterOfRotationZ="0.5" RotationLength="90">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="8" Image="Resources/Images/img2.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Left" NewPlaneCenterOfRotationZ="0.15" OldPlaneCenterOfRotationZ="0.15" OldPlaneRenderBack="True" NewPlaneRenderBack="True">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="9" Image="Resources/Images/img3.jpg">
  <mvvm:Slide.Transition>
    <telerik:PerspectiveRotationTransition Direction="Left" NewPlaneCenterOfRotationZ="-0.15" OldPlaneCenterOfRotationZ="-0.15">
      <telerik:PerspectiveRotationTransition.NewPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.NewPlaneEasing>
      <telerik:PerspectiveRotationTransition.OldPlaneEasing>
        <CubicEase EasingMode="EaseInOut">
        </CubicEase>
      </telerik:PerspectiveRotationTransition.OldPlaneEasing>
    </telerik:PerspectiveRotationTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<!-- MappedLight -->
<mvvm:Slide DisplayName="10" Image="Resources/Images/img4.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.25" Color="#FFDE60EB">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/BloxyPattern.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="11" Image="Resources/Images/img5.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.75" Color="#FF7DFF00">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/Direction.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="12" Image="Resources/Images/img6.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.75" Color="#FF3DDC8F">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/Radial.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="13" Image="Resources/Images/img1.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.25">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/BrushReveal.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="14" Image="Resources/Images/img2.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.25">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/Wave.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="15" Image="Resources/Images/img3.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.4">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/SplitScreen.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="16" Image="Resources/Images/img4.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.4">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/RWC.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="17" Image="Resources/Images/img5.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.2">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/Graffiti.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="18" Image="Resources/Images/img6.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.4">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/Hairy.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>
<mvvm:Slide DisplayName="19" Image="Resources/Images/img2.jpg">
  <mvvm:Slide.Transition>
    <telerik:MappedLightTransition WaveLength="0.01" OverBurn="0">
      <telerik:MappedLightTransition.ProgressMap>
        <ImageBrush ImageSource="Resources/ProgressMaps/SkyVSSea.jpg" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
        </ImageBrush>
      </telerik:MappedLightTransition.ProgressMap>
    </telerik:MappedLightTransition>
  </mvvm:Slide.Transition>
</mvvm:Slide>