Flexible carousel user interface framework

Abstract

Techniques are disclosed for generating a universal animation sequence based on developer-defined visual effect parameters that may be used to define a sequence of effects to be applied to any content item that visually moves across a screen within a carousel user interface. When particular content items are arranged in a carousel user interface framework, a computing device determines the positions the particular content items will move through within the carousel user interface that is to be displayed. Hie computing device uses the determined positions and the universal animation sequence to determine specific visual effects to apply to the particular content items at the determined positions. The computing device then generates and displays the animation including the particular content items animated according to the specific visual effects at the determined positions.

Description

FLEXIBLE CAROUSEL USER INTERFACE FRAMEWORKBACKGROUND

[0001] Current carousel user interfaces often present significant challenges for developers, including complex implementation processes, rigid design limitations, and suboptimal user engagement metrics. Traditional carousel user interface frameworks often require extensive setup for animating content items in a carousel view, including predefined states for each item and manual interpolation between these states. These issues not only complicate development but also limit the flexibility and customization options available to developers, ultimately affecting the overall user experience.

[0002] Existing solutions attempt to address these challenges through various user interface libraries and animation tools. However, these solutions often fall short of providing a seamless, efficient way to implement dynamic, customizable carousels that can easily be adapted to different types of content and user interactions. Developers are frequently forced to choose between ease of implementation and the richness of the user experience, with a significant investment in time and resources needed to achieve the latter.SUMMARY

[0003] Techniques are described herein for providing a carousel user interface framework that simplifies the creation and animation of carousel effects. The computing device may generate a universal animation sequence, arrange content items within the carousel user interface framework, and associate progress values with the content items based on their position within the framework. The computing device may generate and display the animation that includes visual effects determined based on the universal animation sequence applied to the content items of the framework, for example on a touch screen of the computing device. The universal animation sequence may be generated before the content items to be displayed in a carousel view are obtained. For example, the computing device may generate the universal animation sequence based on visual effect parameters defined by developers and received from applications) or third-party computing systems that are in communication with the computing device and are requesting rendering of carousel user interface(s). Later, an animation may be generated and displayed by the computing device once the computing device identifies and / or obtains thecontent items to be displayed in the carousel view and includes them in the carousel user interface framework. These techniques enable dynamic, flexible animation generation that may be easily customized and adapted to various content types and types of user input. This approach not only enhances the visual appeal and interactivity of carousels but also reduces entry and maintenance costs for developers, making sophisticated carousel effects more accessible and manageable.

[0004] In some examples, a method comprises: generating, by a computing device, a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arranging, by the computing device, a plurality of particular content items in the carousel user interface framework; determining, by the computing device, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determining, by the computing device, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generating, by the computing device, an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and outputting, by the computing device and for display, the animation associated with the carousel user interface framework.

[0005] In some examples, a system comprises: one or more processors; and one or more memories comprising computer-executable instructions that, when executed by the one or more processors, cause the one or more processors to: generate a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visuallymoves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arrange a plurality of particular content items in the carousel user interface framework; determine, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determine, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generate an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and output, for display, the animation associated with the carousel user interface framework.

[0006] In some examples, at least one non-transitory computer-readable storage media including instructions that, when executed by one or more processors, cause the one or more processors to: generate a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arrange a plurality of particular content items in the carousel user interface framework; determine, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determine, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generate an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality ofparticular content items as the plurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and output, for display, the animation associated with the carousel user interface framework.

[0007] The details of one or more examples are set forth in the accompanying drawings and the description below. Other features, objects, and advantages of the disclosure will be apparent from the description and drawings, and from the claims.BRIEF DESCRIPTION OF DRAWINGS

[0008] FIG. 1 is a conceptual diagram illustrating an example computing environment for a carousel user interface, in accordance with techniques of this disclosure.

[0009] FIG. 2 is a block diagram illustrating a computing device for generating and displaying a carousel user interface, in accordance with techniques of this disclosure.

[0010] FIG. 3 is a conceptual diagram illustrating an example of applying a universal animation sequence to a plurality of particular content items arranged in a carousel user interface, in accordance with techniques of this disclosure.

[0011] FIG. 4 is a flow chart illustrating an example operation for generating and displaying a carousel user interface, in accordance with techniques of this disclosure.DETAILED DESCRIPTION

[0012] FIG. 1 is a conceptual diagram illustrating an example computing device 100 for a carousel user interface, in accordance with techniques of this disclosure. Examples of computing device 100 may include, but are not limited to, mobile phones (including smartphones), wearable computing devices (e.g., smart watches, smart glasses, wearable artificial intelligence assistant, etc.) virtual reality (VR) headsets / glasses, augmented reality (AR) headsets / glasses, laptop computers, tablet computers, desktop computers, server computers, point of sale (POS) systems, embedded computing systems, vehicle computing systems (e.g., head units, vehicle controlsystems), various home electronics (e.g., TVs, smart speakers, smart assistants, Internet of Things-enabled devices) and other types of computing devices.

[0013] Computing device 100 may include operating system (“OS”) 102, display device 104, user interface (“UI”) module 105, and application(s) 106. Display device 104 of computing device 100 may function as an input device for computing device 100 and as an output device for computing device 100. In some examples, display device 104 may include a presence-sensitive display that may receive tactile input from a user of computing device 100. Display device 104 may receive indications of the tactile input by detecting one or more gestures from a user of computing device 100 (e.g., the user touching or pointing to one or more locations of display device 104 with a finger or a stylus pen). Display device 104 may present output to a user, for instance at a presence-sensitive display. Display device 104 may present the output as a graphical user interface (e.g., a graphical user interface that includes the carousel UI), which may be associated with functionality provided by computing device 100. For example, display device 104 may present various user interfaces of components of a computing platform, operating system, applications, or services executing at or accessible by computing device 100 (e.g., an electronic message application, an Internet browser application, a mobile operating system, etc.). A user may interact with a respective user interface to cause computing device 100 to perform operations relating to a function.

[0014] Computing device 100 may execute OS 102, UI module 105, and applications 106 with multiple processors or multiple devices, as virtual machines executing on underlying hardware, as one or more services of an operating system or computing platform, and / or as one or more executable programs at an application layer of a computing platform of computing device 100. OS 102 of computing device 100 may perform any of the operations related to user interaction described herein using software, hardware, firmware, or a mixture of both hardware, software, and firmware residing in and executing on computing device 100 or at one or more other remote computing devices. In some examples, OS 102 may be implemented as hardware, software, and / or a combination of hardware and software. Computing device 100 may execute OS 102 with one or more processors. Computing device 100 may execute any portion of OS 102 as or within a virtual machine executing on underlying hardware. OS 102 may provide an execution environment for one or more modules, such as UI module 105, and one or more applications, such as applications 106. OS 102 may represent a multi-threaded operating system or a single-threaded operating system with which UI module 105 and applications 106 may interface to access hardware of computing device 100. OS 102 may include a kernel that facilitates access to the underlying hardware of computing device 100, where kernel may present a number of different interfaces (e.g., application programmer interfaces (APIs)) that UI module 105 and applications 106 may invoke to access the underlying hardware of computing device 100.

[0015] UI module 105 of computing device 100 may perform any of the operations related to user interaction described herein using software, hardware, firmware, or a mixture of both hardware, software, and firmware residing in and executing on computing device 100 or at one or more other remote computing devices. In some examples, UI module 105 may be implemented as hardware, software, and / or a combination of hardware and software. Computing device 100 may execute UI module 105 with one or more processors. Computing device 100 may execute any of UI module 105 as or within a virtual machine executing on underlying hardware. UI module 105 may be implemented in various ways. For example, any of UI module 105 may be implemented as a downloadable or pre-installed application (e.g., as a part of applications 106). In another example, UI module 105 may be implemented as part of OS 102 of computing device 100.

[0016] UI module 105 may interpret inputs detected at display device 104. UI module 105 may relay information about the inputs detected at display device 104 to one or more associated platforms, operating systems, applications, and / or services executing at computing device 100 to cause computing device 100 to perform a function. UI module 105 may also receive information and instructions from one or more associated platforms, operating systems, applications, and / or services executing at computing device 100 (e.g., applications 106) for rendering a UI. In addition, UI module 105 may act as an intermediary between the one or more associated platforms, operating systems, applications, and / or services executing at computing device 100 and various output devices of computing device 100 (e.g., speakers, LED indicators, vibrators, etc.) to produce output (e.g., graphical, audible, tactile, etc.) with computing device 100.

[0017] One or more of applications 106 may send user interface data to UI module 105. In response, UI module 105 may output instructions and information to OS 102 and / or display device 104 that cause display device 104 to display a user interface according to the information received from the application 106. When handling input detected by display device 104, UI module 105 may receive information from display device 104 in response to inputs detected atlocations of a screen of display device 104 at which elements of the user interface are displayed. UI module 105 disseminates information about inputs detected by display device 104 to other components of computing device 100 for interpreting the inputs and for causing computing device 100 to perform one or more functions in response to the inputs.

[0018] Applications 106 include functionality to perform any variety of operations on computing device 100. For instance, applications 106 may include a web browser, an email application, text messaging application, instant messaging application, weather application, video conferencing application, social networking application, e-commerce application, stock market application, emergency alert application, sports application, office productivity application, multimedia player, etc. Applications 106 may perform operations described herein using software, hardware, firmware, or a mixture of both hardware, software, and firmware residing in and executing on computing device 100 or at one or more other remote computing devices. In some examples, applications 106 may be implemented as hardware, software, and / or a combination of hardware and software. Computing device 100 may execute applications 106 with one or more processors. Computing device 100 may execute any of applications 106 as or within a virtual machine executing on underlying hardware. Applications 106 may be implemented in various ways. For example, any of applications 106 may be implemented as a downloadable or pre-installed application or “app.” In another example, any of applications 106 may be implemented as part of operating system 102 of computing device 100.

