Pinning a callout animation

• US 10,162,502 B2
• Filed: 11/04/2016
• Issued: 12/25/2018
• Est. Priority Date: 10/17/2011
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Inventors: Edwards, Christopher D., Konzelmann, Jaclyn E., Elias, Galen M., Mahaffey, Terry J.
• Primary Examiner(s): Hajnik, Daniel F
• Application Number:
  US15/344,143
• Publication Number:
  US 20170052686A1
• Time in Patent Office: 781 Days
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 40/166 Editing, e.g. inserting or deleting
• CPC Class Codes: G06T 13/00 Animation
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]

Abstract

Animation for the attachment of content items to a location on a content surface in a user interface is provided. A user interface showing a content surface may be displayed on a computer. The content surface may include a content item at an initial position above the content surface. The content surface may display content formatted for display over an area comprising a totality of the content surface. The computer may then receive in the user interface a request to attach the content item to a final position on the content surface. The computer may then display an animation of the content item moving, from the initial position, across the content surface until the final position has been reached. The computer may then attach the content item to the content surface at the final position.

Claims

1. A computer system for animating pinning of callouts to a content surface in an application, comprising:

a memory for storing executable program code; and

a processor, functionally coupled to the memory, the processor being responsive to computer-executable instructions contained in the program code and operative to;

display content on the content surface of the application, wherein the content surface does not include any item that is configured to float above or cover the content;

receive a first callout selection in the application;

in response to the first callout selection, display a first callout in a first floating user interface piece that is separate from and floats above the content surface, wherein the first callout provides items that are not displayed immediately prior to the first callout selection;

receive a first pin selection of the first callout in the application;

in response to the first pin selection, pin the first callout to the content surface of the application, wherein pin the first callout comprises;

animating movement of the first floating user interface piece across the content surface from a first location above the content surface to a first pin location within the content surface;

animating a size adjustment of the content on the content surface as the first floating user interface piece moves across and above the content surface to adjust for a size of the first callout as pinned in the content surface to form a size adjusted content;

removing the first floating user interface piece to integrate all of the first callout into the content surface; and

display a pinned first callout and the size adjusted content on the content surface.

2. The system of claim 1, wherein pinning the first callout further comprises:

animating a fade-out of the first floating user interface piece after the first floating user interface piece reaches the first pin location; and

animating a fade-in of the first callout as pinned within the content surface after the first floating user interface piece reaches the first pin location.

3. The system of claim 1, wherein the first callout selection is received from a selection of an item on the content surface.

4. The system of claim 1, wherein the first pin selection is received from a selection of an item on the first floating user interface piece.

5. The system of claim 1, wherein the processor is further operative to:

after the first callout is pinned to the content surface, receive a second callout selection in the application;

display, in response to the second callout selection, a second callout in a second floating user interface piece that is separate from and floats above the content surface;

receive a second pin selection of the second callout in the application;

in response to the second pin selection, pin the second callout to the content surface of the application, wherein pinning the second callout comprises;

animating movement of the second floating user interface piece across and above the content surface from a second location to a second pin location within the content surface;

animating a first resizing of the first callout on the content surface as the second floating user interface piece moves across and above the content surface to adjust for a size of the second callout as pinned in the content surface, wherein the content in the content surface is not resized again in response to the second pin selection;

display a resized first pinned callout, a pinned second callout, and the size adjusted content on the content surface on the content surface.

6. The system of claim 5, wherein the first pin selection is received from a selection of an item on the second floating user interface piece.

7. The system of claim 5, wherein the processor is further operative to:

after the second callout is pinned to the content surface, receive a third callout selection in the application;

display, in response to the third callout selection, a third callout in a third floating user interface piece that is separate from and floats above the content surface;

receive a third pin selection of the third callout in the application;

in response to the third pin selection, pin the third callout to the content surface, wherein pinning the third callout comprises;

animating movement of the third floating user interface piece across and above the content surface from a third location to a third pin location within the content surface;

animating a second resizing of the first callout and a first resizing of the second callout on the content surface in the content surface as the third floating user interface piece moves across and above the content surface to adjust for a size of the third callout as pinned in the content surface, wherein the content in the content surface is not resized in response to the third pin selection;

