Эффект вытеснения

WPF --- Графика и анимация WPF --- Эффект вытеснения

В предыдущем примере реализован постепенный переход между двумя изображениями, который обеспечивается изменением свойства Opacity изображения, находящегося сверху. Другой распространенный способ перехода между изображениями заключается в вытеснении (wipe), которое позволяет постепенно открывать новое изображение поверх существующего.

Основной трюк, связанный этим приемом, заключается в создании маски непрозрачности (opacity mask) для верхнего изображения. Вот пример:

<Image Source="day.jpg" Name="imgDay">
   <Image.OpacityMask>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop 0ffset="0" Color="Transparent" x:Name="transparentStop" />
         <GradientStop Offset="0" Color="Black" x:Name="visibleStop" />
      </LinearGradientBrush>
   </Image.OpacityMask>
</Image>

Маска непрозрачности использует градиент, определяющий две точки останова: Black (где изображение будет полностью видимым) и Transparent (где изображение будет полностью прозрачным). Изначально обе точки останова позиционируются на левой границе изображения.

Поскольку точка останова видимости определена первой, она имеет приоритет, и изображение в ней будет полностью непрозрачным. Обратите внимание, что обе точки именованы, поэтому легко могут быть доступны анимации.

Затем понадобится запустить анимацию для смещений кисти LinearGradientBrush. В данном примере оба смещения движутся слева направо, приоткрывая нижнее изображение. Чтобы сделать этот пример более привлекательным, смещения не занимают одинаковую позицию в процессе движения. Вместо этого смещение видимости лидирует, а смещение прозрачности следует за ним с задержкой 0,2 секунды. В процессе анимации это создает смешанную область на границе области вытеснения:

<Storyboard>
   <DoubleAnimation
      Storyboard.TargetName="visibleStop"
      Storyboard.TargetProperty="Offset"
      From="0" To="1.2" Duration="0:0:1.2" ></DoubleAnimation>
   <DoubleAnimation
      Storyboard.TargetName="transparentStop"
      Storyboard.TargetProperty="Offset" BeginTime="0:0:0.2"
      From="0" To="1" Duration="0:0:1" ></DoubleAnimation>
</Storyboard>

Здесь присутствует одна необычная деталь. Точка останова видимости перемещается на 1.2 вместо 1, что отмечает правую грань изображения. Это гарантирует, что оба смещения будут двигаться с одинаковой скоростью, поскольку общее расстояние, которое должно покрыть каждое из них, пропорционально длительности анимации.

Вытеснение обычно осуществляется слева направо или сверху вниз, но при использовании масок непрозрачности возможны и более изощренные эффекты. Например, для маски непрозрачности может применяться кисть DrawingBrush, геометрия которой модифицируется, чтобы приоткрыть нижнее изображение через какой-то мозаичный шаблон.