CrossFade Image Src

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}">
							<PageText Title="{Title}" Content="{Content}" UserName="{UserName}" />
							<Match Value="{Alter}">
								<Case Number="0">
										<Change bgImage.Url="{Url}" />
										<Change bgImage.Opacity="1" Duration="4"/>
										<Change overlay.Color="{Color}" Duration="4"/>
								<Case Number="1">
										<Change bgImage2.Url="{Url}" />
										<Change bgImage2.Opacity="1" Duration="4"/>
										<Change overlay.Color="{Color}" Duration="4"/>


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

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?


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:

    var Observable = require("FuseJS/Observable")
    var img = Observable()
    module.exports = {
      img : img,
      onButtonClick : function(args){
        img.value = ""+Math.random()
  <Panel ux:Class="XFadeImage">
    <string ux:Property="Url"/>
    <Rectangle ux:Name="topImage" Opacity="1" Color="#FFF">
      <ImageFill ux:Name="topImageFill" StretchMode="UniformToFill"/>
    <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"/>
  <Grid Rows="2*,1*">
    <XFadeImage Url="{img}"/>
    <Button Text="Cat please">
      <Clicked Handler="{onButtonClick}"/>

Hopefully this gets you going :slight_smile:

Works like a charm!

this approach is far good for me!