[0019] Viewport 110 may define a portion of a user interface rendered in association with one of applications 106 and / or OS 102 executing at computing device 100. OS 102 may generate interactive user interfaces including items 108A-E organized in a carousel or slideshow configuration included on the portion of the user interface defined by viewport 110. Computing device 100 can render a user interface that includes a carousel user interface (“carousel UI”) included in the portion of the user interface defined by viewport 110 on a display associated with computing device 100, such as display device 104. For example, computing device 100 may generate a user interface that initially showcases items 108A-E as a list of items, with item 108A displayed in a leftmost portion of viewport 110 with item 108B to the right of item 10SA and item 108C to the right of item 108B. Items 108D and 108E may initially be “off screen" and not rendered in the portion of the user interface associated with the carousel UI on display device 104. In one example, UI module 105 interprets user inputs detected at display device 104 relaysinformation about the detected user inputs to applications 106. Applications 106 may then provide user interface data to UI module 105 and / or OS 102 to cause OS 102 to generate viewport 110 and the carousel UI of items 108A-E. For example, one of applications 106 may request that OS 102 generate a carousel user interface associated with viewport 110 based on receiving user inputs to open a collection of media content items that can be displayed in a carousel UI. As another example, UI module 105 may request that OS 102 generate a viewport 110 and carousel UI based on interpreting a user input as being a request to open a collection of media content items that can be displayed in a carousel UI.

[0020] OS 102 and may cause UI module 105 to render the carousel UI associated with viewport 110 on display device 104 and to provide gesture functionality based on user inputs received by display device 104 during display of the carousel UI. OS 102 may generate animations that include items 108A-E visually moving across the portion of the user interface defined by viewport 110 with a sequence of visual effects applied to items 108A-E such that items 108A-E in corresponding positions are displayed with corresponding effects. For example, the animations may include items 108A-E being displayed larger in the center of viewport 110 and smaller at the edges of viewport 110. OS 102 may use these animations and UI module 105 to provide gesture functionality based on user input gestures, for example scrolling gestures. OS 102 may generate gesture functionality, such as horizontal or vertical scrolling gesture functionality, by generating or selecting animations that correspond to the direction, velocity, pressure, acceleration, duration, position, length, etc. of the user input gestures.

[0021] For example, UI module 105 may inform OS 102 that the user has performed a left swipe of a certain length based on determining that the user dragged a finger across the screen from right side to the left side. In such an example, OS 102 may cause display device 104 to render the carousel UI in the portion of the user interface associated with viewport 110 such that item 108A appears only partially “on screen”, items 108B and 108C occurring next to item 108A and being fully visible “on screen”, and item 108D at the rightmost portion of viewport 110 largely “on screen” but partially “off screen”. Thus OS 102 may cause display device 104 to display items 108A-E being rotated into and out of a window within the user interface defined by viewport 110 in a carousel manner responsive to the user swiping on display device 104 in a corresponding direction. OS 102 may further generate the animation(s) such that upon displaying the end of the list of items 108A-E, the first item 108A will be displayed within the portion of the user interfaceassociated with viewport 110 again next to the last item 108E. OS 102 may provide this user input gesture functionality by generating new animations corresponding to user input gestures and / or by causing UI module 105 to progress through a previously generated animation in a corresponding manner.

[0022] While five items 108A-E are shown in FIG. 1, it should be appreciated that any number of items may be included in the list Moreover, while visual representations of items 108A-E are described in relation to a two-dimensional list, it should be appreciated that visual representations may include graphical items arranged in any number of dimensions that a user is capable of navigating using display device 104. For example, computing device 100 may render items 108A-E within the portion of the user interface associated with viewport 110 in multidimensional arrangements such as three-dimensional carousels rotating around center anchor points (e.g., mimicking a real-life carousel ride), grids, spheres, helixes, donuts, 3D or 4D cubes, and card stacks. In some examples, computing device 100 may further render items 108A- E within the portion of the user interface associated with viewport 110 in layered arrangements, wherein each of the layers may have any number of dimensions that a user is capable of navigating using display device 104.

[0023] Although items 108A-E are described as being positioned left-to-right and scrolling occurring as left-to-right, it should be appreciated that scrolling may occur in any direction corresponding to a next or previous item from items 108A-E, which may be positioned in any arrangement next to one another. For example, when a user initially accesses items 108A-E, first item 108A, second item 108B, and third item 108C may be displayed in the portion of the user interface associated with viewport 110 on display device 104. As the user scrolls, swipes or provides other navigation inputs, OS 102 may cause items 108A-E to move across the portion of the user interface associated with viewport 110 left-to-right, right-to-left, bottom-to-top, top-to- bottom, or in any other manner that allows the user to view items 108A-E, and items 108A-Emay be rotated through the carousel UI of the portion of the user interface associated with viewport 110 in any direction.

[0024] For example, OS 102 may generate viewport 110 to define an area within a user interface in which to display items 108A-E in a three-dimensional carousel view where items 108A-E appear arranged in a circular track rotating around a central anchor point, akin to a real-life carousel ride. In order to create such an effect, OS 102 may generate viewport 110 and thecarousel UI such that items 108A-E smaller and with skewed angles as their portion of the carousel appears to rotate towards the edges of viewport 110, larger with non-skewed angles as their portion of the carousel appears to rotate into the center of viewport 110, and disappearing “behind” foreground content when rotating towards the “back” of the carousel,

[0025] Items 108A-E may include any type of content item that may be represented graphically in a portion of a user interface associated with viewport 110 by OS 102. Items 108A-E may be generated by OS 102 (e.g., system icons), retrieved locally from computing device 100 (e.g., locally stored photos), or received from one or more application(s) 106 or from a remote service associated with one or more applications) 106 via an application programming interface (“API”). In the example of FIG. 1, OS 102 may associate each of items 108A-E with metadata defining a position within a carousel user interface framework to be rendered within a portion of a user interface defined by viewport 110. OS 102 generates the carousel user Interface framework to include a plurality of bins (or other type of virtual container), the number of which may be determined based on how many content items are to be included in the carousel. The bins within the framework may define particular sequences or orders in any number of directions, with the assigned bins defining the arrangement in which content items will be presented within a portion of a user interface associated with viewport 110. OS 102 further generates the arrangement of the carousel user interface framework to define the positions and directions in which items 108A-E will move across the portion of the user interface associated with viewport 110 relative to at least two positions defined relative to viewport 110 (e.g., a leftmost edge and a rightmost edge of viewport 110).

[0026] OS 102 may further generate the animation(s) to include in the portion of the user interface associated with viewport 110 that include other visual effects applied to items 108A-E and / or portions of items 108A-E as they rotate into different positions on the user interface defined relative to viewport 110 (e.g., as different portions of the arrangement defined by the framework are rotated into view). For example, OS 102 may generate an animation that displays items 108A-E larger in the center and smaller at the edges of the portion of the user interface corresponding to viewport 110. As another example, when item 108A is to be presented such that it appears half “on-screen” and half “off-screen”, OS 102 may generate an animation that includes a rounding effect applied to the visible portion of a content item that appears half “on screen” and half “off screen” such that the content item looks like it is being bent in half with the“invisible” portion of the content item being hid behind the visible portion of the content item or another content item visible “on-screen”. OS 102 may generate a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two or more points of viewport 110. The universal animation sequence may define the sequence of visual effects in terms of a journey of a single content item moving between two or more points of a visible range of a carousel user interface framework. The visible range of a carousel user interface framework may define what portion of a carousel user interface framework is to be displayed in a “window” within a larger user interface in which a carousel UI is to be rendered. In other words, the visible range of the carousel user interfree framework described animations relative to universal UI definitions, and OS 102 may map such descriptions to viewport 110 with defined boundaries within the actual user interface to be rendered. This enables OS 102 to use the universal animation sequence to generate animations for any number of content items that will be displayed within the carousel UI of viewport 110. Thus, OS 102 may generate the universal animation sequence before even identifying items 108A-E that are to be animated in a carousel view based on it.

[0027] OS 102 may generate the universal animation sequence based at least on visual parameters received from application(s) 106 and / or remote server(s) associated with application(s) 106. The visual parameters may be defined by developers who determine how content items should be presented in carousel user interfaces associated with their applications 106. The visual parameters may indicate visual effects to be included in the sequence and how they should be applied as content items move across the visible range of the carousel user interface framework. For example, the visual effect parameters may indicate visual appearance factors related to transitions, timing, size, transparency, position, masking or stacking, spatial transformations, responses to user interactions, or any other kind of factor that could visually effect how content items are presented in a carousel user interface. The universal animation sequences generated by OS 102 may include algorithms, splines, curves, or any other schema that OS 102 may use to determine a sequence of visual effects that will be applied to items at certain positions and / or moving between certain positions on display device 104 rendering the carousel UI. After generating a universal animation sequence, obtaining items 108A-E, and defining the arrangement of items 108A-E within the carousel user interface framework, OS 102 may create animations featuring these items moving across the portion of the user interfacedefined by viewport 110. These animations are generated to incorporate various visual effects (from the sequence of visual effects defined by the universal animation sequence) applied to items 108A-E (or portions of them) as they transition through and come to rest at different locations within the area defined by viewport 110 rendered on display device 104. For example, OS 102 may generate an animation where items 108A-E rotate into and out of the carousel UI located in the portion of the user interface defined by viewport 110 on display device 104 at a specific speed, with items 108A-E shrinking as they approach the edges and expanding as they get closer to the center of the area in the user interface defined by viewport 110.

