TECHNIQUES FOR PROVIDING A SCROLLING CAROUSEL

Techniques of providing a scrolling carousel are disclosed. Visual content of a carousel may be displayed on a touch screen. The visual content may be configured to be scrolled through via user-directed movement across the touch screen. Information about a user-directed movement across the touch screen may be received. A velocity of the user-directed movement may be determined based on the received information. An intention for movement of visual content of the carousel may be determined based on the determined velocity. A stopping position for the movement of the visual content may be determined based on the determined intention. A B-spline curve function may be used to determine an animation of the movement of the visual content to the stopping position. The determined animation of the movement of the visual content to the stopping position may be caused to be displayed on the touch screen.

TECHNICAL FIELD

The present application relates generally to the technical field of data processing, and, in various embodiments, to systems and methods of providing a scrolling carousel.

BACKGROUND

Touch screen devices allow users to move visual content displayed on a touch screen via user-directed movements, such as swiping the touch screen with a finger. However, a problem arises in getting the behavior of the visual content right when the user lifts his or her finger from the screen. For example, when a user swipes the touch screen in order to browse through content of a scrolling carousel, a discontinuity in the animation of the moving content may occur when the user's finger leaves the screen at the end of the swiping motion. Before the point of the user's finger lifting up away from the screen, the position of the visual content on the screen can be set manually by JavaScript in response to a jQuery touchmove event. However, after the point of the user's finger lifting up away from the screen, it is necessary to guess at what the user expects and to continue the animation of the visual content in a way that is consistent with this expectation. Such a task can be difficult, especially when the animation is being used for the content of web applications. Web applications are at a disadvantage in this regard, as they run in the context of a web browser, thereby letting the software do most of the rendering, in contrast to native applications that can access the touch screen device's graphical processing unit to perform the animation.

DETAILED DESCRIPTION

The present disclosure describes techniques for providing a scrolling carousel. A B-spline curve (e.g., a Bèzier curve) may be used to determine an animation of the movement of visual content being displayed on a touch screen when a user-directed movement is being used to move the visual content.

In some embodiments, a method may comprise causing visual content of a carousel to be displayed on a touch screen. The visual content of the carousel may be configured to be scrolled through via user-directed movement across the touch screen. Information about a user-directed movement across the touch screen may be received. A velocity of the user-directed movement across the touch screen may be determined based on the received information. An intention for movement of visual content of the carousel may be determined based on the determined velocity. A stopping position for the movement of the visual content of the carousel may be determined based on the determined intention. A B-spline curve function may be used to determine an animation of the movement of the visual content to the stopping position. The determined animation of the movement of the visual content to the stopping position may be caused to be displayed on the touch screen. In some embodiments, the B-spline curve function is a Bèzier curve function. In some embodiments, the user-directed movement comprises a finger of the user moving across and in direct contact with the touch screen. In some embodiments, the touch screen is disposed on a mobile device. In some embodiments, the visual content of the carousel comprises web-based content.

In some embodiments, the information about the user-directed movement across the touch screen comprises a distance measurement and a time measurement. The distance measurement may comprise a distance between a first position of user-directed contact with the touch screen during the user-directed movement across the touch screen and a second position of user-directed contact with the touch screen during the user-directed movement across the touch screen. The first position may be a second-to-last detected position of user-directed contact with the touch screen during the user-directed movement. The second position may be a last-detected position of user-directed contact with the touch screen during the user-directed movement. The time measurement may comprise an amount of time between the user-directed contact at the first position and the user-directed contact at the second position. A velocity of the user-directed movement across the touch screen may be determined by dividing the distance measurement by the time measurement. In some embodiments, using the B-spline curve function to determine the animation comprises mapping the second position and the stopping position in a Cartesian coordinate system having a position axis and a time axis. The position axis may correspond to positions on the touch screen. A B-spline curve may be interpolated between the second position and the stopping position in the Cartesian coordinate system. The animation of the movement of the visual content to the stopping position may be determined based on the interpolation of the B-spline curve between the second position and the stopping position. In some embodiments, the determination of the intention for movement of visual content of the carousel is further based on the second position of user-directed contact with the touch screen during the user-directed movement across the touch screen.

The methods or embodiments disclosed herein may be implemented as a computer system having one or more modules (e.g., hardware modules or software modules). Such modules may be executed by one or more processors of the computer system. The methods or embodiments disclosed herein may be embodied as instructions stored on a machine-readable medium that, when executed by one or more processors, cause the one or more processors to perform the instructions.

