Graph functions for configuring animation behavior in content rendering

Abstract

A computing system for generating an interactive animation interface, the interface including a graph function operable to allow a user to specify one or more parametric values ​​to configure an animation behavior of an associated content rendering, the computing system generating the animation behavior of the content rendering based on the one or more parametric values ​​specified by the user.

Description

Related Applications

[0001] This application claims the benefit of priority to (i) U.S. Patent Application No. 18 / 144,093, filed May 5, 2023, and (ii) U.S. Provisional Patent Application No. 63 / 339,814, filed May 9, 2022, the entire contents of which are incorporated herein by reference. [Technical field]

[0002] The examples described herein relate to graph functions for configuring animation behavior in content rendering. [Background technology]

[0003] Software design tools come in many forms and uses. For example, in the field of application user interfaces, software design tools require a designer to blend the functional aspects of a program with aesthetic and even legal requirements, resulting in a collection of pages that form the application's user interface. For a given application, the designer has many objectives and requirements that are often difficult to keep track of. Summary of the Invention

[0004] A computing system for generating an interactive animation interface, the interface including a graph function operable to allow a user to specify one or more parametric values ​​to configure an animation behavior of an associated content rendering, the computing system generating the animation behavior of the content rendering based on the one or more parametric values ​​specified by the user.

[0005] Some of the examples described are in the context of an interactive graphic design application (IGAP), but embodiments as described can be implemented in other applications (e.g., whiteboard applications, etc.) for enabling users to create graphical content.

[0006] Further, in some examples, a networked computer system is provided that includes a memory resource that stores an instruction set, and one or more processors are operable to communicate the instruction set to a plurality of user devices. The instruction set can be communicated to the user computing devices in association with the user computing devices being operated to render a corresponding design being edited on a canvas, and the design being edited can be edited by a user input indicating any one of a plurality of different input actions. The instruction set can be executed on the computing devices to cause each of the computing devices to determine one or more input actions to perform based on the user input. The instructions can further cause the user computing devices to perform the one or more input actions to modify the design being edited. The instructions can be executed for at least a first computing device to cause the first computing device to determine the one or more input actions to be performed.

[0007] One or more embodiments described herein provide that the methods, techniques, and actions performed by a computing device are performed programmatically or as a computer-implemented method. Programmatically, as used herein, means by the use of code or computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed programmatically may or may not be automatic.

[0008] One or more embodiments described herein can be implemented using a program module, engine, or component. A program module, engine, or component can include a program, a subroutine, a portion of a program, or a software or hardware component that can perform one or more specified tasks or functions. As used herein, a module or component can exist on a hardware component independent of other modules or components. Alternatively, a module or component can be a shared element or process of other modules, programs, or machines.

[0009] Some embodiments described herein may generally require the use of computing devices that include processing and memory resources. For example, one or more embodiments described herein may be implemented in whole or in part on computing devices such as servers, desktop computers, mobile phones or smartphones, tablets, wearable electronic devices, laptop computers, printers, digital photo frames, network equipment (e.g., routers), and tablet devices. Memory, processing, and network resources may all be used in connection with establishing, using, or executing any embodiment described herein (including executing any method or implementing any system).

[0010] Furthermore, one or more embodiments described herein may be implemented through the use of instructions executable by one or more processors. These instructions may be held on a non-transitory computer-readable medium. The machines illustrated or described with the following figures provide examples of processing resources and computer-readable media that may carry and / or execute instructions for implementing embodiments of the present invention. In particular, many of the machines illustrated with embodiments of the present invention include processors and various forms of memory for holding data and instructions. Examples of computer-readable media include permanent memory storage devices such as hard drives on personal computers or servers. Other examples of computer storage media include portable storage units such as CD or DVD units, flash memory (such as those found on smartphones, multifunction devices or tablets), and magnetic memory. Computers, terminals, and network-enabled devices (e.g., mobile devices such as mobile phones) are all examples of machines and devices that utilize processors, memories, and instructions stored on computer-readable media. Furthermore, the embodiments may be implemented in the form of a computer program, or a computer-usable carrier medium that may carry such a program. [Brief description of the drawings]

[0011] [Figure 1A] FIG. 1 illustrates an interactive graphic design system for a user's computing device, in accordance with one or more examples. [Figure 1B] FIG. 1 illustrates a networked computing system for implementing an interactive graphic design system on a user computing device, according to one or more examples. [Figure 1C] FIG. 1 illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative network platform, in accordance with one or more examples. [Figure 2A] FIG. 1 illustrates an example of an animation design component in accordance with one or more embodiments. [Figure 2B] FIG. 1 illustrates a method for configuring animation behavior of a content element in accordance with one or more embodiments. [Diagram 3] FIG. 1 illustrates an example of a tool panel with graph functionality in accordance with one or more embodiments. [Figure 4A] FIG. 1 illustrates an exemplary tool panel incorporating graph functionality in accordance with one or more embodiments. [Figure 4B] FIG. 1 illustrates an exemplary tool panel incorporating graph functionality in accordance with one or more embodiments. [Figure 4C] FIG. 1 illustrates an exemplary tool panel incorporating graph functionality in accordance with one or more embodiments. [Figure 4D] FIG. 1 illustrates an exemplary tool panel incorporating graph functionality in accordance with one or more embodiments. [Diagram 5] FIG. 13 illustrates another example tool panel incorporating graph functionality and other features of a graph input component in accordance with one or more embodiments. [Figure 6A] FIG. 13 illustrates another example tool panel incorporating graph functionality and other features of a graph input component in accordance with one or more embodiments. [Figure 6B] FIG. 13 illustrates another example tool panel incorporating graph functionality and other features of a graph input component in accordance with one or more embodiments. [Figure 6C] FIG. 13 illustrates another example tool panel incorporating graph functionality and other features of a graph input component in accordance with one or more embodiments. [Figure 7] FIG. 1 illustrates a networked computer system in which one or more embodiments may be implemented. [Figure 8] FIG. 1 illustrates a user computing device for use with one or more examples as described. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0012] System Description 1A illustrates an interactive graphic design system for a user's computing device, according to one or more examples. The interactive graphic design system ("IGDS") 100 can be implemented in any one of a number of different computing environments. For example, in some variations, the IGDS 100 can be implemented as a client-side application running on the user computing device 10 to provide functionality as described with the various examples. In other examples, as described below, the IGDS 100 can be implemented through the use of a web-based application 80. Additionally or alternatively, the IGDS 100 can be implemented as a distributed system, such that the processes described with the various examples run on network computers (e.g., servers) and on the user device 10.