[0028] OS 102 may generate animations using the previously generated universal animation sequence and the defined arrangement of items 108A-E within the carousel user interface framework. In order to adapt a given universal animation sequence to a particular group of items 108A-E arranged in a particular order, OS 102 may determine a plurality of “on-screen” positions within the portion of the user interface defined by viewport 110 that items 108A-E (and / or portions of items 108A-E) will move through and come to rest at as a user scrolls through the items 108A-E in the carousel UI rendered in the area defined by viewport 110. OS 102 may then identify which visual effects from the sequence of visual effects the universal animation sequence indicates should be applied to content items at those plurality of positions. Taking into account the characteristics of items 108A-E and display device 104, OS 102 may select one or more visual effects from those indicated by the universal animation sequence and apply those visual effects to items 108A-E (or portions of thereof) when they are rendered in the carousel UI at the plurality of positions defined relative to viewport 1 lO.For example, OS 102 may generate a universal animation sequence that defines a sequence of size changes for every position within the portion of the user interface defined by viewport 110. In such an example, OS 102 may select particular positions within the portion of the user interface defined by viewport 110 at which content items will come to rest (e.g., “notches”) and extrapolate particular size changes to apply to portions of content items or whole content items at those positions based on the sequence of effects defined by the universal animation sequence. OS 102 may make these selections or determinations based at least in part on the content items to be rendered in the carousel UI associated with viewport 110 and the display constraints of display device 104. For example, OS 102 may prioritize centering content items on small screens as such visual effects may enhance the user experience but not prioritize centering content on virtual reality headsets asbeing surrounded by content may enhance the user experience. As another example, OS 102 may generate animations to include some visual effects applied to whole content items and some visual effects applied to partial content items, depending on the type of content.

[0029] In order to select the visual effects to be applied to items 108A-E, OS 102 determines a plurality of positions defined relative to viewport 110 that items 108A-E (or portions thereof) will move through during the animation (e.g., positions defined relative to the “window” in which the carousel UI is displayed on the user interface). OS 102 determines the plurality of positions based on the universal animation sequence and the arrangement of items 108A-E that is defined by the carousel user interface framework. The plurality of positions may include all the positions within the portion of the user interface associated with viewport 110 that items 108A-E will move through during the animation, determined based on the reference points used by the universal animation sequence. For example, if the universal animation sequence defines content items as moving between a leftmost edge and a rightmost edge of a visible range of a carousel user interface framework, then OS 102 will define the plurality of positions that items 108A-E will move through relative to the leftmost edge and rightmost edge of viewport 110.

[0030] The sequence of visual effects defined by the universal animation sequence may indicate types of or specific visual effects to be applied at various places within the visible range of the carousel user interface framework, such as visual effects related to size, transparency, position, transforms, and any other visual appearance factor described herein. OS 102 may determine a plurality of positions at which to apply effects to items 108A-E in the carousel UI to be rendered. OS 102 determines the plurality of positions relative to two or more reference points on or within the boundaries of viewport 110 based on two or more positions in the visible range of the carousel user interface framework for which the universal animation sequence defines particular visual effects. OS 102 may assign a progress value to each determined position relative to the two or more reference points of viewport 110. For example, an item or portion of an item positioned at the left edge of the carousel user interface may have a 0 progress value while one positioned at the right edge has a 1 progress value. In such a system, an item located in the center of the carousel user interface may be assigned a 0.5 progress value. OS 102 may determine a plurality of progress values that correspond with each position in the plurality of positions defined relative to viewport 110. OS 102 may use these progress values to adjust the weights of various visual parameters of the universal animation sequence. The modified universal animationsequence will then define a modified sequence of visual effects that should be applied to items 108A-E when items 108A-E are positioned at the corresponding positions. OS 102 may thus extrapolate and interpolate how to apply specific visual effects from the sequence of visual effects to items L08A-E (and / or portions of items 108A-E) even at positions for which the universal animation sequence does not have an explicitly defined visual effect.

[0031] After determining the visual effects to be applied and the corresponding positions for each of the visual effect, OS 102 generates an animation that causes the display device 104 of the computing device 100 to render the user interface including the carousel UI displayed in the portion of the user interface defined by viewport 110. This animation visually displays items 108A-E moving across display device 104 with the selected visual effects applied to one or more of items 108A-E when the corresponding one of items 108A-E is at a corresponding position in the portion of the user interface associated with viewport 1 lO.Based on the visual effects to be applied and the positions at which to apply them has been determined by OS 102, OS 102 may generate the animation that will cause a display device 104 of computing device 100 to render the user interface that includes the carousel UI included in a portion of the user interface defined by viewport 110. The carousel UI rendered by display device 104 visually displays items 108A- E moving across display device 104 with the selected visual effects applied to them at corresponding positions. For example, OS 102 may cause display device 104 to render a carousel UI animation that includes items 108A-E rotating into and out of a “window” within the user interface, with one or more of items 108A-E changing in size, transparency level, position, and rotation as the one or more of items 108A-E move across the portion of the user interface associated with viewport 110 based on applying the selected visual effects to items 108A-E (and / or portions of items 108A-E) at the corresponding positions.

[0032] In some implementations, the universal animation sequence may further indicate visual effects associated with certain contexts. For example, the universal animation sequence may define a blurring effect that should be applied to content items while the user is scrolling quickly. In such implementations, OS 102 may further extrapolate how to apply visual effects to items 108A-E (and / or portions of items 108A-E) in different contexts. Thus, OS 102 may generate multiple animations for different contexts (e.g., for different scroll speeds) and / or may generate animations that automatically adapt to changes in contexts (e.g., changes in user input speeds).

[0033] By pre-defining a universal animation sequence, the carousel user interface may beimplemented with significantly reduced computational resources at runtime, which not only enhances the performance of computing devices but also ensures a smoother animation experience for the user even when complex visual effects are used. This approach also streamlines development of carousel user interfaces, as developers no longer need to manually configure animations for each content item or state (e.g., previous, current, next). Additionally, the use of progress values with a universal animation sequence enables highly adaptive animations that may accommodate any type or number of content items as well as any kind of user input gesture. This approach therefore leads to a more flexible and scalable system for generating carousel user interfaces by consistently providing adaptable carousel animations that are responsive to myriad of user inputs without the need for manual adjustments or maintenance on the part of developers.

[0034] FIG. 2 is a block diagram illustrating a computing device for generating and displaying a carousel user interface, in accordance with techniques of this disclosure. Computing device 200 may be one example of any computing device mentioned herein (e.g., computing device 100). FIG. 2 illustrates only one particular example of computing device 200, and many other examples of computing device 200 may be used in other instances and may include a subset of the components included in example computing device 200 or may include additional components not shown in FIG. 2.

