Over the years, a wide variety of different browsers have entered the marketplace, some with more commercial success than others. Improvements to existing browsers, as well as new browsers, continue to enter the marketplace. Web applications may execute within these browser environments. In some cases, these Web applications may provide animations within the browsers.
Tools and techniques are described for browser-independent animation engines. These animation engines may include browser-independent animation objects that represent entities that may be animated within a browser. These animation objects may define animation attributes, with the animation attributes being associated with attribute values that describe aspects of the entity. The animation attributes may also be associated with animation evaluators that define how the attribute value changes over time. These animation engines may also include a browser-specific layer for interpreting the attribute values into instructions specific to the browser.
The above-described subject matter may also be implemented as a method, computer-controlled apparatus, a computer process, a computing system, or as an article of manufacture such as a computer-readable medium. These and various other features will be apparent from a reading of the following Detailed Description and a review of the associated drawings.
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 features or essential features of the claimed subject matter, nor is it intended that this Summary be used to limit the scope of the claimed subject matter. Furthermore, the claimed subject matter is not limited to implementations that solve any or all disadvantages noted in any part of this disclosure.
The following detailed description is directed to technologies for browser-independent animation engines. While the subject matter described herein is presented in the general context of program modules that execute in conjunction with the execution of an operating system and application programs on a computer system, those skilled in the art will recognize that other implementations may be performed in combination with other types of 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. Moreover, those skilled in the art will appreciate that the subject matter described herein may be practiced with other computer system configurations, including hand-held devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, minicomputers, mainframe computers, and the like.
In the following detailed description, references are made to the accompanying drawings that form a part hereof, and which are shown by way of illustration specific embodiments or examples. Referring now to the drawings, in which like numerals represent like elements through the several figures, aspects of tools and techniques for browser-independent animation engines will be described.
Turning to the client systems 102 in more detail, these may include one or more processors 104, which may have a particular type or architecture, chosen as appropriate for particular implementations. The processors 104 may couple to one or more bus systems 106 chosen for compatibility with the processors 104.
The client systems 102 may also include one or more instances of computer-readable storage media 108, which couple to the bus systems 106. The bus systems may enable the processors 104 to read code and/or data to and/or from the computer-readable storage media 108. The media 108 may represent storage elements implemented using any suitable technology, including but not limited to semiconductors, magnetic materials, optics, or the like. The media 108 may include memory components, whether classified as RAM, ROM, flash, or other types, and may also represent hard disk drives.
The storage media 108 may include one or more data structures and modules of instructions that, when loaded into the processor 104 and executed, cause the client systems 102 to perform various tools and techniques relating to browser-independent animation engines. Examples of these modules may include a web browser 110. In general, the browser 110 may enable one or more users 112 to access content by navigating within one or more networks 113. These networks 113 generally represent any protocols, adapters, components, and other general infrastructure associated with wired and/or wireless communications networks. Such networks 113 may be global, regional, local, and/or personal in scope and nature, as appropriate in different implementations.
In example scenarios, the browser 110 may enable the user 112 to access particular websites to execute instances of web applications 114. More specifically, these websites may host content that may be animated within the web applications 114. Accordingly, the storage media 108 may include one or more instances of an animation engine 116 operative to render animated content within the web application 114. In example scenarios, the animation engine may be implemented within an interpreter that processes JAVASCRIPT™ functions within the web browser 110. However, more generally, the animation engine may be implemented using any scripting environment or platform that is common across different browsers, and that may be executed by those different browsers.
The operating environments 100 may also include one or more instances of server systems 118. These server systems 118 may include one or more processors 120, which may have a particular type or architecture, chosen as appropriate for particular implementations. The processors 120 may or may not have the same type and/or architecture as the processors 104. The processors 120 may couple to one or more bus systems 122 chosen for compatibility with the processors 120.
The server systems 118 may also include one or more instances of computer-readable storage media 124, which couple to the bus systems 122. The bus systems may enable the processors 120 to read code and/or data to and/or from the computer-readable storage media 124. The media 124 may represent storage elements implemented using any suitable technology, including but not limited to semiconductors, magnetic materials, optics, or the like. The media 124 may include memory components, whether classified as RAM, ROM, flash, or other types, and may also represent hard disk drives.
The storage media 124 may include one or more data structures and modules of instructions that, when loaded into the processor 120 and executed, cause the server systems 118 to perform various tools and techniques relating to browser-independent animation engines. For example, these modules may provide web services, denoted generally at 126, with which one or more client systems 102 may interact.
The storage media 124 may also include storage elements 134, which may contain any number of animation objects. In response to the requests 130, the web service 126 may retrieve representations of animation objects from the storage elements 134.
Having described the components of the overall operating environments 100, the discussion now turns to a more detailed description of the interactions between client systems 102 and the web service 126 operated by the server system 118. This description is now provided with
The requests 130a may also represent requests for code that interprets the animation data for a given particular browser. In these latter cases, in which the requests pertain to browser-specific code, the requests 130a may indicate a type or class of the browser 110a, as indicated generally at 202a, in which particular requested objects are to be animated.
In example scenarios, browsers may be classified based on the type of graphical support or rendering technologies that they offer or support. For example, some browsers (e.g., the INTERNET EXPLORER® Internet browser, available from Microsoft Corporation) may employ the Vector Markup Language (VML) to markup vector graphic information. Other browsers (e.g., the FIREFOX® browser, available from Mozilla) may employ the scalable vector graphics (SVG) language.
In turn, the Web service 126 may receive the request 130a, which references the browser type 202a. As described in further detail below in connection with
Turning to the client system 102n, a browser 110n associated with this client system may submit corresponding requests 130n to the Web service 126. These requests 130n may designate particular requested animation objects, as well as browser-independent data for animating the objects. The requests 130n may also include a representation of a browser type or class, as represented generally at 202n, to which the animation objects will be rendered. In turn, the Web service 126 may receive and process the request 130n.
As described above with the client system 102a, the Web service 126 may search the storage elements 134 for any animation objects 136 that are responsive to the request 130n. As described above, the animation objects may contain browser-specific data for animating the objects agnostically within a variety of different browsers. In addition, the Web service may search for any browser-specific code appropriate for the type or class of the browser 110n, as indicated by the browser type representation 202n. Assuming this search is successful, the Web service 126 may return the requested animation objects 132n, as well as browser-independent animation data 204n, and browser-specific code 206n for interpreting the animation data for the specified browser.
It is noted that the browser-independent animation data 204a and 204n (collectively, browser-independent data 204) may be the same across a plurality of different browsers 110.
Having described the additional aspects relating to the interactions between client systems and server systems with
Turning to
As shown in
Turning to the representation 304a in more detail, it may be associated with representations 306a and 306n (collectively, representations 306) of different instances of the browser-specific code 206. More specifically, the representation 306a may be associated with browser-specific code (e.g., specified in suitable markup language) for interpreting the browser-independent data represent in 304a for a type or class of browser.
The animation engines described herein may employ pluggable architectures. In these pluggable architectures, the browser-independent data components 204 and one or more browser-specific code components 206 may cooperate to enable a given instance of the animation engine to operate with different browsers, depending on which browser-specific data components are “plugged in” with the browser-independent code components.
In addition, the representation 306n may be associated with browser-specific code or markup for interpreting the browser-independent data represented at 304a for a different type or class of browser, denoted generally at 308n. In example implementation scenarios, the storage elements 134 may be organized so as to retrieve the browser-specific code 206 by searching the representations of the browser types 308 for any matches with the input browser type 202. Assuming that one of the representations 308 matches the input browser type 202, the storage elements 134 may return the representation 306 of the browser-specific code that corresponds to the matching representation 308.
Having described the data structures of the storage elements 134 in connection with
Turning to
The animation objects 132 represent respective entities that are animating within the browser 110. Turning to the animation object 132a as an example, the animation objects 132 may generally include one or more animation attributes 408. The animation attributes 408 may represent abstract properties of a given entity, and values of the animation attributes may change over time as the given entity animates within the browser 110.
In general, examples of these abstract properties may include any properties of an object that can change over time, and is supported or has meaning to a given browser. More specific examples of these abstract properties may include locations of the given entity (e.g., expressed as X and Y coordinates), color changes over time (if supported by the browser 110), or the like.
Other examples of these abstract properties may include a fade-in and/or fade-out function (i.e., a “blinds” property) as supported by various applications, such as presentation software. The animation engine may animate this blinds property from 0 to 1 over time.
Another example of an animating property may include an alpha level, which specifies a level of transparency or opacity with which a given object may be rendered. Alpha levels may range from 0 (completely transparent) to 1 (completely opaque).
The abstract properties may also include discrete lists. Examples of these discrete lists may include lists of different images, through which the animation object may traverse, animating these images over time. For example, assuming that a given discrete list contains a sequence of ten images, these images may be associated with a respective index (e.g., the integers 1 through 10).
Examples of animating objects or entities may include elements displayed within presentations created using presentation software (e.g., the POWERPOINT® presentation graphics program available from Microsoft Corporation). animating objects may also include, but are not limited to, animated elements presented within games, advertisements, animated media, or the like.
The animation attributes 408 may be associated with one or more animation evaluators 410, which specify or define how the animation attributes values change over time as the given entity animates. More specifically, the animation objects 132a and 132m may respectively receive indications of the timing pulses 404a and 404m. In response to these timing pulses, the animation evaluators 410 may calculate and update their respective animation attributes 408, as specified by the animation evaluators 410.
The animation evaluators 410 may employ various rules to perform the calculations described herein. For example, linear interpolation rules may animate a given object from a start state to at least one end state, at a given rate of change. A constant rule is a special case of the linear interpolation rules, performing a linear projection with the start and end states being the same. Bezier rules may calculate curves motion paths involved in certain animations, while quadratic rules may simulate the effects of gravity in some animations. The animation evaluators 410 may also traverse entries in discrete lists, which are described elsewhere herein.
The animation objects 132 may output respective attribute identifiers (IDs) 412a and 412m (collectively, attribute IDs 412), which identify particular animation attributes 408. In addition, the animation objects 132 may also output respective aggregated values 414a and 414m (collectively, aggregated values 414), which represent updated values as calculated for the animation attributes 408 in response to the timing pulses 404. In instances when multiple animation evaluators 410 are associated with a given animation attribute for a way to, the values 414 may be aggregated to incorporate contributions of these multiple animation evaluators.
The animation engine 116 may include a browser layer 416, which corresponds to a particular type or class of browser supported by the animation engine 116. More specifically, the browser layer 416 may receive aggregated values 414 computed for the various animation objects 132, and may interpret these values as browser-specific instructions as appropriate for the class or type of browser represented in the browser layer 416.
In some implementations, the entities animating within the browser 110, corresponding to the animation objects 132a and 132m, may be represented using a document object model (DOM). In such implementations, the browser layer 416 may output browser-specific DOM attributes 418a and 418m (collectively, DOM attributes 418), corresponding respectively to the animation objects 132a and 132m.
Having described the illustrative architectures for the animation engine in
In addition, for convenience of description, but not to limit possible implementations,
Turning to the process flows 500 in more detail, block 502 represents the animation engine 116 fetching browser-specific code from the server system 118. The process flows 500 may perform block 502 in connection with launching a web application within the browser 110.
Referring to the Web service 126, block 506 represents receiving the request 504 from the animation engine. Block 506 may also include referring to the indication of the browser type 202, and may include locating any instances of browser-specific code appropriate for interpreting animation data for browsers of the type or class as indicated at 202. Recalling the previous discussion of
Block 508 represents sending browser-specific code 206a that corresponds to the code request 504.
Block 510 requesting one or more animation objects (e.g., 132 in
At the web service, block 514 represents receiving the data request 512. Block 5. Block 514 may include identifying the animation object(s) 132 referenced in the request 512.
Block 516 represents locating browser-independent animation data for the animation object specified in the request 512. Block 516 may include searching storage elements (e.g., 134) for any representations of animation objects that match the animation objects specified in the request 512.
Block 518 represents sending the browser-independent animation data, in response to the request 512.
In some cases, the web application may present a given animation that utilizes certain browser-specific code, and block 502 may fetch this browser-specific code, if not already fetched. Once fetched, the browser-specific code may be cached for later access. For example, if the web application presents another animation that utilizes the same browser-specific code, then the web application may refer to the cached instance of the browser-specific code, rather than repeating block 502 to re-fetch the same code.
At the animation engine 116, block 520 represents receiving the browser-independent data 204 sent by the Web service 126. As described above, in different scenarios, the client system may receive, for one or more given animation objects, browser-independent data for animating the object.
Block 522 represents extracting browser-independent data from the animation object received in block 520. In cases in which the web service sends a run-time data structure containing the browser-independent data, block 518 may include extracting representations of the browser-independent data from the data structure received in block 520.
Block 524 represents animating the animation object extracted in block 522. More specifically, block 524 may include processing the browser-independent animation data to animate the object within a given browser. As such, block 524 may include receiving a representation of browser-specific code 206b, which interprets the browser-independent animation data for the given browser. In the interests of clarity, the discussion now turns to
Block 602 represents accessing the code or markup received or a given animation object by the client system. Block 602 may also include loading this code or markup into the animation engine 116 in preparation for rendering the animation object locally at the client system 102. More specifically, block 602 may include loading the animation engine with browser-independent animation data.
As described above in connection with
Block 606 represents rendering the animated properties to a browser window (e.g., 110 in
Block 610 represents calculating an updated state of the animated properties in response to the timing pulse received in block 608. For example, block 610 may include processing the animation evaluators (e.g., 410) associated with a given animation object in response to the timing pulse, and updating the animated property as indicated by the animation evaluator at the given time. For example, the animation evaluator for a given animation object may define a timeline for the animation, with the animation object taking on various states as it progresses along this timeline. Assuming that the timing pulse or trigger received in block 608 identifies or designates a given point along this timeline, block 610 may include calculating the state of the animation at this given point on the timeline.
The processes 600 may loop through blocks 606-610 any number of times until the animation evaluators for a given object indicate that the animation is complete.
At any point within the process flows 600, a user may provide some form of input event, denoted generally at 614. Examples of the input events 614 may include mouse clicks, or the like.
Block 616 represents receiving and processing one or more instances of the input events, in response to the input 614. Block 618 may include creating one or more timing triggers or markers in responses to the input event received from the user. As an example of timing triggers, block 616 may include receiving a command from the user that advances animation to some selected point in the animation. In some cases, a given animation object may define one or more discrete, predefined points within the animation that are selectable by the user. In other cases, the animation object may allow the user to select any point within the animation. Thus, the timeline defined for a given animation object may be “random access,” in the sense that a user may access any point in the timeline.
Although the subject matter presented herein has been described in language specific to computer structural features, methodological acts, and computer readable media, it is to be understood that the invention defined in the appended claims is not necessarily limited to the specific features, acts, or media described herein. Rather, the specific features, acts and mediums are disclosed as example forms of implementing the claims.
In addition, certain process and data flows are represented herein as unidirectional only for the purposes of facilitating this description. However, these unidirectional representations do not exclude or disclaim implementations that incorporate bidirectional flows.
The subject matter described above is provided by way of illustration only and should not be construed as limiting. Various modifications and changes may be made to the subject matter described herein without following the example embodiments and applications illustrated and described, and without departing from the true spirit and scope of the present invention, which is set forth in the following claims.