Jouer avec WPF / Silverlight ChartView Animations

Vous pouvez maintenant créer de belles animations personnalisées dans vos graphiques WPF et Silverlight.

Avec la version R2 2018 de l'interface utilisateur de Telerik pour WPF / Silverlight nous sommes heureux d'annoncer que notre RadChartView permet des animations en série et en point. Ils peuvent être joués automatiquement au chargement et plus tard par programmation. Voyons d'abord quelques animations sympas puis entrons dans les détails

Exemples

PieSeries avec ChartScaleAnimation comme PointAnimation :

BarSeries avec ChartMoveAnimation en tant que PointAnimation :

AreaSeries avec ChartRevealAnimation comme SeriesAnimation :

Core API

Pour commencer facilement, nous vous encourageons à consulter l'article d'aide ChartView Animations – vous trouverez tous les types d'animation et l'API pour les configurer.

Les trois propriétés de base de chaque animation sont Delay Duration et Easing Delay est une propriété clé qui dete rmines si la série ou les animations ponctuelles vont démarrer simultanément ou par conséquent en charge. En combinaison avec Duration vous contrôlez la vitesse globale de l'animation graphique. Typiquement (dans les graphiques web, mobiles, de bureau) la durée totale de l'animation est comprise entre 1s et 2s . Parfois, vous devrez peut-être effectuer une action ou afficher une légende (ou des étiquettes ou des annotations) lorsqu'une animation concrète se termine. Pour cela, vous pouvez utiliser les événements SeriesAnimationCompleted et PointAnimationsCompleted .

Dans l'image (ci-dessous), après l'animation de la première série, nous commençons à animer la deuxième barre séries. Et après, les étiquettes sont montrées, la troisième série (ligne) est rendue visible et animée (montrant les valeurs moyennes des séries précédentes).

Conséquences BarSeries et LineSeries animations:

Ceci est réalisé avec la configuration XAML suivante:

  
    <-- bar series properties -->
  
  
    <-- bar series properties -->
  
  
    <-- line series properties -->
  

Sur un clic de souris, nous pouvons jouer la première animation de la série de barres, quand elle se termine, deuxième série de barres d'animation et encore une fois, quand il se termine, montrer le LineSeries et jouer son animation:

 private void Button_Click (expéditeur d'objet, RoutedEventArgs e)
{
  this.barSeries1.PlayPointAnimations ();
}
  
private void barSeries1_PointAnimationsCompleted (expéditeur d'objet, EventArgs e)
{
  this.barSeries2.Visibility = Visibility.Visible;
  this.barSeries2.PlayPointAnimations ();
}
  
private void barSeries2_PointAnimationsCompleted (expéditeur d'objet, EventArgs e)
{
  this.barSeries1.ShowLabels = true;
  this.barSeries2.ShowLabels = true;
  this.lineseries.Visibility = Visibility.Visible;
  this.lineseries.PlaySeriesAnimation ();
} 

Easings

Un Easing fournit un excellent moyen de produire des dizaines d'animations différentes à travers un seul type d'animation . Quand vous vous demandez parfois comment atteindre plus vite-début-puis-fin-lente ou le contraire, ou une sorte d'effet rebondissant à la fin – l'assouplissement fera cette magie pour vous. Personnellement, je recherche les types d'accélération dans cette feuille de référence ( https://easings.net/ ), puis les applique en XAML:

Effet élastique dans BarSeries et effet de rebondissement dans BubbleSeries:

Animations personnalisées

Lorsque vous avez besoin d'une animation un peu différente des types disponibles, nous avons exposé les méthodes protégées que vous pouvez remplacer, imaginez que vous allez afficher beaucoup de points. voulons contrôler que le point de départ de l'animation de déplacement soit le centre de la zone de tracé. Codons ceci.

1. Hériter Telerik.Windows.Controls.ChartView.ChartAnimationBase et remplacer le BuildPointAnimation
2. Créer AnimationGroup et ajouter FadeAnimation instance FadeAnimation est responsable de rendre les points visibles lorsque l'animation du mouvement commence. sont cachés parce que sinon t ils seront rendus à leurs positions finales
3. Créer MoveAnimation et l'ajouter au groupe. Le moment délicat ici est que la position finale du visuel animé est (0, 0), donc comme une position de départ nous devons définir la distance (positive ou négative) un point spécifique ira du centre de la zone de traçage à la position de destination. 19659028] classe publique ExpandFromCenterAnimation: ChartAnimationBase
   {
     remplacement protégé RadAnimation BuildPointAnimation (visuel FrameworkElement, point DataPoint, RadRect plotAreaClip)
     {
       AnimationGroup g = nouveau AnimationGroup ();
       g.Children.Add (nouveau FadeAnimation ());

       MoveAnimation moveAnimation = nouveau MoveAnimation ()
       {
         Durée = this.Durée,
         Easing = this.Easing,
       }

       double largeur = plotAreaClip.Center.X – point.LayoutSlot.X;
       double hauteur = plotAreaClip.Center.Y – point.LayoutSlot.Y;

       MoveAnimation.SetOldPosition (visuel, nouveau point (largeur, hauteur));
       MoveAnimation.SetCurrentPosition (visuel, nouveau Point (0, 0));

       g.Children.Add (moveAnimation);
       return g;
     }
   }

   Maintenant, nous sommes prêts à déplacer des points de dispersion:

   ScatterSeries avec animation de déplacement personnalisée:

   

   Essayez-le et faites-nous savoir ce que vous pensez

   Nous espérons que ces exemples vous en donneront Si vous ne l'avez pas déjà fait, mise à niveau vers la dernière version (R2'18) de Telerik UI pour WPF ou Silverlight pour profiter de ceux-ci, et beaucoup nouvelles fonctionnalités publiées Si vous êtes nouveau dans nos outils d'interface utilisateur Telerik, vous pouvez aussi télécharger un essai pour les tester.

   Commencez votre essai: WPF Silverlight

   Je voudrais aussi vous encourager à jouer avec notre exemple d'application WPF / Silverlight montrant plus de 100 combinaisons d'animation différentes.

   Nous sommes ouverts à idées aussi et nous sommes curieux de savoir quels autres types d'animations vous aurez besoin à l'avenir ou ce que vous manquer dans l'API initiale. N'hésitez pas à tendre la main dans les commentaires ci-dessous ou dans notre portail de commentaires

   Merci et codage heureux!

   ---