[0035] As shown in FIG. 2, computing device 200 may include one or more processors 238 ("processors 238”), one or more user interface (UI) components 240, one or more input components 222, one or more output components 244, one or more communications units 246 (“communication unit(s) 246”), one or more communication channels 252 (illustrated as “COMM. CHANNEL(S) 252” in FIG. 2, hereinafter “comm channels 252”), and one or more storage components 250 (“storage components) 250”). As also shown in FIG. 2, storage components 250 may include operating system 202 (“OS 202”), application(s) 206, data repository 212, user interface module 205 (“UI module 205”), animation module 216, and content management module 218. Although UI module 205, animation module 216, and content management module 218 are depicted as separate components within storage components) 250, it should be appreciated that, in some examples, any of or all of modules 205, 216, and / or 218- may be a part of OS 202 and / or may be included in application(s) 206. For example, OS 202 may perform one or more of the processes described herein with respect to modules 205, 216, and / or218 by requesting that modules 205, 216, and / or 218 of application(s) 206 perform the processes as described herein.

[0036] In some examples, UI component 240 may be a presence-sensitive display configured to detect input (e.g., touch and non-touch input) from a user of respective computing device 200. UI component 240 may output information to a user in the form of a UI, which may be associated with functionality provided by computing device 200. Computing device 200 may output such UIs that may be associated with computing platforms, operating systems, applications, and / or services executing at or accessible from computing device 200 (e.g., electronic message applications, chat applications, Internet browser applications, mobile or desktop operating systems, social media applications, electronic games, menus, and other types of applications).

[0037] Processors 238 are one or more hardware processors that may each include processing circuitry and may each, alone or in any combination, implement functionality and / or execute instructions within computing device 200. For example, processors 238 may receive and execute instructions that provide the functionality of applications 206, and OS 202. These instructions executed by processors 238 may cause computing device 200 to store and / or modify information within storage components 250 during program execution. Processors 238 may execute instructions of modules 214-220 and applications 206 to perform one or more operations. That is, modules 214-220, applications 206, and OS 202 may be operable by processors 238 to perform various functions described herein.

[0038] Communication, units 246 of computing device 200 may communicate with one or more external devices via one or more wired and / or wireless networks by transmitting and / or receiving network signals on the one or more networks. Examples of communication units 246 include a network interface card (e.g., an Ethernet card), an optical transceiver, a radio frequency transceiver, a GPS receiver, or any other type of device that can send and / or receive information. Other examples of communication units 246 may be devices configured to transmit and receive Ultrawideband®, Bluetooth®, GPS, 3G, 4G, 5G, satellite, and Wi-Fi®, etc. that may be found in computing devices, such as mobile devices and the like. Input components 222 of computing device 200 may receive input Examples of input are tactile, audio, and video input. Input components 222 of computing device 200, in one example, includes a presence-sensitive display, a fingerprint sensor, touch-sensitive screen, mouse, keyboard, voice responsive system, video camera, microphone or any other type of device for detecting input from a human or machine.

[0039] Input components 222 may include one or more sensors. Numerous examples of sensors exist and include any input component configured to obtain environmental information about the circumstances surrounding computing device 200 and / or physiological information that defines the activity state and / or physical well-being of a user of computing device 200. In some examples, a sensor may be an input component that obtains physical position, movement, and / or location information of computing device 200. For instance, sensors may include one or more location sensors (e.g., GNSS components, Wi-Fi components, cellular components), one or more temperature sensors, one or more motion sensors (e.g., multi-axial accelerometers, gyros), one or more pressure sensors (e.g., barometer), one or more ambient light sensors, and one or more other sensors (e.g., microphone, camera, infrared proximity sensor, hygrometer, and the like).

[0040] Output components 244 of computing device 200 may generate one or more outputs. Examples of outputs are tactile, audio, and video output. Output components 244 of computing device 200, in one example, includes a presence-sensitive display, sound card, video graphics adapter card, speaker, liquid crystal display (LCD), or any other type of device for generating output to a human or machine. At least one of output components 244 may function as an output (e.g., display) device using any one or more display components, such as a liquid crystal display (LCD), microLED, miniLED, dot matrix display, light emitting diode (LED) display, organic light-emitting diode (OLED) display, e-ink, or similar monochrome or color display capable of outputting visible information to a user of computing device 200.

[0041] Comm channels 252 may interconnect each of the components 238, 240, 222, 244, 246, and 250 for inter-component communications (physically, communicatively, and / or operatively). In some examples, comm channels 252 may include a system bus, a network connection (e.g., to a wireless connection as described above), one or more inter-process communication data structures, or any other components for communicating data between hardware and / or software locally or remotely.

[0042] Storage components 250 of computing device 200 may store information for processing during operation of computing device 200 (e.g., computing device 200 may store applications 206, OS 202, and modules 205, 216, and / or 218 during execution at computing device 200). In some examples, storage components 250 may include a temporary memory. Thus, some of storage components 250 of computing device 200 may be configured for short-term storage of information as volatile memory and therefore not retain stored contents if powered off. Examplesof volatile memories include random access memories (RAM), dynamic random-access memories (DRAM), static random access memories (SRAM), and other forms of volatile memories known in the art.

[0043] Storage components 250 may include one or more non-transitory computer-readable storage media that may be a part of a computer program product. Storage components 250 may be configured to store larger amounts of information than volatile memory. Storage components 250 may further be configured for long-term storage of information as non-volatile memory space and retain information after power on / off cycles, for example in data repository 212. Examples of non-volatile memories include magnetic hard disks, optical discs, floppy discs, flash memories, or forms of electrically programmable memories (EPROM) or electrically erasable and programmable (EEPROM) memories. Storage components 250 may store program instructions and / or information associated with applications 206, OS 202, and modules 205, 216 and / or 218.

[0044] As shown in the example of FIG. 2, computing device 200 includes OS 202. OS 202 may control the operations of components of computing device 200 as well as provide an execution environment for one or more modules, such as UI module 205, animation module 216, and content management module 218, and one or more applications, such as applications 206. OS 202 may represent a multi-threaded operating system or a single-threaded operating system with which Ul module 205, animation module 216, content management module 218, and applications 206 may interface to access hardware of computing device 200. OS 202 may include a kernel that facilitates access to the underlying hardware of computing device 200, where kernel may present a number of different interfaces (e.g., application programmer interfaces (APIs) that UI module 205, animation module 216, content management module 218, and applications 206 may invoke to access the underlying hardware of computing device 200. Modules 205, 216, and / or 218 may each include program instructions and / or data that are executable by computing device 200 (e.g., by one or more processors 238). For example, modules 205, 216, and / or 218 may include instructions that cause computing device 200 to perform one or more of the operations and actions described in the present disclosure.

[0045] UI module 205 of computing device 200 may control the function of the input devices and / or output devices included in computing device 200, such as UI component 240, input component(s) 222, and / or output components) 244, using various technologies. In someexamples, UI module 205 may control an input device that includes a presence-sensitive input component, such as a resistive touchscreen, a surface acoustic wave touchscreen, a capacitive touchscreen, a projective capacitance touchscreen, a pressure sensitive screen, an acoustic pulse recognition touchscreen, or another presence-sensitive display technology. In some examples, UI module 205 may control an input device (e.g., one or more of input components 222) using microphone technologies, infrared sensor technologies, or other input device technology for use in receiving user input. In some examples UI module 205 may control an output device (e.g., UI component 240 and / or one or more of output components 244) configured to present output to a user using any one or more display devices, speaker technologies, haptic feedback technologies, or other output device technology for use in outputting information to a user. In some implementations, UI module 205 may perform one or more of the operations discussed with respect to UI module 105 of computing device 100. UI module 205 may receive instructions from OS 202 and / or one or more other modules 216-220 or application^) 206 included in computing device 200 to render an animation on an output component 244, for example a touchscreen display associated with computing device 200. The animation rendered by UI module 205 may be received by UI module 205 from animation module 216 and / or may be retrieved by UI module 205 from local storage (e.g., data repository 212) or remote storage (e.g., a remote file storage service). The animation may include graphical representations of content items arranged in the carousel user interface framework by content management module 218. The animation may include visual effects determined based on a universal animation sequence and applied to the arrangement of particular content items defined by the carousel user interface framework by animation module 216. The generation of the animation and the universal animation sequence are discussed in more detail below with respect to animation module 216. UI module 205 causes the animation to be rendered within a user interface of OS 202 and / or a user interface of the application 206 that requested rendering of the carousel view of content items.

[0046] UI module 205 may receive indications of various types of user inputs from the input devices included in computing device 200, such as UI component 240 or input components) 222, and / or from another portion of computing device 200 such as OS 202 or applications) 206. UI module 205 may facilitate user interaction with and control of the user interface provided at one or more output devices of computing device 200, such as UI component 240 and / or output component(s) 244. UI module 205 may receive indications of user inputs corresponding toparticular positions on UI component 240 and / or an input component 222, for example tap or swipe locations on a touchscreen, from UI component 240, input component 222, and / or OS 202. UI module 205 may further determine directions, scroll distances, speeds, and types of gestures (e.g., tapping, scrolling, etc.) associated with received indications of user inputs corresponding to particular positions. UI module 205 may provide indications of the positions, speeds, directions, and types of gestures to one or more other modules 216 and / or 218. For example, UI module 205 may provide an indication that a user is scrolling quickly towards the end of a list to content management module 218, which may cause content management module 218 to load additional content items into the carousel user interface framework (e.g., loading more search results). As another example, UI module 205 may provide an indication of user scroll speed to animation module 216 which can cause animation module 216 to generate an animation corresponding to that scroll speed. UI module 205 may also control how the animation is rendered based on the received input. For example, UI module 205 may determine a scroll distance that corresponds to a user input, and then responsively progress the output animation in a manner consistent with a user scrolling through the content items included in that same distance within the carousel UI.

[0047] The animation rendered by UI module 205 on UI component 240 and / or one or more of output components 244 of computing device 200 includes a plurality of content items associated with the carousel user interface framework in a carousel view, revolving around a central point. In some animations, the content items may be displayed such that they appear to be in front of the user. This display arrangement gives the impression that the user is positioned outside the carousel, looking at the items as they rotate or move within the carousel UI. In some animations, the content items may be displayed such that they appear to be arranged around the user. This display arrangement creates the impression that the user is positioned inside the carousel, surrounded by the items as they rotate or move around them. Displayed attributes associated with the animation may include, for example, number of items, first item displayed, radius, rotation angle (of the carousel), textual information, spacing between content items, number of visible content items, visual effects applied to content items, and other attributes relating to interactions, rendering or displaying of the content items. In some implementations, the animations rendered by UI module 205 may be dynamically responsive to user input. Thus, UI module 205 may render a different portion of an animation or render an animation differently in response to interpreting an input gesture of the user such as a tap, swipe, scroll, or zoom gesture.

[0048] Animation module 216 may generate universal animation sequences based at least in part on visual effect parameters received by OS 202 from application(s) 206 and / or remote server(s) associated with application(s) 206. The visual effect parameters indicate how visual effects should be applied to content items in carousel user interface(s) within the application(s) 206. For example, the visual effect parameters may indicate visual appearance factors related to transitions, timing, size, position, transparency, masking or stacking, radius, curvature, color tint, hue, saturation, text size, spatial transformations (or other transforms), responses to user interactions, or any other kind of factor that could visually effect how content items are presented in a carousel view. Once animation module 216 has generated the universal animation sequence, animation module 216 may cause OS 202 to store the universal animation sequence locally, for example in data repository 212, or in some memory remotely accessible to computing device 200 (e.g., a remote file storage service).

[0049] Animation module 216 generates one or more animations to provide to UI module 205 for display based on the universal animation sequence and the content items associated with the carousel user interface framework. Animation module 216 receives indications of the content items associated with the carousel user interface framework from content management module 218, as will be discussed in more detail below. The universal animation sequence defines a sequence of visual effects based on relative positioning between two or more points of the visible range of the carousel user interface framework. Animation module 216 selects which visual effects of the sequence of visual effects will be presented on particular content items at particular positions within the visible range based on adjusting a plurality of weights or parameters of the universal animation sequence until a sequence of visual effects customized for these particular content items is achieved.

