How to handle application events in ScheduleJS. Manage user inputs while performing ScheduleJS actions, design the perfect UX for your app.
Dessiner des animations dans ScheduleJS
ScheduleJS utilise le moteur de rendu HTML Canvas pour dessiner la grille, les activités, les couches supplémentaires et les liens. Cet article explique comment concevoir une simple animation de rendu ScheduleJS à l'aide de l'API HTML Canvas.
Tuesday, May 2nd, 2023 - 4 minutes read
Quelques mots sur HTML Canvas
Avez-vous déjà utilisé la technologie Canvas ? L'élément Canvas est un conteneur HTML utilisé pour dessiner de manière programmatique à l'aide de JavaScript, à un coût étonnamment bas pour le navigateur.
La caractéristique la plus importante de l'élément « toile » est que ses possibilités sont infinies en termes de conception et d'interactions. La seule limite à ce qui se trouve sur l'écran est notre imagination.
Pour mieux comprendre l'élément « toile », on peut le comparer à une feuille de dessin vierge.
Selon la MDN web documentation:
MDN: Le Canvas API permet de dessiner des graphiques via JavaScript et le HTML canvas de l'élément. Il peut être utilisé, entre autres, pour l'animation, les jeux graphiques, la visualisation de données, la manipulation de photos et le traitement vidéo en temps réel.
L'API Canvas se concentre principalement sur les graphiques 2D. L'API WebGL API, qui utilise également l'élément canvas, dessine des graphiques 2D et 3D accélérés par le matériel.
Comment ScheduleJS l'utilise-t-il ?
Une fois que vous avez dessiné vos activités sur la toile, le seul moyen de les modifier est de les nettoyer et de recommencer à dessiner.
Sous le capot, ScheduleJS met en œuvre plusieurs outils pour gérer ce comportement dans le contexte d'une application de planification. Ces API sont parfois exposées au développeur et parfois elles fonctionnent silencieusement pour permettre au développeur de se concentrer sur les fonctionnalités principales de l'application, comme dans les cas suivants :
- Le System Layers API traiter les dessins successifs et l'ordre d'empilage.
- Le Viewport API optimise le rendu et la navigation.
- Le Renderer API définit la manière dont les activités et les couches sont dessinées.
- Le Redraw API peut être appelé à volonté pour déclencher redraws, operations on the rows, etc…
L'élément le plus important pour le développeur dans cette architecture est le ScheduleJS Renderer API. Les restituteurs utilisent des fonctions surchargeables permettant au développeur de créer sa propre façon de dessiner des parties spécifiques de l'application :
- Le Background
- Le Grid
- Le Activities
- Le Activity Links
- Le Glissez et déposez couche
- Et chaque System Layers
Bien que cela puisse sembler compliqué pour certains, il s'agit d'un flux de travail auquel les développeurs s'habitueront rapidement. La flexibilité de l'outil Renderer architecture et sa mise en œuvre bien pensée permet une infinité de scénarios de conception et d'interaction.
Animer les activités de ScheduleJS
Pour animer votre toile, vous devez décomposer votre animation en images et indiquer au moteur de rendu comment dessiner chaque image. Le principal ingrédient nécessaire à la création d'une animation linéaire simple est le moment où l'animation a commencé. Si nous voulons animer chaque activité séparément, la structure de données des activités est un bon endroit pour stocker cette information.
Créons un simple moteur de rendu animé pour dessiner chaque image en fonction de la progression de l'animation. Cette simple animation de largeur animera notre activité lors de sa création (de 0 % de largeur à la pleine largeur).
Cet exemple se concentre sur le code nécessaire à l'exécution de l'animation. Comme vous pouvez le voir, nous avons créé un ratio (de 0 à 1) décrivant la durée de notre animation et nous multiplions simplement la largeur par ce ratio. En conséquence, la largeur de l'activité s'agrandira dans une animation fluide de 250 ms (voir ci-dessous).
Il est possible de faire beaucoup plus en utilisant le même principe, car chaque couche de dessin dans ScheduleJS utilise l'architecture de rendu et met en œuvre des méthodes de dessin similaires. De plus, le même résultat peut être obtenu en utilisant plusieurs approches différentes. Quoi qu'il en soit, quelle que soit l'animation graphique que vous souhaitez créer, les moteurs de rendu de ScheduleJS vous permettront de concevoir et de personnaliser l'expérience de l'utilisateur au niveau du pixel.
N'hésitez pas à nous contacter si vous avez des défis UX/UI ou des idées pour ScheduleJS !
Plus d'articles sur la mise en œuvre
Tree tables can be extensively customised in ScheduleJS: colorful row headers, multiple child levels, display, and interactions
Build custom tree tables in ScheduleJS using schedule-info-column-header-cell and schedule-info-column-row-cell components.
Unlock flexible row management in ScheduleJS: control individual row heights, mix GanttLayout and ChartLayout in the same view.
Master drag and drop in ScheduleJS: render activities while dragging, access the drag canvas via DragViewTransversalSystemLayers.
ScheduleJS 1.4 release notes. A step forward towards modern Angular app building.
Angular 16 vs Angular 18 comparison: discover what's new in Angular, the arrival of signals, Zoneless mode, zone coalescing, and their impact on your projects.
Discover the Angular Rome Conference: workshops, domain-driven design, signals, state management, micro frontends.
Discover Angular 18: zoneless mode, zone coalescing, native await, and TypeScript 5.4 compatibility.
Le TOP 3 des diagrammes de Gantt JavaScript. Découvrez leurs caractéristiques, avantages et inconvénients pour choisir le meilleur outil pour votre projet.
S’abonner
Connexion
0 Commentaires