FIG. 1is a network diagram depicting a client-server system100, within which one example embodiment may be deployed. A networked system102provides server-side functionality via a network104(e.g., the Internet or Wide Area Network (WAN)) to one or more clients.FIG. 1illustrates, for example, a web client106(e.g., a browser) and a programmatic client108executing on respective client machines110and112.

An Application Program Interface (API) server114and a web server116are coupled to, and provide programmatic and web interfaces respectively to, one or more application servers118. The application servers118host one or more applications120. The application servers118are, in turn, shown to be coupled to one or more databases servers124that facilitate access to one or more databases126. According to various exemplary embodiments, the applications120may correspond to one or more of the modules of the system210illustrated inFIG. 2. While the applications120are shown inFIG. 1to form part of the networked system102, it will be appreciated that, in alternative embodiments, the applications120may form part of a service that is separate and distinct from the networked system102.

Further, while the system100shown inFIG. 1employs a client-server architecture, the present disclosure is of course not limited to such an architecture, and could equally well find application in a distributed, or peer-to-peer, architecture system, for example. The various applications120could also be implemented as standalone software programs, which do not necessarily have networking capabilities.

The web client106accesses the various applications120via the web interface supported by the web server116. Similarly, the programmatic client108accesses the various services and functions provided by the applications120via the programmatic interface provided by the API server114.

FIG. 1also illustrates a third party application128, executing on a third party server machine130, as having programmatic access to the networked system102via the programmatic interface provided by the API server114. For example, the third party application128may, utilizing information retrieved from the networked system102, support one or more features or functions on a website hosted by the third party. The third party website may, for example, provide one or more functions that are supported by the relevant applications of the networked system102.

FIGS. 2A-2Eillustrate a use of a scrolling carousel system on a touch screen device210, in accordance with some embodiments. In some embodiments, the touch screen device210may be one of the machines110,112, or130inFIG. 1. In some embodiments, the touch screen device210may be a mobile device. The mobile device may be a smartphone or a tablet computer. Other types of mobile devices are also within the scope of the present disclosure. Additionally, the touch screen device210may be a non-mobile device. The touch screen device210comprises a touch screen220that provides an electronic visual display of visual content that the user can control using simple or multi-touch gestures by touching the screen with one or more fingers230. The user can provide user-directed movement with his or her finger(s)230. In some embodiments, the user may also provide user-directed movement via an object (e.g., a stylus).

In some embodiments, visual content of a carousel may be displayed on the touch screen220. The visual content may be divided into distinct items. For example, the visual content may comprise a plurality of distinct slides, pages, or images. It is contemplated that other forms of visual content items are within the scope of the present disclosure. In some embodiments, the carousel may comprise a large number of visual content items, but only a small portion of those visual content items may be displayed on the touch screen220at the same time. The carousel may be configured to enable the user to scroll through its visual content items via user-directed movement across the touch screen220. The user can browse through all of the visual content items of the carousel, moving back and forth.

In the example shown inFIG. 2A, visual content items225aand225bof a carousel are displayed on the touch screen220. The user may want to see other visual content items of the carousel. The user may use his or her finger230to provide a user-directed movement to scroll through the visual content items of the carousel. For example, the user may touch the touch screen220with his or her finger230, and then swipe the screen in a leftward direction in order to bring other visual content items into display on the touch screen220.

In the example shown inFIG. 2B, the user has swiped the touch screen230in a leftward motion, thereby moving visual content item225aof the carousel leftward and partially off-screen, moving visual content item225bof the carousel leftward and to the center of the touch screen220, and bringing visual content item225cpartially on-screen from the right.FIG. 2Bshows the beginning point240of the user's swiping motion.

In the example shown inFIG. 2C, the user's swiping motion has been completed, and the user's finger230has been removed from contact with the touch screen220.FIG. 2Cshows the departure point250of the user's finger230from the touch screen220at the termination of the swiping motion, as well as the distance x between the beginning point240and the departure point250.

The movement of the visual content of the carousel after the user's finger230has left the touch screen220may be determined based on a determination of the user's intent. For example, if it is determined that the user intended to scroll through several of the visual content items, then the visual content items may be moved accordingly on the touch screen220(e.g., visual content items225aand225bmay be shifted completely off-screen, and visual content items several positions down on the carousel may be brought on-screen).

In another example, if it is determined that the user did not intend to scroll to any other visual content items in the carousel, then the visual content items that were displayed on-screen at the beginning of the user-directed movement may spring back into the same positions they were at wen the user-directed movement began. For example, inFIG. 2E, it may have been determined that the user did not intend to scroll to any other visual content items in the carousel, thus resulting in visual content items225aand225breturning to the same positions they had inFIG. 2A, before the swiping motion began.

