15 Apr, 2009
Silverlight 3 : Création d’animations easing avec code C#
Posted by: Guillaume Andre In: Silverlight
En complément du post Silverlight 3 animations easing voici comment réaliser des animations Silverlight 3 entièrement côté code behind.
Le code ci-dessous permet d’animer la propriété “Canvas.Left” d’une Ellipse. Le but est uniquement d’apprendre à appliquer un effet de easing à une animation avec C#.
Â
Création du Storyboard
Un Storyboard peut contenir une ou plusieurs animations.
Création d’une ou plusieurs animations
Application de l’effet Easing souhaité
ElasticEase ee = new ElasticEase(); // création de l'effet easing, ici Elastic
ee.EasingMode = EasingMode.EaseOut; // Choix du mode de easing : EaseIn, EaseInOut, ou EaseOut
da.EasingFunction = ee; // association de l'effet de easing à l'animation
ee.EasingMode = EasingMode.EaseOut; // Choix du mode de easing : EaseIn, EaseInOut, ou EaseOut
da.EasingFunction = ee; // association de l'effet de easing à l'animation
Association des animations au Storyboard et ajout du storyboard aux ressources
sb.Children.Add(da);
LayoutRoot.Resources.Add("monStoryboard", sb);
LayoutRoot.Resources.Add("monStoryboard", sb);
Lancer l’animation, plus exactement, le Storyboard
(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();
Animations Easing en resumé
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
lireAnimation.Click += new RoutedEventHandler(lireAnimation_Click);
Storyboard sb = new Storyboard();
Storyboard.SetTargetName(sb, "monEllipse");
Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));
DoubleAnimation da = new DoubleAnimation();
da.Duration = new TimeSpan(0, 0, 2);
da.From = 0.0;
da.To = 180.0;
ElasticEase ee = new ElasticEase();
ee.EasingMode = EasingMode.EaseOut;
da.EasingFunction = ee;
sb.Children.Add(da);
LayoutRoot.Resources.Add("monStoryboard", sb);
}
void lireAnimation_Click(object sender, RoutedEventArgs e)
{
(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();
}
{
lireAnimation.Click += new RoutedEventHandler(lireAnimation_Click);
Storyboard sb = new Storyboard();
Storyboard.SetTargetName(sb, "monEllipse");
Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));
DoubleAnimation da = new DoubleAnimation();
da.Duration = new TimeSpan(0, 0, 2);
da.From = 0.0;
da.To = 180.0;
ElasticEase ee = new ElasticEase();
ee.EasingMode = EasingMode.EaseOut;
da.EasingFunction = ee;
sb.Children.Add(da);
LayoutRoot.Resources.Add("monStoryboard", sb);
}
void lireAnimation_Click(object sender, RoutedEventArgs e)
{
(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();
}
