Scrolling through a series of content items

Patent metadata

Field	Value
Publication number	US-9696898-B2
Application number	US-201213677104-A
Country	US
Kind code	B2
Filing date	Nov 14, 2012
Priority date	Nov 14, 2012
Publication date	Jul 4, 2017
Grant date	Jul 4, 2017

Abstract

In one embodiment, a method includes displaying one or more first content items on a screen of an electronic device, the first content items being part of a series of content items; and in response to a user input with respect to the first content items, displaying an animation sequence depicting one or more second content items replacing the first content items on the screen of the electronic device, the second content items being part of the series of content items; and displaying the second content items on the screen of the electronic device.

First claim

What is claimed is:

1. A computer-implemented method comprising:
displaying a background component on a screen of an electronic device, the background component comprising a first image;
displaying one or more first content items on the screen, the first content items being part of a series of content items, and the first content items overlaying at least a portion of the background component; and
in response to a user input to move the first content items in a first direction across the screen,
displaying a background animation sequence depicting a transition from the first image to a second image by displaying the first image fading out of the screen while the second image fades in;
displaying a content-item animation sequence depicting the first content items moving in the first direction off the screen while simultaneously depicting one or more second content items moving in the first direction onto the screen, wherein the second content items are part of the series of content items; and
displaying the second content items on the screen of the electronic device,

wherein each of the second content items moves by simulating an effect of being attached to a simulated spring,
wherein each simulated spring connects each second content item to a destination position on the screen, the destination position of each second content item being specific to that second content item,
wherein a first distance of a first space between a first content item of the second content items and a second content item of the second content items is different from a second distance of a second space between the second content item of the second content items and a third content item of the second content items while the second content items move in the first direction onto the screen to the destination position, the first distance decreasing before the second distance decreases, and
wherein the content-item animation sequence displays at least one second content item:
moving in the first direction a predetermined distance past a destination position associated with the at least one second content item, then
moving in a second direction back to the destination position, the second direction being opposite of the first direction,

wherein there are n of the first content items respectively displayed at n positions on the screen of the electronic device at the same time, and
wherein the content item animation sequence depicts n of the second content items moving onto the screen toward the n positions, respectively, and moving into the n positions on the screen of the electronic device and replacing the n first content items, each of the destination positions corresponding to one of the n positions.

2. The method of claim 1 , wherein:
the screen of the electronic device is a touchscreen; and
the user input with respect to the first content items is a swipe across the n positions on the touchscreen.

3. The method of claim 1 , wherein:
the n positions are arranged in a row across the screen of the electronic device; and
the content-item animation sequence depicts the n second content items moving in a row into the n positions.

4. The method of claim 3 , wherein
the content-item animation sequence depicts the n second content items bouncing against each other while moving into the n positions on the screen of the electronic device.

5. The method of claim 1 , wherein each of the one or more second content items comprises at least one content object, and wherein the at least one content object on at least one of the second content items is not shown until after displaying the content-item animation sequence.

6. The method of claim 1 , the method further comprising:
arranging a plurality of components of a user interface in a hierarchy, the user interface comprising one or more content layers and each of the content layers comprising one or more of the components;
displaying the first image as the component of a first content layer; and
displaying the one or more first content items as the one or more components of a second content layer.

7. One or more computer-readable non-transitory storage media embodying software that is operable when executed to:
display a background component on a screen of an electronic device, the background component comprising a first image;
display one or more first content items on the screen, the first content items being part of a series of content items, and the first content items overlaying at least a portion of the background component; and
in response to a user input to move the first content items in a first direction across the screen,
display a background animation sequence depicting a transition from the first image to a second image by displaying the first image fading out of the screen while the second image fades in;
display a content-item animation sequence depicting the first content items moving in the first direction off the screen while simultaneously depicting one or more second content items moving in the first direction onto the screen, wherein the second content items are part of the series of content items; and
display the second content items on the screen of the electronic device,

wherein each of the second content items moves by simulating an effect of being attached to a simulated spring,
wherein each simulated spring connects each second content item to a destination position on the screen, the destination position of each second content item being specific to that second content item,
wherein a first distance of a first space between a first content item of the second content items and a second content item of the second content items is different from a second distance of a second space between the second content item of the second content items and a third content item of the second content items while the second content items move in the first direction onto the screen to the destination position, the first distance decreasing before the second distance decreases, and
wherein the content-item animation sequence displays at least one second content item:
moving in the first direction a predetermined distance past a destination position associated with the at least one second content item, then
moving in a second direction back to the destination position, the second direction being opposite of the first direction,

wherein there are n of the first content items respectively displayed at n positions on the screen of the electronic device at the same time, and
wherein the content item animation sequence depicts n of the second content items moving onto the screen toward the n positions, respectively, and moving into the n positions on the screen of the electronic device and replacing the n first content items, each of the destination positions corresponding to one of the n positions.

8. The media of claim 7 , wherein:
the screen of the electronic device is a touchscreen; and
the user input with respect to the first content items is a swipe across the n positions on the touchscreen.

9. The media of claim 7 , wherein:
the n positions are arranged in a row across the screen of the electronic device; and
the content-item animation sequence depicts the n second content items moving in a row into the n positions.

10. The media of claim 9 , wherein:
the content-item animation sequence depicts the n second content items bouncing against each other while moving into the n positions on the screen of the electronic device.

11. 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:

Assignees

• Matas Michael
• Facebook Inc

Inventors

• Matas Michael

Classifications

• G06F3/0488 Primary

  using a touch-screen or digitiser, e.g. input of commands through traced gestures · CPC title

• G06F3/0481

  based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance · CPC title

• G06F9/451

  Execution arrangements for user interfaces · CPC title

• G06F9/4443

  Physics · mapped topic