[0013] According to examples, the IGDS 100 may be implemented on a user computing device 10 to allow a corresponding user to design various types of interfaces using graphical elements. The IGDS 100 may include processes executed as or through a Web-based application 80 installed on the computing device 10. As illustrated by various examples, the Web-based application 80 may execute scripts, code and / or other logic ("program components") to implement the functionality of the IGDS 100. Additionally, in some variations, the IGDS 100 may be implemented as part of a network service, and the Web-based application 80 may communicate with one or more remote computers (e.g., servers used for the network service) to execute the processes of the IGDS 100.

[0014] In some examples, the web-based application 80 obtains some or all of the program resources for implementing the IGDS 100 from a network site. Additionally or alternatively, the web-based application 80 can obtain some or all of the program resources from a local source (e.g., local memory resident on the computing device 10). The web-based application 80 can also access various types of data sets in providing the IGDS 100. The data sets can correspond to files and libraries, which can be stored remotely (e.g., on a server, associated with an account) or locally.

[0015] In an example, the web-based application 80 may correspond to a commercially available browser, such as GOOGLE CHROME (developed by GOOGLE, INC.), SAFARI (developed by APPLE, INC.), or INTERNET EXPLORER (developed by MICROSOFT CORPORATION). In such an example, the processes of the IGDS 100 may be implemented as scripts and / or other embedded code that the web-based application 80 downloads from a network site. For example, the web-based application 80 may execute code embedded within a web page to implement the processes of the IGDS 100. The web-based application 80 may also execute scripts to obtain other scripts and program resources (e.g., libraries) from the network site and / or other local or remote locations. As an example, the web-based application 80 may execute JAVASCRIPT® embedded in HTML resources (e.g., web pages structured according to HTML 5.0 or other versions provided under standards published by the W3C or WHATWG consortium). In some examples, the rendering engine 120 and / or other components may utilize graphics processing unit (GPU) acceleration logic, such as provided through Web Graphics Library (WebGL) programs that execute Graphics Library Shader Language (GLSL) programs that run on the GPU.

[0016] According to an example, a user of computing device 10 operates web-based application 80 to access network sites to obtain and execute program resources to implement IGDS 100. In this manner, a user may initiate a session to implement IGDS 100 for purposes of creating and / or editing a design interface. In an example, IGDS 100 includes a program interface 102, an input interface 118, and a rendering engine 120. Program interface 102 may include one or more processes executed to access and obtain program resources from local and / or remote sources.

[0017] In one implementation, the programmatic interface 102 can use programmatic resources associated with the web-based application 80 (e.g., an HTML 5.0 canvas) to, for example, generate the canvas 122. Additionally or as a variation, the programmatic interface 102 can trigger or otherwise generate the canvas 122 using programmatic resources and data sets (e.g., canvas parameters) obtained from a local source (e.g., memory) or a remote source (e.g., a network service).

[0018] The programmatic interface 102 may also obtain programmatic resources including an application framework for use with the canvas 122. The application framework may include, for example, a data set that defines or configures a set of interactive graphic tools that are integrated with the canvas 122 and that constitute the input interface 118, allowing a user to provide input for creating and / or editing the design interface.

[0019] According to some examples, the input interface 118 may be integrated with the canvas 122 and implemented as a functional layer that detects and interprets user input. The input interface 118 may, for example, use a reference to the canvas 122 to identify the on-screen location of a user input (e.g., a "click"). Additionally, the input interface 118 may interpret a user's input action based on the location of the detected input (e.g., whether the location of the input indicates a selection of a tool, an object rendered on the canvas, or an area of ​​the canvas), the frequency of the detected input in a given period of time (e.g., a double click), and / or the start and end locations of an input or series of inputs (e.g., start and end locations of clicks and drags), as well as various other input types that a user may specify through one or more input devices (e.g., a right click, a screen tap, etc.). In this manner, the input interface 118 may, for example, interpret a series of inputs as a selection of a design tool (e.g., a selection of a shape based on the input location) or as input to define attributes (e.g., dimensions) of the selected shape.

[0020] Additionally, the program interface 102 can be used to retrieve program resources and data sets, including files 101 that constitute the user's active workspace, from local or remote sources. The retrieved data sets can include one or more pages that include design elements that collectively form a design interface, or a design interface in progress. Each file 101 can include one or more data structure representations 111 that collectively define the design interface. The files 101 can also include additional data sets associated with the active workspace. For example, as described in some examples, a workspace file can store an animation data set that defines animation behaviors, such as between objects or states in a rendering of a canvas 122.

[0021] In the example, the rendering engine 120 uses the data structure representation 111 to render a corresponding DIUE 125 on the canvas 122, where the DIUE 125 reflects the graphic elements and respective attributes provided with the individual pages of the file 101. The user can edit the DIUE 125 using the input interface 118. Alternatively, the rendering engine 120 can generate a blank page of the canvas 122, and the user can generate the DIUE 125 using the input interface 118. When rendered, the DIUE 125 can include graphic elements such as a background and / or a set of objects (e.g., shapes, text, images, program elements), as well as attributes of the individual graphic elements. Each attribute of the graphic elements can include an attribute type and an attribute value. For objects, the attribute types include shape, dimensions (or size), layer, type, color, line weight, text size, text color, font, and / or other visual characteristics. Depending on the implementation, the attributes reflect properties of a two-dimensional or three-dimensional design. In this manner, the attribute values ​​of individual objects can define, for example, the visual characteristics of the size, color, position, layering, and content of elements that are rendered as part of the DIUE 125.

