Patent Application
20150339841
In contemporary computing systems, user interfaces have been developed for allowing users to interact with electronic content and underlying software application functionality. As computing devices and display functionality become more advanced, users expect graphical displays to be both functionally efficient and visually pleasing. In a dynamic user interface, animations may be used to enrich the user experience by helping to guide users' attention to certain elements and to help ease the transition between different layouts. For example, in an application, such as a word processing application, a user action may trigger a task pane to be displayed. To provide a functionally efficient and visually pleasing experience, a designer may use animation to transition the task pane into view and to resize other displayed panes and containers and their contents to provide for display of the task pane.
Current platforms that are used to build user interfaces (Us) do not natively support easy ways to define animation, in particular, animation to change layout (e.g., position, size, and arrangement of elements). Some infrastructures support animation through storyboards, which are non-visual elements that may be used to orchestrate an animation sequence. Animations may be executed through a declarative language, such as Extensible Application Markup Language (XAML), wherein UI states and transitions may be defined using an Application Programming interface (API). When authoring animations of layout changes of containers and their contents using current user interface (UI) platforms, aspects of the animations, such as the final layout position, size, arrangement of UI elements, etc. may need to be defined in advance. However, until layout is run, the final layout position, size, and arrangement of the UI elements may not necessarily be known, making it difficult to schedule animations of layout changes up front.
Some UI platforms provide for automatically calculating layout properties, wherein the position and arrangement of elements may be calculated and determined on every frame that is presented to the screen. As can be appreciated, calculation of an animation transitioning from an outgoing position, size, and visibility to an incoming position, size, and visibility on each frame may have a performance cost, for example, a reduced animation frame rate. It is with respect to these and other considerations that the present invention has been made.
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended as an aid in determining the scope of the claimed subject matter.
Embodiments of the present invention solve the above and other problems by providing layout animation that automatically plays in response to a change in layout on UI platforms that do not support animations that automatically play in response to a change in layout and that typically require animations to be defined prior to the layout being calculated. Developers are enabled to specify how one or more elements should animate via animation values that are relative to an unknown initial layout and an unknown final layout. When a property change event that triggers animation of an element occurs, the initial layout and the final layout of the element and its child elements are calculated. The animations are then scheduled to interpolate the changes in layout.
The details of one or more embodiments are set forth in the accompanying drawings and description below. Other features and advantages will be apparent from a reading of the following detailed description and a review of the associated drawings. It is to be understood that the following detailed description is explanatory only and is not restrictive of the invention as claimed.
The accompanying drawings, which are incorporated in and constitute a part of this disclosure, illustrate various embodiments of the present invention. In the drawings:
The following detailed description refers to the accompanying drawings. Wherever possible, the same reference numbers are used in the drawings and the following description to refer to the same or similar elements. While embodiments of the invention may be described, modifications, adaptations, and other implementations are possible. For example, substitutions, additions, or modifications may be made to the elements illustrated in the drawings, and the methods described herein may be modified by substituting, reordering, or adding stages to the disclosed methods. Accordingly, the following detailed description does not limit the invention, but instead, the proper scope of the invention is defined by the appended claims.
Embodiments of the present invention are directed to providing automatic layout animation of child elements in response to layout or visual changes. As will be described in detail below, embodiments of the present invention enable animations to be defined on child elements that specify how elements should animate in response to unknown changes in layout.
Referring now to the drawings, in which like numerals represent like elements, various embodiments will be described.
A user may utilize an application 120 on a computing device 110 for a variety of tasks, which may include, for example, to write, calculate, draw, organize, prepare presentations, send and receive electronic mail, take and organize notes, make music, and the like. Applications 120 may include thick client applications, which may be stored locally on the computing device 110 (as illustrated in
An application 120 may be configured to enable a user to use a pointing device (e.g., a mouse, pen/stylus, etc.) and/or to utilize sensors 124 (e.g., touch sensor, accelerometer, hover sensor, facial recognition, voice recognition, light sensor, proximity sensor, gyroscope, tilt sensor, GPS, etc.) on the computing device 110 to interact with content 122 via a number of input modes.
To assist users to locate and utilize functionalities of a given application 120, a user interface (UI) 115 containing a plurality of selectable functionality controls 130, panes 125, containers 135 (e.g., user content display area, etc.), and other UI elements may be provided. In
The example user interface 115 illustrated in
The animation engine 128 is illustrative of one or more software applications that enables animation of display components of software application user interfaces and user content. The animation engine 128 may be operable to enable animations to be defined on child elements that specify how elements should animate in response to unknown changes in layout. In order to enable smooth animations with high animation frame rates, the animation engine 128 may use animation process threads, such as a UI thread, a compositor thread, and a rendering thread. Display behavior may be optimized and controlled by utilizing a declarative markup language, such as the Extensible Application Markup Language (XAML), for defining display behavior functionality and properties.
According to embodiments, a user, such as a designer or developer, may be able to specify animation values relative to unknown initial and final layouts (e.g., positions, size, and arrangement). For example, prior to embodiments of the present invention, if a developer wanted to animate a UI element, he/she may have created a storyboard and specified a starting position and a final position of the element. As can be appreciated, it can be complex to know the initial and final positions or to write code to determine the final positions of elements. Embodiments of the present invention enable developers to specify how an element should animate when it changes (e.g., duration, acceleration, etc.) without specifying the element's specific starting or ending positions.
As briefly described above, in order to author animations of layout changes and to avoid performance costs of calculating layout on each frame, the animation engine 128 is operable to receive animation values relative to unknown initial and final layouts (e.g., positions, size, opacity, arrangement, etc.). Upon receiving an indication of a change in layout or properties of a child element, the animation engine 128 may be further operable to automatically determine the initial and final layouts of the child elements to dynamically create and trigger custom animations of layout changes. Accordingly, layout animation that does not require upfront knowledge of layout changes may is enabled for UI platforms that require a developer to define initial and final layouts.
As mentioned, a designer/developer may be enabled to specify an animation value relative to unknown initial and final layouts. For example, a developer may define an animation as relative to its final position without specifying what the final position is. A developer may want to add a new item to a list. A desired animation may be that he/she wants the new item to fly in and type from off-screen. The relative-to value that the developer may specify is that at time equals zero, the item's initial position is relative to final minus the animation time, for example, 367 milliseconds. The developer may be enabled to mark points in time as relative to a final position, wherein the animation engine 128 may be operable to calculate the before and after layouts based on what occurs and plug in the final values. Accordingly, the work of determining initial and final layout locations may be moved from the application developer to the animation engine 128.
The animation engine 128 may be further operable to animate resizing of elements without stretching their contents or borders and without calculating layout on every frame. Currently, position and arrangement of each element may be calculated on every frame in response to a layout change, which may reduce the frame rate of the animation. Embodiments of the present invention provide for determining before and after layout and faking resize animations with animations that do not affect other elements and thus do not cause layout to be calculated on every frame of the animation. Accordingly, the performance cost of calculating layout on each frame may be avoided.
Resizing an element is a change in layout that may involve moving the element's children and surrounding elements. The before and after layout of each element may be calculated, and the difference may be interpolated without calculating the layout on every frame. Once scheduled, the animation may play independently on the compositor thread. The animation engine 128 may then fake the resize animation with scale and clip animations, which do not affect the layout of other elements, and thus do not require calculations on every frame.
For example, in an application 120, a user may choose to resize a task pane 125 comprising child elements, such as titles and buttons. The developer may not want for text in child elements to stretch or shrink when resized. The animation engine 128 may run a layout calculation once to determine the before and after layout, and then fake the resize without actually resize any elements. Scales and clips, which do not cause a re-layout of elements, may be used instead of actually resizing the task pane 125. For example, the task pane 125 may be clipped and scaled to appear like a resize without the expense of resizing.
According to an embodiment, to fake square border animations that do not stretch and do not calculate layout on every frame, the animation engine 128 may be operable to turn each edge of the border into its own element whose scale is animated in one direction. According to another embodiment, if the position of a child element changes as a result of a layout change and if the child element has an animation on it that specifies that it should animate changes in position, the animation engine 128 may be further operable to animate the changes in position using render transforms, which do not affect other elements. Accordingly, calculation of layout on every frame of the animation may be avoided.
The animation engine 128 may be operable to provide default layouts, alleviating the need for developers to have to author layouts for common scenarios. For example, default layouts may include a stack layout, a grid layout, a wrap grid layout, a dock layout, etc. The animation engine 128 may provide support for implicit animation. For example, switching between a stack layout and a grid layout, the animation engine 128 may provide for automatically animating the layout change.
Developers may be enabled to create their own custom layouts to be used by the animation engine 128. Accordingly, developers may have control over aspects of child element positions and sizes. Embodiments support pluggable layouts and implicit animations that may be triggered on layout or visual changes. Animations and triggers may be specifiable on each panel and/or individual elements in the panel. For example, this may allow top-level frames to specify the animation of pane entrance, lists to specify how their children appear and/or disappear, and galleries to specify how their content reflows.
To create a pluggable layout, developers may create a class that has measure and arrange methods that may be called by the animation engine 128. As an example of a measure method, when layout changes, measure may be called to determine the size required to fit child elements. The panel may be resized accordingly. As an example of an arrange method, child elements may be positioned, and arrange may be called to determine sizes of the child elements when the layout changes.
According to an embodiment and as described above, developers may be enabled to specify animations that automatically trigger in response to layout changes (e.g., position, size, scale, element add/delete, etc.) or visual changes (e.g., scale, visibility, opacity, rotation, projection, etc.) of child elements. For example, a developer may specify how an element is to animate when an animatable property changes. According to an embodiment, if an animation is associated with a trigger and its corresponding property changes, the animation engine 128 may be operable to take a snapshot of the before layout or property. If the layout changes, the layout may be run without updating the screen in order to take a snapshot of the after layout. Storyboards may be created for every element involved in layout. The storyboards may then be animated.
Animations may be designed to be responsive. Accordingly, an animation may be interrupted at any time. Embodiments may provide for support of smooth animation interruption. For example, if a new layout animation is triggered on an element while it is currently animating, the animation engine 128 may stop the animation towards the element's original change in layout and smoothly start an animation towards its new change in layout. To achieve smooth animation interruption, a hard coded starting value or position may need to be unspecified, ensuring that storyboards do not specify a from value.
Embodiments may provide support for batching animation triggers to ensure that animations in response to multiple triggers occur at the same time. Additionally, synchronizing panel animations with animations in other panels may be supported.
For purposes of describing the animation functionality described herein,
Referring now to
In
At OPERATION 315, an indication of a trigger is received, wherein the trigger may be a property change such as layout changes (e.g., position, size, scale, element add/delete, etc.) or visual changes (e.g., scale, visibility, opacity, rotation, projection, etc.). For example and referring again to
According to embodiments, an animation behavior may be applied to a visual UI element defining how the visual UI element may animate in response to a trigger. The animation behavior may specify animation values that are relative to unknown initial and final layouts. At OPERATION 320, the animation engine 128 may look to see if an animation behavior has been defined on the UI element by a developer and may calculate the before layout (e.g., prior to the pane 125 being displayed on screen) and the after layout (e.g., after the pane 125 is in position).
At OPERATION 325, the animation engine 128 may determine how the property change may change the layout of child UI elements, and the before and after layouts of the child UI elements may be calculated. At OPERATION 325, the animation engine 128 may be further operable to determine if any layout animations have been defined on the child UI elements.
At OPERATION 330, the animations may be scheduled. Additionally, if an animation is in another panel, the animations may be synchronized. For example, as illustrated in
At OPERATION 335, the animations may play. The method 300 ends at OPERATION 395.
While the invention has been described in the general context of program modules that execute in conjunction with an application program that runs on an operating system on a computer, those skilled in the art will recognize that the invention may also be implemented in combination with other program modules. Generally, program modules include routines, programs, components, data structures, and other types of structures that perform particular tasks or implement particular abstract data types.
The embodiments and functionalities described herein may operate via a multitude of computing systems including, without limitation, desktop computer systems, wired and wireless computing systems, mobile computing systems (e.g., mobile telephones, netbooks, tablet or slate type computers, notebook computers, and laptop computers), hand-held devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, minicomputers, and mainframe computers.
In addition, the embodiments and functionalities described herein may operate over distributed systems (e.g., cloud-based computing systems), where application functionality, memory, data storage and retrieval and various processing functions may be operated remotely from each other over a distributed computing network, such as the Internet or an intranet. User interfaces and information of various types may be displayed via on-board computing device displays or via remote display units associated with one or more computing devices. For example user interfaces and information of various types may be displayed and interacted with on a wall surface onto which user interfaces and information of various types are projected. Interaction with the multitude of computing systems with which embodiments of the invention may be practiced include, keystroke entry, touch screen entry, voice or other audio entry, gesture entry where an associated computing device is equipped with detection (e.g., camera) functionality for capturing and interpreting user gestures for controlling the functionality of the computing device, and the like.
As stated above, a number of program modules and data files may be stored in the system memory 404. While executing on the processing unit 402, the program modules 406 may perform processes including, but not limited to, one or more of the stages of the method 300 illustrated in
Furthermore, embodiments of the invention may be practiced in an electrical circuit comprising discrete electronic elements, packaged or integrated electronic chips containing logic gates, a circuit utilizing a microprocessor, or on a single chip containing electronic elements or microprocessors. For example, embodiments of the invention may be practiced via a system-on-a-chip (SOC) where each or many of the components illustrated in
The computing device 400 may also have one or more input device(s) 412 such as a keyboard, a mouse, a pen, a sound input device, a touch input device, etc. The output device(s) 414 such as a display, speakers, a printer, etc. may also be included. The aforementioned devices are examples and others may be used. The computing device 400 may include one or more communication connections 416 allowing communications with other computing devices 418. Examples of suitable communication connections 416 include, but are not limited to, RF transmitter, receiver, and/or transceiver circuitry; universal serial bus (USB), parallel, and/or serial ports.
The term computer readable media as used herein may include computer storage media. Computer storage media may include volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information, such as computer readable instructions, data structures, or program modules. The system memory 404, the removable storage device 409, and the non-removable storage device 410 are all computer storage media examples (i.e., memory storage.) Computer storage media may include RAM, ROM, electrically erasable read-only memory (EEPROM), flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other article of manufacture which can be used to store information and which can be accessed by the computing device 400. Any such computer storage media may be part of the computing device 400. Computer storage media does not include a carrier wave or other propagated or modulated data signal.
Communication media may be embodied by computer readable instructions, data structures, program modules, or other data in a modulated data signal, such as a carrier wave or other transport mechanism, and includes any information delivery media. The term “modulated data signal” may describe a signal that has one or more characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media may include wired media such as a wired network or direct-wired connection, and wireless media such as acoustic, radio frequency (RF), infrared, and other wireless media.
One or more application programs 550 may be loaded into the memory 562 and run on or in association with the operating system 564. Examples of the application programs include phone dialer programs, e-mail programs, personal information management (PIM) programs, word processing programs, spreadsheet programs, Internet browser programs, messaging programs, and so forth. The system 502 also includes a non-volatile storage area 568 within the memory 562. The non-volatile storage area 568 may be used to store persistent information that should not be lost if the system 502 is powered down. The application programs 550 may use and store information in the non-volatile storage area 568, such as e-mail or other messages used by an e-mail application, and the like. A synchronization application (not shown) also resides on the system 502 and is programmed to interact with a corresponding synchronization application resident on a host computer to keep the information stored in the non-volatile storage area 568 synchronized with corresponding information stored at the host computer. As should be appreciated, other applications may be loaded into the memory 562 and run on the mobile computing device 500.
The system 502 has a power supply 570, which may be implemented as one or more batteries. The power supply 570 might further include an external power source, such as an AC adapter or a powered docking cradle that supplements or recharges the batteries.
The system 502 may also include a radio 572 that performs the function of transmitting and receiving radio frequency communications. The radio 572 facilitates wireless connectivity between the system 502 and the “outside world,” via a communications carrier or service provider. Transmissions to and from the radio 572 are conducted under control of the operating system 564. In other words, communications received by the radio 572 may be disseminated to the application programs 150 via the operating system 564, and vice versa.
The visual indicator 520 may be used to provide visual notifications and/or an audio interface 574 may be used for producing audible notifications via the audio transducer 525. In the illustrated embodiment, the visual indicator 520 is a light emitting diode (LED) and the audio transducer 525 is a speaker. These devices may be directly coupled to the power supply 570 so that when activated, they remain on for a duration dictated by the notification mechanism even though the processor 560 and other components might shut down for conserving battery power. The LED may be programmed to remain on indefinitely until the user takes action to indicate the powered-on status of the device. The audio interface 574 is used to provide audible signals to and receive audible signals from the user. For example, in addition to being coupled to the audio transducer 525, the audio interface 574 may also be coupled to a microphone to receive audible input, such as to facilitate a telephone conversation. In accordance with embodiments of the present invention, the microphone may also serve as an audio sensor to facilitate control of notifications, as will be described below. The system 502 may further include a video interface 576 that enables an operation of an on-board camera 530 to record still images, video stream, and the like.
A mobile computing device 500 implementing the system 502 may have additional features or functionality. For example, the mobile computing device 500 may also include additional data storage devices (removable and/or non-removable) such as, magnetic disks, optical disks, or tape. Such additional storage is illustrated in
Data/information generated or captured by the mobile computing device 500 and stored via the system 502 may be stored locally on the mobile computing device 500, as described above, or the data may be stored on any number of storage media that may be accessed by the device via the radio 572 or via a wired connection between the mobile computing device 500 and a separate computing device associated with the mobile computing device 500, for example, a server computer in a distributed computing network, such as the Internet. As should be appreciated such data/information may be accessed via the mobile computing device 500 via the radio 572 or via a distributed computing network. Similarly, such data/information may be readily transferred between computing devices for storage and use according to well-known data/information transfer and storage means, including electronic mail and collaborative data/information sharing systems.
Embodiments of the present invention, for example, are described above with reference to block diagrams and/or operational illustrations of methods, systems, and computer program products according to embodiments of the invention. The functions/acts noted in the blocks may occur out of the order as shown in any flowchart. For example, two blocks shown in succession may in fact be executed substantially concurrently or the blocks may sometimes be executed in the reverse order, depending upon the functionality/acts involved.
The description and illustration of one or more embodiments provided in this application are not intended to limit or restrict the scope of the invention as claimed in any way. The embodiments, examples, and details provided in this application are considered sufficient to convey possession and enable others to make and use the best mode of claimed invention. The claimed invention should not be construed as being limited to any embodiment, example, or detail provided in this application. Regardless of whether shown and described in combination or separately, the various features (both structural and methodological) are intended to be selectively included or omitted to produce an embodiment with a particular set of features. Having been provided with the description and illustration of the present application, one skilled in the art may envision variations, modifications, and alternate embodiments falling within the spirit of the broader aspects of the general inventive concept embodied in this application that do not depart from the broader scope of the claimed invention.
