The present invention relates to the field of graphical displays. Specifically, the present invention relates to the field of animating layout changes in graphical displays.
In modern user interfaces, user controls are often placed on a user display by storing information about the user control in a layout form which is displayed using a layout algorithm. The layout algorithm allows the form to compensate for resize actions and for adding or removing controls. When a change is made to the layout form, this change is reflected on the display.
For example, layouts may be used to provide a toolbar with controls on a display for a user. The contents of the tool bar (for example, some description of the controls) is contained in a layout form. A layout algorithm uses the contents of the layout form to determine what will be displayed on the screen. For example, a control on a tool bar may have associated text which labels the control. If there is room in the toolbar for the complete text of each control to be displayed, the layout algorithm may display the complete text of each control. If there is not enough room in the toolbar, the layout algorithm may display the controls differently (e.g. in a smaller area) and may abbreviate the text of the control.
The toolbar may be resized. Additionally, controls may be added to or removed from the toolbar. When such a change occurs, the contents of the layout form are changed. The layout algorithm is then used to determine any changes in the display of the toolbar.
The change in the layout form is instantaneously reflected in the display. However, this may be confusing for a user, who may not have time to notice and understand what is being changed. This is illustrated in
Animating such layout changes using linear interpolation eases these transitions, maintaining a sense of consistency for the user. Some prior art systems implement such linear interpolation between the old and new positions of an element when a layout is being changed. A linear path is shown between the old position of an element which is being moved and the new position of the element. This allows the user to see an element as it is being changed from one size or position to another. However, this linear interpolation has many drawbacks. It is a simple and non-extensible interpolation. The linear interpolation does not allow the designer of the graphical user interface to have any control over the animation of the change being made. Also, the linear interpolation does not allow the designer to trigger animations on properties other than those that are modified in the layout form. Layout changes affect only a predetermined subset of the properties of an element. For example, many prior art systems allow layout to effect only the size and position of an element. Thus, performing a linear interpolation between such changes may be possible, however, animating a change in other properties of the element will not be possible. The linear interpolation functionality is not extensible to other properties.
An example of the linear interpolation is illustrated in
However, there is no way in the prior art for a designer of a user interface to control this linear interpolation animation. Additionally, as mentioned, designers can not trigger animations on properties other than those modified by layouts. The linear interpolation animation is also simple and does not provide a designer with flexibility in designing a transformation which can enhance the user's experience by animating a layout change.
In view of the foregoing, the present invention provides methods and systems for an authoring experience or a display implementation which allows transition information to be created for layout animations. This transition information is applied to layout changes when certain layout change triggers are encountered, to animate a change in a layout. The layout may be provided in a script, which provides information regarding the layout transition.
Thus, increased flexibility in animating layout changes is provided to graphical display designers. Other features of the present invention are described below.
The foregoing summary, as well as the following detailed description of preferred embodiments, is better understood when read in conjunction with the appended drawings. For the purpose of illustrating the invention, there is shown in the drawings exemplary constructions of the invention; however, the invention is not limited to the specific methods and instrumentalities disclosed. In the drawings:
a and 1b are block diagrams of the movement of an element on a display at a beginning time and a successive time according to the prior art;
a, 2b, 2c, and 2d are block diagrams of the movement of an element on a display at two successive times according to the prior art;
a and 5b are each block diagrams showing the application of a motion path to the movement of an element according to one embodiment of the invention;
a, 6b, 6c, and 6d are block diagrams of the movement of an element on a display at a beginning time and three successive times according to one embodiment of the invention;
a, 7b, 7c, and 7d are block diagrams of the movement of an element on a display at a beginning time and three successive times according to one embodiment of the invention; and
Overview
In order to provide for animation in layout changes, an authoring experience is provided which allows transition information to be created for layout animations. This transition information is then applied to layout changes at runtime to animate a change in a layout.
In one embodiment, transition information is provided in a script. The script details how a layout transition will occur in a layout during runtime. When the transition does occur, one or more specific graphical elements to be added to, removed from, or moved within a layout are designated, as well as the change data for the graphical element. The transition information specified in the script is applied to the transition, thereby allowing the user experience to be enhanced.
Graphical elements may be moved from outside of a layout into a layout, from inside a layout to outside of it. A special case of this is when an element is moved from one layout to another. Additionally, a graphical element may be moved within a given layout.
In this way, forms and animation may be integrated in providing a graphical display.
Exemplary Computing Environment
The invention is operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the invention include, but are not limited to, personal computers, server computers, hand-held or laptop devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.
The invention may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network or other data transmission medium. In a distributed computing environment, program modules and other data may be located in both local and remote computer storage media including memory storage devices.
With reference to
Computer 110 typically includes a variety of computer readable media. Computer readable media can be any available media that can be accessed by computer 110 and includes both volatile and non-volatile media, removable and non-removable media. By way of example, and not limitation, computer readable media may comprise computer storage media and communication media. Computer storage media includes both volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computer 110. Communication media typically embodies 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” means a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wired media such as a wired network or direct-wired connection, and wireless media such as acoustic, RF, infrared and other wireless media. Combinations of any of the above should also be included within the scope of computer readable media.
The system memory 130 includes computer storage media in the form of volatile and/or non-volatile memory such as ROM 131 and RAM 132. A basic input/output system 133 (BIOS), containing the basic routines that help to transfer information between elements within computer 110, such as during start-up, is typically stored in ROM 131. RAM 132 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 120. By way of example, and not limitation,
The computer 110 may also include other removable/non-removable, volatile/non-volatile computer storage media. By way of example only,
The drives and their associated computer storage media, discussed above and illustrated in
The computer 110 may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 180. The remote computer 180 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to the computer 110, although only a memory storage device 181 has been illustrated in
When used in a LAN networking environment, the computer 110 is connected to the LAN 171 through a network interface or adapter 170. When used in a WAN networking environment, the computer 110 typically includes a modem 172 or other means for establishing communications over the WAN 173, such as the Internet. The modem 172, which may be internal or external, may be connected to the system bus 121 via the user input interface 160, or other appropriate mechanism. In a networked environment, program modules depicted relative to the computer 110, or portions thereof, may be stored in the remote memory storage device. By way of example, and not limitation,
Exemplary Distributed Computing Frameworks Or Architectures
Various distributed computing frameworks have been and are being developed in light of the convergence of personal computing and the Internet. Individuals and business users alike are provided with a seamlessly interoperable and web-enabled interface for applications and computing devices, making computing activities increasingly web browser or network-oriented.
For example, Microsoft®'s .NET platform includes servers, building-block services, such as web-based data storage, and downloadable device software. Generally speaking, the NET platform provides (1) the ability to make the entire range of computing devices work together and to have user information automatically updated and synchronized on all of them, (2) increased interactive capability for web sites, enabled by greater use of XML rather than HTML, (3) online services that feature customized access and delivery of products and services to the user from a central starting point for the management of various applications, such as e-mail, for example, or software, such as Microsoft® Office®, (4) centralized data storage, which will increase efficiency and ease of access to information, as well as synchronization of information among users and devices, (5) the ability to integrate various communications media, such as e-mail, faxes, and telephones, (6) for developers, the ability to create reusable modules, thereby increasing productivity and reducing the number of programming errors, and (7) many other cross-platform integration features as well.
While exemplary embodiments herein are described in connection with software residing on a computing device, one or more portions of the invention may also be implemented via an operating system, API, or a “middle man” object between a coprocessor and requesting object, such that services may be performed by, supported in, or accessed via all of NET's languages and services, and in other distributed computing frameworks as well.
Animating a Change in Layout on A Graphical Display
In order to animate a change in layout on a graphical display, an authoring experience is presented to a designer which allows the designer to specify how layout changes will be animated. The designer can store transition information which describes the requested transition of an element. When the transition information is applied to an element being moved, the move is animated according to the transition information. Additionally, information regarding other changes to be animated in the display and any other non-display effects to be presented (such as sound effects, for example) are contained in the transition information.
The application of the transition information occurs when a specific event (such as the movement of an element) occurs. In one embodiment, a helper object is associated with the element. In a system where containers contain elements, the helper object may be associated with a container. When an trigger event occurs, the helper object performs the animation for the event according to the transition information. In this way, a designer can prescribe an animation to be used when a trigger event occurs. Trigger events may include, without limitation, the movement of an element, resizing of an element, adding or removing of an element or set of elements from a layout, or a resize of the layout container such that its contents are caused to re-layout.
Transition Animation
When an element is moved on a layout, certain properties of the element may change. The location of the element may change—either or both of the x and y coordinates of the element may change. Additionally, the x and y coordinates of the element may stay the same, but the width and/or height of the element may change. This may also result in movement of the element from its original position and trigger layout changes. In addition, the parent property of an element may change if the element is moving into, out of, or between layouts Other properties of an element may also change. For example, the color or transparency of an element may change. For example, a control on a toolbar which is not present in a first layout may gradually appear (transitioning from total transparency to total opacity) in the toolbar. Movement of controls already present in the toolbar may be needed to accomplish this.
The designer specifies the animation which can accompany such changes, in one embodiment, by storing transition information. For example, a transition may be along a Bezier curve from the start position to the end position. The designer specifies the path for the element being moved to follow.
When the move occurs, the start state of the element is determined, including the position (x and y coordinates) and width and height of the element in its original location. An end property state is also calculated, similarly including position and size the element will occupy in its new position. The transition information from the script is used to animate the requested transition.
For example, in
The same transition may be applied to another situation.
Other effects may be added to this animation. For example, the size of the element may change during the animation. First, the size of the element initially may be different from the size of the element in its new location. The animation of the transition may include a transition from one size to another. The same is true if the shape of the element changes. Additionally, even if the element is to be the same size at the destination as it originally was before the element was moved, animations may include changes in the size or shape or other changes in the appearance of the element during the transition. The duration of the transition may also be controlled.
Phases of Element Movement
In one embodiment of the invention, three phases of an animation may be discerned.
When an element is located in a graphical display, space is reserved for the element. The reservation of space in a layout may trigger movement of other elements in the layout in order to create the space for the element. While this reservation is instantaneous to the layout engine, according to one embodiment of the invention the designer may create a transition which, when applied, causes a gradual animation of the change. Thus, to a user, the change will appear gradual. The designer may also cause the user's view of the change to be instantaneous. The removal of an element, similarly, may trigger movement of other elements in the layout in order to use the vacated space. Again, the change may be animated to appear instantaneous or gradual.
The removal phase is the phase of animation which removes the element from its original position. This may trigger movement of other elements. For example, in a layout with numerous elements which equally divide available space, the removal of an element may cause shifting of the elements. If an object is moved within an existing container, the removal phase and the reservation phase in some systems will occur at the same time and the phases may necessarily be interrelated.
The transition phase, which has been discussed above, is the phase in which the transition of the element between the original location of the element and the new location for the element occurs. As discussed, this may include resizing, animation of a transition path, and other animation effects.
The reservation phase is the reservation of a new space for the element at the destination for the element. Again, this may trigger movement of other elements, such as, where the elements in a layout equally divide space.
In one embodiment, authors can specify in the transition information three phases of an animation to correspond with these three phases. The phases may overlap—for example, the transition phase may begin and proceed for some time before the removal phase begins, and then the transition phase may continue after the reservation phase is triggered, making room for the element at the final destination.
An example of this interleaving of phases is shown in
In
For example, in
In
Method for Animating
In one embodiment, animation is provided using the transition information provided by a designer (or otherwise provided).
In one embodiment, transition information includes at least one trigger event, and the animation of the transition occurs only when a trigger event has occurred.
Animation Types
In a preferred embodiment, four animation types are supported. Transition information for any animation type may be designed by a designer. These animation types describe different changes which can occur in a display which includes one or more layouts. The animation types are triggered on different events. The animation types are:
The Enter Layout animation type describes the case where an element not displayed on the display transitions to being displayed on the screen. Examples of animation for this case include the element “flying” in from off-screen (e.g. the element enters from the side of the screen and travels to its new location). Other examples of Enter Layout animation can include: a fade in of the element, or the element growing from zero size. Combinations of these techniques may be used. Enter Layout animations may be triggered when an element which does not appear on the display is to be placed on the display.
The Exit Layout animation type describes the reverse situation, and the techniques which can be used to animate it are related. The element may fly off-screen, may shrink to zero-size, or may fade out. Again, combinations of these techniques may be used. Exit Layout animations may be triggered when an element which appears on the display is to be removed from the display.
In order to animate Layout Delta animations and Layout-to-Layout animations, as described above, a smooth transition between the initial state and the final state, along with an animation of moving elements may be animated. Layout Delta animations may be triggered when the size or shape of the layout changes, or when the size or position of one or more layout elements changes. Layout-to-Layout animations are triggered when one or more elements are moved from one layout to another.
As mentioned above, while exemplary embodiments of the present invention have been described in connection with various computing devices, the underlying concepts may be applied to any computing device or system.
The various techniques described herein may be implemented in connection with hardware or software or, where appropriate, with a combination of both. Thus, the methods and apparatus of the present invention, or certain aspects or portions thereof, may take the form of program code (i.e., instructions) embodied in tangible media, such as floppy diskettes, CD-ROMs, hard drives, or any other machine-readable storage medium, wherein, when the program code is loaded into and executed by a machine, such as a computer, the machine becomes an apparatus for practicing the invention. In the case of program code execution on programmable computers, the computing device will generally include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. The program(s) can be implemented in assembly or machine language, if desired. In any case, the language may be a compiled or interpreted language, and combined with hardware implementations.
The methods and apparatus of the present invention may also be practiced via communications embodied in the form of program code that is transmitted over some transmission medium, such as over electrical wiring or cabling, through fiber optics, or via any other form of transmission, wherein, when the program code is received and loaded into and executed by a machine, such as an EPROM, a gate array, a programmable logic device (PLD), a client computer, or the like, the machine becomes an apparatus for practicing the invention. When implemented on a general-purpose processor, the program code combines with the processor to provide a unique apparatus that operates to invoke the functionality of the present invention. Additionally, any storage techniques used in connection with the present invention may invariably be a combination of hardware and software.
While the present invention has been described in connection with the preferred embodiments of the various figures, it is to be understood that other similar embodiments may be used or modifications and additions may be made to the described embodiments for performing the same function of the present invention without deviating therefrom. Therefore, the present invention should not be limited to any single embodiment, but rather should be construed in breadth and scope in accordance with the appended claims.