Compound animation showing user interactions
An online system presents a content item to users and receives selections of reaction icons from the users. The online system generates a background animation with the selected reaction icons and a foreground animation to be layered on top of the background animation. The online system sends the background and foreground animations to a client device to be cached. Further, the online system presents the content item to a viewing user associated with the client device and receives a selection of a reaction icon from the viewing user. The online system selects a subset of the users based on the viewing user's affinity to the users, retrieves images of the selected users, and send the images to the client device. The client device customizes the background and foreground animations based on the images and the viewing user's reaction icon to generate a compound animation for display to the viewing user.
1. A method comprising:
providing, for display to a plurality of users, a content item received from a posting user;
receiving selections of reaction icons by a subset of the plurality of users, the reaction icons representing a reaction of each of the users of the subset to the content item;
generating an animation comprising the reaction icons selected by the subset of users;
providing the content item for display to a viewing user on a client device associated with the viewing user;
receiving selection of a reaction icon from the viewing user;
in response to the viewing user's selection of the reaction icon, ranking users of the subset based at least on the viewing user's affinity to each of the users of the subset, the viewing user's affinity indicating the viewing user's interest in each of the users of the subset;
identifying a predetermined number of users of the subset based on the ranking;
retrieving images associated with the identified users; and
sending the retrieved images and the generated animation to the client device associated with the viewing user to generate a compound reaction animation that includes the reaction icon selected by the viewing user, the animation of the reaction icons selected by the subset of users, and the retrieved images associated with the identified users as additional icons in the compound reaction animation, the client device configured to display the compound reaction animation, at least a portion of the compound reaction animation overlaying the content item.
2. The method of claim 1 , wherein the generated animation is sent to the client device before the retrieved images are sent to the client device and the client device is configured to cache the generated animation in a computer cache and retrieve the generated animation from the computer cache to generate the compound reaction animation after the retrieved images are sent to the client device.
3. The method of claim 1 , further comprising:
generating a plurality of animations, each animation comprising a particular type of reaction icon;
sending the plurality of animations to the client; and
in response to the viewing user's selection of the reaction icon, instructing the client device to select one of the plurality of animations, the selected animation comprising the reaction icon selected by the viewing user.
4. The method of claim 1 , wherein ranking the users of the subset comprises:
determining a first affinity score for each of the users of the subset based on the viewing user's affinity to the user;
determining a second affinity score for each of the users of the subset based on the posting user's affinity to the user; and
ranking the users of the subset based on a combination of the first affinity score and the second affinity score.
5. The method of claim 1 , wherein the compound reaction animation comprises a foreground layer showing an animation of the reaction icon selected by the viewing user and a background layer including the animation of the reaction icons selected by the subset of users with the retrieved images as the additional icons.
6. The method of claim 5 , wherein the background layer of the compound reaction animation shows that the reaction icons selected by the identified users flip over to the retrieved images.
7. The method of claim 1 , wherein a reaction icon represents one of the following reactions: like, love, amusement, astonishment, sad, and angry.
8. A non-transitory computer readable medium storing executable computer program instructions, the computer program instructions comprising instructions that when executed cause a computer processor to:
provide, for display to a plurality of users, a content item received from a posting user;
receive selections of reaction icons by a subset of the plurality of users, the reaction icons representing a reaction of each of the users of the subset to the content item;
generate an animation comprising the reaction icons selected by the subset of users;
provide the content item for display to a viewing user on a client device associated with the viewing user;
receive selection of a reaction icon from the viewing user;
in response to the viewing user's selection of the reaction icon, rank users of the subset based at least on the viewing user's affinity to each of the users of the subset, the viewing user's affinity indicating the viewing user's interest in each of the users of the subset;
identify a predetermined number of users of the subset based on the ranking;
retrieve images associated with the identified users; and
send the retrieved images and the generated animation to the client device associated with the viewing user to generate a compound reaction animation that includes the reaction icon selected by the viewing user, the animation of the reaction icons selected by the subset of users, and the retrieved images associated with the identified users as additional icons in the compound reaction animation, the client device configured to display the compound reaction animation, at least a portion of the compound reaction animation overlaying the content item.
9. The computer readable medium of claim 8 , wherein the generated animation is sent to the client device before the retrieved images are sent to the client device and the client device is configured to cache the generated animation in a computer cache and retrieve the generated animation from the computer cache to generate the compound reaction animation after the retrieved images are sent to the client device.
10. The computer readable medium of claim 8 , the computer program instructions further comprising instructions that when executed cause a computer processor to:
generate a plurality of animations, each animation comprising a particular type of reaction icon;
send the plurality of animations to the client; and
in response to the viewing user's selection of the reaction icon, instruct the client device to select one of the plurality of animations, the selected animation comprising the reaction icon selected by the viewing user.
11. The computer readable medium of claim 8 , wherein the computer program instructions for ranking the users of the subset comprise instructions that when executed cause the computer processor to:
determine a first affinity score for each of the users of the subset based on the viewing user's affinity to the user;
determine a second affinity score for each of the users of the subset based on the posting user's affinity to the user; and
rank the users of the subset based on a combination of the first affinity score and the second affinity score.
12. The computer readable medium of claim 8 , wherein the compound reaction animation comprises a foreground layer showing an animation of the reaction icon selected by the viewing user and a background layer including the animation of the reaction icons selected by the subset of users with the retrieved images as the additional icons.
13. The computer readable medium of claim 12 , wherein the background layer of the compound reaction animation shows that the reaction icons selected by the identified users flip over to the retrieved images.
14. The computer readable medium of claim 8 , wherein a reaction icon represents one of the following reactions: like, love, amusement, astonishment, sad, and angry.
15. A computer system comprising:
a non-transitory computer-readable storage medium storing executable computer program instructions, the computer program instructions comprising instructions that when executed cause a computer processor to perform steps, comprising:
providing, for display to a plurality of users, a content item received from a posting user;
receiving selections of reaction icons by a subset of the plurality of users, the reaction icons representing a reaction of each of the users of the subset to the content item;
generating an animation comprising the reaction icons selected by the subset of users;
providing the content item for display to a viewing user on a client device associated with the viewing user;
receiving selection of a reaction icon from the viewing user;
in response to the viewing user's selection of the reaction icon, ranking users of the subset based at least on the viewing user's affinity to each of the users of the subset, the viewing user's affinity indicating the viewing user's interest in each of the users of the subset;
identifying a predetermined number of users of the subset based on the ranking;
retrieving images associated with the identified users; and
sending the retrieved images and the generated animation to the client device associated with the viewing user to generate a compound reaction animation that includes the reaction icon selected by the viewing user, the animation of the reaction icons selected by the subset of users, and the retrieved images associated with the identified users as additional icons in the compound reaction animation, the client device configured to display the compound reaction animation, at least a portion of the compound reaction animation overlaying the content item.
16. The system of claim 15 , wherein the generated animation is sent to the client device before the retrieved images are sent to the client device and the client device is configured to cache the generated animation in a computer cache and retrieve the generated animation from the computer cache to generate the compound reaction animation after the retrieved images are sent to the client device.
17. The system of claim 15 , wherein the steps further comprise:
generating a plurality of animations, each animation comprising a particular type of reaction icon;
sending the plurality of animations to the client; and
in response to the viewing user's selection of the reaction icon, instructing the client device to select one of the plurality of animations, the selected animation comprising the reaction icon selected by the viewing user.
18. The system of claim 15 , wherein ranking the users of the subset comprises:
determining a first affinity score for each of the users of the subset based on the viewing user's affinity to the user;
determining a second affinity score for each of the users of the subset based on the posting user's affinity to the user; and
ranking the users of the subset based on a combination of the first affinity score and the second affinity score.
19. The system of claim 15 , wherein the compound reaction animation comprises a foreground layer showing an animation of the reaction icon selected by the viewing user and a background layer including the animation of the reaction icons selected by the subset of users with the retrieved images as the additional icons.
20. The system of claim 19 , wherein the background layer of the compound reaction animation shows that the reaction icons selected by the identified users flip over to the retrieved images.