[0022] A network computing system implementing IGDS 1B illustrates a network computing system for implementing an interactive graphic design system on a user computing device, according to one or more examples. A network computing system such as that illustrated in the example of FIG. 1B can be implemented using one or more servers that communicate with the user computing device over one or more networks.

[0023] In the example of FIG. 1B , the network computing system 150 performs operations to enable the IGDS 100 to be implemented on the user computing device 10. In a variation, the network computing system 150 provides network services 152 to support use of the IGDS 100 by a user computing device utilizing a browser or other web-based application. The network computing system 150 may include a site manager 158 that manages a website where a set of web resources 155 (e.g., web pages) are made available for site visitors. The web resources 155 may include instructions such as scripts or other logic executable by a browser or web component of the user computing device ("IGDS instructions 157").

[0024] In some variations, when computing device 10 accesses and downloads web resource 155, web-based application 80 executes IGDS instructions 157 to implement functionality as described in some examples of FIGURE 1A. For example, IGDS instructions 157 may be executed by web-based application 80 to launch program interface 102 on user computing device 10. The launching of program interface 102 may occur simultaneously with the establishment of a web socket connection between program interface 102 and service component 160 of network computing system 150, for example.

[0025] In some examples, the web resources 155 include logic that the web-based application 80 executes to launch one or more processes of the program interface 102, thereby causing the IGDS 100 to obtain additional program resources and data sets for implementing the functionality as described by the examples. The web resources 155 can, for example, embed logic (e.g., “JAVASCRIPT” code), including GPU acceleration logic, in an HTML page for download by the user's computing device. The program interface 102 can be triggered to obtain additional program resources and data sets, for example, from the network service 152 and / or from local resources of the computing device 10, to implement the IGDS 100. For example, some of the components of the IGDS 100 can be implemented through web pages that can be downloaded to the computing device 10 after authentication is performed and / or when the user performs additional actions (e.g., downloading one or more pages of a workspace associated with an account identifier). Thus, in the illustrated example, the network computing system 150 can communicate the IGDS instructions 157 to the computing device 10 through a combination of network communications, including through activity downloads of the Web-based application 80, where the IGDS instructions 157 are received and executed by the Web-based application 80.

[0026] Computing device 10 may use web-based application 80 to access a web site of network service 152 and download web pages or web resources 155. Upon accessing the web site, web-based application 80 may communicate an account identifier to service component 160 automatically (e.g., through stored credentials) or through manual entry. In some examples, web-based application 80 may also communicate one or more additional identifiers that correlate with the user identifier.

[0027] Further, in some examples, the service component 160 can retrieve profile information 109 from a user profile store 166 using a user or account identifier of the user identifier. Additionally or as a variation, the user's profile information 109 can be determined and stored locally on the user's computing device 10.

[0028] The service component 160 can also retrieve from the file store 164 a file of an active workspace that is linked to a user account or identifier ("active workspace file 163"). The profile store 166 can also identify workspaces identified with an account and / or user, and the file store 164 can store the datasets that make up the workspace. The datasets stored in the file store 164 can include, for example, pages of the workspace, a dataset identifying constraints for an active set of workspace files, and one or more data structure representations 161 of designs being edited that can be rendered from each active workspace file.

[0029] Further, in the example, the services component 160 provides the web-based application 80 with a representation of a workspace associated with the user, which representation identifies, for example, individual files associated with the user and / or user account. The workspace representation can also identify a set of files, each file including one or more pages, and each page including objects that are part of a design interface.

[0030] On the user device 10, the user may view the workspace representation through a web-based application 80, and the user may select to open a file of the workspace through the web-based application 80. In an example, when the user selects to open one of the active workspace files 163, the web-based application 80 launches a canvas 122. For example, the IGDS 100 may launch an HTML 5.0 canvas as a component of the web-based application 80, and the rendering engine 120 may access one or more data structure representations 111 of the design interface being edited to render a corresponding DIUE 125 on the canvas 122.

[0031] The service component 160 may also determine a user's permission settings or role associated with the account identifier based on the user credentials. The user's permission settings or role may determine, for example, the files the user may access. In some examples, the implementation of the rendering engine 120 on the computing device 10 may be configured at least in part based on the user's role or settings. For example, whether the user can specify constraints for the DIUE 125 may be determined by the user's permission settings, and the user may or may not be able to create constraints for the DIUE 125 based on the respective permission settings. Furthermore, in some variations, the response actions that the user may take to resolve conflicts may be limited by the user's permission settings. For example, whether the user can ignore constraints may be based on the user's permission settings.

[0032] In an example, changes implemented by the rendering engine 120 in the DIUE 125 may also be recorded with the respective data structure representation 111 for storage on the computing device 10. The program interface 102 may repeatedly or continuously stream the change data 121 to the service component 160, with updates reflecting edits made to the DIUE 125 and the data structure representation 111 and reflecting changes made by the user to the DIUE 125 and the local data structure representation 111 of the DIUE 125. The service component 160 may receive the change data 121 and may then use the change data 121 to implement changes in the network-side data structure representation 161. In this manner, the network-side data structure representation 161 in the active workspace file 163 may mirror (or be synchronized with) the local data structure representation 111 on the user computing device 10. Once the rendering engine 120 implements changes to the DIUE 125 on the user device 10, the changes may be recorded or otherwise implemented with the local data structure representation 111, and the programmatic interface 102 may stream the changes as change data 121 to the service component 160 to synchronize the local representation 111 of the DIUE 125 with the network-side representation 161. This process may be performed repeatedly or continuously such that the local representation 111 of the DIUE 125 and the network-side representation 161 remain synchronized.

