This project is read-only.

Opacity stuck at 0 when repeating AlphaTo animation?

Jul 6, 2010 at 4:46 AM

GREAT libray guys. Makes playing with animation so much easier!

 

I am trying to get a textblock to slide across the screen, then fade out, reset the location and fade in again and repeat.

As far as I understand there is no inbuilt way to repeat an animation so what I do is create a EaseObjectHandler and reassign this same handler to the OnCompleted callback when starting the new animation. This works great when I only do a sliding animation (see A) but when adding the fadein and fadeout it seems that the Opacity stays at 0. (see B)

What do I do wrong? Do I need to reset the Opacity property?

To try the examples simply create a Window with a Canvas LayoutRoot and add the below code as code behind.

Any help is appreciated.

== A ==

TextBlock textBlock;

protected override void OnInitialized(EventArgs e)
{
	base.OnInitialized(e);

	textBlock = new TextBlock();
	textBlock.Inlines.Add(new Run("Title Text"));
	textBlock.FontSize = 76;
	textBlock.FontWeight = FontWeights.Bold;
	textBlock.FontFamily = new System.Windows.Media.FontFamily("Arial");
	textBlock.Foreground = Brushes.SlateGray;

	LayoutRoot.Children.Add(textBlock);

	this.SizeChanged += OnSizeChanged;
}

bool _isInitialized;
void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
	if (_isInitialized)
		return;
	_isInitialized = true;

	var duration = 5;
	textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
	var w = textBlock.DesiredSize.Width;
	var startX = -w / 8d;
	Canvas.SetLeft(textBlock, startX);
	Canvas.SetTop(textBlock, 0);


	var easeObject = textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);

	EaseObjectHandler restartHandler = null;
	restartHandler = new EaseObjectHandler((s, ea) =>
	{
		Canvas.SetLeft(textBlock, startX);
		Canvas.SetTop(textBlock, 0);
		var eo = textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);
		eo.OnComplete(restartHandler);
	});

	easeObject.OnComplete(restartHandler);
}

==

 

== B ==


TextBlock textBlock;
 
protected override void OnInitialized(EventArgs e)
{
	base.OnInitialized(e);
 
	textBlock = new TextBlock();
	textBlock.Inlines.Add(new Run("Title Text"));
	textBlock.FontSize = 76;
	textBlock.FontWeight = FontWeights.Bold;
	textBlock.FontFamily = new System.Windows.Media.FontFamily("Arial");
	textBlock.Foreground = Brushes.SlateGray;
 
	LayoutRoot.Children.Add(textBlock);
 
	this.SizeChanged += OnSizeChanged;
}
 
bool _isInitialized;
void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
	if (_isInitialized)
		return;
	_isInitialized = true;
 
	var duration = 5;
	textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
	var w = textBlock.DesiredSize.Width;
	var startX = -w / 8d;
	Canvas.SetLeft(textBlock, startX);
	Canvas.SetTop(textBlock, 0);
 
 
	textBlock.AlphaTo(1, 0.5, null, 0);
	textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);
	var easeObject = textBlock.AlphaTo(0, 0.5, null, duration - 0.5);
 
	EaseObjectHandler restartHandler = null;
	restartHandler = new EaseObjectHandler((s, ea) =>
	{
		Canvas.SetLeft(textBlock, startX);
		Canvas.SetTop(textBlock, 0);
		textBlock.AlphaTo(1, 0.5, null, 0);
		textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);
		var eo = textBlock.AlphaTo(0, 0.5, null, duration - 0.5);
		eo.OnComplete(restartHandler);
	});
 
	easeObject.OnComplete(restartHandler);
}

 

 

Jul 14, 2010 at 5:39 AM

Figured it out:

The second call to AlphaTo removes the first AlphaTo animation even though the second specifies a delay that would cause it to start when the first one has long finished.

Jul 14, 2010 at 6:24 AM
Edited Jul 14, 2010 at 6:25 AM

I worked around this issue by starting the second AlphaTo in the OnComplete of the first one. This makes this specific scenario a bit hard to read/understand but it works:

var duration = 5;
var fadeOutDuration = .5;
textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
var w = textBlock.DesiredSize.Width;
var startX = -w / 8d;
Canvas.SetLeft(textBlock, startX);
Canvas.SetTop(textBlock, 0);

textBlock.AlphaTo(1, fadeOutDuration, null, 0).OnComplete((s, ea) =>
	{
		textBlock.AlphaTo(0, fadeOutDuration, null, duration - 2d * fadeOutDuration);
	});
var easeObject = textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);

EaseObjectHandler restartHandler = null;
restartHandler = new EaseObjectHandler((s, ea) =>
{
	Canvas.SetLeft(textBlock, startX);
	Canvas.SetTop(textBlock, 0);
	textBlock.AlphaTo(1, fadeOutDuration, null, 0).OnComplete((s1, e1) =>
		{
			var eo = textBlock.AlphaTo(0, fadeOutDuration, null, duration - 2 * fadeOutDuration);
			eo.OnComplete(restartHandler);
		});
	textBlock.SlideTo(ActualWidth - w / 2, 0, duration, null, 0);
});

easeObject.OnComplete(restartHandler);
Aug 21, 2010 at 5:45 AM

Silverlight version. Doesn't seem too bad.


TextBlock textBlock;
EaseObjectHandler restartHandler;

void  MainPage_Loaded(object sender, RoutedEventArgs args)
{
    // creation
    textBlock = new TextBlock();
    textBlock.Inlines.Add(new Run().Text="Title Text");
    textBlock.FontSize = 76;
    textBlock.FontWeight = FontWeights.Bold;
    textBlock.FontFamily = new System.Windows.Media.FontFamily("Arial");
    textBlock.Foreground = new SolidColorBrush(Colors.DarkGray);
    LayoutRoot.Children.Add(textBlock);

    // init
    var duration = 5;
    var fadeOutDuration = .5;
    textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
    var w = textBlock.DesiredSize.Width;
    var startX = -w / 8d;

    // sequence
    restartHandler = (s1,e1)=>
    {
        // reset
        Canvas.SetLeft(textBlock, startX);
        Canvas.SetTop(textBlock, 0);
        textBlock.Opacity = 0;

        // opacity
        textBlock.AlphaTo(1, fadeOutDuration, null, 0).Complete += (s2, e2) =>
        {
            textBlock.AlphaTo(0, fadeOutDuration, null, duration - 2 * fadeOutDuration).OnComplete(restartHandler);
        };

        // slide
        textBlock.XTo(ActualWidth - w / 2D, duration, null, 0);
    };

    // start sequence
    restartHandler(null,0);
}