displaying a second resized first pinned callout, a first resized pinned second callout, the third callout, and the size adjusted content on the content surface.

8. The system of claim 5, wherein the first callout and the second callout comprise items selected from at least one of a tasks list, a contacts list, or a calendar.

9. A computer system for animating pinning of callouts to a location on a content surface in a user interface of an application, comprising:

a memory for storing executable program code; and

a processor, functionally coupled to the memory, the processor being responsive to computer-executable instructions contained in the program code and operative to;

display content on the content surface of the application, wherein the content surface does not include any user interface pieces that are configured to float above or cover the content;

receive in the content surface, a selection of a callout from the content surface, wherein the callout provides items that are not displayed in the content surface prior to a first callout selection;

display the callout at an initial position in response to the selection, the initial position comprising the callout floating above the content surface in the user interface, a portion of the callout comprising a selectable icon;

receive in the user interface, a first request to pin the callout to a final position on the content surface, the first request comprising an input on the selectable icon;

in response to receiving the input on the selectable icon, display in the user interface, an animation of the callout moving, from the initial position, across the content surface until the final position has been reached; and

pin in the user interface, the callout to the content surface at the final position to integrate the callout with the content displayed in the content surface by dropping the callout down to the same level as the content surface so the callout no longer floats above the content surface.

10. The system of claim 9, wherein the processor, in pinning the callout to the content surface at the final position is operative to display a cross-fade animation showing a transition of the callout from a position above the content surface at the final position to a docked state within the content surface at the final position.

11. The system of claim 10, wherein the processor is further to:

receive in the user interface, a second request to pin at least one additional callout to the final position on the content surface;

display in the user interface, an animation of the at least one additional callout moving across the content surface until the final position has been reached;

pin in the user interface, the at least one additional callout to the content surface at the final position and resize a docked callout to make space for the at least one additional callout at the final position.

12. The system of claim 11, wherein the callout and the at least one additional callout comprise items of content selected from a group comprising at least a tasks list, a contacts list and a calendar.

13. The system of claim 10, wherein pin in the user interface, the callout to the content surface at the final position to integrate the callout with the content displayed in the content surface further by removing a border that surrounds the callout.

14. A computer-implemented method for animating an attachment of content items to a location on a content surface in a user interface of an application, comprising:

displaying content on the content surface in a first user interface window of the application, wherein the content surface does not include any item that is configured to float above or cover the content;

receiving a first content item selection in the application;

in response to the first content item selection, displaying a first content item including text in a piece of user interface that is separate from and floats above the content surface in the first user interface window, wherein the first content item provides objects that are not displayed in the content surface prior to the first content item selection;

receiving a first pin selection of the first content item in the application;

in response to the first pin selection, pinning the first content item to the content surface of the application, wherein pinning the first content item comprises;

animating movement of the piece of user interface across the content surface from a first location above the content surface to a first pin location within the content surface;

removing the piece of user interface that floats above the content surface to integrate at least half of the text in the first content item into the content surface; and

displaying a pinned first content item on the content surface.

15. The method of claim 14, wherein pinning the first content item further comprises:

animating a size adjustment of the content on the content surface in as the piece of user interface moves across and above the content surface of the first user interface window to adjust for a size of the first content item as pinned in the content surface to form a size adjusted content.

16. The method of claim 15, wherein animating the size adjustment further comprises resizing the text in the content item as the content item moves across the content surface towards the first pin location.

17. The method of claim 14, wherein pinning the first content item further comprises:

displaying a cross-fade animation showing a transition of the content item floating above the first pin location on the content surface to a docked state within the content surface at the first pin location.

18. The method of claim 14, further comprising:

receiving a request to attach another content item to the first pin location on the content surface;

in response to receiving the request to attach the another content item, displaying in the user interface an animation of the another content item moving across the content surface until the first pin location has been reached; and

attaching in the user interface the another content to the content surface at the first pin location.

19. The method of claim 18, wherein attaching in the user interface the another content item to the content surface at the first pin location comprises:

resizing a docked content item to make space for the another content item at the first pin location.

20. The method of claim 18, wherein pinning the first content item further comprises:

removing a border that surrounds the content item.