[0050] Animation module 216 may determine the weights, parameters, and adjustments of the universal animation sequence based on the relative positioning data indicated by the universal animation sequence and determining a plurality of positions at which to those visual effects to content items within the portion of the user interface in which the carousel UI is to be displayed. Animation module 216 may determine the plurality of positions within a portion of the user interface, which may be referred to herein as a “viewport”, that includes the carousel UI. Animation module 216 determines the plurality of positions within the portion of the user interface associated with the viewport that correspond to reference points within the visible rangeof the carousel user interface framework defined by the universal animation sequence. The reference points within the visible range of the carousel user interface framework may include the points that the universal animation sequence uses to define application of visual effects. The reference points may define boundaries, centers, quadrants, or any other points or portions in the visible range at which visual effects may be applied or have their intensity varied. For example, the universal animation sequence may include one or more weights or parameters associated with application of a transparency effect defined relative to points within the visible range at which the transparency effect will vary from 0% transparency to 100% transparency. Animation module 216 may map these reference points defined relative to this universally defined visible range to positions within the viewport of the actual user interface to be rendered. Animation module 216 may further determine other positions within the carousel UI that content items may be rendered that are not associated with a particular visual effect in the universal sequence, for example based on determining positions that content items may move to based on various user inputs. Animation module 216 thus determines a plurality of positions that the content items (or portions of content items) of the carousel user interface framework will correspond to as the content items (or portions) visually move within the carousel UI.

[0051] Animation module 216 may further determine progress values associated with the plurality of positions defined relative to at least two reference points of the visible range that are defined by the universal animation sequence. For example, the universal animation sequence may define effects in relation to a topmost edge and a bottommost edge of the visible range of the carousel user interface framework. In such an example, animation module 216 may determine one edge of the visible range corresponds to a (0) edge and the other edge to a (1) edge. In such an example, animation module 216 may determine that a content item (or portion of a content item) at a position halfway between a topmost edge and a bottommost edge of the viewport has a (0.5) progress value. Animation module 216 may determine an adjustment to a weight or a parameter of the universal animation sequence that corresponds to that progress value for this content item (or this portion of a content item). Animation module 216 may determine corresponding progress values for each of the plurality of positions to determine visual effect(s) and parameters of those visual effects applicable to content items in certain positions in any number of dimensions capable of being represented within a carousel view.

[0052] Moreover, in some implementations, animation module 216 may determine the pluralityof positions based on receiving an indication of a speed, direction, scroll distance, scroll position, etc. associated with a user input gesture as determined by UI module 205. For example, in response to receiving an indication that a user is scrolling faster than content items in a current animation are moving, animation module 216 may generate a new animation in which the content items are moving faster for display. The animations generated by animation module 216 based on the content items included in the framework and the adjustments to the universal animation sequence are then provided to UI module 205 for display at computing device 200 and / or are stored by animation module 216 locally (e.g., data repository 212) or remotely (e.g., a remote file sharing service).

[0053] Content management module 218 generates the carousel user interface framework and manages the content items associated with the carousel user interface framework. Content management module 218 generates carousel user interface frameworks by creating data structures defining orders and arrangements of particular numbers and types of content items. In some implementations, content management module 218 determines the numbers and types of content items to use based on receiving indications of the content items to be included in the carousel user interface framework from the application 206 requesting the carousel user interface and / or based on requests received from other application(s) 206 or module(s) 105 and / or 216, as described herein. In some implementations, content management module 218 determines the numbers and types of content items based on obtaining data about the content items from the source of the content items to be included in the framework.

[0054] Content management module 218 may obtain or retrieve the content items to include in the framework from any number of sources accessible to OS 202. For example, content management module 218 may obtain the content items from application(s) 206, remote server(s) associated with applications) 206, data repository 212, a remote file storage service accessible to computing device 200. Content management module 218 may assign the obtained content items a relative position within the arrangement defined by the framework, as described elsewhere herein. The relative positions of the content items define an order of the content items in however many dimensions are included in the framework. Carousel user interface frameworks may define arrangements of content items in two dimensions, three dimensions, or any number of dimensions that may be represented in a carousel user interface. The order of the content items defined by the framework defines the order in which the content items will move across thecarousel user interface during presentation of the animations) generated by animation module 216. Once the arrangement of content items is defined for the carousel user interface framework, content management module 218 provides indications of the content items and the defined arrangement for the content items in the carousel user interface framework to animation module 216 for use in generating the animation(s), as described above herein.

[0055] FIG. 3 is a conceptual diagram illustrating an example of applying a universal animation sequence to a plurality of particular content items arranged in a carousel user interface, in accordance with techniques of this disclosure. One or more of the components of the systems described elsewhere herein may perform the example described with respect to FIG. 3. For the sake of illustration, the operations of FIG. 3 will be discussed with respect to computing device 100 of FIG. 1 , although it should ne appreciated that one or more operations discussed herein may additionally or alternatively be performed by computing device 200 of FIG. 2.

[0056] Viewport 310 defines a portion of the user interface in which a carousel UI will be rendered (e.g., viewport 110). The carousel UI associated with viewport 310 includes any content items arranged within a carousel user interface framework that currently occur within the visible range of the carousel user interface framework as various portions of the framework are rotated into and out of the visible range (e.g., in response to scrolling user inputs). Content items 308A-E may include various types of content items described herein, such as image content items or selectable user interface elements. Content items 308B-D of FIG. 3 occur within a portion of the carousel user interface framework that currently corresponds to the visible range of the framework and as such are rendered within the carousel UI of viewport 310. Thus, content items 308B-D may be currently displayed within the carousel portion of the user interface associated with viewport 310 as the user interface is rendered on a display device (e.g., display device 104 of computing device 100). Content items 308A and 308E of FIG. 3 occur in a portion of the carousel user interface framework occurring outside the visible range and therefore are not displayed in the currently rendered carousel UI associated with viewport 310. That is, content items 308A and 308E are assigned to bins or other virtual containers that are not currently determined to occur within the visible range of the carousel user interface framework, either due to a default or initial placement of the items in the framework or due to user inputs scrolling through those content items until they are outside of the visible range. As shown by the shading and arrow in FIG. 3, content items such as content item 3 OSA maybe recycled once they havebeen scrolled “off-screen” on one edge such that they reappear “on-screen" on the opposite edge as the user continues to scroll and circles back around to that portion of the carousel user interface framework.

[0057] Content items 308B-D are depicted in FIG. 3 as being rendered with different visual effects in different positions within the carousel UI associated with viewport 310. Content items 308B and 308D, located near the edges of viewport 310, are depicted as smaller than content item 308C located near the center of viewport 310. A developer of an application (e.g., application(s) 106) may provide various visual effect parameters for applying to any content items to be rendered within a given carousel UI in an associated application. For example, a photos application 106 may provide OS 102 of computing device 100 with size parameters that generally describes sizes (or relative sizes) for rendering content items at edges and at the center of viewport 310 within the photos application user interface. In order to accommodate a variety of content types and user interactions, OS 102 may use these visual effect parameters to generate a universal animation sequence in the form of an algorithm, spline, curve, or other schema that defines how visual effects are applied to a sequence of positions that any content items will move through and / or come to rest at relative to the portion of the user interface defined by viewport 310. Further, OS 102 may generate this universal animation sequence prior to obtaining the particular content items that will be included in the carousel UI based on defining a sequence of visual effects that may be applied to any content item as it moves through any position that is defined relative to two or more specific points within the portion of the user interface defined by viewport 310.

[0058] OS 102 may obtain the content items 308A-E from various sources, as described herein. For example, content items 308A-E may be obtained from local or remote storage, retrieved from a search engine responsive to a search query, or identified based on indications received from an application that is requesting rendering of the carousel UI. In the context of a photos application example, a computing device may obtain photos from local storage or a camera application of the computing device.

[0059] In order to display the content items 308 A-E in a carousel view, OS 102 may generate a carousel user interface framework that defines an arrangement in which the content items 308A- E will be presented in the carousel UI. OS 102 associates metadata with each of the content items 308A-E to define an order and arrangement of content items 308A-E within the carousel userinterface framework, where the metadata defines the order and / or arrangement in which the content items 308A-E are to be rendered in the carousel UI. For example, the framework may include a plurality of virtual containers that cause associated content items 308A-E to appear on screen when the system determines that a user has scrolled to cause that portion of the framework to occur within the visible range. In such an example, assigning metadata associated with a first virtual container to content item 308A may cause content item 308A to appear on screen to the left of content item 308B which is assigned metadata associated with a subsequent virtual container of the arrangement. In the context of a photos application example, OS 102 of computing device 100 may obtain photos from local storage and determine that the photos are to be displayed in a particular order from left to right that corresponds to older photo files on the left and newer photo files on the right (e.g., based on metadata defining file creation dates). In this example, OS 102 could then arrange the photos in the carousel user interface framework by associating corresponding metadata defining a rendering order with the photo files (or representations thereof) stored in a display buffer of display device 104 of computing device 100.

[0060] OS 102 may determine, based on the universal animation sequence and the arrangement of content items 308A-E defined by the framework, a plurality of positions 350A-F that content items 308A-E (and / or portions of content item 308 A-E) will travel through and / or rest at while content items 308A-E visually move into, out of, and through the carousel UI of viewport 310. OS 102 may determine all positions within the carousel UI of viewport 310 that content items 308 A-E may move through and / or come to rest at. OS 102 may determine the plurality of positions 350A-F based on indications of the universal animation sequence for which effects should be applied to content items at certain positions within the visible range of the framework, and further based on mapping these positions to positions 350A-F associated with viewport 310 based on rendering characteristics of the actual content items 308A-E and the display constraints of the display device that will render the carousel UI associated with viewport 310 For example, the universal animation sequence may include splines that define changes (e.g., deltas) in visual effects including size, position, transparency, spatial transformations, and / or other transforms to be applied between a left edge to right edge of the visible range of the framework, which OS 102 may determine correspond to the (0.0) position 350A and (1.0) position 350F relative to viewport 310. In such an example, OS 102 may determine how many content items 308A-E to render inthe carousel UI at once, the positions within the carousel UI relative to viewport 310 to initially render content items 308A-E, the positions to consider as “notches” where content items 308A-E will come to rest (or “click in place”) in response to user input navigation gestures, and any positions content items 308A-E may move through during display of the animation generated based on the universal animation sequence. In some implementations, OS 102 may additionally or alternatively determine the plurality of positions 350A-F relative to viewport 310 that portions of content items 308A-E will occur.

