WPF ändern Sie das Objekt Opazität in Circular Weise

Question

Aus Gründen des Beispiels vermuten läßt ich Captain America der beiden Schilde, wie in Bild angezeigt. Ich lege ein neues Bild unter das Alte. Jetzt auf irgendeine Interaktion wie eine Schaltfläche klicken, möchte ich einen Animationseffekt

In meinen Bildern das Mittelteil wie der Stern in der Mitte ist gleich, so sollte Animation von dort gehen, und dann sollte es geben Effekt wie blauer Streifen ändern dann Silber dann Blau.

Was ich denke, würde das ältere Bild, verliert seine Opazität in einer kreisförmigen Art und Weise, so dass die Abschirmung unter ihm entfalten sollte.

Answer 1

Von meinem Verständnis, haben Sie zwei Bilder, eines auf der anderen Seite auf der Oberseite platziert. Dann möchten Sie, dass das obere Bild vollständig transparent wird, beginnend in der Mitte und dann auf den Umfang ausgedehnt, bis das gesamte obere Bild nicht mehr sichtbar ist und das untere Bild durchscheinen kann.

Um dies zu tun, würde ich Ihnen raten, eine OpacityMask mit einer als OpacityMask zu verwenden. Ich würde dann die Offset Eigenschaft der GradientStop Elemente wie beschrieben here und here animieren.

Hier ist ein vollständiges Beispiel, wie Sie dies erreichen können. Ich habe hier einen ToggleButton verwendet, um mir etwas zu geben, an das ich mich binden kann.

<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> 

Und hier ist, wie das Endprodukt aussehen würde. Die Bilder sind nicht perfekt aufgereiht, aber Sie bekommen den Punkt.

Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.