N=33 - Animating Data-Bound Text Changes - N+1 Videos of MvvmCross

Today I just show how to change your UI controls so that they can animate when their values change.

The animations I use are pretty basic:

• On Android:

	var animationFadeOut = new AlphaAnimation(1.0f, 0.0f);
	animationFadeOut.Duration = 200;
	animationFadeOut.AnimationEnd += (sender, args) =>
	{
	base.Text = value;
	var animationFadeIn = new AlphaAnimation(0.0f, 1.0f);
	animationFadeIn.Duration = 200;
	this.Animation = animationFadeIn;
	};
	this.Animation = animationFadeOut;

view raw Android.cs hosted with ❤ by GitHub

• On iOS:

	UIView.Animate(
	0.25,
	() =>
	{
	Alpha = 0;
	},
	() =>
	{
	Text = value;
	UIView.Animate(0.25,
	() =>
	{
	Alpha = 1.0f;
	});
	});

view raw iOS.cs hosted with ❤ by GitHub

• On Windows:

	var animation = new DoubleAnimation();
	animation.From = 1;
	animation.To = 0;
	animation.Duration = new Duration(TimeSpan.FromMilliseconds(200));
	animation.Completed += (sender, args) =>
	{
	control.TheTextBlock.Text = newText;
	var fadeInAnimation = new DoubleAnimation();
	fadeInAnimation.From = 0.0;
	fadeInAnimation.To = 1.0;
	fadeInAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(200));
	Storyboard.SetTarget(fadeInAnimation, control);
	Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity"));
	var storyboard2 = new Storyboard();
	storyboard2.Children.Add(fadeInAnimation);
	storyboard2.Begin();
	};
	Storyboard.SetTarget(animation, control);
	Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));
	var storyboard = new Storyboard();
	storyboard.Children.Add(animation);
	storyboard.Begin();

view raw Windows.cs hosted with ❤ by GitHub

The video:



The source is available on: https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-33-AnimateTextChanges


For a full and lovely index of N+1, see:

http://mvvmcross.wordpress.com