Line animation drawing method and device, storage medium and electronic device

Abstract

The embodiment of the invention discloses a line animation drawing method and device, a storage medium and an electronic device. The method comprises the following steps of obtaining drawing parameters input into canvas of a current browsed page, wherein the drawing parameters comprise line starting point coordinates, line terminal point coordinates and drawing duration; dividing the drawing duration into a plurality of moments based on a set time interval; and drawing a moving point at the starting point coordinate, and drawing a line animation of the moving point moving from the line starting point coordinate to the line terminal point coordinate frame by frame based on the line starting point coordinate, the line terminal point coordinate and the plurality of moments. By the adoption ofthe method and device, the line animation can be drawn on the canvas created in the webpage directly based on the input drawing parameters, and the controllable line animation can be generated conveniently and flexibly.

Description

technical field [0001] The invention relates to the technical field of computers, in particular to a line animation drawing method and its equipment, storage medium, and electronic equipment. Background technique [0002] With the development of computer and network technology, the content of web pages is constantly enriched, and the display effect is also continuously enhanced. In the process of web browsing, animation effects are often included, such as the network attack flying line animation for Security Situation Awareness (SSA) . [0003] Some traditional web page animation generation methods use DOM nodes plus Cascading Style Sheets (CSS) animations. Because a large number of DOM nodes and DOM node operations are involved, the page will be redrawn and rearranged, and the CSS animation process is uncontrollable. ; Some use gif images, which take up a lot of space, take a long time to load, and cannot control the animation state. Therefore, the line animation in the p...

AI Technical Summary

Problems solved by technology

[0003] Some traditional web page animation generation methods use DOM nodes plus cascading style sheet (Cascading StyleSheets, CSS) animation. Since a large number of DOM nodes and DOM node operations are involved, It will cause page redrawing and rearrangement, and the CSS animation process is uncontrollable; some use gif images, gif images take up a lot of space, take a long time to load, and cannot control the animation state

Therefore, the line animation in the prior art has the technical problem of uncontrollable drawing

Images