Animation Primitives for Cross-Browser Rendering

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Web-based presentation software faces challenges in rendering animations across different web browsers due to inconsistencies in animation support, requiring multiple implementations for each browser, and limitations in SVG rendering for text animations.

Innovation Solution

Decomposing animations into a set of primitives that can be combined arbitrarily, allowing for browser-dependent rendering by implementing each primitive differently while maintaining compatibility across browsers, with SMIL, SVG+JS, and CSS3 transitions used to achieve cross-browser animation support.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If separate animation implementations are created for each browser, then animation compatibility across browsers is improved, but device complexity and maintenance burden increase

Engineering Contradiction:

Improveanimation compatibilityVSAvoidimplementation complexity

Core Design Contradiction:

ReliabilityVSDevice complexity

Solution Approach 1:

The animation system is segmented into independent primitive operations (move, scale, rotate, fade, etc.), each implemented separately for different browsers. This allows selective implementation of primitives based on browser capabilities while maintaining a unified animation framework.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

A universal animation primitive interface is designed that can be implemented through multiple browser-specific mechanisms (SMIL, SVG+JS, CSS3 transitions). The same primitive definition can be rendered differently depending on the browser's supported technologies.

Inventive Principle:

Principle #6Universality (Multi-functionality)

2Speed

If canvas text is used for fast rendering, then rendering speed is improved, but text scalability and animation capability are lost

Engineering Contradiction:

Improverendering speedVSAvoidtext animation capability

Core Design Contradiction:

SpeedVSAdaptability or versatility

Solution Approach 1:

The system dynamically selects between canvas rendering and SVG path rendering based on the operational context. During wysiwyg editing, canvas is used for fast rendering with re-rendering on scale. In the viewer, SVG paths are used to enable text animation while maintaining scalability.

Inventive Principle:

Principle #15Dynamics

Solution Approach 2:

SVG paths serve as an intermediary representation that bridges the gap between fast canvas rendering and animatable SVG text. The paths can be generated on the server and applied to text elements, enabling animation without requiring client-side text path generation.

Inventive Principle:

Principle #24Intermediary (Mediator)

3Adaptability or versatility

If SVG rendering is used for text animation, then text animatability is improved, but server-side path generation is required increasing network traffic

Engineering Contradiction:

Improvetext animatabilityVSAvoidnetwork traffic

Core Design Contradiction:

Adaptability or versatilityVSQuantity of substance

Solution Approach 1:

Text paths are pre-generated on the server during the document creation or export phase. These pre-computed paths are embedded in the exported document, eliminating the need for server-side path generation during each viewer session and reducing network traffic.

Inventive Principle:

Principle #10Preliminary action

4Adaptability or versatility

If multiple canvas elements are created for animatable text parts, then text animation flexibility is improved, but system complexity and rendering overhead increase significantly

Engineering Contradiction:

Improvetext animation flexibilityVSAvoidcanvas management complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

Multiple canvas elements representing different text parts are merged into a single SVG-based rendering system in the viewer. This consolidation reduces the complexity of managing multiple canvases while preserving the ability to animate individual text portions through SVG path manipulation.

Inventive Principle:

Principle #5Merging (Combining)

Data Source

PatentUS8717368B1Decomposing animations into primitives for browser-dependent rendering

Publication Date: 2014.05.06 GOOGLE LLC

AI summary

A method for computer-implemented rendering of an animation presentation includes receiving, at a server, a request to view the animation presentation on a computing device, obtaining information identifying a browser application running on the computing device, determining requirements of a presentation technology supported by the browse, decomposing the animation presentation into animation primitives compatible with the presentation technology, and transmitting the animation primitives to the computing device. A computer-implemented method to render an animation presentation include replacing an animation type within an animation page structure of the animation presentation with an animation primitive, flattening the animation, updating the animation page drawing objects to point to the rendered document module object, grouping the animation primitives into sequences to create a timeline for the animation page, and adjusting delays of the animations so as to begin at a correct point in time. A system for implementing the rendering of animations is described.