Morphing chart animations in a browser

• US 10,395,412 B2
• Filed: 12/30/2016
• Issued: 08/27/2019
• Est. Priority Date: 12/30/2016
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Inventors: Berglund, Kurt William, Allyn, Barry Christopher
• Primary Examiner(s): Nguyen, Anh-Tuan V
• Application Number:
  US15/395,808
• Publication Number:
  US 20180190000A1
• Time in Patent Office: 970 Days
• Field of Search: None
• CPC Class Codes: G06T 11/206 Drawing of charts or graphs
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites
• CPC Class Codes: G06T 2210/44 Morphing

Abstract

Morphing animations between arbitrary chart states in a web client application are provided. A morphing animation engine interpolates changes between a first output state (before geometry) and a second output state (after geometry), aligning the before and after geometries by semantic identifiers encoded in the geometry. The morphing animation engine further performs simple geometric transitions of geometric primitives for producing an unlimited number of intermediate states (key frames) between any two arbitrary chart states without requiring per frame layouts. According to an aspect, processing times for producing intermediate frames are minimized, allowing for animations to have consistent rendering and achieving a high frame rate (60 FPS).

Claims

1. A computer-implemented method for providing morphing animations between arbitrary chart states in a web client application, comprising:

generating a display of a chart in the web client application from drawing instructions included in a first scene graph;

responsive to receiving a user manipulation of the chart, updating a description of the chart;

requesting a new layout for the chart based on the updated description of the chart;

in response to requesting a new layout for the chart and before receiving a second scene graph, providing temporary feedback to the display of the chart, wherein providing temporary feedback comprises;

predicting an interactivity result of morphing animation logic based on model information included with the first scene graph;

providing an approximation of the morphing animation, by changing a user interface element associated with the user manipulation and according to the model information;

in response to requesting the new layout for the chart, receiving the second scene graph, the second scene graph including drawing instructions for generating a display of the chart in the web client application based on the updated description of the chart;

comparing the first scene graph to the second scene graph for determining changed geometries of individual chart elements;

applying the morphing animation logic for producing intermediate frames between the changed geometries of the individual chart elements; and

rendering the intermediate frames in the chart, thereby providing the morphing animation of the user manipulation to the chart.

2. The computer-implemented method of claim 1, wherein receiving the user manipulation of the chart comprises receiving a change to a chart element property or a change to chart element data.

3. The computer-implemented method of claim 1, wherein receiving the user manipulation of the chart comprises receiving a change from one arbitrary chart type to another arbitrary chart type.

4. The computer-implemented method of claim 1, wherein the web client application includes a document object model, and wherein rendering the intermediate frames in the chart comprises updating individual nodes in the document object model frame-by-frame.

5. The computer-implemented method of claim 1, wherein comparing the first scene graph to the second scene graph comprises aligning initial geometries in the first scene graph and final geometries in the second scene graph according to semantic identifiers encoded in the scene graphs.

6. The computer-implemented method of claim 5, wherein producing intermediate frames between the changed geometries comprises:

creating merged geometries, wherein the merged geometries represent transitional states between the initial geometries and the final geometries; and

generating a plurality of frames renderable by the web client application as static images to comprise the morphing animation, wherein the frames are generated based on the merged geometries.

7. The computer-implemented method of claim 1, further comprising discarding the first scene graph after providing the morphing animation.

8. A system for providing morphing animations between arbitrary chart states in a web client application, comprising:

at least one processing device; and

at least one computer readable data storage device storing instructions that, when executed by the at least one processing device, cause the system to;

generate a display of a chart in the web client application from drawing instructions included in a first scene graph;

responsive to receiving a user manipulation of the chart, update a description of the chart;

send the updated description of the chart in a request to a server for a new layout for the chart;

before receiving a second scene graph from the sever, providing temporary feedback to the display of the chart, wherein providing temporary feedback comprises;

predicting an interactivity result of morphing animation logic based on model information included with the first scene graph;

providing an approximation of the morphing animation, by changing a user interface element associated with the user manipulation and according to the model information;

receive, from the server, the second scene graph, the second scene graph including drawing instructions for generating a display of the chart in the web client application based on the updated description of the chart;

compare the first scene graph to the second scene graph for determining changed geometries of individual chart elements;

apply the morphing animation logic for producing intermediate frames between the changed geometries of the individual chart elements; and

render the intermediate frames in the chart, thereby providing the morphing animation of the user manipulation to the chart.

9. The system of claim 8, wherein the user manipulation of the chart comprises a change to a chart element property or a change to chart element data.

10. The system of claim 8, wherein the user manipulation of the chart comprises a change from one arbitrary chart type to another arbitrary chart type.

11. The system of claim 8, wherein the web client application includes a document object model, and wherein in rendering the intermediate frames in the chart, the system is operative to update individual nodes in the document object model frame-by-frame.

12. The system of claim 8, wherein in comparing the first scene graph to the second scene graph, the system is operative to align initial geometries in the first scene graph and final geometries in the second scene graph according to semantic identifiers encoded in the scene graphs.

13. The system of claim 12, wherein in producing intermediate frames between the changed geometries, the system is operative to:

create merged geometries, wherein the merged geometries represent transitional states between the initial geometries and the final geometries; and

generate a plurality of frames renderable by the web client application as static images to comprise the morphing animation, wherein the frames are generated based on the merged geometries.

14. The system of claim 8, wherein the system if further operative to discard the first scene graph after providing the morphing animation.

15. A computer readable data storage device including computer readable instructions, which when executed by a processing unit, performs steps for providing morphing animations between arbitrary chart states in a web client application, comprising:

generating a display of a chart in the web client application from drawing instructions included in a first scene graph;

responsive to receiving a user manipulation of the chart, updating a description of the chart;

sending the updated description of the chart in a request to a server for a new layout for the chart;

in response to sending the request to the server and before receiving a second scene graph, providing temporary feedback to the display of the chart, wherein providing temporary feedback comprises;

predicting an interactivity result of morphing animation logic based on model information included with the first scene graph;

providing an approximation of the morphing animation, by changing a user interface element associated with the user manipulation and according to the model information;

receiving, from the server, the second scene graph, the second scene graph including drawing instructions for generating a display of the chart in the web client application based on the updated description of the chart;

comparing the first scene graph to the second scene graph for determining changed geometries of individual chart elements;

applying the morphing animation logic for producing intermediate frames between the changed geometries of the individual chart elements;

rendering the intermediate frames in the chart, hereby providing the morphing animation of the user manipulation to the chart; and

discarding the first scene graph.

16. The computer readable data storage device of claim 15, wherein receiving the user manipulation of the chart comprises receiving a change to a chart element property or a change to chart element data.

17. The computer readable data storage device of claim 15, wherein receiving the user manipulation of the chart comprises receiving a change from one arbitrary chart type to another arbitrary chart type.

18. The computer readable data storage device of claim 15, wherein the web client application includes a document object model, and wherein rendering the intermediate frames in the chart comprises updating individual nodes in the document object model frame-by-frame.

19. The computer readable data storage device of claim 15, wherein comparing the first scene graph to the second scene graph comprises aligning initial geometries in the first scene graph and final geometries in the second scene graph according to semantic identifiers encoded in the scene graphs.

20. The computer readable data storage device of claim 19, wherein producing intermediate frames between the changed geometries comprises:

creating merged geometries, wherein the merged geometries represent transitional states between the initial geometries and the final geometries; and

generating a plurality of frames renderable by the web client application as static images to comprise the morphing animation, wherein the frames are generated based on the merged geometries.