CODEWITHSUNDEEP
xamlwinrt-xaml
y0j0
y0j0

Reputation: 3622

ObjectAnimationUsingKeyFrames - smooth transition between positions in WinRT

I would like to use ObjectAnimationUsingKeyFrames to animate one of my control in winrt. Control should move from Margin="0,0,-500,0" to Margin="0,0,0,0" during some time. I have following code. It almost works, but everything is happened at once and no animation or smooth transition is seen.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NameOfControl" 
                                   Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                                   Duration="00:00:00.5">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,0,-500,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="00:00:0.5">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,0,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

Upvotes: 2

Views: 1117

Answers (3)

pushpraj
pushpraj

Reputation: 13679

Issue is with with ObjectAnimationUsingKeyFrames & DiscreteObjectKeyFrame u are using, it does not animate the values but instead it set the value as whole at the mentioned key frame time,

In order to animate properties like Margin, Padding etc. use ThicknessAnimationUsingKeyFrames with SplineThicknessKeyFrame instead, this will animate the values in a smoother transition

sample for you

<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="NameOfControl" 
                               Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                               Duration="00:00:00.5">
    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,0,-500,0" />
    <SplineThicknessKeyFrame KeyTime="00:00:00.5" Value="0,0,0,0" />
</ThicknessAnimationUsingKeyFrames>

WinRT alternative

since you are using the concerned element to bring it into the view using the right margin

I attempted to create a sample which will mimic the similar behavior using double animation

    <Rectangle Fill="Red"
               Width="10"
               Height="10"
               HorizontalAlignment="Center"
               VerticalAlignment="Center">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translate"/>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5"
                                         Storyboard.TargetProperty="X"
                                         Storyboard.TargetName="translate"
                                         From="500" 
                                         To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>

also it is not a wise idea to animate margin property as it also force layout to be done again

Upvotes: 1

y0j0
y0j0

Reputation: 3622

I think, I found it. Look this code. (it moves control 100 points down and 100 points to the right)

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>

But you can't forget to add this code to control you would like to move.

<TextBlock Name="TextBlock1" Text="SomeText">
    <TextBlock.RenderTransform>
        <CompositeTransform/>
    </TextBlock.RenderTransform>
</TextBlock>

Upvotes: 0

Sivasubramanian
Sivasubramanian

Reputation: 965

I suspect the duration and the keyFrame you set in your code is too less and thats why there is no transition felt by you. please increase the duration and keyframe and let me know the results.

Upvotes: 0

Related Questions