none
Image rotation problem

    Question

  • Hi,

         i am writting an application for windows phone 7 with silver light just for my learning. i want to rotate image in circular fashion (0-360). But i am facing some problems:

    1. While rotation of image in 0-360 degree, it is not much smooth means sometime it becomes stuck ( for a second or two )

    3. I want to control the speed of rotation like start of application rotation will be speedy but will become slow with passage of time like after every second.

    Below is my code that i am using:

    XAML:

    <UserControl.Resources>
            <Storyboard x:Name="Flipping">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="FireballLogo1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="45"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:00.7500000" Value="135"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="180"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01.2500000" Value="225"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="270"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01.7500000" Value="315"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </UserControl.Resources>


        <Grid x:Name="LayoutRoot" Background="Black">
            <Grid x:Name="grid" Margin="39,214,349,12">
                <Grid.Projection>
                    <PlaneProjection/>
                </Grid.Projection>
            </Grid>


            <Image x:Name="FireballLogo1" Source="flip.jpg" Margin="177,464,60,176" >
                <Image.Projection>
                    <PlaneProjection></PlaneProjection>
                </Image.Projection>
                <Image.RenderTransform>
                    <RotateTransform></RotateTransform>
                </Image.RenderTransform>
            </Image>
            
        </Grid>


    CS:

    public MainPage()
            {
                InitializeComponent();
                this.Flipping.Begin();           
            }


    Can anybody help me ?

    Sunday, July 25, 2010 2:33 AM

All replies

  • Have you seen this example from the documentation

    <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetProperty="Height"
                 Storyboard.TargetName="myRectangle">

                    <!-- This keyframe animates the ellipse up to the crest
                         where it slows down and stops. -->
                    <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <CubicEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>

                    <!-- This keyframe animates the ellipse back down and makes
                         it bounce. -->
                    <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BounceEase Bounces="5" EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>

                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </StackPanel.Resources>

        <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked"
         Fill="Blue" Width="200" Height="200" />
    </StackPanel>

    It seems to me that you are defining too many keyframes that are not really doing anything.
     

    Sunday, July 25, 2010 5:17 AM
  • Thanks for your reply. Your code works fine. but now i have another question. I want to rotate image in 0-360 degrees in Z direction but for 0-180 degree i want to use image1 and for 181-360 i want to use image2. can you please help me ?

    Saturday, July 31, 2010 2:36 AM
  • I think it is not easy to write complex storyboards with xaml, therefore I would download the demo version of expression blend, which can be used for three month.

    Then you can make your storyboard with a very high level tool.

    Saturday, July 31, 2010 4:24 AM
  • Have a look at this video:

    http://www.silverlight.net/learn/videos/silverlight-videos/using-3d-transforms-part-2/

    Code is available for download. 

    Saturday, July 31, 2010 7:02 AM
  • Thanks for your help. Excatly what i need !

    Sunday, August 01, 2010 3:08 AM