[0061] OS 102 may determine one or more visual effects from the sequence of visual effects defined by the universal animation sequence to apply to the content items 308A-E at the plurality of determined positions 350A-F within the carousel UI associated with viewport 310, as described herein. For example, the universal animation sequence may include a spline that defines changes (e.g., deltas) in size rendering parameters from the leftmost edge to the rightmost edge of the visible range of the carousel user interface framework, which OS 102 may determine correspond to the (0.0) position 350A and (1.0) position 350F relative to viewport 310. In such an example, OS 102 may determine the specific visual effects to apply to the content items 308A-E based on the more general sequence of visual effects included in the universal animation sequence by modifying weights or parameters of the universal animation sequence. OS 102 may determine how to adjust the universal animation sequence based on progress values associated with the content items 308 A-E (and / or portions of content items 308A-E) moving through or between or resting at the plurality of positions 350A-F. The progress values represent weights to be applied to visual effects used to animate content items 308A-E at corresponding positions 350A-F. OS 102 determines the progress values based on mapping the plurality of positions 350A-F within the carousel UI associated with viewport 310 to points within the visible range defined by the universal animation sequence and determining values that represents distances between those reference points of the visible range.

[0062] For example, OS 102 may determine that portions of content items 308A-E will come to rest at positions 35OB-E relative to viewport 310. OS 102 may determine that the universal animation sequence defines a sequence of visual effects relative to a left edge and a right edge of the visible range of the framework. OS 102 may determine that positions 350B-E correspond with progress values of (0.1), (0.3), (0.7), and (0.9) as shown in FIG. 3, respectively, based on mapping the left and right edges of the visible range to the (0.0) position 350A and (1.0) position350F, respectively, and determining the distances between each of the positions 350B-E mapped to the visible range and the reference points defined for the visible range. Based on determining these progress values, OS 102 may adjust weights or parameters of the universal animation sequence that generally define static and dynamic visual effects for resting and moving content items to be specifically defined for these content items 308A-E at positions 350B-E within viewport 310 corresponding to these progress values. Likewise, OS 102 may adjust weights and parameters of the universal animation sequence for other progress values and other visual effects for resting and / or moving content items.

[0063] Further, in some implementations, OS 102 may determine different visual effects to apply to different types of content included in content items 308A-E. For example, a developer may specify visual effect parameters to be applied to image content items. In such an example, OS 102 may generate the universal animation sequence such that it defines one sequence of visual effects to apply to image content items (e.g., more closely matching the developer’s specifications) and another sequence of visual effects to apply to video content items (e.g., modified to accommodate visible features of video content items like “play” buttons).Alternatively or additionally, OS 102 may generate a universal animation sequence that defines a same sequence of visual effects to be applied to all content items in the visible range of the carousel user interface framework, but OS 102 may determine content resting positions, visible range reference points, progress values, and / or user interaction responses differently for different types of content such that different visual effects are selected for those types of content. For example, OS 102 may determine that video content items should only come to rest at three “notch” positions within the “window” defined by the boundaries of viewport 310 where the user will be able to see the video title clearly. As another example, OS 102 may determine different reference points within the visible range for selectable content items based on input / output device capabilities (e.g., a lack of touchscreen sensitivity on the edges of display device 104). As another example, OS 102 may determine progress values for entire video content items while determining progress values for portions of image content items. As yet another example, OS 102 may determine that blur effects should not applied in response to scroll speeds of a certain velocity when the content items prominently feature textual content.

[0064] OS 102 may further select specific static visual effects and dynamic visual effects to determine a specific subset of visual effects from the more general and more expansive sequenceof visual effects defined in the universal animation sequence. In some implementations, the visual effect parameters received from developers (e.g., associated with application^) 106 requesting rendering of a carousel UI) may include indications of static visual effects and dynamic visual effects. For example, developers may provide visual effect parameters indicating a highlighted border to appear around stationary content items and a blurring effect to be applied to moving content items. In such an example, OS 102 may generate the universal animation sequence to reflect these static and dynamic visual effects and generate progress values that indicate resting or moving states such that applying the weights corresponding to the progress values to the universal animation sequence results in a modified sequence of visual effects that includes different visual effects for resting and moving content items.

[0065] Moreover, in some implementations, OS 102 may generate a universal animation sequence that includes only one set of visual effect parameters for all (resting and moving) content items, yet OS 102 may still select different static and dynamic visual effects from the sequence of visual effects defined by the universal animation sequence. In such implementations, OS 102 may select different visual effects from the sequence of visual effects defined by the universal animation sequence for resting and moving content items even though the universal animation sequence only defines one set of visual effects based on determining that the universal animation sequence does not specify which visual effects are to be applied to static or dynamic content, and further based on determining that rendering characteristics of content items 308A-E and display device 104 support those effects. For example, the sequence of visual effects defined by the universal animation sequence may include both blurring and highlighting effects. In such an example, OS 102 may determine progress values for resting and moving content items differently such that when corresponding weights are applied to the universal animation sequence the resulting modified sequence of visual effects includes the blurring effect being applied only to content items 308A-E with stationary progress values and the highlighting effect being applied only to content items 308A-E with dynamic progress values.

[0066] OS 102 may generate one or more animations that include the content items 308A-E scrolling into, through, and out of the portion of the user interface associated with viewport 310 in accordance with a carousel view. OS 102 may generate the animation to include specific visual effects applied to portions of the content items 308A-E when the portions of the content items 308A-E are rendered at the plurality of positions 350A-F that are associated with theprogress values used to determine the visual effects. OS 102 may cause display device 104 to render the user interface of the application 106 that requested the carousel UI with the generated animation included in the carousel view portion of the user interface defined by viewport 310. In response to receiving certain user inputs (e.g., scrolling, pausing, etc.), UI module 105 may cause OS 102 to progress through, pause, rewind, speed up, slow down, or otherwise modify the animation to match a determined intent of the user’s inputs.

[0067] In some implementations, multiple animations may be generated for different user input characteristics. For example, one animation may be generated for X speed user inputs and another for Y speed user inputs. When a user input is received that has a velocity between X speed and Y speed, the system may interpolate between the two animations to generate a middle speed scrolling animation that may be displayed. Likewise, interpolation may be used to generate animations with other types of user input contexts “between” two or more defined contexts associated with other animations. For example, multiple animations may be generated to be responsive to user inputs corresponding to different velocities, directions, touch pressures, and positions within the user interface.

[0068] FIG. 4 is a flow chart illustrating an example operation for generating and displaying a carousel user interface, in accordance with techniques of this disclosure. Although FIG. 4 depicts steps performed in a particular order for purposes of illustration and discussion, techniques of the present disclosure are not limited to the particularly illustrated order or arrangement. Various processes described below may be omitted, rearranged, combined, and / or adapted in various ways without deviating from the scope of the present disclosure. The operation of FIG. 4 may be performed by one or more components of one or more systems described with respect to FIGS. 1-3. For example, OS 102 of computing device 100 and / or one or more of the modules 214-220 of computing device 200 may perform the operations described below. For illustration sake, the operations of FIG. 4 will be described with respect to computing device 200 of FIG. 2.

[0069] Animation module 216 of computing device 200 may generate a universal animation sequence (402). The generated universal animation sequence defines a sequence of visual effects to be applied to any content item as it moves between points of a carousel UI portion of a user interface (e.g., a viewport) that correspond to a visible range of a carousel user interface framework.

[0070] Content management module 218 of computing device 200 may define the displayarrangement of particular content items within the carousel user interface framework (404). Content management module 218 may define the display arrangement the plurality of particular content items within the carousel UI by associating metadata of a plurality of bins (or other data structures) with metadata of the particular content items in order to assign the particular content items a display arrangement within the carousel UI.

[0071] Animation module 216 may determine, based on the universal animation sequence and the arrangement defined by the framework, positions that the particular content items (and / or portions of the content items) will travel through while the particular content items visually move between the pointe of the viewport (e.g., points within the carousel view portion of the UI to be rendered) (406). For example, animation module 216 may determine the positions that the content items will pass through or come to rest at based on the order and directions of content items within the framework, expected scroll directions and / or speeds of user inputs, the number of content items that will be rendered at a given time, and certain positions indicated by the universal animation sequence as being associated with visual effects.

[0072] Animation module 216 may determine, based on the universal animation sequence, one or more visual effects from the sequence of visual effects to apply to the particular content items at the positions (408). As described herein, animation module 216 may determine progress values that represent distances each of the plurality of positions previously determined and the two or more reference points indicated by the universal animation sequence. Animation module 216 may then adjust weights or parameters of the universal animation sequence in a manner corresponding to that progress value for a content item (or a portion of a content item). Such adjustments of the universal animation sequence may be performed for the plurality of positions to determine a modified animation sequence that defines a modified version of the sequence of visual effects defined by the original universal animation sequence.

