WinRT Animation Show/Hide in XAML

0
votes

I don't know how to make animation occurrence and damping in a few seconds. I know about FadeOutThemeAnimation and FadeInThemeAnimation, but I need to combine them in one animation. Maybe someone know.

UPD: This is done through DoubleAnimation msdn description

1
windows-8windows-store-appswinrt-xaml
Not sure what you mean when you say you want to combine them? You want something to fade in while it fades out? Do you maybe have an example of the effect you're after? - Chris W.
Sorry for my bad english, I want just a simple effect, when I press a button showing picture and after a few second this picture will disappear. - ivamax9
Oh, then don't bother with the ThemeAnimation's and just use a Storyboard fired off by a routed event like Click of the Button to perform a DoubleAnimation to the Opacity where you can also set the Duration more info, and dont worry about your english, we're all coders no matter our native language ;) - Chris W.
Thanks,Chris!It helped me. - ivamax9
No worries, if you haven't got it completely figured out on your own soon just respond back here and we'll give you the answer, generally though with SO you have to show effort first. Cheers! - Chris W.

1 Answers

1
votes

It's hard to be sure exactly the animation you want. So I put together a few that will likely give you what you want. Just paste this into a page and run it.

<Page.Resources>
    <Storyboard x:Name="RevealImages">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="-300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-300"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-250"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="250"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="textBlock">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Filling"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="Waiting"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="Hiding"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3" Value=""/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <FontFamily>Global User Interface</FontFamily>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                    <FontFamily>Global User Interface</FontFamily>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Show" HorizontalAlignment="Left" Height="75" Margin="7,7,0,0" VerticalAlignment="Top" Width="92" FontFamily="Global User Interface">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Media:ControlStoryboardAction Storyboard="{StaticResource RevealImages}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="250" Margin="10,117,0,0" VerticalAlignment="Top" Width="250" RenderTransformOrigin="0.5,0.5" Fill="White">
        <Rectangle.RenderTransform>
            <CompositeTransform TranslateX="-250"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Grid HorizontalAlignment="Left" Height="250" Margin="265,117,0,0" VerticalAlignment="Top" Width="250">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,250,250" />
        </Grid.Clip>
        <Rectangle x:Name="rectangle1" Fill="White" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <CompositeTransform TranslateX="-250" TranslateY="250"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
    <Rectangle x:Name="rectangle2" HorizontalAlignment="Left" Height="250" Margin="520,117,0,0" VerticalAlignment="Top" Width="250" Opacity="0" Fill="White"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="10,84,0,0" TextWrapping="Wrap" Text="Slide In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="265,84,0,0" TextWrapping="Wrap" Text="Slip In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="520,84,0,0" TextWrapping="Wrap" Text="Fade In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="137" Margin="113,10,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="238" FontSize="66.667"/>
</Grid>

Best of luck!