Drag Gesture Animation Speed Matching
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Graphical user interfaces often present unnatural and disconnected movements of objects on touch screens when the user's finger speed and device-controlled speed do not match, leading to an unnatural user experience during drag gestures.
Innovation Solution
A computing device monitors the speed and trajectory of user-induced movements, calculates the final user-induced speed, and uses this to determine the device-controlled speed for moving an object to its resting position, adhering to constraints like maximum acceleration, speed, and time, employing cubic spline and cubic-bezier functions to ensure smooth and natural animation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If the device uses a predetermined speed for object movement, then the implementation is simple, but the movement appears disconnected and unnatural when user finger speed and device speed do not match
Solution Approach 1:
The system monitors the user's finger speed during the drag gesture and uses this feedback to dynamically adjust the device-controlled speed of the object. The device calculates the final user-induced speed and applies it as the initial speed for the object's movement to the resting position, ensuring the animation matches the user's input intensity and feels natural.
Solution Approach 2:
The system transitions from a static predetermined speed approach to a dynamic speed adjustment mechanism. The object's speed is no longer fixed but is determined by the user's actual finger movement speed, allowing the system to adapt to different user interactions and create more realistic animation behavior.
2Reliability
If the device calculates and adjusts speed based on user input, then the movement becomes natural and smooth, but the computational complexity increases
Solution Approach 1:
The system uses the user's own input data (finger speed and trajectory) to determine the object's animation parameters. Rather than requiring external sensors or complex physical models, the system self-services by deriving all necessary speed and path information directly from the touch input events already being processed for the drag gesture.
Solution Approach 2:
The system changes the speed parameter of the object based on the user's finger movement characteristics. By monitoring the change in position over time during the drag gesture, the system calculates the final speed and applies it to the object's animation, creating a direct parameter mapping from user input to visual output.
3Ease of operation
If the object follows a cubic spline path with specific points, then the animation is smooth and natural, but the path determination becomes more complex
Solution Approach 1:
The system pre-defines the path characteristics (cubic spline with specific control points) before the user interaction occurs. The resting position and key path points are predetermined based on the object type and interface design, so that when the user performs the drag gesture, the system only needs to interpolate along the pre-planned smooth path rather than calculating it in real-time.
Data Source
AI summary
Methods, systems, and apparatus, including computer programs encoded on a computer storage medium, for animating a drag gesture are disclosed. In one aspect, a method includes the actions of receiving a user input that drags a user interface element along a user-induced path across a display. The actions further include moving the user interface element along the user-induced path across the display. The actions further include determining that the user input has ceased. The actions further include determining an additional path and a speed for the user interface element to move along the additional path based on the user-induced path and a speed of the user input. The actions further include moving the user interface element along the additional path to a resting location at the determined speed for the user interface element to move along the additional path.