CrossFade Image Src

How-to Discussions
1

Hi Folks, I’m trying to accomplish a CrossFade effect when changing Src of an Image.

I Figure out with the following solution, but I don’t know if is a good approach.

<PageControl ux:Name="pageControl">
					<Each Items="{items}">
						<Panel>
							<PageText Title="{Title}" Content="{Content}" UserName="{UserName}" />
							<Match Value="{Alter}">
								<Case Number="0">
									<ActivatingAnimation>
										<Change bgImage.Url="{Url}" />
										<Change bgImage.Opacity="1" Duration="4"/>
										<Change overlay.Color="{Color}" Duration="4"/>
									</ActivatingAnimation>
								</Case>
								<Case Number="1">
									<ActivatingAnimation>
										<Change bgImage2.Url="{Url}" />
										<Change bgImage2.Opacity="1" Duration="4"/>
										<Change overlay.Color="{Color}" Duration="4"/>
									</ActivatingAnimation>
								</Case>
							</Match>

	</Panel>

	</Each>
</PageControl>

<Image  StretchMode="UniformToFill" Opacity="0" ux:Name="bgImage">
	<Desaturate Amount="0.5" />
</Image>
<Image  StretchMode="UniformToFill" Opacity="0" ux:Name="bgImage2">
	<Desaturate Amount="0.5" />
</Image>

I’m controlling if i’ll render the image in the Img1 or Img2 by a property in my json…

Is a cleaner way to do this?

Thanks,

2

Here’s an approach that uses minimal JS. It defines a new XFadeImage component that loads and crossfades in a new image every time its Url property changes:

<App>
  <JavaScript>
    var Observable = require("FuseJS/Observable")
    var img = Observable()
    module.exports = {
      img : img,
      onButtonClick : function(args){
        img.value = "http://thecatapi.com/api/images/get?format=src&type=jpg&"+Math.random()
      }
    }
  </JavaScript>
  <Panel ux:Class="XFadeImage">
    <string ux:Property="Url"/>
    <Rectangle ux:Name="topImage" Opacity="1" Color="#FFF">
      <ImageFill ux:Name="topImageFill" StretchMode="UniformToFill"/>
    </Rectangle>
    <Rectangle ux:Name="botImage">
      <ImageFill ux:Name="botImageFill" StretchMode="UniformToFill" Url="{Property Url}"/>
      <Completed Repeat="true">
        <Change topImage.Opacity="0" Duration="0.4"/>
        <Set Target="topImageFill.Source" Value="{Property botImageFill.Source}" Delay="0.4"/>
        <Set Target="topImage.Opacity" Value="1" Delay="0.4"/>
      </Completed>
    </Rectangle>
  </Panel>
  <Grid Rows="2*,1*">
    <XFadeImage Url="{img}"/>
    <Button Text="Cat please">
      <Clicked Handler="{onButtonClick}"/>
    </Button>
  </Grid>
</App>

Hopefully this gets you going :slight_smile:

3

Works like a charm!

this approach is far good for me!

Thanks!