Web Animation Editing via Composite Data Structure
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current CSS animation development tools lack the ability to effectively preview and edit animations within web pages without running the application, due to complex CSS precedence rules that make it difficult to isolate and modify animation properties in real-time.
Innovation Solution
A system that collects and combines animation properties and keyframes into a single internal data structure, allowing for the computation of winning animation properties and user interface representation, enabling preview and modification of animations during design time through user gestures, which are mapped to changes in the underlying documents.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If CSS precedence rules are applied to determine animation properties, then the correct runtime behavior is achieved, but the complexity of isolating and modifying animation properties increases
Solution Approach 1:
The patent segments the complex CSS precedence evaluation by creating a dedicated data structure that separates animation property collection from the CSS rule processing. This allows the system to isolate animation-specific properties (animation-name, animation-duration, animation-timing-function, etc.) from other CSS properties, making them independently editable while maintaining the full CSS precedence logic for determination.
Solution Approach 2:
The patent introduces an intermediary data structure that acts as a mediator between the CSS rules and the animation preview/editing system. This structure collects and holds animation properties separately, allowing the system to apply CSS precedence logic to determine winning properties while providing a simplified interface for previewing and editing only the animation-related aspects.
2Reliability
If the full application is executed to preview animations, then accurate runtime behavior is observed, but the time required for preview increases
Solution Approach 1:
The patent creates a simplified copy of the animation system by collecting animation properties into a dedicated data structure that can be evaluated independently of the full application. This copy contains only the necessary animation-related information (properties, keyframes, timing), allowing accurate preview without requiring the complete application runtime environment.
Solution Approach 2:
The patent performs preliminary action by collecting and organizing all animation properties into a structured format before the preview is needed. This pre-processing step computes and stores the winning animation properties based on CSS precedence rules in advance, so that when preview is required, the system can quickly render the animation without executing the full application stack.
3Productivity
If animation properties are collected into a single data structure, then editing efficiency is improved, but the complexity of computing winning properties increases
Solution Approach 1:
The patent segments the property computation process by creating a dedicated data structure with specific fields for animation properties (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-fill-mode). This segmentation allows the system to efficiently compute winning properties for each field independently while maintaining the overall CSS precedence logic.
4Adaptability or versatility
If CSS rules are separated from content, then flexibility in styling is improved, but the difficulty of managing animation properties increases
Solution Approach 1:
The patent introduces an intermediary data structure that bridges the separated CSS rules and content. This structure collects animation properties from the CSS rules, holds them in an organized format, and provides a simplified interface for managing animation properties without requiring direct manipulation of the underlying CSS syntax or structure.
Data Source
Figure 1a~1b
Figure 1c
Figure 2
AI summary
An animation can be selected. Pieces of the documents that pertain to the selected animation can be extracted from the document closure for the web page in which the animation appears. A composite data structure can be created therefrom. The winning set of @keyframes rules referenced by the animation-name property of a style rule (the virtual winning rule) can be computed and represented in a data structure. The winning animation properties can establish the timing properties to preview and edit the animation in a user interface without running the whole application. The data structure represented in the visual preview can be edited by applying user gestures to the animation displayed in a preview user interface (UI). The user changes can be mapped to changes to property values in the data structure and the underlying documents.