[0073] Animation module 216 may generate an animation that includes the universal animation sequence applied to the particular content items by applying the one or more visual effects to the particular content items at the positions in the carousel UI associated with viewport (410). For example, animation module 216 may generate an animation that includes content items at initial positions within the portion of the interface associated with the viewport that can be progressed through in various directions and at various velocities such that different visual effects are applied to the content items moving into and out of the carousel UI associated with the viewportat different speeds and in different directions.

[0074] UI module 205 may output the animation associated with the carousel user interface framework (412). For example, UI module 205 may cause UI component 240 and / or one or more output components 244 to render a user interface that includes a carousel UI portion in which the animation is displayed including the one or more visual effects from the sequence of visual effects applied to the particular content items at the determined positions.

[0075] In one or more examples, the functions described may be implemented in hardware, software, firmware, or any combination thereof. If implemented in software, the functions may be stored on or transmitted over, as one or more instructions or code, a computer-readable medium and executed by a hardware-based processing unit. Computer-readable media may include computer-readable storage media, which corresponds to a tangible medium such as data storage media, or communication media including any medium that facilitates transfer of a computer program from one place to another, e.g., according to a communication protocol. In this manner, computer-readable media generally may correspond to (1) tangible computer- readable storage media, which is non-transitory or (2) a communication medium such as a signal or carrier wave. Data storage media may be any available media that may be accessed by one or more computers or one or more processors to retrieve instructions, code and / or data structures for implementation of the techniques described in this disclosure. A computer program product may include a computer-readable medium.

[0076] By way of example, and not limitation, such computer-readable storage media may comprise RAM, ROM, EEPROM, CD-ROM or other optical disk storage, magnetic disk storage, or other magnetic storage devices, flash memory, or any other storage medium that may be used to store desired program code in the form of instructions or data structures and that may be accessed by a computer. Also, any connection is properly termed a computer-readable medium. For example, if instructions are transmitted from a website, server, or other remote source using a coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL), or wireless technologies such as infrared, radio, and microwave, then the coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. It should be understood, however, that computer-readable storage media and data storage media do not include connections, carrier waves, signals, or other transient media, but are instead directed to non-transient, tangible storage media. Disk and disc,as used herein, includes compact disc (CD), laser disc, optical disc, digital versatile disc (DVD), floppy disk and Blu-ray disc, where disks usually reproduce data magnetically, while discs reproduce data optically with lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0077] Instructions may be executed by one or more processors, such as one or more digital signal processors (DSPs), general purpose microprocessors, application specific integrated circuits (ASICs), field programmable logic arrays (FPGAs), or other equivalent integrated or discrete logic circuitry. Accordingly, the term “processor,” as used herein may refer to any of the foregoing structures or any other structure suitable for implementation of the techniques described herein. In addition, in some aspects, the functionality described herein may be provided within dedicated hardware and / or software modules. Also, the techniques could be fully implemented in one or more circuits or logic elements.

[0078] The techniques of this disclosure may be implemented in a wide variety of devices or apparatuses, including a wireless handset, an integrated circuit (IC) or a set of ICs (e.g., a chip set). Various components, modules, or unite are described in this disclosure to emphasize functional aspects of devices configured to perform the disclosed techniques, but do not necessarily require realization by different hardware units. Rather, as described above, various units may be combined in a hardware unit or provided by a collection of intraoperative hardware units, including one or more processors as described above, in conjunction with suitable software and / or firmware.

[0079] It is to be recognized that, depending on the example, certain acts or events of any of the techniques described herein may be performed in a different sequence, may be added, merged, or left out altogether (e.g., not all described acts or events are necessary for the practice of the techniques). Moreover, in certain examples, acts or events may be performed concurrently, e.g., through multi-threaded processing, interrupt processing, or multiple processors, rather than sequentially.

[0080] In some examples, a computer-readable storage medium comprises a non-transitory medium. The term “non-transitory” indicates that the storage medium is not embodied in a carrier wave or a propagated signal. In certain examples, a non-transitory storage medium may store data that may, over time, change (e.g., in RAM or cache).

[0081] The technology discussed herein makes reference to servers, databases, softwareapplications, and other computer-based systems, as well as actions taken and information sent to and from such systems. The inherent flexibility of computer-based systems allows for a great variety of possible configurations, combinations, and divisions of tasks and functionality between and among components. For instance, processes discussed herein may be implemented using a single device or component or multiple devices or components working in combination. Databases and applications may be implemented on a single system or distributed across multiple systems. Distributed components may operate sequentially or in parallel.

[0082] While the present subject matter has been described in detail with respect to various specific example embodiments thereof, each example is provided by way of explanation, not limitation of the disclosure. Those skilled in the art, upon attaining an understanding of the foregoing, can readily produce alterations to, variations of, and equivalents to such embodiments. Accordingly, the subject disclosure does not preclude inclusion of such modifications, variations and / or additions to the present subject matter as would be readily apparent to one of ordinary skill in the art. For instance, features illustrated or described as part of one example may be used with another example to yield a still further example. Thus, it is intended that the present disclosure cover such alterations, variations, and equivalents.

[0083] This disclosure includes the following examples.

[0084] Example 1; A method, comprising: generating, by a computing device, a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arranging, by the computing device, a plurality of particular content items in the carousel user interface framework; determining, by the computing device, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determining, by the computing device, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generating, by the computing device, an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as theplurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and outputting, by the computing device and for display, the animation associated with the carousel user interface framework.

[0085] Example 2: The method of example 1, wherein determining the one or more visual effects includes determining one or more dynamic visual effects that are associated with movement between two or more positions from the plurality of positions, and wherein generating the animation includes applying the one or more dynamic visual effects to at least a portion of each respective particular content item from the plurality of particular content items when the at least a portion of the respective particular content item is moving between multiple positions included in the plurality of positions.

[0086] Example 3: The method of example 2, wherein determining the one or more visual effects further includes determining one or more static visual effects, and wherein determining the one or more static visual effects and the one or more dynamic visual effects is performed further based on determining a spatial relationship between each position in the plurality of positions and the two points of the viewport.

[0087] Example 4: The method of example 3, further comprising: determining a weight to be applied to a given visual effect of the sequence of visual effects in generating the animation based on the determined spatial relationships.

[0088] Example 5: The method of any of examples 1 through 4, wherein the plurality of positions are determined further based on receiving, by the computing device, a user input indicating a direction and a velocity.

[0089] Example 6: The method of example 5, wherein generating the universal animation sequence includes generating different visual effects of the sequence of visual effects to apply based on at least two directions and at least two velocities of user inputs.

[0090] Example 7: The method of example 6, wherein the one or more visual effects are determined based on comparing the direction and the velocity indicated by the user input to the at least two directions and at least two velocities associated with the universal animationsequence.

[0091] Example 8: The method of any of examples 1 through 7, wherein the sequence of visual effects defines one or more of the following display parameters: size, position, transparency, and transformations.10092] Example 9: The method of any examples 1 through 8, further comprising: identifying, by the computing device, a first particular content item from the plurality of particular content items that corresponds to a particular content type; and determining, by the computing device, an additional visual effect defined by the universal animation sequence that corresponds to the particular content type, wherein, during the outputting of the animation for display and while the first particular content item is displayed, the additional visual effect is applied to the first particular content item.

[0093] Example 10: The method of example 9, wherein the universal animation sequence defines the additional visual effect relative to the two points of the viewport, and wherein a degree to which the additional visual effect is applied to the first particular content item depends on a spatial relationship between the first particular content item and the two points of the viewport

[0094] Example 11: The method of any of examples 1 through 10, wherein the plurality of particular content items include one or more of the following: video content items; image content items; textual content items; and selectable user interface elements.

[0095] Example 12: The method of any of examples 1 through 11 , wherein the carousel user interface framework comprises a rotatable track that rotates around an anchor point and in which the plurality of particular content items are arranged sequentially, and wherein sequential portions of the carousel user interface framework are rotated into and out of the viewport based on user input gestures received by the computing device.

[0096] Example 13: The method of any of examples 1 through 12, wherein generating the animation includes applying a visual effect of the sequence of visual effects that causes the plurality of particular content items to increase in size near a center of the viewport and to decrease in size near edges of the viewport.

[0097] Example 14: A system, comprising: one or more memories including computerexecutable instructions; and one or more hardware processors configured to execute the computer-executable instructions to perform the method of any of examples 1 through 13.

[0098] Example 15: A computer program product comprising at least one non-transitory computer-readable storage media including instructions that, when executed by one or more processors, cause the one or more processors to perform the method of any of examples 1 through 13,

[0099] Example 16: A system, comprising: one or more processors; and one or more memories comprising computer-executable instructions that, when executed by the one or more processors, cause the one or more processors to: generate a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arrange a plurality of particular content items in the carousel user interface framework; determine, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determine, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generate an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and output, for display, the animation associated with the carousel user interface framework.

[0100] Example 17: The system of example 16, wherein determining the one or more visual effects includes determining one or more dynamic visual effects that are associated with movement between two or more positions from the plurality of positions, and wherein generating the animation includes applying the one or more dynamic visual effects to at least a portion of each respective particular content item from the plurality of particular content items when the at least a portion of the respective particular content item is moving between multiple positionsincluded in the plurality of positions.

[0101] Example 18: The system of example 17, wherein determining the one or more visual effects further includes determining one or more static visual effects, and wherein determining the one or more static visual effects and the one or more dynamic visual effects is performed further based on determining a spatial relationship between each position in the plurality of positions and the two points of the viewport.

[0102] Example 19: The system of example 18, further comprising instructions that cause the one or more processors to: determine a weight to be applied to a given visual effect of the sequence of visual effects in generating the animation based on the determined spatial relationships.