In yet another example, if it is determined that the user intended to scroll to the next visual content item in the carousel, then the next visual content item may be shifted into display on-screen from one side of the touch screen220, while one of the visual content items at the other end of the touch screen220may be shifted off-screen. For example, inFIG. 2E, it may have been determined that the user intended to scroll to the next visual content item in the carousel, thus resulting in visual content item225abeing shifted off-screen and visual content item225cbeing shifted on-screen.

The user's intention for the movement of the visual content may be determined based on characteristics of the user-directed movement. Such characteristics may include, but are not limited to, the velocity of the user-directed movement (e.g., the velocity of the swiping motion) and the positioning of the user directed movement. Other characteristics are also within the scope of the present disclosure. In some embodiments, certain thresholds for these characteristics may be stored and used to determine the user's intention for the movement of the visual content. For example, scrolling to the next visual content item may be conditioned on the user-directed movement having a velocity of at least X, while, scrolling to the next two visual content items may be conditioned on the user-directed movement having a velocity of at least Y, and so on and so forth. In some embodiments, correlations between the characteristics and user intentions for movement of visual content may be stored and used to determine the user's intention for the movement of the visual content. For example, a velocity between 0 and X may be correlated with a user's intention to not scroll to any other visual content items, while a velocity between X and Y may be correlated with a user's intention to scroll to the next visual content item, and so on and so forth.

A use a Cascading Style Sheets (CSS) transition or animation may be used to determine and carry out the movement of the visual content expected by the user. However, there is one main issue with using CSS transitions after the user has completed the user-directed movement, such as after the user's finger has been removed from contact with the touch screen): unless the transition is chosen carefully, there will be an unpleasant bump at the point that the finger leaves the screen. The reason for this effect is that the user is moving the visual content at a particular velocity in order to drag it out of the way, and the browser's CSS engine is also moving the slide at a velocity defined by the choice of Bèzier curve. Unless these two velocities match exactly, the user will experience a C(1) discontinuity, which is subliminally distressing to the user.