[0033] Collaborative Network Platform FIG 1C illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative network platform, according to one or more examples. In the example of FIG 1C, the collaborative network platform is implemented by a network computing system 150 that communicates with multiple user computing devices 10, 12 over one or more networks (e.g., the World Wide Web) and implements the IGDS 100 on each computing device. While FIG 1C illustrates an example in which two users utilize the collaborative network platform, in the example as described, the network computing system 150 enables collaboration on design interfaces among a larger group of users.

[0034] 1C, the user computing devices 10, 12 can be assumed to be operated by multiple users associated with a common account, with each user computing device 10, 12 implementing a corresponding IGDS 100 to access the same workspace during respective overlapping sessions. Thus, each of the user computing devices 10, 12 can simultaneously access the same set of active workspace files 163, and the respective programmatic interfaces 102 of the IGDSs 100 on each user computing device 10, 12 operate to establish corresponding communication channels (e.g., web socket connections) with the service components 160.

[0035] In an example, the service component 160 can communicate a copy of the active workspace file 163 to each user computing device 10,12 such that the computing devices 10,12 simultaneously render the DIUEs 125 in the active workspace file 163. Additionally, each of the computing devices 10,12 can maintain a local data structure representation 111 of the respective DIUEs 125 as determined from the active workspace file 163. The service component 160 can also maintain a network side data structure representation 161 obtained from the file of the active workspace 163 and consistent with the respective local data structure representation 111 of the computing devices 10,12.

[0036] The network computing system 150 can continuously synchronize the active workspace files 163 on each user computing device. In particular, changes made by a user to the DIUE 125 on one computing device 10, 12 can be immediately reflected in the rendered DIUE 125 on the other user computing device 10, 12. As an example, a user of the computing device 10 can make changes to the respective DIUE 125 and the respective rendering engines 120 can implement updates that are reflected in the local copies of the data structure representation 111. From the computing device 10, the program interface 102 of the IGDS 100 can stream change data 121 reflecting the user-entered changes to the service component 160. The service component 160 processes the change data 121 on the user computing device. The service component 160 can use the change data 121 to make corresponding changes to the network-side data structure representation 161. The service component 160 can also stream remotely generated change data 171 (which in the example provided corresponds to or reflects change data 121 received from the user device 10) to the computing device 12 to cause the corresponding IGDS 100 to update the DIUE 125 rendered on that device. The computing device 12 can also use the remotely generated change data 171 to update its local data structure representation 111. The program interface 102 of the computing device 12 can receive updates from the network computing system 150 and the rendering engine 120 can update the DIUE 125 and the respective local copies 111 of the computing device 12.

[0037] The reverse process may also be implemented to update the data structure representation 161 of the network computing system 150 using change data 121 communicated from the second computing device 12 (e.g., corresponding to a user of the second computing device updating the DIUE 125 rendered on the second computing device 12). The network computing system 150 may then stream remotely generated change data 171 (which in the provided example corresponds to or reflects the change data 121 received from the user device 12) to update the local data structure representation 111 of the DIUE 125 on the first computing device 10. In this manner, the DIUE 125 of the first computing device 10 may be updated in response to a user of the second computing device 12 providing user input to modify the DIUE 125.

[0038] To facilitate synchronization of the data structure representations 111, 111 on the computing devices 10, 12, the network computing system 150 may implement stream connectors that merge data streams exchanged between the first computing device 10 and the network computing system 150, and between the second computing device 12 and the network computing system 150. In some implementations, the stream connectors may be implemented to allow each computing device 10, 12 to make changes to the network-side data representation 161 without additional data duplication that may be required to process the streams from each device individually.

[0039] Additionally, over time, one or both of the computing devices 10, 12 may become out of sync with the server-side data representation 161. In such an event, each computing device 10, 12 may re-download the active workspace file 163 to resume maintenance of the data structure representation of the DIUE 125 that is rendered and edited on that device.

[0040] 1A-1C, the IGDS 100 can implement user-configurable animations between content elements of a design. In an example, the rendering engine 120 can, for example, render a series of frames in succession to implement a prototyping mode. In this context, the rendering engine 120 can include a prototyping (or simulation) component 126 for implementing the prototyping mode. Furthermore, the prototyping component can execute animation logic 127 to render animation behavior according to user input when the prototyping mode is implemented. Thus, as will be described with examples, the IGDS 100 can implement a prototyping mode with animations while a workspace file is opened and a design is being rendered. Furthermore, in some examples, the IGDS 100 can implement a prototyping mode to allow a designer to view, configure, edit, and update animation behaviors between selected objects or states. Thus, in an example, the IGDS100 may be implemented in alternative modes: (i) a design mode in which individual frames (e.g., objects with attributes) are rendered statically and with tools and functionality that allow a user to edit the attributes of the frames / objects, and (ii) a prototyping mode in which a series of frames are rendered sequentially to simulate dynamic implementation of the design in a production environment.

[0041] Additionally, as described, the rendering engine 120 can implement animation logic to simulate user configured animations via an animation design component 128. In an example, the input interface 118 can include an animation design component 128 (see also FIG. 2) that can receive user input for selecting and configuring animation behavior. The input interface 118 can, for example, provide a graph interface through which a user can configure animation behavior between selected objects / states. In an example, the IGDS 100 implements the animation design component as described with the aid of examples provided below.

[0042] Animation Design FIG. 2A illustrates an example of an animation design component, according to one or more embodiments. In an embodiment, the animation design component 200 allows a designer to compose animations between objects using graph functions that represent animation behavior. The animation design component 200 can be implemented in a variety of content generation applications, including applications for graphic design, artistic creation, and presentation. In the context of the interactive graphic design system ("IGDS 100") of FIGS. 1A-1C, the animation design component 200 represents the animation design component 128. In such a context, the animation design component 200 may be integrated with the rendering engine 120 or provided in other ways. However, while some examples provide for the animation design component 200 to be implemented as part of the IGDS 100, other embodiments provide for the animation design component 200 to be used with other types of applications in which a user can compose animations between selected content elements.

