2012-02-07 9 views
1

クリックすると、データグリッドにさらにデータを読み込むボタンがあります。進行状況を示すために、ボタンのテキストを「More」から「Loading ...」に変更し、期間がアニメーション化されます。次に、テキストが目を引くように、「グリント」エフェクトを追加しました。 iPhone/iPod Touchを使用していた場合は、ロック画面の「スライドをロック解除する」というテキストの影響を考えています。アニメーションテキストのアニメーションテキストのグリント

これを行うには、左から右に中程度の明るいグラジエントストップを移動します。アニメーションは連続的にループするので、ライトグラジエントストップが実際に見える時間の間に遅延を作成するために、有効な範囲外のオフセットを使用しました。

私はこれを実装しましたが、何らかの理由で明度勾配がテキストの左端から始まっていないことがわかりました。それは「Loading」の「a」を中心に始まります。私はそれを受け入れ、それはしばらくの間そこにいたが、私は今なぜそれを理解しようとするために戻ってきている。アニメーションを計算するときに元のテキストの尺度を使用しているようですが、アニメーションは同じストーリーボード内にあるときに互いに当てはまると考えられました。ここに私のコードは次のとおりです。ここで

<UserControl.Resources> 
    <local:EmptyBatchNumConverter x:Key="emptyBatchNumConverter" /> 

    <BeginStoryboard x:Key="bsbLoadingMore" x:Name="bsbLoadingMore"> 
     <Storyboard x:Name="sbLoadingMore"> 
      <StringAnimationUsingKeyFrames Storyboard.TargetName="txtBtnMoreText" Storyboard.TargetProperty="Text" Duration="0:0:2" FillBehavior="Stop" RepeatBehavior="Forever"> 
       <DiscreteStringKeyFrame Value="Loading" KeyTime="0:0:0" /> 
       <DiscreteStringKeyFrame Value="Loading." KeyTime="0:0:0.5" /> 
       <DiscreteStringKeyFrame Value="Loading.." KeyTime="0:0:1" /> 
       <DiscreteStringKeyFrame Value="Loading..." KeyTime="0:0:1.5" /> 
      </StringAnimationUsingKeyFrames> 

      <!--Animate the OffSet of the light gradient stop for a "glint" effect. Using -4.5 to 4.5 to delay the visible effect between repeats (and 
           control the speed relative to the duration). Using an extra .4 seconds to offset the frequency from the text animation. --> 
      <DoubleAnimation Storyboard.TargetName="gs2" Storyboard.TargetProperty="Offset" From="-4.5" To="4.5" Duration="0:0:2.4" RepeatBehavior="Forever" /> 
     </Storyboard> 
    </BeginStoryboard> 
</UserControl.Resources> 

... 

<Button Name="btnMore" Grid.Row="1" Style="{StaticResource OasisGridMoreButton}" Click="btnMore_Click" Visibility="Visible" Height="16"> 
      <Button.Content> 
       <TextBlock Name="txtBtnMoreText" MinWidth="48" Text="More..." /> <!--MinWidth = width of "Loading..."--> 
      </Button.Content> 
      <Button.Foreground> 
       <LinearGradientBrush StartPoint="0.2,0" EndPoint="1,1"> 
        <GradientStop x:Name="gs1" Color="Black" Offset="0"/> 
        <GradientStop x:Name="gs2" Color="Cyan" Offset="-4.5"/> 
        <GradientStop x:Name="gs3" Color="Black" Offset="1" /> 
       </LinearGradientBrush> 
      </Button.Foreground> 
     </Button> 

答えて

0

が問題である:へ

<LinearGradientBrush StartPoint="0.2,0" EndPoint="1,1"> 

が変更に:ここで

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 

私が作った完全なテストアプリは(それを見るために輝きを遅くしより良い):

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
x:Class="WpfApplication4.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="OnLoaded1"/> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard x:Name="bsbLoadingMore"> 
       <Storyboard x:Name="sbLoadingMore"> 
        <StringAnimationUsingKeyFrames Storyboard.TargetName="txtBtnMoreText" Storyboard.TargetProperty="Text" Duration="0:0:2" FillBehavior="Stop" RepeatBehavior="Forever"> 
         <DiscreteStringKeyFrame Value="Loading" KeyTime="0:0:0" /> 
         <DiscreteStringKeyFrame Value="Loading." KeyTime="0:0:0.5" /> 
         <DiscreteStringKeyFrame Value="Loading.." KeyTime="0:0:1" /> 
         <DiscreteStringKeyFrame Value="Loading..." KeyTime="0:0:1.5" /> 
        </StringAnimationUsingKeyFrames> 

        <!--Animate the OffSet of the light gradient stop for a "glint" effect. Using -4.5 to 4.5 to delay the visible effect between repeats (and 
             control the speed relative to the duration). Using an extra .4 seconds to offset the frequency from the text animation. --> 
        <DoubleAnimation Storyboard.TargetName="gs2" Storyboard.TargetProperty="Offset" From="-4.5" To="4.5" Duration="0:0:5.4" RepeatBehavior="Forever" /> 
       </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
</Window.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Button x:Name="btnMore" Visibility="Visible" Margin="0,213,0,182" d:LayoutOverrides="GridBox"> 
     <Button.Foreground> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
       <GradientStop x:Name="gs1" Color="Black" Offset="0"/> 
       <GradientStop x:Name="gs2" Color="Cyan" Offset="0"/> 
       <GradientStop x:Name="gs3" Color="Black" Offset="1" /> 
      </LinearGradientBrush> 
     </Button.Foreground> 
      <TextBlock x:Name="txtBtnMoreText" MinWidth="48" Text="More..." /> 
    </Button> 
</Grid> 

なんらかの理由で、最後に</Window>が表示されていません...

+0

ワウ。あなたは彼らが言うことを知っている、 "愚かな質問をして、馬鹿に見える。"私ができるなら、私は自分自身-1だっただろう。ありがとうございました。 これは問題を修正し、実際には十分ですが、私が望んでいた方法ではかなりうまく機能していません。 gs2のオフセットが任意の値<1の場合、テキストはすべて黒です。 > = 0になるまでは表示されません。 = 0の場合、テキストの左側は完全にシアンです。したがって、グラデーションのフェーディングの右側が決して "L"を横切ることはありません。瞬時にシアンに変わります。グラデーションを左から完全に入力し、右から移動するにはどうしてですか? – xr280xr

関連する問題