Windows Phone 8 按钮文本动画 - C# / XAML

Posted 2023-02-22

【中文标题】Windows Phone 8 按钮文本动画 - C# / XAML

【英文标题】：Windows Phone 8 Button text animation - C# / XAML

【发布时间】：2013-11-25 13:28:31

【问题描述】：

我正在尝试为 Button 对象内的文本设置动画，使其看起来像 this android boot text。

有谁知道如何或者是否可以在 Windows Phone 上做到这一点？

感谢您的宝贵时间。

【问题讨论】：

你试过什么？你有混合吗？这个问题是针对堆栈溢出的一般问题。请在此处发布之前更多地定义您的问题。谢谢

在这里同意 AMR。但是，如果您有 Blend 或一些动画知识，您可以创建一个 OpacityMask 并为按钮边框的 RenderTransform 的 TranslateTransform 设置动画。不过，您必须创建自己的按钮模板。

【参考方案1】：

我认为这正是您正在寻找的解决方案，我可能错了，但根据我的研究和经验，这是我为您制定的。

首先编辑一个按钮控件，因为我创建了故事板并对内容进行动画处理，然后我使用控制故事板动作行为在加载触发器上调用该故事板。

这是我编辑的 Button 的 XAML，包括我创建的故事板。

<Style x:Key="animatedText" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="StaticResource PhoneForegroundBrush"/>
        <Setter Property="Foreground" Value="StaticResource PhoneForegroundBrush"/>
        <Setter Property="BorderThickness" Value="StaticResource PhoneBorderThickness"/>
        <Setter Property="FontFamily" Value="StaticResource PhoneFontFamilySemiBold"/>
        <Setter Property="FontSize" Value="StaticResource PhoneFontSizeMedium"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <Grid.Resources>
                            <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentContainer">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource PhoneButtonBasePressedForegroundBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource PhoneAccentBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource PhoneDisabledBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource PhoneDisabledBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <i:Interaction.Triggers>
                            <i:EventTrigger>
                                <eim:ControlStoryboardAction Storyboard="StaticResource Storyboard1"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <Border x:Name="ButtonBackground" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" CornerRadius="0" Margin="StaticResource PhoneTouchTargetOverhang">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="TemplateBinding ContentTemplate" Content="TemplateBinding Content" Foreground="TemplateBinding Foreground" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" Padding="TemplateBinding Padding" VerticalContentAlignment="TemplateBinding VerticalContentAlignment"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

希望这是您的解决方案。

编码愉快！