Animating digital graphics overlaid on visual media items based on dynamic attributes
This disclosure covers methods, computer-readable media, and systems that animate a digital graphic associated with a video or other visual media item based on a detected dynamic attribute. In particular, the disclosed methods, computer-readable media, and systems detect sensor data from a client device or a motion of an object within a video or other visual media item. Based on the detected sensor data or motion of an object within a visual media item, the methods, computer-readable media, and systems overlay and animate an emoji or other digital graphic selected by a user on a video or other visual media item.
1. A non-transitory computer readable medium storing instructions thereon that, when executed by at least one processor, cause a computing device to:
present a visual media item within a graphical user interface of the computing device;
detect a selection by a user to overlay a digital graphic on the visual media item within the graphical user interface;
detect a magnitude and a direction of movement indicated by sensor data while presenting the visual media item; and
present the digital graphic as an overlay on the visual media item with an animation effect having a characteristic according to the magnitude and the direction of the movement indicated by the sensor data.
2. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to detect the magnitude of the movement indicated by the sensor data by analyzing the sensor data from an accelerometer, a gyroscope, a light sensor, or a Global Positioning System receiver of the computing device.
3. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to present the digital graphic as the overlay on the visual media item with the animation effect having a duration, an opacity, or a size for the digital graphic based on the magnitude of the movement indicated by the sensor data.
4. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to detect the direction of the movement indicated by the sensor data by determining a direction of travel for the computing device based on the sensor data.
5. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to present the digital graphic as the overlay on the visual media item with the animation effect by:
identifying a plurality of animation effects associated with the digital graphic, the plurality of animation effects comprising the animation effect; and
mapping the sensor data to the animation effect of the plurality of animation effects.
6. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to transmit, from the computing device to another computing device, an indication of the digital graphic and an indication of the animation effect, the indications causing the digital graphic to appear as the overlay on the visual media item with the animation effect.
7. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to:
detect that the magnitude of the movement indicated by the sensor data has changed; and
adjust the animation effect of the digital graphic according to a change in the magnitude of the movement indicated by the sensor data.
8. The non-transitory computer readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to determine the animation effect by determining that the sensor data corresponds to:
a scaling animation that scales the digital graphic based on the sensor data;
a mimicking animation that mimics the movement indicated by the sensor data; and
a coloring animation that changes a color of the digital graphic based on a change in light detected by the computing device.
9. A computing device comprising:
at least one processor; and
at least one non-transitory computer readable storage medium storing instructions that, when executed by the at least one processor, cause the computing device to:
present a visual media item within a graphical user interface of the computing device;
detect a selection by a user to overlay a digital graphic on the visual media item within the graphical user interface;
detect a magnitude and a direction of movement indicated by sensor data while presenting the visual media item; and
present the digital graphic as an overlay on the visual media item with an animation effect having a characteristic according to the magnitude and the direction of the movement indicated by the sensor data.
10. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to present the digital graphic as the overlay on the visual media item with the animation effect having a frequency in proportion to the magnitude of the movement indicated by the sensor data.
11. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to present the digital graphic as the overlay on the visual media item with the animation effect having a path or trajectory in proportion to the magnitude of the movement indicated by the sensor data.
12. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to detect the direction of the movement indicated by the sensor data by determining a rotational direction of the computing device with reference to an axis based on the sensor data.
13. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to:
present the digital graphic as the overlay on the visual media item initially without the animation effect based on detecting the selection by the user to overlay the digital graphic; and
present the digital graphic with the animation effect based on detecting the magnitude and the direction of the movement indicated by the sensor data.
14. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to present the digital graphic as the overlay on the visual media item with the animation effect by presenting the digital graphic with the animation effect changing a portion of the digital graphic.
15. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to:
detect that the magnitude of the movement indicated by the sensor data has changed; and
adjust the animation effect of the digital graphic according to a change in the magnitude of the movement indicated by the sensor data.
16. The computing device of claim 9 , further comprising instructions that, when executed by the at least one processor, cause the computing device to determine the animation effect by determining that the sensor data corresponds to:
a scaling animation that scales the digital graphic based on the sensor data;
a mimicking animation that mimics the movement indicated by the sensor data; and
a coloring animation that changes a color of the digital graphic based on a change in light detected by the computing device.
17. A method comprising:
presenting a visual media item within a graphical user interface of a computing device;
detecting, by the computing device, a selection by a user to overlay a digital graphic on the visual media item within the graphical user interface;
detecting, by the computing device, a magnitude and a direction of movement indicated by sensor data while presenting the visual media item; and
presenting, by the computing device, the digital graphic as an overlay on the visual media item with an animation effect having a characteristic according to the magnitude and the direction of the movement indicated by the sensor data.
18. The method of claim 17 , wherein detecting the magnitude of the movement indicated by the sensor data comprises analyzing the sensor data from an accelerometer, a gyroscope, a light sensor, or a Global Positioning System receiver of the computing device.
19. The method of claim 17 , wherein presenting the digital graphic as the overlay on the visual media item with the animation effect comprises presenting the digital graphic having a duration, an opacity, or a size based on the magnitude of the movement indicated by the sensor data.
20. The method of claim 17 , wherein detecting the direction of the movement indicated by the sensor data comprises determining a direction of travel for the computing device based on the sensor data.