[0043] A user can interact with the animation design component 200 to specify and configure animations between objects or states (e.g., states of an object or collection of objects), where the desired animation reflects a transition between the objects, frames, or states. In an example, the states are provided by a set of variants that are rendered simultaneously on a canvas and linked in a manner that reflects a sequence, where the sequence represents different states of the designed functionality or interface. For example, in the context of the IGDS 100, a designer can create a series of frames (or variants) that are differentiated from one another by changes in certain properties, where each frame in the series reflects a state of the designed object (e.g., a functional user interface). Each frame corresponds, for example, to an object or combination of objects having a set of attributes (e.g., shape). A designer can use the animation design component 200 to create animations between a series of individual frames, where the purpose of the animation is to provide visual feedback to an end user of the user interface that reflects the occurrence of a state change. In an example, when the IGDS is operated in design mode, the frames can be static so that the designer can edit and update the objects. The designer can switch the mode to prototyping where the design being edited simulates a production environment. Thus, in prototyping mode, the design being edited is dynamically rendered or rendered in an animated form where specified frames of the design are rendered in a specified sequence. In this context, the IGDS 100 can include functionality to render animations for the design user to simulate an end user's experience. Further, in an example, animations can be provided for the transition of individual frames in a sequence.For example, the IGDS 100 can include prototyping capabilities, where the rendering engine 120 generates animations that reflect state changes as well as transition animations between states in a manner that simulates the end user's experience. Through this interaction, designers can view the end user's experience and make refinements to their design interfaces, if necessary.

[0044] In an example, the animation design component 200 may be provided as a tool panel or interface for a canvas on which a design or other content rendering is provided. A designer may interact with the animation design component 200 to specify input 201 to select objects, frames or states (which may include, for example, layers or variants) that will serve as start and end points for a desired animation. Thus, the selection input 201 may be provided in relation to content rendered on a canvas that a user is actively editing / updating. A user may also specify a trigger, such as a detectable event (e.g., end user input), to initiate the animation.

[0045] A designer can further interact with the animation design component 200 to provide input for configuring a desired transition animation between the selected start and end points. In an example, a user can provide configuration input through multiple input features of the animation design component 200. For example, the animation design component 200 can include menu features and other input mechanisms (collectively represented as settings 208) that allow a user to select predefined settings for a desired animation behavior. A user can make a settings selection 203 to identify a predefined set of properties for the type of animation desired for the selected start and end points (e.g., selection of a Bezier or easing curve, type of motion or effect to be produced by the animation, etc.).

[0046] In an example, the animation design component 200 can also allow a user to customize the animation behavior through user-specified values ​​that define the animation behavior. The animation design component 200 can also include a graph input component 210 that includes a graph functionality 212. The graph functionality 212 can include (i) logic to display a graph representing the current set of properties of the animation behavior, (ii) logic to process user input that directly manipulates the displayed graph to change the shape of the graph, and (iii) logic to modify properties of the animation behavior to reflect the changes in the graph.

[0047] In some examples, the graph functionality 212 can visually represent the animation behavior as a spring equation (e.g., spring force or motion). The graph input component 210 can express or define the animation behavior in terms of parametric values ​​of the equation (e.g., spring motion) of the graph provided by the graph functionality 212. For example, in the context of a spring equation, the animation behavior can be defined in terms of parametric values ​​reflecting properties such as mass, damping, stiffness, velocity, acceleration, etc. The graph input component 210 can include a parametric component 214 that calculates and displays a set of parametric values ​​for the current graph format provided by the graph functionality 212. The parametric values ​​can be displayed in a panel or area associated with the graph functionality 212.

[0048] As illustrated by the example, the graph functionality 212 can include a graph 215 (e.g., a line segment having a profile extending in the X and Y directions) that can be directly manipulated by input from a user. The manipulation defines properties of a desired animation behavior, which can be reflected by parametric values ​​that are calculated and rendered in an area associated with the graph functionality 212. The user's interaction with the graph, and the resulting changes to the properties of the animation behavior, can occur in real time. In this manner, the user can visualize the changes they make to the animation behavior with minimal distraction.

[0049] In an example, the graph functionality 212 can process graph input 205 from a user to change the shape or profile of the graph displayed. The graph input 205 can include input to select one or more points on the graph 215 and stretch or pull the points on the graph to change the profile of the graph in a particular way. The manner in which the graph 215 is changed in response to the graph input 205 can be based in part on an equation (e.g., spring force or motion) represented by the displayed graph. In an example, in the context of a spring equation, the graph 215 can represent the displacement of an object over time, with the graph reflecting one or more oscillations based on spring properties (e.g., stiffness, damping). The resulting animation can generate a change in direction as if one object were attached to a spring (e.g., like a weight on a spring). In this way, the characteristics of the object's movement can be defined by the properties reflected by the graph. As a spring equation, a user's manipulation of the graph in one place can change the shape of the graph in other places. For example, a user can increase the amplitude of the initial oscillation to reflect less damping. The graph provided by graph function 212 may incorporate smaller damping values ​​such that the remainder of the graph indicates additional and / or larger amplitude of downstream oscillations.

[0050] In some examples, the settings input 203 identifies an initial form of a graph to be rendered by the graph functionality 212. For example, the settings input 203 can select a spring equation (including spring properties) and preset values ​​for the spring equation. The graph functionality 212 can render the graph 205 for the user according to the preset values ​​and equation. For example, the graph functionality 212 can identify a setting of "gentle" or "bouncy," and in response to the settings input 203, the graph functionality 212 can generate an initial graph based on the preset values ​​associated with the settings.

[0051] The animation design component 200 can include an animation component 220 for determining an animation data set ("ADS 221") that defines an animation or animation composition for selected start and end points. The animation component 220 determines the ADS 221 based on calculated parametric values ​​225 resulting from the designer's manipulation of the graph 215. The ADS 221 can determine an easing curve, for example, between keyframes, to reflect the set of parametric values ​​225 generated from the user's interaction with the graph functionality 212.

