WPFオブジェクトの不透明度を円形で変更します

Question

例として、Captain Americaの2つのシールドが画像に表示されていると仮定します。私は古いものの下に新しいイメージを置いています。今、ボタンのクリックのようないくつかの相互作用によって、私はアニメーション効果私のイメージで

をしたい途中の星のように中央部が同じなので、アニメーションはそこから行く必要があり、それは与えるべきです青いストライプの変化、次に銀色、青のような効果。

私が考えているのは、古いイメージです。円形の方法で不透明度を失い、その下のシールドが展開されるはずです。

Answer 1

私の理解から、2つの画像があります.1つはもう一方の上に置かれています。次に、一番上のイメージが完全に透明になるように、中央から始めて、上のイメージ全体が見えなくなり、下のイメージが見えるようになるまでペリメータに広げます。

OpacityMaskをRadialGradientBrushと入力してOpacityMaskと入力することをおすすめします。私はGradientStop要素のOffsetプロパティをhereとhereのようにアニメートします。

これを達成する方法の完全な例を示します。私はここにToggleButtonを使ってバインドするものを私に与えました。

<ToggleButton> 
    <ToggleButton.Template> 
     <ControlTemplate> 
      <Grid Background="Transparent"> 

       <Image Source="Resources/ShieldTwo.png"/> 

       <Image Source="Resources/ShieldOne.png"> 
        <Image.OpacityMask> 
         <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 
          <GradientStop Color="Transparent" Offset="0"/> 
          <GradientStop Color="Transparent" Offset="0.0"/> 
          <GradientStop Color="Black" Offset="0.0"/> 
          <GradientStop Color="Black" Offset="1"/> 
         </RadialGradientBrush> 
        </Image.OpacityMask> 
        <Image.Style> 
         <Style TargetType="Image"> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}" Value="true"> 
            <DataTrigger.EnterActions> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[1].(GradientStop.Offset)" 
                   From="0" 
                   To="1" 
                   Duration="0:0:1"/> 
               <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[2].(GradientStop.Offset)" 
                   From="0" 
                   To="1" 
                   Duration="0:0:1"/> 
              </Storyboard> 
             </BeginStoryboard> 
            </DataTrigger.EnterActions> 
            <DataTrigger.ExitActions> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[1].(GradientStop.Offset)" 
                   From="1" 
                   To="0" 
                   Duration="0:0:1"/> 
               <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[2].(GradientStop.Offset)" 
                   From="1" 
                   To="0" 
                   Duration="0:0:1"/> 
              </Storyboard> 
             </BeginStoryboard> 
            </DataTrigger.ExitActions> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </Image.Style> 
       </Image> 

      </Grid> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton> 

最終製品は次のようになります。画像は完全に整列されていませんが、あなたはポイントを得る。

あなたはそれ以上の助けが必要なら、私に教えてください。