Unlock instant, AI-driven research and patent intelligence for your innovation.

Systems and methods for authoring cross-browser HTML 5 motion path animation

A cross-browser, animation technology, applied to a certain tolerance and at the same time minimizing the storage field, can solve problems such as increasing the overhead of loading web pages and not providing performance guarantees

Active Publication Date: 2019-09-13
GOOGLE LLC
View PDF8 Cites 6 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

Users wishing to create cross-browser motion path animations must rely on JavaScript libraries, which add overhead to loading web pages and do not provide the same runtime performance guarantees as CSS3

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Systems and methods for authoring cross-browser HTML 5 motion path animation
  • Systems and methods for authoring cross-browser HTML 5 motion path animation
  • Systems and methods for authoring cross-browser HTML 5 motion path animation

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0028] The systems and methods discussed herein provide implementations of motion paths via pure CSS3 and HTML5 or animation abstractions for moving objects along curves that work in all major browsers and do not require JavaScript. A motion path can include a defined curve shape (for example, a cubic Bezier curve), a definition of how fast the object travels along the curve (this can be as simple as a constant velocity, but can also include acceleration, deceleration, pauses, and momentary complex sequence of movement (teleportation) and an indication of whether the object orients itself tangential to the path ("tangential follow"). Animations can be created using CSS3 keyframe rules, which are non-trivial for two reasons: 1) In order to follow a motion path in 2D, x-translation, y-translation and z-rotation must each be animated independently, but CSS3 cannot assign and 2) CSS3 represents animations using 2D cubic Bezier curves that relate time to value, and this format cann...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The present disclosure provides systems and methods for implementations of motion paths via pure CSS3 and HTML5, working in all major browsers and requiring no JavaScript. For each motion path degreeof freedom (e.g., x translation), the system may insert an additional element into the document object model (DOM) to host its animation. In some implementations, the system may apply an optimizationprocess to fit CSS3 keyframes rules that approximate the ideal motion path trajectory to a predetermined tolerance while minimizing the storage footprint. In addition to supporting CSS3 motion paths,this authoring model retains the ability to supply arbitrary standard CSS3 animations to transform channels, which allows users to, e.g., animate the scale and rotation of an element independent of its progress along a motion path.

Description

[0001] related application [0002] This application claims the benefit of and priority to U.S. Provisional Application No. 62 / 519,141, entitled "Systems and Methods for Authoring Cross-Browser HTML 5Motion Path Animation," filed June 13, 2017, which is hereby incorporated by reference. the entire content of the application. Background technique [0003] A motion path is a common animation abstraction for moving objects along curves. The user defines the shape of the curve (for example, a cubic Bezier curve), by defining how fast the object travels along the curve (this can be as simple as a constant velocity, but can also be as complex as acceleration, deceleration, pause, and teleportation) sequence) and control the animation by specifying whether the object orients itself tangentially toward the path ("Tangent Follow"). All major web browsers natively support animation via CSS3 keyframe rules, but there is no widely adopted standard for motion path animation. Users wishi...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06T13/00G06F16/958G06F17/22G06F40/00G06F40/143
CPCG06T13/00G06F16/958G06F40/143G06F16/986G06F16/972G06T11/203G06T13/20G06T17/005
Inventor L.科瓦
Owner GOOGLE LLC