[0052] In an example, the animation design component 200 associates the determined ADS 221 with the object, frame or state specified by the input 201. In some implementations, the animation design component 200 can store the ADS 221 as part of a workspace file in association with the specified object frame or state. Additionally, the ADS 221 can be used by the rendering process 235, such as may be executed by the rendering engine 120 when a prototyping mode is implemented. For example, the rendering engine 120 can execute the animation logic 127 based on the ADS 221 to render an animation in response to input from a designer, such as the designer selecting to operate a prototype program on a design element associated with the ADS 221. In addition or as a variation, the ADS 221 can be rendered with the associated object / state by the rendering engine 120, such as through a prototyping function that allows the designer to view the animation on the canvas on which the design is provided.

[0053] While some examples describe the graph functionality 212 generating the graph 215 based on an equation (e.g., a spring equation), in variations the graph can be manipulated by a user to change its shape, for example, using a curve fitting process. In such variations, a user can use a knob function or similar element to specify, for example, one or more peaks in the line graph 215, and the graph functionality can render the graph to match the user's input, using curve fitting. Additionally, while examples specifically mention a spring equation, in variations alternative equations can be used, including alternative equations that represent a physical system.

[0054] In an example, the animation design component 200 also includes a preview or feedback component 230. The component 230 can generate animation behavior that represents or otherwise indicates the animation behavior resulting from the configuration specified by the parametric values ​​225. For example, the component 230 can render a reference object, or multiple reference objects, that exhibit movement in a manner that reflects the parametric values ​​225. In an implementation, the reference objects can be generic or tailored to specific objects / states that represent the start and end points of the desired animation behavior.

[0055] methodology 2B illustrates a method for configuring animation behavior of a content element according to one or more embodiments. The method as illustrated by the example of FIG. 2B may be implemented on a user computing device that implements an animation design component that generates animation of a graphical content element rendered on a canvas. Accordingly, reference may be made to elements of FIGS. 1A-1C and 2A to indicate appropriate components for performing the described steps or sub-steps.

[0056] 2B, the computing device is operative to provide an interactive animation interface to a designer (250). The interactive animation interface includes manipulable graph functionality to enable the designer to configure animation behavior of the content rendering.

[0057] The computing device is further operative to generate animation behavior for the content rendering based on one or more user-specified parametric values ​​(252). EXAMPLES

[0058] Figures 3, 4A-4D, 5, and 6C show alternative examples of tool panels for implementing a graph input component according to one or more embodiments. Exemplary tool panels as described may be generated as part of a content rendering application, such as by the IGDS 100, as illustrated by Figures 1A-1C.

[0059] Referring to FIG. 3, a designer can interact with various features of a tool panel 300 to specify desired animation properties between selected objects, frames, or states as the start and end points of the animation.

[0060] The tool panel 300 includes functionality that allows a user to select animation settings and further specify the configuration of the animation. For example, a user may reflect functionality 301 to select a type of movement (e.g., the physical system represented by the animation), e.g., by selecting an animation type, and functionality 304 to specify a duration for the specified animation. Additionally or as a variation, the tool 300 may allow a user to select a Bezier or easing curve for the specified animation.

[0061] In the example, tool panel 300 provides a graph function 302 that includes a graph 315 that includes a line segment 310 and a knob 312. The line segment 310 can reflect properties of the current animation behavior. For example, the profile of the line segment 310 can reflect properties of a spring equation used to generate the animation behavior. In this manner, the shape of the line segment 310 can also visually represent the movement represented by the corresponding animation behavior.

[0062] In the example, knob 312 provides an example of an interactive component that can receive input (e.g., graph input 205) to manipulate line segment 310. User interaction can cause knob 312 to be moved or repositioned. Additionally, a user can provide a selection input to grab a point on line segment 310 before moving or repositioning knob 312. Grabbing and moving a point on line segment 310 also changes properties associated with line segment 310, distorting the line segment from its original profile to a new profile. Thus, for example, knob 312 can be moved in a position to cause the graph functionality to recalculate parametric values ​​for the graph's equation. The graph is rendered according to the new parametric values.

[0063] 4A-4D, a tool panel 400 includes a graph function 402 that receives input to directly manipulate a line segment 410 of a graph 415. In an example, the graph function 402 may provide a movable and / or positionable knob 412 that is displayed overlaid on the line segment 410. In some examples, a user may select a portion of the line segment 410, and the graph function 402 responds by providing a knob 412 that the user can move. A user may move the knob function 412 along the line segment 410 to change the profile of the line segment. For example, the knob 412 may be manipulated to grab the line segment 410 at a particular point and pull the line segment in the direction of the knob movement (which may be specified by the user providing input to drag the knob 412).

[0064] In the example, the line segment 410 can be modeled according to a spring force or equation of motion. Thus, when the knob 412 is moved vertically, the graph function 212 recalculates the spring properties used in the graph. The greater the amplitude of the initial oscillation, for example, the smaller the damping value of the spring equation. The initial displacement combined with the smaller spring value changes the entire line segment 410, forming additional oscillations downstream. Thus, the sharper (or narrower) the vertical curve formed by the knob 412 relative to the initial oscillation effect, the greater the amplitude of the subsequent oscillations, and the more likely the amplitudes will alternate. The resulting animation represented by the line segment 410 in the state can reflect a "bouncy" movement. Similarly, when the knob 412 is moved laterally (e.g., along the X-axis), the spring properties are recalculated to reflect a greater stiffness, and the resulting oscillations can be gentler (reflected by a wider area of ​​the oscillation curve). The resulting animation represented by the line segment 410 in the state can reflect a "soft" movement.

[0065] In an example where line segment 410 represents a spring force or motion model, manipulation of line segment 410 can reflect mass, spring stiffness, and spring damping. Additionally, as described in other examples, graph functionality 402 can calculate spring parameters of spring stiffness and damping given a particular mass and profile of line segment 410. Thus, as a user manipulates line segment 410 to change its profile, graph functionality 402 can continuously calculate and recalculate the spring parameters.

