CODEWITHSUNDEEP
c#animationcanvaswindows-phone-8
Debhere
Debhere

Reputation: 1075

How to create a floating animations in a canvas WP8

I want to develop an animation using C# animations with storyboard API. The purpose of the animation is that I have a canvas. Inside this canvas I will put different images at run time based on some specific logic. However in the mean time I don't want this canvas to remain as a dull look boring UI, so I want to do some kind of animation, which it will play forever, as long as the game is running. Can I do that? 

<Canvas x:Name="GameCanvas" Height="480" Width="480" Background="white" VerticalAlignment="Top" Loaded="GameCanvas_Loaded" >
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">
            </Canvas.Resources>
            <Image x:Name="PreviewImage" Height="480" Width="480" Opacity="1" RenderTransformOrigin="0.2,0.5" >
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                        <CompositeTransform x:Name="TransRotate" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Canvas>

If yes can anybody please help me to guide how to start doing that. Inside the canvas I want put some kind of animations which will perform forever. For example I can put some colorful buttons and this button will float in the canvas, from one position to another.

Upvotes: 0

Views: 812

Answers (2)

Andrey Sabinin
Andrey Sabinin

Reputation: 1

If you use C++/CX code for developing you can run animation this way.

Storyboard^ rect = safe_cast<Storyboard^>(Rect1->Resources->Lookup("Animation"));
rect->Begin();

Upvotes: 0

quirell
quirell

Reputation: 255

You should read about animations, I recommend http://www.microsoft.com/en-us/download/details.aspx?id=24519 . And If you want to animate something: First define storyboard, add animation on properity of the object (Double Animation, Double Animation using key frames, Object animation, color animation etc.) Then add key frames and run animation in code or use triggers. 

<Rectangle Fill="Azure" Height="50" Width="50" Name="Rect1">
    <Rectangle.Resources>
        <Storyboard x:Key="Animation" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                    Storyboard.TargetProperty="X"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"        >

                <LinearDoubleKeyFrame KeyTime="0:0:02" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:02" Value="0"   />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                    Storyboard.TargetProperty="Y"
                                    RepeatBehavior="Forever"
                                            AutoReverse="True">

                <LinearDoubleKeyFrame KeyTime="0:0:01" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:01" Value="0"   />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Rectangle.Resources>
    <Rectangle.RenderTransform>
        <TranslateTransform x:Name="Transform"/>
    </Rectangle.RenderTransform>
</Rectangle>

//in code behind
(Rect1.Resources["Animation"] as Storyboard).Begin();

Above code will make a rectangle move slowly from starting point to 100 and back to 0 and so on trough all the eternity.

//UPDATE - CODE EDIT

So, if I understand well, you want something to float. Just animate Y and X properity, Y faster than X, you can use spline frames or easing frames, and customize this animation.

Upvotes: 1

Related Questions