locked
Making the Animation Smooth RRS feed

  • Question

  • Hi,

     

    Any suggestions on how to make this animation appear more smooth. Basically this image moves fro left to right. When I play it it appears the image distorts. I have used Easing in. I believe there is an Easing In Sine feature that is available in SL 3, not sure if that makes a difference or if you have a any pointers

     

    Thanks<UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="SilverlightApplication5.Page"
     Width="850" Height="447" xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
     <UserControl.Resources>
      <Storyboard x:Name="Storyboard1">
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoardGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-724" KeySpline="0,0,0.75,1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="2"/>
       </DoubleAnimationUsingKeyFrames>
      
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoardGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-2" KeySpline="0,0,0.75,1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="-2"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <DoubleAnimation x:Key="DoubleAnimationDS" d:IsDataSource="True"/>
     </UserControl.Resources>

    Wednesday, October 7, 2009 11:21 PM

Answers

  • m3cflvi

    I am not sure why the image distorts. However, you could try moving the image inside a canvas using absolute positioning instead of TranslateTransform.X. An example is below:

    <UserControl.Resources>
         <Storyboard x:Name="MoveRectangle">
              <DoubleAnimation Storyboard.TargetName="Rectangle" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.25" From="0" To="100" />
              <DoubleAnimation Storyboard.TargetName="Rectangle" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.25" From="0" To="100" />
         </Storyboard>
    </UserControl.Resources

    Hope this help ...

    Thursday, October 8, 2009 5:40 PM