[0066] Referring to the example of FIG. 5, the tool panel 500 includes a graph function 502 that provides a graph 515 along with a set of parametric values 518 of a corresponding spring equation (e.g., mass, damping, and acceleration). In the example of FIG. 5, a plurality of knobs 512, 514 are provided so that the line segment 510 can be manipulated at multiple points. Moving the knobs 512, 514 changes the profile of the line segment 510 and the set of parametric values 518 is changed in real time. Thus, for example, when the user moves one or both of the knobs 512, 514 to change the line segment, the parametric values 518 representing the spring characteristics change continuously in real time.

[0067] The tool panel 500 can also include, for example, a panel 530 that visually shows or previews the characteristics of the resulting animation based on the parametric values 518 of the line segment 510. The panel 530 can include a dynamic visual indicator 532 that shows the animation specified by the current state of the line segment 510. The dynamic visual indicator 532 can be based on a set of common objects. Alternatively, the dynamic visual indicator 532 can be based on an object specified by the user for the animation. In the example, the dynamic visual indicator 532 can move in response to user input for adjusting the line segment 510, providing the user with real-time visual feedback regarding the change.

[0068] In some examples, the tool panel 500 can also include a menu function or other user interface function that allows the user to select animation settings. The settings can specify, for example, the type, behavior, or settings such as the type of animation. The selection of the settings can determine the line segment 510 in its initial state, and the user can provide further input to manipulate the line segment.

[0069] 6A-6C, the tool panel 600 includes a graph function 602 that displays a graph 615 having a set of parametric values ​​618. The graph 615 can be determined from a spring equation, and a line segment 610 of the graph 615 can be manipulated by a user. In FIG. 6A, the line segment 610 can reflect a setting of a type of animation selected by a user from another feature of the tool panel 600. FIG. 6B shows how the designer manipulates the line segment 610 by moving a knob 612 or other reference of the line segment 610 from the position shown in FIG. 6A to the position shown in FIG. 6B. The change in position of the knob 612 causes the line segment 610 to change according to the spring equation, and the parametric values ​​618 of the spring equation are shown next to the graph function 602. The parametric values ​​618 can change in real time in response to the manipulation of the line segment 610. Additionally, the duration of the animation can change automatically in response to the change in the parametric properties of the spring. For example, so that line segment 610 reflects a "bouncy" spring, the animation duration is extended to allow for an animation that reflects the bouncing behavior.

[0070] FIG 6C illustrates manipulating the length of a line segment 610 to change the duration of the spring effect (and animation behavior). In the example shown in FIG 6C, the length of the line segment 610 is shortened or lengthened by the user moving a point on the line segment horizontally (along the X direction). When the line segment 610 is shortened, the duration of the animation is shortened. Similarly, when the line segment 610 is lengthened, the duration of the animation is lengthened.

[0071] 6A-6C , panel 630 of tool panel 600 includes a graphic indicator of the animation resulting from line segment 610. In the illustrated example, the graphic indicator moves laterally within panel 630 to indicate one or more properties of the animation behavior produced by line segment 610. In the example, graphic indicator 632 moves within panel 630 in response to a user making adjustments to graph functionality 602, and can provide real-time feedback to the user regarding the nature of the changes.

[0072] In some examples, the line segment 610 can be manipulated by a user to associate a specified duration (e.g., 100 ms, 500 ms, etc.) with the displacement of the line segment 610. For example, the user can move the knob 612 to create a raised curve that represents the initial oscillation of an animation. The user can associate time intervals with specific points on the line segment to represent an animation that reflects the effect of a pullback and release.

[0073] In some examples, changing the duration of the animation can affect multiple spring properties, producing a spring animation that appears faster or slower (based on increasing or decreasing the duration). The user can interact with either the knob 612 or another interactive element provided with the graph function (e.g., the background of the graph).

[0074] 6A-6C, the parametric values ​​618 associated with the graph function 602 include spring characteristics such as stiffness, damping, and mass. The parametric values ​​618 may change based on, for example, the type of animation selected by the user. For example, the parametric values ​​618 may reflect spring equation parameters such as velocity (or initial velocity) and acceleration.

[0075] Network Computer System 7 illustrates a computer system on which one or more embodiments may be implemented. Computer system 700 may be implemented, for example, on a server or a combination of servers. For example, computer system 700 may be implemented as network computing system 150 of FIGS. 1A-1C.

[0076] In one implementation, computer system 700 includes processing resources 710, memory resources 720 (e.g., read only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 740, and a communication interface 750. Computer system 700 includes at least one processor 710 for processing information stored with memory resources 720, such as provided by random access memory (RAM) or other dynamic storage device, to store information and instructions executable by processor 710. Memory resources 720 may also be used to store temporary variables or other intermediate information during execution of instructions to be executed by processor 710.

[0077] The communications interface 750 allows the computer system 700 to communicate with one or more user computing devices through the use of a network link 780 (wireless or wired) over one or more networks (e.g., a cellular network). Using the network link 780, the computer system 700 can communicate with one or more computing devices, special purpose devices and modules, and / or one or more servers.

[0078] In an example, the processor 710 may execute service instructions 722 stored with the memory resources 720 to enable the network computing system to implement the network service 152 and operate as the network computing system 150 in an example such as that described with reference to Figures 1A-1C.

[0079] Computer system 700 may also include additional memory resources ("instruction memory 740") for storing executable instruction sets ("IGDS instructions 745") embedded in web pages and other web resources to enable user computing devices to implement functionality as described in IGDS100.

[0080] As such, the examples described herein relate to the use of computer system 700 to perform the techniques described herein. According to one aspect, the techniques are performed by computer system 700 in response to processor 710 executing one or more sequences of one or more instructions contained in memory 720. Such instructions may be read into memory 720 from another machine-readable medium. Execution of the sequences of instructions contained in memory 720 causes processor 710 to perform the process steps described herein. In alternative implementations, hardwired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Thus, the examples described are not limited to any specific combination of hardware circuitry and software.

[0081] User Computing Device 8 illustrates a user computing device for use in one or more examples as described. In examples, the user computing device 800 may correspond to, for example, a workstation, a desktop computer, a laptop, or other computer system having suitable graphics processing capabilities for rendering design interfaces and enabling graphic design work. In variants, the user computing device 800 may correspond to a mobile computing device such as a smartphone, a tablet computer, a laptop computer, a VR or AR headset device, etc.

[0082] In an example, computing device 800 includes a central or main processor 810, a graphics processing unit 812, memory resources 820, and one or more communication ports 830. Using the main processor 810 and memory resources 820, computing device 800 can store and launch a browser 825 or other web-based applications. A user can operate browser 825 to access a network site of network service 152 using communication port 830, whereupon one or more web pages or other resources 805 (see FIGS. 1A-1C) for network service 152 can be downloaded. Web resources 805 can be stored in active memory 824 (cache).

[0083] As described in various examples, the processor 810 can detect and execute scripts and other logic embedded in the web resources to implement the IGDS 100 (see FIGS. 1A-1C). In some examples, some of the scripts 815 embedded in the web resources 805 can include GPU accelerated logic executed directly by the GPU 812. The main processor 810 and the GPU can be combined to render an editing design interface ("DIUE 811") on the display component 840. The rendered design interface can include web content from the browser 825 and design interface content and functional elements generated by the scripts and other logic embedded in the web resources 805. By including scripts 815 that can be executed directly on the GPU 812, the logic embedded with the web resources 805 can better execute the IGDS 100, as described in various examples.

[0084] conclusion Although the embodiments are described in detail herein with reference to the accompanying drawings, it should be understood that the concept is not limited to those exact embodiments. Therefore, it is intended that the scope of the concept be defined by the following claims and their equivalents. Furthermore, it is contemplated that a particular feature described individually or as part of an embodiment can be combined with other individually described features or parts of other embodiments, even if the other features and embodiments do not refer to the particular feature. Thus, the absence of a description of a combination should not exclude the right to such a combination.

Claims

1. 1. A network computer system comprising: a memory subsystem storing an instruction set; one or more processors operative to communicate said instruction set to one or more user devices; Equipped with The set of instructions, when executed by each of the one or more user devices, causes the user device to: generating an interactive animation interface with graph functionality including a graph visually representing the animation behavior of content rendering; receiving user input that directly manipulates the graph to change its shape; and In response to a change in the shape of the graph, modifying the animation behavior to reflect changes due to the changed shape of the graph. [0033] comprising instructions to perform operations including: Network computer system.

2. 2. The networked computer system of claim 1, wherein said actions include generating said animation behavior of said content rendering based on one or more parametric values ​​specified by said user input.

3. 3. The networked computer system of claim 2, wherein said graphing facility is operable by said user to allow said user to specify at least two parametric values ​​that at least partially define said animation behavior.

4. 2. The network computer system of claim 1, wherein the animation behavior is based at least in part on spring equations.

5. The network computer system of claim 1, wherein the content rendering includes one or more design elements, and the animation behavior is reflected by the one or more design elements during prototyping mode.

6. The network computer system of claim 2, wherein the one or more parametric values ​​represent one or more characteristics of spring motion, the one or more characteristics including stiffness, damping, mass, initial velocity and acceleration.

7. 2. The network computer system of claim 1, wherein generating the interactive animation interface includes generating a knob associated with a line segment of the graph function, the knob being movable to affect a profile of the line segment, and the one or more characteristics being based at least in part on the profile.

8. The operation is continuously varying the profile of the line segment based on movement of the knob in one or more directions; continuously determining one or more parametric values ​​based on the profile of the line segment; 8. The network computer system of claim 7, comprising:

9. The operation is continuously displaying said one or more parametric values ​​in conjunction with said graph function; 9. The network computer system of claim 8, comprising:

10. A non-transitory computer-readable medium storing instructions, comprising: When executed by one or more processors of a computing device, the computing device: Creating an interactive animation interface the interactive animation interface includes a graph function operable to allow a user to configure the animation behavior of the content rendering by specifying one or more parametric values. Non-transitory computer-readable medium.

11. The non-transitory computer-readable medium of claim 10 , wherein the actions include generating the animation behavior of the content rendering based on the one or more parametric values ​​specified by the user.

12. The non-transitory computer-readable medium of claim 10 , wherein the graphing functionality is operable by the user to allow the user to specify at least two parametric values ​​that at least partially define the animation behavior.

13. The non-transitory computer-readable medium of claim 10 , wherein the graph function is based on a spring equation.

14. The non-transitory computer-readable medium of claim 13 , wherein the one or more parametric values ​​represent one or more characteristics of spring motion.

15. The non-transitory computer-readable medium of claim 14 , wherein the one or more properties include stiffness, damping, mass, initial velocity, and acceleration.

16. 11. The non-transitory computer-readable medium of claim 10, wherein generating the interactive animation interface includes generating a knob associated with a line segment of the graph function, the knob being movable to affect a profile of the line segment, and the one or more characteristics being based at least in part on the profile.

17. The operation is continuously varying the profile of the line segment based on movement of the knob in one or more directions; continuously determining the one or more parametric values ​​based on the profile of the line segment; 20. The non-transitory computer-readable medium of claim 16, comprising:

18. The operation is continuously displaying said one or more parametric values ​​in conjunction with said graph function; 20. The non-transitory computer-readable medium of claim 17, comprising:

19. 1. A method of operating a computing device, the method including one or more processors; 1. A method comprising: providing instructions to cause a computing device to perform operations including generating an interactive animation interface, the interactive animation interface including a graph function operable to allow a user to specify one or more parametric values ​​to configure animation behavior of content rendering.

20. The method of claim 19 , further comprising generating the animation behavior of the content rendering based on the one or more parametric values ​​specified by the user.

Images