值更改时对文本块进行动画处理 [英] Animate textblock when the value changes

问题描述

我想要一个与此动画相似的动画（记分板，当2变为4时）：

希望这会有所帮助，欢呼。

I want to have an animation similar to this one (the score board, when the 2 becomes a 4) : gif example

Using this article : https://michaelscherf.wordpress.com/2009/02/23/how-to-trigger-an-animation-when-textblocks-text-is-changed-during-a-databinding/, I have been able to modify the opacity of my textblock when the text changes.

But I don't see at all how I can make the same translation effect ?

My textblock will also containing only numbers.

解决方案

You could do something like this with the concept being of just giving the illusion of the ticker. Remove the Framework.Loaded trigger when you've hooked up your data binding. The Red/Green Text is to illustrate the illusion you're going for. Wherein the Green would retain the original value via a one-time, and the Red would be the new value. Also remember to add the NotifyTargetUpdated binding thingy from your example link to your binding base. Of course you'll likely need to tweak some values to get exactly what you're after.

Also don't forget to remove the RepeatBehavior="Forever" from the Storyboard as it's also just there for the sake of the this initial example.

<Grid HorizontalAlignment="Center"  VerticalAlignment="Center" Margin="10" ClipToBounds="True">
        <Grid.Resources>
            <Storyboard x:Key="flipItGood" Duration="0:0:2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                           Storyboard.TargetName="A">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                           Storyboard.TargetName="B">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Grid.Triggers>
            <!-- THIS IS HERE ONLY FOR AN IMMEDIATE EXAMPLE
                 DITCH THIS TRIGGER FOR THE TARGET.UPDATED ONE WHEN ACTUALLY USING -->
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource flipItGood}"/>
            </EventTrigger>
        </Grid.Triggers>

        <TextBlock x:Name="A" 
                   Text="BIND ME" 
                   Foreground="Red" FontSize="18" FontWeight="Bold"
                   RenderTransformOrigin="0.5,0.5">

            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform Y="-20"/>
                </TransformGroup>
            </TextBlock.RenderTransform>

            <TextBlock.Triggers>

                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <BeginStoryboard Storyboard="{StaticResource flipItGood}"/>
                </EventTrigger>

            </TextBlock.Triggers>
        </TextBlock>
        <TextBlock x:Name="B" 
                           Text="BIND ME" FontSize="18" FontWeight="Bold"
                           Foreground="Green" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </TextBlock.RenderTransform>
        </TextBlock>

    </Grid>

Which results in (sorry for the crappy gif);

Hope this helps, cheers.

这篇关于值更改时对文本块进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！