Windows Phone 8按鈕文本動畫 - C＃/ XAML

我正在試圖爲Button對象內部的文本設置動畫，使其看起來像this Android boot text。Windows Phone 8按鈕文本動畫 - C＃/ XAML

有誰知道如何甚至可以在Windows Phone上做到這一點？

謝謝你的時間。

來源

2013-11-25 enaukkarinen

你試過了什麼？你有混合？這個問題是一般的堆棧溢出。在發佈之前請先詳細說明您的問題。謝謝 –

這裏同意AMR。但是，考慮到您有Blend或一些動畫知識，您可以創建一個OpacityMask併爲按鈕邊框的RenderTransform的TranslateTransform設置動畫效果。不過你必須創建自己的按鈕模板。 –

我認爲這是你尋找的解決方案，我可能是錯的，但根據我的學習和經驗，這是我爲你做的。

首先編輯一個按鈕控件，因爲我創建了故事板併爲內容製作動畫，然後我使用控制故事板動作行爲在Loaded觸發器上調用故事板。

這是我編輯的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>

希望這是您的解決方案。

快樂編碼！

來源

2014-06-22 13:07:02

Windows Phone 8按鈕文本動畫 - C＃/ XAML

回答

相關問題