从图像到图像的平滑过渡

时间:2010-02-06 00:26:05

标签: wpf image xaml transition

这是我的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>

从图像到另一幅图像的过渡非常粗糙,我并不喜欢它。那么如何才能使过渡顺利进行 更新:
也许不是改变图像,也许可以旋转图像。主图像看起来像&gt;。所以可能将其向下旋转(顺时针旋转90度)

2 个答案:

答案 0 :(得分:1)

如果你想要想象,你可以:

  1. 添加故事板
  2. 在不透明度上使用双重动画淡出图像框
  3. 更改图片
  4. 使用另一个双重动画淡入图像框

  5. 更新

    旋转图像:

    1. 向图像添加旋转变换
    2. 在旋转变换的角度属性
    3. 上使用双动画

      请参阅http://www.vbforums.com/showthread.php?t=555120以获取示例

答案 1 :(得分:0)

试试这个:

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