[0103] Example 20: The system of any of examples 16 through 19, wherein the plurality of positions are determined further based on receiving, by the computing device, a user input indicating a direction and a velocity.

[0104] Example 21: The system of example 20, wherein generating the universal animation sequence includes generating different visual effects of the sequence of visual effects to apply based on at least two directions and at least two velocities of user inputs.

[0105] Example 22: The system of example 21, wherein the one or more visual effects are determined based on comparing the direction and the velocity indicated by the user input to the at least two directions and at least two velocities associated with the universal animation sequence.

[0106] Example 23: The system of any of examples 16 through 22, wherein the sequence of visual effects defines one or more of the following display parameters: size, position, transparency, and transformations.

[0107] Example 24: The system of any examples 16 through 23, further comprising instructions that cause the one or more processors to: identify a first particular content item from the plurality of particular content items that corresponds to a particular content type; and determine an additional visual effect defined by the universal animation sequence that corresponds to the particular content type, wherein, during the outputting of the animation for display and while the first particular content item is displayed, the additional visual effect is applied to the first particular content item.

[0108] Example 25: The system of example 24, wherein the universal animation sequencedefines the additional visual effect relative to the two points of the viewport, and wherein a degree to which the additional visual effect is applied to the first particular content item depends on a spatial relationship between the first particular content item and the two points of the viewport

[0109] Example 26: The system of any of examples 16 through 25, wherein the plurality of particular content items include one or more of the following: video content items; image content items; textual content items; and selectable user interface elements.

[0110] Example 27: The system of any of examples 16 through 26, wherein the carousel user interface framework comprises a rotatable track that rotates around an anchor point and in which the plurality of particular content items are arranged sequentially, and wherein sequential portions of the carousel user interface framework are rotated into and out of the viewport based on user input gestures received by the computing device.

[0111] Example 28: The system of any of examples 16 through 27, wherein generating the animation includes applying a visual effect of the sequence of visual effects that causes the plurality of particular content items to increase in size near a center of the viewport and to decrease in size near edges of the viewport.

[0112] Example 29: At least one non-transitory computer-readable storage media including instructions that, when executed by one or more processors, cause the one or more processors to: generate a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arrange a plurality of particular content items in the carousel user interface framework; determine, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determine, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generate an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as the plurality of particular content items visually move between thetwo points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and output, for display, the animation associated with the carousel user interface framework.

[0113] Example 30: The at least one non-transitory computer-readable storage media of example 29, wherein determining the one or more visual effects includes determining one or more dynamic visual effects that are associated with movement between two or more positions from the plurality of positions, and wherein generating the animation includes applying the one or more dynamic visual effects to at least a portion of each respective particular content item from the plurality of particular content items when the at least a portion of the respective particular content item is moving between multiple positions included in the plurality of positions.

[0114] Example 31: The at least one non-transitory computer-readable storage media of example30, wherein determining the one or more visual effects further includes determining one or more static visual effects, and wherein determining the one or more static visual effects and the one or more dynamic visual effects is performed further based on determining a spatial relationship between each position in the plurality of positions and the two points of the viewport.

[0115] Example 32: The at least one non-transitory computer-readable storage media of example31, further comprising instructions that cause the one or more processors to: determine a weight to be applied to a given visual effect of the sequence of visual effects in generating the animation based on the determined spatial relationships.

[0116] Example 33: The at least one non-transitory computer-readable storage media of any of examples 29 through 32, wherein the plurality of positions are determined further based on receiving, by the computing device, a user input indicating a direction and a velocity.

[0117] Example 34: The at least one non-transitory computer-readable storage media of example 33, wherein generating the universal animation sequence includes generating different visual effects of the sequence of visual effects to apply based on at least two directions and at least two velocities of user inputs.

[0118] Example 35: The at least one non-transitory computer-readable storage media of example34, wherein the one or more visual effects are determined based on comparing the direction and the velocity indicated by the user input to the at least two directions and at least two velocities associated with the universal animation sequence.

[0119] Example 36: The at least one non-transitory computer-readable storage media of any of examples 29 through 35, wherein the sequence of visual effects defines one or more of the following display parameters: size, position, transparency, and transformations.

[0120] Example 37: The at least one non-transitory computer-readable storage media of any examples 29 through 36, further comprising instructions that cause the one or more processors to: identify a first particular content item from the plurality of particular content items that corresponds to a particular content type; and determine an additional visual effect defined by the universal animation sequence that corresponds to the particular content type, wherein, during the outputting of the animation for display and while the first particular content item is displayed, the additional visual effect is applied to the first particular content item.

[0121] Example 38: The at least one non-transitory computer-readable storage media of example 38, wherein the universal animation sequence defines the additional visual effect relative to the two points of the viewport, and wherein a degree to which the additional visual effect is applied to the first particular content item depends on a spatial relationship between the first particular content item and the two points of the viewport.

[0122] Example 39: The at least one non-transitory computer-readable storage media of any of examples 29 through 38, wherein the plurality of particular content items include one or more of the following: video content items; image content items; textual content items; and selectable user interface elements.

[0123] Example 40: The at least one non-transitory computer-readable storage media of any of examples 29 through 39, wherein the carousel user interface framework comprises a rotatable track that rotates around an anchor point and in which the plurality of particular content items are arranged sequentially, and wherein sequential portions of the carousel user interface framework are rotated into and out of the viewport based on user input gestures received by the computing device.

[0124] Example 41: The at least one non-transitory computer-readable storage media of any of examples 29 through 40, wherein generating the animation includes applying a visual effect of the sequence of visual effects that causes the plurality of particular content items to increase insize near a center of the viewport and to decrease in size near edges of the viewport.

Claims

WHAT IS CLAIMED IS:

1. A method, comprising: generating, by a computing device, a universal animation sequence that defines a sequence of visual effects to be applied to any content item as the content item visually moves between two points of a viewport corresponding to a visible range of a carousel user interface framework; arranging, by the computing device, a plurality of particular content items in the carousel user interface framework; determining, by the computing device, based on the universal animation sequence, and based on the arrangement of the plurality of particular content items, a plurality of positions that each correspond to at least a portion of each given particular content item from the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport; determining, by the computing device, based on the universal animation sequence, one or more visual effects from the sequence of visual effects that are associated with the plurality of positions; generating, by the computing device, an animation that includes the universal animation sequence applied to the plurality of particular content items included in the carousel user interface framework by at least applying the one or more visual effects to the plurality of particular content items as the plurality of particular content items visually move between the two points of the viewport associated with the carousel user interface framework, wherein the one or more visual effects are applied to at least a portion of each corresponding particular content item from the plurality of particular content items when the at least a portion of the corresponding particular content item is located at a respective position included in the plurality of positions; and outputting, by the computing device and for display, the animation associated with the carousel user interface framework.

2. The method of claim 1 , wherein determining the one or more visual effects includes determining one or more dynamic visual effects that are associated with movement between two or more positions from the plurality of positions, and wherein generating the animation includes applying the one or more dynamic visual effects to at least a portion of each respective particular content item from the plurality of particular content items when the at least a portion of the respective particular content item is moving between multiple positions included in the plurality of positions.

3. The method of claim 2, wherein determining the one or more visual effects further includes determining one or more static visual effects, and wherein determining the one or more static visual effects and the one or more dynamic visual effects is performed further based on determining a spatial relationship between each position in the plurality of positions and the two points of the viewport.

4. The method of claim 3, further comprising: determining a weight to be applied to a given visual effect of the sequence of visual effects in generating the animation based on the determined spatial relationships.

5. The method of any of claims 1 -4, wherein the plurality of positions are determined further based on receiving, by the computing device, a user input indicating a direction and a velocity.

6. The method of claim 5, wherein generating the universal animation sequence includes generating different visual effects of the sequence of visual effects to apply based on at least two directions and at least two velocities of user inputs.

7. The method of claim 6, wherein the one or more visual effects are determined based on comparing the direction and the velocity indicated by the user input to the at least two directions and at least two velocities associated with the universal animation sequence.

8. The method of any of claims 1-7, wherein the sequence of visual effects defines one or more of the following display parameters: size, position, transparency, and transformations.

9. The method of any of claims 1 -8, further comprising: identifying, by the computing device, a first particular content item from the plurality of particular content items that corresponds to a particular content type; and determining, by the computing device, an additional visual effect defined by the universal animation sequence that corresponds to the particular content type, wherein, during the outputting of the animation for display and while the first particular content item is displayed, the additional visual effect is applied to the first particular content item.

10. The method of claim 9, wherein the universal animation sequence defines the additional visual effect relative to the two points of the viewport, and wherein a degree to which the additional visual effect is applied to the first particular content item depends on a spatial relationship between the first particular content item and the two points of the viewport.

11. The method of any of claims 1-10, wherein the plurality of particular content items include one or more of the following: video content items; image content items; textual content items; and selectable user interface elements.

12. The method of any of claims 1-11, wherein the carousel user interface framework comprises a rotatable track that rotates around an anchor point and in which the plurality of particular content items are arranged sequentially, and wherein sequential portions of the carousel user interface framework are rotated into and out of the viewport based on user input gestures received by the computing device.

13. The method of any of claims 1-12, wherein generating the animation includes applying a visual effect of the sequence of visual effects that causes the plurality of particular content items to increase in size near a center of the viewport and to decrease in size near edges of the viewport.

14. A system comprising means for performing any combination of the method of claims 1 -13.

15. A computer program product comprising at least one non-transitory computer-readable storage media including instructions that, when executed by one or more processors, cause the one or more processors to perform any combination of the method of claims 1-13.

Images