FIG. 3Aillustrates a graph300A depicting a discontinuity in the animation of visual content on a touch screen device, in accordance with some embodiments. Graph300A shows a representation of the movement of visual content on the touch screen by mapping the distance of the movement against the change in time. This movement is represented by a line comprising a beginning portion310, defined by the user-directed movement from a beginning point340to a departure point350, and an ending portion320A, defined by an estimated expectation of what the user intended for the movement of the visual content from departure point350to a stopping point360. In some embodiments, the beginning point340may correspond to the beginning point240inFIGS. 2B-2C, the departure point350may correspond to the departure point250inFIG. 2C, and the distance between the beginning point340and the departure point350may correspond to distance x inFIG. 2C. Accordingly, the ending portion320A corresponds to the time after the user-directed movement has ended (e.g., after the user's finger has been removed from contact with the touch screen at the end of the swiping motion).

CSS easing may be used to determine the ending portion320A. However, as previously discussed, a discontinuity may arise between the beginning portion310and the ending portion320A, such that the movement of the visual content after the user-directed movement has ended is not consistent with the movement of the visual content before the user-directed movement has ended. As a result of this lack of a smooth transition between the beginning portion310and the ending portion320A, the animation of the movement of the visual content may be subtly distressing to the user.

Fortunately, the way that B-spline curves, and particularly Bèzier curves, are constructed makes it possible to avoid this case of discontinuity. In some embodiments, the velocity of a transition is proportional to the gradient of the B-spline curve, and the gradient at the start of the curve cubic-bezier (a, b, c, d) is a/b. Therefore, in order to provide a smooth transition, the velocity at which the user is moving the visual content may be measured, and a/b may be set equal to that velocity measurement, which may correspond to the user velocity between beginning point340and departure point350.

In order to make the animation of the visual content stop smoothly, parameter d may be set to equal 1, thereby making the final velocity hit 0 at the same time as the animation stops. Other constraints on the curve may be used as well.

FIG. 3Billustrates a graph300B depicting continuity in the animation of visual content on a touch screen device, in accordance with some embodiments. Graph300B is the same as graph300A, except that ending portion320A has been replaced with ending portion320B as a result of the use of a calculated Bèzier curve being used to form this portion between departure point350and stopping point360. Stopping point360may represent parameter d of the Bèzier curve and be set to 1 as discussed above. The Bèzier curve, or another B-spline curve, may be interpolated between the departure point350and the stopping point360. As seen inFIG. 3B, the result of this interpolation of the Bèzier curve may result in a much smoother transition than inFIG. 3A.

The use of a B-spline curve may also be useful in simulating the effect of bouncing. For example, if the user flicks over the end of a set of slides, or other visual content, of the carousel, the animation should continue moving in the direction of the flick for a short time before decelerating and then reversing back into place. Likewise, in another example, if the user moves towards the edge of a slide with high velocity (though not quite enough to jump them to the next slide), the slide should appear to animate just beyond the end and then return back, appearing to bounce back in place to where it was just before the flick.

In some embodiments, the beginning point340may not correspond to the point where the user-directed movement began, and the departure point350may not correspond exactly to the departure point250of the user's finger230from the touch screen220at the termination of the user-directed movement. In some embodiments, the positioning of the user-directed movement (e.g., the position of the user's finger) may be detected periodically at regular intervals. The beginning point340and the departure point350may correspond to the last two detected positions of the user-directed movement (e.g., the last two detected positions of the user's finger contacting the touch screen). The velocity of the user-directed movement may then be calculated using these last two detected positions and the time between them.

FIG. 4is a block diagram illustrating a scrolling carousel system400, in accordance with some embodiments. The scrolling carousel system400may comprise a machine having a memory and at least one processor (not shown) for executing one or more modules. In some embodiments, some or all of the components of the scrolling carousel system400may reside on the application server(s)118inFIG. 1. In some embodiments, some or all of the components of the scrolling carousel system400may reside on a touch screen device, such as touch screen device210inFIGS. 2A-2E. In some embodiments, the scrolling carousel system400may comprise a display module410, a movement intention module420, and an animation determination module430.

In some embodiment, the display module430is configured to cause visual content of a carousel to be displayed on a touch screen. The visual content of the carousel is configured to be scrolled through via user-directed movement across the touch screen. The visual content of the carousel may comprise web-based content (e.g., the content of a website). Other types of visual content are also within the scope of the present disclosure.

In some embodiments, the movement intention module420is configured to receive information about a user-directed movement across the touch screen, and then determine a velocity of the user-directed movement across the touch screen based on the received information. The movement intention module420may then determine an intention for movement of visual content of the carousel based on the determined velocity. In some embodiments, the user-directed movement comprises a finger of the user moving across and in direct contact with the touch screen.

In some embodiments, the information about the user-directed movement across the touch screen comprises a distance measurement and a time measurement. The distance measurement may comprise a distance between a first position of user-directed contact with the touch screen during the user-directed movement across the touch screen and a second position of user-directed contact with the touch screen during the user-directed movement across the touch screen. The second position may be a last position of user-directed contact with the touch screen during the user-directed movement. The time measurement may comprise an amount of time between the user-directed contact at the first position and the user-directed contact at the second position. The movement intention module420may be configured to determine a velocity of the user-directed movement across the touch screen by dividing the distance measurement by the time measurement. In some embodiments, the determination of the intention for movement of visual content of the carousel is further based on the second position of user-directed contact with the touch screen during the user-directed movement across the touch screen.

As previously discussed, in some embodiments, the first position of user-directed contact with the touch screen and the second position of user-directed contact with the screen that are used in the determination of the velocity of the user-directed movement across the touch screen may correspond to the last two detected positions of the user-directed movement (e.g., the last two detected positions of the user's finger contacting the touch screen). This velocity may represent the finger's final velocity as it leaves the touch screen at the end of the user-directed movement across the touch screen.

In some embodiments, the animation determination module430is configured to determine a stopping position for the movement of the visual content of the carousel based on the determined intention, and then use a B-spline curve function to determine an animation of the movement of the visual content to the stopping position. In some embodiments, the B-spline curve function is a Bèzier curve function.

In some embodiments, using the B-spline curve function to determine the animation comprises mapping the second position and the stopping position in a Cartesian coordinate system having a position axis and a time axis. The position axis may correspond to positions on the touch screen. A B-spline curve may be interpolated between the second position and the stopping position in the Cartesian coordinate system. The animation determination module430may be configured to determine the animation of the movement of the visual content to the stopping position based on the interpolation of the B-spline curve between the second position and the stopping position.

In some embodiments, the display module410is further configured to cause the determined animation of the movement of the visual content to be displayed on the touch screen.

It is contemplated that other configurations of the scrolling carousel system400and its modules are within the scope of the present disclosure.

FIG. 5is a flowchart illustrating a method500of providing a scrolling carousel, in accordance with some embodiments. It is contemplated that the operations of method500may be performed by a system or modules of a system (e.g., scrolling carousel system400inFIG. 4).

At operation510, visual content of a carousel may be caused to be displayed on a touch screen. The visual content of the carousel may be configured to be scrolled through via user-directed movement across the touch screen. In some embodiments, the touch screen is disposed on a mobile device. In some embodiments, the visual content of the carousel comprises web-based content.

At operation520, information about a user-directed movement across the touch screen may be received. In some embodiments, the user-directed movement comprises a finger of the user moving across and in direct contact with the touch screen. The information about the user-directed movement across the touch screen may comprise a distance measurement and a time measurement. The distance measurement may comprise a distance between a first position of user-directed contact with the touch screen during the user-directed movement across the touch screen and a second position of user-directed contact with the touch screen during the user-directed movement across the touch screen. The second position may be a last position of user-directed contact with the touch screen during the user-directed movement. The time measurement may comprise an amount of time between the user-directed contact at the first position and the user-directed contact at the second position.

At operation530, a velocity of the user-directed movement across the touch screen may be determined based on the received information. The velocity of the user-directed movement across the touch screen may be determined by dividing the distance measurement by the time measurement.

At operation540, an intention for movement of visual content of the carousel may be determined based on the determined velocity. In some embodiments, the determination of the intention for movement of visual content of the carousel may be further based on the second position of user-directed contact with the touch screen during the user-directed movement across the touch screen.

At operation550, a stopping position for the movement of the visual content of the carousel may be determined based on the determined intention.

At operation560, a B-spline curve function may be used to determine an animation of the movement of the visual content to the stopping position. In some embodiments, the B-spline curve function is a Bèzier curve function.

At operation570, the determined animation of the movement of the visual content to the stopping position may be caused to be displayed on the touch screen.

It is contemplated that any of the other features described within the present disclosure may be incorporated into method500.

FIG. 6is a flowchart illustrating a method600of using a B-spline curve to determine an animation of movement of visual content on a touch screen, in accordance with some embodiments. It is contemplated that the operations of method600may be performed by a system or modules of a system (e.g., scrolling carousel system400inFIG. 4).

At operation610, the last detected position (e.g., the second position discussed above) and the determined stopping position may be mapped in a Cartesian coordinate system having a position axis and a time axis. The position axis may correspond to positions on the touch screen.

At operation620, a B-spline curve may be interpolated between the second position and the stopping position in the Cartesian coordinate system.

At operation630, the animation of the movement of the visual content to the stopping position may be determined based on the interpolation of the B-spline curve between the last detected position and the stopping position.

It is contemplated that any of the other features described within the present disclosure may be incorporated into method500.

In some embodiments, algorithms and equations may be used to make the Bèzier curve, or other B-spline curve, smooth. In some embodiments, in order for the user not to notice the transition to the Bèzier curve, or other B-spline curve, it is important to not move the slide, or other visual content, or to change its velocity. CSS may enforce the former by setting the initial point of a cubic to (0, 0). Regarding the latter, a bezier curve at the origin is tangent to the line between its first two control points. Thus, we just have to ensure that the control point lies on the line where velocity=v (or x/t=v). In some embodiments, the only decision we have with regards to that control point is how far from the origin it should be, which may be a number “i” that can be made up to adjust the user experience. This number “i” may represent how important the user's initial velocity is to the shape of the final curve:

In some embodiments, as we want the animation to finish at the end with 0 velocity, we may put the second intermediate control point with an x coordinate of 1 (the final control point is at (1, 1) by definition), the only other choice we have for the shape of our curve may be how far along the t axis to put the second control point.

In one example, given the velocity (v) and two chosen parameters (importance (0.5) and sameness (chosen to be “t”)), the resulting curve can be expressed using the following function:

It is contemplated that other algorithms algorithms and equations may be used to make the Bèzier curve, or other B-spline curve, smooth.

Modules, Components and Logic

Electronic Apparatus and System

Example Machine Architecture and Machine-Readable Medium

The example computer system800includes a processor802(e.g., a central processing unit (CPU), a graphics processing unit (GPU) or both), a main memory804and a static memory806, which communicate with each other via a bus808. The computer system800may further include a video display unit810(e.g., a liquid crystal display (LCD) or a cathode ray tube (CRT)). The computer system800also includes an alphanumeric input device812(e.g., a keyboard), a user interface (UI) navigation (or cursor control) device814(e.g., a mouse), a disk drive unit816, a signal generation device818(e.g., a speaker) and a network interface device820.

The disk drive unit816includes a machine-readable medium822on which is stored one or more sets of data structures and instructions824(e.g., software) embodying or utilized by any one or more of the methodologies or functions described herein. The instructions824may also reside, completely or at least partially, within the main memory804and/or within the processor802during execution thereof by the computer system800, the main memory804and the processor802also constituting machine-readable media. The instructions824may also reside, completely or at least partially, within the static memory806.

Transmission Medium