Uma transição suave a partir da imagem para a imagem
-
18-09-2019 - |
Pergunta
Aqui está o meu XAML:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image x:Name="Expander_Normal"
Source="/Images/arrow-e.tiff" Width="13" Height="13" />
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter x:Name="Expander_Expanded"
TargetName="Expander_Normal" Property="Source"
Value="/Images/arrow-s.tiff" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
A transição de imagem para outra imagem é muito duro e eu realmente não gosto dele. Então, como posso fazer as transições suaves.
UPDATE:
Talvez em vez de mudar a imagem, talvez rodar a imagem. Os principais aparência de imagem como>. Então talvez girá-lo para baixo (90 graus no sentido horário)
Solução
Se você quer ir a fantasia, você pode:
- Adicionar um story board
- Use uma animação duplo na opacidade para desaparecer da caixa de imagem
- Alterar a imagem
- Use outra animação dupla a desvanecer-se na caixa de imagem
Atualização
Para rodar a imagem:
- Adicione uma rotação transformar a imagem
- Use uma animação dupla na rotação transformar estabelecimento ângulo
http://www.vbforums.com/showthread.php?t= 555120 para um exemplo
Outras dicas
Tente isto:
<Grid>
<Image Source="Image1.png"
Height="100" Width="100">
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:0.5"
From="1"
To="0"
Storyboard.TargetProperty="(Image.Opacity)"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:0.8"
From="0"
To="1"
Storyboard.TargetProperty="(Image.Opacity)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Image Source="Image2.png"
Height="100" Width="100" Opacity="0">
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:0.5"
From="0"
To="1"
Storyboard.TargetProperty="(Image.Opacity)"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:0.8"
From="1"
To="0"
Storyboard.TargetProperty="(Image.Opacity)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow