Track animation generation method and device

Abstract

The embodiment of the invention discloses a trajectory animation generation method and device, and the method comprises the steps: obtaining trajectory data which comprises a target object and a position point; instantiating a target object in the trajectory data to obtain a corresponding document object model (DOM) element instance; generating a track set corresponding to the element instance according to the position point; based on the track set, rendering a DOM element instance through a cascading style sheet (CSS) to generate a plurality of animation frames; and generating a track animation by using the plurality of animation frames. According to the method and the device, the animation frame is rendered by using the browser by means of CSS and DOM technologies, so that the rendering pressure of a CPU is relieved, and the display effect of the track animation is improved.

Description

Technical Field

[0001] The present application relates to the technical field of vehicle networking, and in particular to a method and device for generating trajectory animation. Background Art

[0002] In the field of Internet of Vehicles, the client of map application services needs to display the running tracks of social vehicles and networked vehicles. The display effect of the track plays a relatively important role for both users and algorithm debugging. For the client interface, the track needs to show the running effect that is in line with people's objective cognition and acceptable. For algorithm debugging, it is necessary to reflect the real state of the data in the visualization as accurately as possible.

[0003] However, when generating trajectory animation, the existing map application service clients (such as Mapbox) use the method of dynamically updating layer data and using the rendering mechanism of the map application service client itself to display the animation effect. Due to the particularity of trajectory data, it has the characteristics of high-frequency refresh, which brings great rendering pressure to the client and makes it difficult to visualize the trajectory. Summary of the invention

[0004] The present application provides a trajectory animation generation method to ease the rendering pressure of the client of the map application service.

[0005] This application provides the following solutions:

[0006] According to a first aspect, a trajectory animation generation method is provided, the method comprising: acquiring trajectory data, the trajectory data comprising a target object and a position point; instantiating the target object in the trajectory data to obtain a corresponding document object model DOM element instance; generating a trajectory set corresponding to the element instance according to the position point; based on the trajectory set, rendering the DOM element instance through a cascading style sheet CSS to generate multiple animation frames; and generating a trajectory animation using the multiple animation frames.

[0007] According to an achievable method in an embodiment of the present application, the instantiation of the target object in the trajectory data to obtain the corresponding DOM element instance includes: obtaining a cached instance set, the instance set including multiple DOM element instances and object types corresponding to the DOM element instances; if there is no DOM element instance of the same object type corresponding to the target object in the instance set, then generating a corresponding DOM element instance for the object type of the target object, and storing the generated DOM element instance and the object type in the instance set in correspondence; otherwise, the DOM element instance of the same object type corresponding to the target object in the instance set is used for the target object.

[0008] According to an achievable manner in an embodiment of the present application, the method further includes: storing the generated multiple animation frames into a data cache; generating a trajectory animation using the multiple animation frames includes: reading animation frames from the data cache to generate a trajectory animation based on a set frame rate.

[0009] According to an achievable method in an embodiment of the present application, generating a trajectory set corresponding to the element instance based on the position point includes: if the distance difference between the position point and the previous position point is greater than or equal to a distance threshold, generating an interpolated position point between the position point and the previous position point through a geographic database; and generating a trajectory set based on the position point and the interpolated data point.

[0010] According to an achievable method in an embodiment of the present application, generating an interpolation position point between the position point and the previous position point through a geographic database further includes: if the angle difference between the position point and the previous position point is greater than or equal to an angle threshold, generating angle change interpolation data for the interpolation position point.

[0011] According to an achievable manner in an embodiment of the present application, the method further includes: generating animation frames based on the most recently acquired trajectory data; if there are animation frames for which trajectory animation has not been generated in the cached data, terminating the generation of the trajectory animation; after clearing the data cache, storing the animation frames generated based on the most recently acquired trajectory data in the data cache and resuming the generation of the trajectory animation.

[0012] According to an implementable manner in an embodiment of the present application, the method further includes: when generating a current animation frame, reading a previous animation frame of the current animation frame from the data cache; comparing the differences between the element instances and the trajectory points of the previous animation frame and the current animation frame; and generating the current animation frame based on the differences and the previous animation frame.

[0013] According to a second aspect, a trajectory animation generating device is provided, the device comprising: a trajectory data acquiring unit, configured to acquire trajectory data, the trajectory data comprising a target object and a position point; an element instantiation unit, configured to instantiate the target object in the trajectory data to obtain a corresponding DOM element instance; a trajectory set generating unit, configured to generate a trajectory set corresponding to the element instance according to the position point, the trajectory set comprising one or more trajectory points; an animation frame generating unit, configured to render the DOM element instance based on the trajectory set through CSS to generate multiple animation frames; and a trajectory animation generating unit, configured to generate a trajectory animation using the multiple animation frames.

[0014] According to a third aspect, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the steps of any one of the methods described in the first aspect are implemented.

[0015] According to a fourth aspect, an electronic device is provided, comprising: one or more processors; and a memory associated with the one or more processors, the memory being used to store program instructions, and the program instructions, when read and executed by the one or more processors, execute the steps of any one of the methods described in the first aspect.

[0016] According to the specific embodiments provided in this application, this application discloses the following technical effects:

[0017] 1) This application instantiates the target object in the trajectory data to obtain the corresponding DOM (Document Object Model) element, and then uses CSS (Cascading Style Sheets) to render the element instance according to the trajectory set to generate a frame animation. This application uses CSS and DOM technology to render animation frames using a browser, which greatly alleviates the rendering pressure of the client of the map application service, improves the generation efficiency of the animation frame, and can fully utilize the rendering capabilities of the browser to improve the display effect of the trajectory animation.

[0018] In addition, rendering with CSS and DOM technology enables the browser to trigger the rendering capabilities of the GPU, thereby sharing part of the CPU's computing pressure and saving CPU resources.

[0019] 2) This application maintains the DOM element instances of each object type by setting a cached instance set. When instantiating the target object, if the target object is of the same type as the DOM element instance in the cached instance set, the cached DOM element instance is used, thereby improving the efficiency of instantiation. In addition, since the characteristics of the target object in the trajectory animation are stable within a certain period of time, and only the position changes, the target object is expressed using the cached instance set, and there is no need to recalculate each time. Only the corresponding position needs to be updated through CSS, thereby saving computing resources.

[0020] 3) The present application generates trajectory animation by reading animation frames from cached data according to a preset frame rate, which can save computing resources while meeting the actual trajectory animation quality; further, the number of interpolation position points of the trajectory data is determined based on the frame rate, thereby advancing the animation control logic and reducing the amount of calculation for subsequent animation generation.

[0021] 4) When the distance between adjacent position points is large, the present application generates interpolation position points using a geographic database, and generates angle interpolation data for the interpolation position points when the angle change between adjacent position points is large, so that the trajectory change between animation frames is smoother and the generated trajectory animation is close to the actual trajectory effect.

[0022] 5) This application generates animation frames based on the latest acquired trajectory data, discards trajectory data for which animation frames have not been generated, stores data cache based on animation frames generated based on the latest acquired trajectory data, and resumes generation of trajectory animation, thereby achieving real-time display of trajectory data.

[0023] 6) This application improves the efficiency of animation frame generation by comparing the differences between the element instances and trajectory points of the previous animation frame and the current animation frame, and generating the current animation frame based on the differences and the previous animation frame.

[0024] Of course, any product implementing the present application does not necessarily need to achieve all of the advantages described above at the same time. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0026] Figure 1 A system architecture diagram applicable to the embodiments of the present application;

[0027] Figure 2 A step diagram of a trajectory animation generation method provided in an embodiment of the present application;

[0028] Figure 3 A flowchart of a trajectory animation generation method provided in an embodiment of the present application;

[0029] Figure 4 A structural block diagram of a trajectory animation generating device provided in an embodiment of the present application;

[0030] Figure 5 A schematic block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0031] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0032] The terms used in the embodiments of the present invention are only for the purpose of describing specific embodiments, and are not intended to limit the present invention. The singular forms "a", "said" and "the" used in the embodiments of the present invention and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings.

[0033] It should be understood that the term "and / or" used in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0034] The word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrases "if it is determined" or "if (stated condition or event) is detected" may be interpreted as "when it is determined" or "in response to determining" or "when detecting (stated condition or event)" or "in response to detecting (stated condition or event)", depending on the context.

[0035] There are already some track visualization technologies. For example, the Mapbox map design client can dynamically update layer data in real time to display animations, and Mapbox can be used to generate track animations. However, in Mapbox's rendering mechanism, the high frequency of track data updates results in a large amount of data calculation required. Mapbox uses the framework's own rendering mechanism to update map elements, resulting in CPU resource utilization that remains above 90% for a long time, with a peak of 100%, reducing the availability of the Mapbox map design platform to generate track animations.

[0036] In view of this, the present application provides a new idea. In order to facilitate the understanding of the present application, the system architecture on which the present application is based is first described. Figure 1 An exemplary system architecture to which the embodiments of the present application can be applied is shown. Figure 1 As shown in , the system architecture may include: a user device and a trajectory animation generating device deployed on the user device.

[0037] The server sends the trajectory data to the trajectory animation generating device of the client, and can obtain the vehicle's trajectory data from other services on the server. For example, other services on the server can collect the vehicle's location information at regular intervals, thereby forming the vehicle's trajectory data and storing it on the server. After the trajectory animation generating device performs trajectory generation, it obtains the trajectory animation, which is displayed to the user by the user device.

[0038] Among them, user devices may include but are not limited to: smart mobile terminals, smart home devices, wearable devices, PC (Personal Computer), etc. Among them, smart mobile devices may include mobile phones, tablet computers, laptops, PDAs (Personal Digital Assistants), Internet cars, etc. Smart home devices may include smart TVs, smart refrigerators, etc. Wearable devices may include smart watches, smart glasses, virtual reality devices, augmented reality devices, mixed reality devices (i.e. devices that can support virtual reality and augmented reality), etc. User devices may also include trajectory data acquisition devices, such as vehicle recorders, road sensing devices, etc. In addition Figure 1 In addition to the illustrated architecture, the trajectory data generating device may also be disposed on a computer terminal with strong computing capability.

[0039] Figure 2 This is a flow chart of a trajectory animation generation method provided in an embodiment of the present application. The method can be performed by Figure 1 The trajectory animation generating device in the system shown is executed. Figure 2 As shown in , the method may include the following steps:

[0040] Step 201: Acquire trajectory data, where the trajectory data includes a target object and a location point.

[0041] Step 202: instantiate the target object in the trajectory data to obtain a corresponding document object model DOM element instance.

[0042] Step 203: Generate a trajectory set corresponding to the element instance according to the position point.

[0043] Step 204 : Based on the trajectory set, the DOM element instance is rendered by a cascading style sheet CSS to generate a plurality of animation frames.

[0044] Step 205: Generate a trajectory animation using multiple animation frames.

[0045] As can be seen from the above process, this application instantiates the target object in the trajectory data to obtain the corresponding DOM (Document Object Model) element, and then uses CSS (Cascading Style Sheets) to render the element instance according to the trajectory set to generate a frame animation. This application uses CSS and DOM technology to render animation frames using the browser, which greatly alleviates the rendering pressure of the client of the map application service, improves the generation efficiency of the animation frame, and can fully utilize the rendering capabilities of the browser to improve the display effect of the trajectory animation.

[0046] First, the above step 201, namely "obtaining trajectory data, the trajectory data including the target object and the location point", is described in detail in conjunction with the embodiment.

[0047] The trajectory data records the location information of the vehicle, and the trajectory data can be obtained from a variety of channels, for example, collecting real-time data through sensors installed on the vehicle, and collecting trajectory information through the user's mobile phone GPS data through mobile applications. The trajectory data can be in a variety of formats, and the data format is related to the data acquisition device, data storage method, data transmission method, etc., and is not specifically limited here.

[0048] The trajectory data may be data acquired in real time by the trajectory acquisition device. For example, a channel for acquiring real-time trajectory data may be established through the websocket protocol, and the trajectory acquisition device may send the trajectory data to the trajectory animation generation device in real time through the data channel. The trajectory data may also be data pre-collected and stored by the trajectory acquisition device, and the trajectory animation generation device may call the trajectory data when it needs to generate the trajectory animation.

[0049] Preferably, after obtaining the trajectory data, the trajectory animation generating device can filter the trajectory data and select the trajectory data within the current view range, thereby avoiding unnecessary calculations. When a user views a map, the current view has a visible range, and this range can be defined by longitude and latitude coordinates. These boundaries typically include the coordinates of the northwest corner (upper left corner) and the southeast corner (lower right corner). The present application can determine the current view range through Mapbox, which can be represented by longitude and latitude boundaries, filter the trajectory data based on the view range, and delete the trajectory data outside the view range, thereby avoiding unnecessary calculations.

[0050] The content of trajectory data includes target objects and location points. The target object is a moving object such as a vehicle or pedestrian whose trajectory needs to be displayed. The location point refers to the location of the target object at the time of trajectory collection. The location point can be represented by parameters such as longitude and latitude, road code, etc. In trajectory data, one target object usually corresponds to one or more location points.

[0051] The above step 202, namely "instantiating the target object in the trajectory data to obtain a corresponding document object model DOM element instance" is described in detail below in conjunction with the embodiments.

[0052] Instantiating a target object refers to the process of creating a DOM element for the target object. DOM is a programming interface for HTML and XML documents. It structures web pages into a tree structure consisting of nodes and objects (such as elements, attributes, and even text and comments), allowing programs to dynamically access and update the content, structure, and style of documents through scripts. DOM elements can be created directly through the API provided by the browser. DOM elements can contain text content or other elements, which will be rendered and displayed to the user when the web page is loaded. By obtaining the DOM element instance corresponding to the target object, the target object can be displayed to the user on the web page.

[0053] The present application instantiates the target object in the trajectory data to obtain the corresponding document object model DOM element instance, which can be implemented in a variety of ways, for example, by traversing the trajectory data array, using document.createElement to create new DOM elements, and then using methods such as appendChild or insertBefore to add them to the appropriate location of the page; or when using modern front-end frameworks such as React, Vue or Angul ar, DOM elements can be instantiated through components or instructions.

[0054] Figure 3 A flow chart of a trajectory animation generation method provided in an embodiment of the present application, such as Figure 3 As shown, the present application can generate DOM element instances in real time according to the target object in the trajectory data, or it can generate DOM element instances using a cached instance set. Specifically, a cached instance set is obtained, and the instance set includes multiple DOM element instances and object types corresponding to the DOM element instances; if there is no DOM element instance of the same object type as the target object in the instance set, then a corresponding DOM element instance is generated for the object type of the target object, and the generated DOM element instance and the object type are stored in the instance set; otherwise, a DOM element instance of the same object type as the target object in the instance set is used for the target object. Among them, the object type of the DOM element is used to mark the type of the target object to which it corresponds, such as vehicle type, pedestrian, etc.

[0055] The above step 203, namely "generating a trajectory set corresponding to the element instance according to the position point", is described in detail below in conjunction with an embodiment.

[0056] The track set includes one or more track points, which are used to represent the position of the corresponding element instance when the animation frame is generated later. The track point is obtained based on the position point. When the data format of the position point does not meet the requirements of position representation when generating animation frames, the position point data is standardized, format converted, data extracted, and other processing operations are performed to obtain the track point.

[0057] As an implementable method, when generating a trajectory set, if the distance between two adjacent position points is too large, for the continuity of the animation, a point can be added between the two adjacent position points. Specifically, if the distance difference between a position point and a previous position point is greater than or equal to a distance threshold, an interpolated position point between the position point and the previous position point is generated through a geographic database; and a trajectory set is generated based on the position point and the interpolated position point.

[0058] More specifically, you can use the Turf geodatabase to generate tween location points. Turf is a JavaScript library for analyzing and processing geospatial data. It provides a large number of functions to process geospatial data, such as calculating distance, area, aggregating data, creating heat maps, etc. It is mainly used in geographic information systems (GIS) and map-related applications, and can be integrated with map services such as Mapbox, Leaflet, etc.

[0059] Preferably, when generating interpolation position points, the present application can generate angle change interpolation data for the interpolation position points. When generating animation frames, the display angle of the DOM element instance at the interpolation position point can be controlled by the angle data, so that the movement of the element instance between frames is smoother and more visual. Specifically, if the angle difference between the position point and the previous position point is greater than or equal to the angle threshold, angle change interpolation data is generated for the interpolation position point. After using Turf to generate the interpolation position points, Tween can be used to output the angle data corresponding to the interpolation position points that conform to the frame frequency. Tween is a lightweight JavaScript library for creating smooth tween animations on web pages. When displaying the position of data points changing over time on a map, Tween can be used to add animation effects to these interpolation position points. Among them, the number of interpolation position points can be determined based on the frame rate, and the frame rate is to read the animation frames to generate trajectory animations.

[0060] The above step 204, namely "rendering the DOM element instance through the cascading style sheet CSS based on the trajectory set to generate multiple animation frames" is described in detail below in conjunction with the embodiments.

[0061] CSS is a language used to control the style and layout of web pages. It can separate the content of a web page (HTML) from its presentation (such as fonts, colors, spacing, etc.), making web design more flexible and dynamic. This application renders DOM element instances through CSS to generate multiple animation frames. In each animation frame, by writing CSS styles for DOM elements, its initial state and style changes during the animation process are defined. CSS classes are used to control the display mode of elements, such as position, size, color, etc., where the position of DOM elements is set according to the position of the track points in the track set. DOM element instances are rendered using CSS by the browser.

[0062] In the present application, the generated multiple animation frames can also be stored in the data cache, and new animation frames can be generated based on the animation frames in the cache. Specifically, when generating the current animation frame, the previous animation frame of the current animation frame is read from the data cache; the differences in element instances and trajectory points between the previous animation frame and the current animation frame are compared, and the current animation frame is generated based on the differences and the previous animation frame. For example, if the current animation frame has one less DOM element than the previous animation frame, the DOM element in the previous animation frame is removed to generate the current animation frame. For another example, if the DOM elements of the current animation frame are the same as those of the previous animation frame, and only the trajectory points of some DOM elements have changed, the position information corresponding to the part of DOM elements in the previous animation frame is modified to generate the current animation frame.

[0063] Since the characteristics of the target object in the trajectory animation are stable within a certain period of time and only the position changes, the target object is expressed using the DOM element instance in the cached instance set. It does not need to be recalculated each time, and only the corresponding position needs to be updated through CSS, which reduces a lot of repeated calculations, thereby saving computing resources and improving efficiency.

[0064] In practical applications, in most cases, the generation frequency of animation frames is close to the acquisition frequency of trajectory data. However, due to various factors, there are situations where the time interval for the trajectory animation generation device to obtain trajectory data is not fixed. In order to display the trajectory animation in real time, in this application, if there is trajectory data for which no animation frames have been generated, animation frames are generated based on the latest acquired trajectory data. If there are animation frames for which no trajectory animation has been generated in the cached data, the generation of the trajectory animation is terminated. After clearing the data cache, the animation frames generated based on the latest acquired trajectory data are stored in the data cache and the generation of the trajectory animation is resumed.

[0065] The present application also provides an invalid data determination mechanism. Due to the inherent stability of trajectory data transmission, if a DOM element is lost once in a single data, or there is a DOM element recognition error in the trajectory data, the relevant invalid data is allowed to be retained for one animation frame rendering update cycle.

[0066] In this application, the rendering of element instances uses CSS and DOM technology, so that the browser can trigger the rendering capability of the GPU, thereby sharing part of the computing pressure of the CPU and saving CPU resources.

[0067] The above step 204, namely "generating a trajectory animation using multiple animation frames", is described in detail below in conjunction with an embodiment.

[0068] The present application can directly display the generated animation frames to form a trajectory animation. All the generated animation frames can be used to generate the trajectory animation. However, in practical applications, the generation rate of the animation frames is often greater than the frame rate required for the actual trajectory animation. The key frames in the animation frames can be selected to generate the trajectory animation. As a specific implementation, the animation frames can be read from the data cache to generate the trajectory animation according to the set frame rate. Preferably, the frame rate can be set to 60Hz.

[0069] The above method of the present application can visualize the trajectory and display the trajectory of moving objects (such as vehicles, aircraft, etc.) on a map or geographic information system. This method can be applied to a variety of fields: to display traffic flow and direction, to help city planners or traffic managers understand traffic conditions; to provide logistics companies with a visual trajectory of vehicle transportation, so that customers can track the location of goods in real time; to display the vehicle's driving route and historical trajectory in the in-vehicle navigation system; to display the distribution of vehicles and user usage in shared cars or shared bicycles platforms, etc.

[0070] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0071] According to an embodiment of another aspect, a trajectory animation generating device is provided. Figure 4 A schematic block diagram of a trajectory animation generating device according to an embodiment is shown, wherein the device is arranged at Figure 1 The server side of the architecture shown in Figure 1. Figure 4 As shown, the device 400 includes:

[0072] The trajectory data acquisition unit 401 is configured to acquire trajectory data, where the trajectory data includes a target object and a location point.

[0073] The element instantiation unit 402 is configured to instantiate the target object in the trajectory data to obtain a corresponding DOM element instance.

[0074] The trajectory set generating unit 403 is configured to generate a trajectory set corresponding to the element instance according to the position point.

[0075] The animation frame generating unit 404 is configured to render the DOM element instance through CSS based on the trajectory set to generate multiple animation frames.

[0076] The trajectory animation generating unit 405 is configured to generate a trajectory animation using a plurality of animation frames.

[0077] As one of the achievable methods, the element instantiation unit 402 can be configured to: obtain a cached instance set, the instance set including multiple DOM element instances and object types corresponding to the DOM element instances; if there is no DOM element instance of the same object type corresponding to the target object in the instance set, generate a corresponding DOM element instance for the object type of the target object, and store the generated DOM element instance and the object type in the instance set; otherwise, use the DOM element instance of the same object type corresponding to the target object in the instance set for the target object.

[0078] As one of the implementable ways, the generated multiple animation frames are stored in a data cache; the trajectory animation generating unit 405 can be configured to: read the animation frames from the data cache to generate the trajectory animation according to the set frame rate.

[0079] As one of the implementable ways, when the trajectory set generating unit 403 generates the trajectory set corresponding to the element instance according to the position point, it can be configured as follows: if the distance difference between the position point and the previous position point is greater than or equal to the distance threshold, then an interpolation position point between the position point and the previous position point is generated through the geographic database; and a trajectory set is generated according to the position point and the interpolation data point.

[0080] As one of the implementable ways, when the trajectory set generating unit 403 generates an interpolation position point between a position point and a previous position point through a geographic database, it can be configured to generate angle change interpolation data for the interpolation position point if the angle difference between the position point and the previous position point is greater than or equal to an angle threshold.

[0081] As one of the achievable methods, the animation frame generation unit 404 may be configured to generate animation frames based on the latest acquired trajectory data; if there are animation frames for which trajectory animation has not been generated in the cached data, the generation of the trajectory animation is terminated; after clearing the data cache, the animation frames generated based on the latest acquired trajectory data are stored in the data cache and the generation of the trajectory animation is resumed.

[0082] As one of the implementable methods, the animation frame generation unit 404 can be configured to: when generating the current animation frame, read the previous animation frame of the current animation frame from the data cache; compare the differences in element instances and trajectory points between the previous animation frame and the current animation frame; and generate the current animation frame based on the differences and the previous animation frame.

[0083] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is merely schematic, in which the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative work.

[0084] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0085] In addition, an embodiment of the present application further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of any one of the methods in the aforementioned method embodiments are implemented.

[0086] And an electronic device, comprising:

[0087] one or more processors; and

[0088] A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of the aforementioned method embodiments.

[0089] The present application also provides a computer program product, including a computer program, which implements the steps of any one of the methods in the aforementioned method embodiments when executed by a processor.

[0090] in, Figure 5 The architecture of the electronic device is shown as an example, which may include a processor 510, a video display adapter 511, a disk drive 512, an input / output interface 513, a network interface 514, and a memory 520. The processor 510, the video display adapter 511, the disk drive 512, the input / output interface 513, the network interface 514, and the memory 520 may be communicatively connected via a communication bus X30.

[0091] The processor 510 may be implemented by a general-purpose CPU, a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, etc., and is used to execute relevant programs to implement the technical solutions provided in this application.

[0092] The memory 520 can be implemented in the form of ROM (Read On ly Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 520 can store an operating system 521 for controlling the operation of the electronic device 500, and a basic input and output system (BIOS) 522 for controlling the low-level operation of the electronic device 500. In addition, a web browser 523, a data storage management system 524, and a trajectory animation generating device 525, etc. can also be stored. The above-mentioned trajectory animation generating device 525 can be an application program that specifically implements the operations of the aforementioned steps in the embodiment of the present application. In short, when the technical solution provided in the present application is implemented by software or firmware, the relevant program code is stored in the memory 520 and is called and executed by the processor 510.

[0093] The input / output interface 513 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0094] The network interface 514 is used to connect to a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WI FI, Bluetooth, etc.).

[0095] The bus 530 comprises a pathway for transmitting information between the various components of the device (eg, the processor 510, the video display adapter 511, the disk drive 512, the input / output interface 513, the network interface 514, and the memory 520).

[0096] It should be noted that, although the above device only shows a processor 510, a video display adapter 511, a disk drive 512, an input / output interface 513, a network interface 514, a memory 520, a bus 530, etc., in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include components necessary for implementing the solution of the present application, and does not necessarily include all the components shown in the figure.

[0097] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application can be essentially or partly contributed to the prior art in the form of a computer program product, which can be stored in a storage medium such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in the various embodiments of the present application or certain parts of the embodiments.

[0098] The technical solution provided by the present application is described in detail above. The principle and implementation method of the present application are described in detail using specific examples. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. At the same time, for those skilled in the art, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as limiting the present application.

Claims

1. A trajectory animation generation method, characterized in that: The method comprises: Acquiring trajectory data, wherein the trajectory data includes a target object and a location point; Instantiating the target object in the trajectory data to obtain a corresponding document object model DOM element instance; Generate a trajectory set corresponding to the element instance according to the position point; Based on the trajectory set, the DOM element instance is rendered through a cascading style sheet CSS to generate a plurality of animation frames; A trajectory animation is generated using the plurality of animation frames.

2. The method according to claim 1, characterized in that The instantiating the target object in the trajectory data to obtain a corresponding DOM element instance includes: Obtain a cached instance set, where the instance set includes multiple DOM element instances and object types corresponding to the DOM element instances; If there is no DOM element instance of the same object type as that corresponding to the target object in the instance set, a corresponding DOM element instance is generated for the object type of the target object, and the generated DOM element instance and the object type are stored in the instance set in correspondence; otherwise, a DOM element instance of the same object type as that corresponding to the target object in the instance set is adopted for the target object.

3. The method according to claim 1, characterized in that The method further comprises: storing the generated plurality of animation frames into a data cache; Generating the trajectory animation using the multiple animation frames includes: reading the animation frames from the data cache to generate the trajectory animation according to a set frame rate.

4. The method according to claim 3, characterized in that Generating a trajectory set corresponding to the element instance according to the position point includes: If the distance difference between the position point and the previous position point is greater than or equal to the distance threshold, generating an interpolation position point between the position point and the previous position point through a geographic database; A trajectory set is generated according to the position points and the interpolation data points.

5. The method according to claim 4, characterized in that The step of generating an interpolation position point between the position point and the previous position point through a geographic database further comprises: If the angle difference between the position point and the previous position point is greater than or equal to the angle threshold, angle change interpolation data is generated for the interpolation position point.

6. The method according to claim 3, characterized in that The method further includes: generating an animation frame according to the latest acquired trajectory data, terminating the generation of the trajectory animation if there is an animation frame for which the trajectory animation has not been generated in the cached data, and after clearing the data cache, storing the animation frame generated according to the latest acquired trajectory data in the data cache and resuming the generation of the trajectory animation.

7. The method according to claim 3, characterized in that The method further comprises: When generating the current animation frame, reading the previous animation frame of the current animation frame from the data cache; Comparing the differences between the element instance and the trajectory point between the previous animation frame and the current animation frame; A current animation frame is generated according to the difference and the previous animation frame.

8. A trajectory animation generating device, characterized in that: The device comprises: A trajectory data acquisition unit is configured to acquire trajectory data, wherein the trajectory data includes a target object and a location point; An element instantiation unit, configured to instantiate the target object in the trajectory data to obtain a corresponding DOM element instance; A trajectory set generating unit, configured to generate a trajectory set corresponding to the element instance according to the position point; An animation frame generating unit is configured to render the DOM element instance through CSS based on the trajectory set to generate a plurality of animation frames; The trajectory animation generating unit is configured to generate a trajectory animation using the plurality of animation frames.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

10. An electronic device, characterized in that: include: one or more processors; as well as A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of claims 1 to 7.

Images