Animation sequence associated with image
View Patent ↗In one embodiment, an image may be displayed in one of several display modes. When an image is displayed in a first display mode on the screen of an electronic device, a user input may cause the image to transition to a second display mode. An animation sequence is displayed while the image transitions from the first display mode to the second display mode.
1. A method comprising:
by a computing device, displaying on a touchscreen of the computing device a content item in a first one of a plurality of pre-determined display modes that the content item can be displayed in, wherein the content item has a different pre-determined size in each of the pre-determined display modes relative to a display area of the touchscreen; and
by the computing device, in response to a gesture input by a user, displaying an animation sequence to transition the content item from the first one of the pre-determined display modes to a second one of the pre-determined display modes, the content item being larger in the first one of the pre-determined display modes than the second one of the pre-determined display modes,
wherein the animation sequence is based at least in part on a velocity or acceleration of the gesture input and comprises a simulated three-dimensional perspective,
wherein the animation sequence comprises the content item in the first one of the pre- determined display-modes first visually receding backward on the touchscreen while decreasing in size to a first pre-determined size, then visually advancing forward on the touchscreen while increasing in size to a second pre-determined size, and then decreasing in size to reach a final size of the second one of the pre-determined display modes, and
wherein the entirety of the content item is displayed in the first one of the pre-determined display modes and the second one of the pre-determined display modes.
2. The method of claim 1 , wherein:
the gesture input comprises a swipe gesture resulting from sliding a finger across the touchscreen; and
a velocity or distance with which the image recedes backward in the animation sequence is determined based on a velocity of the finger sliding across the touchscreen.
3. The method of claim 1 , wherein movements of the content item in the animation sequence are based on spring motion by simulating an effect of attaching the content item to a position on the touchscreen of the computing device via an imaginary spring.
4. The method of claim 1 , wherein the velocity of the gesture input is normalized using a normalization factor.
5. One or more computer-readable non-transitory storage media embodying software that is operable when executed to:
display on a touchscreen of a computing device a content item in a first one of a plurality of pre-determined display modes that the content item can be displayed in, wherein the content item has a different pre-determined size in each of the pre-determined display modes relative to a display area of the touchscreen; and
in response to a gesture input by a user, display an animation sequence to transition the content item from the first one of the pre-determined display modes to a second one of the pre-determined display modes, the content item being larger in the first one of the pre-determined display modes than the second one of the pre-determined display modes,
wherein the animation sequence is based at least in part on a velocity or acceleration of the gesture input and comprises a simulated three-dimensional perspective,
wherein the animation sequence comprises the content item in the first one of the pre-determined display-modes first visually receding backward on the touchscreen while decreasing in size to a second pre-determined size, then visually advancing forward on the touchscreen while increasing in size to a second pre-determined size, and then decreasing in size to reach a final size of the second one of the pre-determined display modes, and
wherein the entirety of the content item is displayed in the first one of the pre-determined display modes and the second one of the predetermined display modes.
6. The media of claim 5 , wherein:
the gesture input comprises a swipe gesture resulting from sliding a finger across the touchscreen; and
a velocity or distance with which the image recedes backward in the animation sequence is determined based on a velocity of the finger sliding across the touchscreen.
7. The media of claim 5 , wherein movements of the content item in the animation sequence are based on spring motion by simulating an effect of attaching the content item to a position on the touchscreen of the computing device via an imaginary spring.
8. The media of claim 5 , wherein the velocity of the gesture input is normalized using a normalization factor.
9. A system comprising:
one or more processors; and
a memory coupled to the processors comprising instructions executable by the processors, the processors operable when executing the instructions to:
display on a touchscreen of a computing device a content item in a first one of a plurality of pre-determined display modes that the content item can be displayed in, wherein the content item has a different pre-determined size in each of the pre-determined display modes relative to a display area of the touchscreen; and
in response to a gesture input by a user, display an animation sequence to transition the content item from the first one of the pre-determined display modes to a second one of the pre-determined display modes, the content item being larger in the first one of the pre-determined display modes than the second one of the pre-determined display modes,
wherein the animation sequence is based at least in part on a velocity or acceleration of the gesture input and comprises a simulated three-dimensional perspective,
wherein the animation sequence comprises the content item in the first one of the pre-determined display-modes first visually receding backward on the touchscreen while decreasing in size to a first pre-determined size, then visually advancing forward on the touchscreen while increasing in size to a second pre-determined size, and then decreasing in size to reach a final size of the second one of the pre-determined display modes, and
wherein the entirety of the content item is displayed in the first one of the pre-determined display modes and the second one of the pre-determined display modes.
10. The system of claim 9 , wherein:
the gesture input comprises a swipe gesture resulting from sliding a finger across the touchscreen; and
a velocity or distance with which the image recedes backward in the animation sequence is determined based on a velocity of the finger sliding across the touchscreen.
11. The system of claim 9 , wherein movements of the content item in the animation sequence are based on spring motion by simulating an effect of attaching the content item to a position on the touchscreen of the computing device via an imaginary spring.
12. The system of claim 9 , wherein the velocity of the gesture input is normalized using a normalization factor.
13. The method of claim 1 , wherein a first type of user input causes the content item to be transitioned to a next larger size, and a second type of user input causes the content item to be transitioned to a next smaller size.
14. The method of claim 13 , wherein:
the first type of input comprises an upward swipe, a pinch open, a single tap, or a combination thereof, and
the second type of user input comprises a downward swipe, a pinch close, a double tap, or combination thereof.