Message-bubble-based interaction method, device, equipment and storage medium

Abstract

This application discloses an interactive method, apparatus, device, and storage medium based on message bubbles, belonging to the field of human-computer interaction. The method includes: displaying a chat interface of a first account; in response to a message editing operation, determining a first message to be sent by the first account; and in response to a message sending operation, displaying a first message bubble moving from a first position in the chat interface along a movement path to a second position, wherein the first message bubble is a message bubble used to carry the first message; wherein the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement. By displaying the dynamic movement of the first message bubble, this application allows users to intuitively see the process of sending the first message, thus enriching the sending and display methods of the first message bubble.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction, and in particular to an interactive method, apparatus, device, and storage medium based on message bubbles. Background Technology

[0002] In instant messaging applications, message bubbles are a common display format used to show messages sent by users. Message bubbles are typically simplified into two types: messages representing the sender and messages representing the recipient. Message bubbles present the messages sent by users while clearly separating messages between different users.

[0003] In related technologies, instant messaging programs primarily use touch-based messaging as the message sending method; for example, users send messages by clicking a send control. Messages are typically displayed from top to bottom at fixed intervals, with each message occupying a separate line. The size of the message bubble varies according to the message content; for example, the width and height of the message bubble adaptively adjust based on the message's length.

[0004] However, the methods for sending and displaying message bubbles in related technologies are relatively simple, making it difficult to meet users' personalized needs. Summary of the Invention

[0005] This application provides an interactive method, apparatus, device, and storage medium based on message bubbles, the technical solution of which is as follows.

[0006] According to one aspect of this application, an interactive method based on message bubbles is provided, the method being executed by a first client, the first client being logged into a first account, the method comprising:

[0007] Display the chat interface of the first account;

[0008] In response to a message editing operation, determine the first message to be sent by the first account;

[0009] In response to a message sending operation, a first message bubble is displayed that moves from a first position in the chat interface to a second position along a movement path. The first message bubble is a message bubble used to carry the first message.

[0010] Wherein, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

[0011] According to one aspect of this application, an interactive device based on message bubbles is provided, the device comprising:

[0012] The display module is used to display the chat interface of the first account;

[0013] The determination module is used to determine the first message to be sent by the first account in response to a message editing operation;

[0014] The display module is used to respond to a message sending operation by displaying a first message bubble moving from a first position in the chat interface to a second position along a movement path. The first message bubble is a message bubble used to carry the first message.

[0015] Wherein, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

[0016] According to another aspect of this application, a computer device is provided, comprising: a processor and a memory, wherein the memory stores at least one computer program, the at least one computer program being loaded and executed by the processor to implement the message bubble-based interactive method as described above.

[0017] According to another aspect of this application, a computer storage medium is provided, wherein at least one computer program is stored in the computer-readable storage medium, the at least one computer program being loaded and executed by a processor to implement the message bubble-based interactive method as described above.

[0018] According to another aspect of this application, a computer program product is provided, comprising a computer program stored in a computer-readable storage medium; the computer program is read from and executed by a processor of a computer device from the computer-readable storage medium, causing the computer device to perform the message bubble-based interactive method as described above.

[0019] The beneficial effects of the technical solutions provided in this application include at least the following:

[0020] After editing the first message to be sent in the chat interface of the first account, the first message bubble carrying the first message can be sent through various message sending methods. The chat interface displays the first message bubble moving along a path from a first position (the starting point) to a second position (the ending point). The movement path of the first message bubble can be a custom path or a preset path. Simultaneously, the movement effect of the first message bubble is displayed in the chat interface. Compared to the direct display of message bubbles in related technologies, this application, by displaying the dynamic movement of the first message bubble, allows users to intuitively see the sending process of the first message bubble, thus enriching the sending and display methods of the first message bubble. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 This is an architecture diagram of a computer system provided in one embodiment of this application;

[0023] Figure 2 This is a schematic diagram of a message bubble in the related technology provided in one embodiment of this application;

[0024] Figure 3 This is a schematic diagram of a message bubble in the related technology provided in one embodiment of this application;

[0025] Figure 4 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0026] Figure 5 This is a flowchart of an interactive method based on message bubbles provided in one embodiment of this application;

[0027] Figure 6 This is a flowchart of an interactive method based on message bubbles provided in one embodiment of this application;

[0028] Figure 7 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0029] Figure 8 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0030] Figure 9 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0031] Figure 10 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0032] Figure 11 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0033] Figure 12 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0034] Figure 13 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0035] Figure 14 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0036] Figure 15 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0037] Figure 16 This is a schematic diagram of an interactive method based on message bubbles provided in one embodiment of this application;

[0038] Figure 17 This is a logical schematic diagram of a click-to-send control provided in one embodiment of this application;

[0039] Figure 18 This is a logical schematic diagram of a long-press sending control provided in one embodiment of this application;

[0040] Figure 19 This is a logical schematic diagram of a combo send control provided in one embodiment of this application;

[0041] Figure 20 This is a flowchart of an interactive method based on message bubbles provided in one embodiment of this application;

[0042] Figure 21 This is a structural block diagram of an interactive device based on message bubbles provided in one embodiment of this application;

[0043] Figure 22 This is a schematic diagram of the structure of a computer device provided in one embodiment of this application. Detailed Implementation

[0044] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0045] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0046] The terminology used in this application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. The singular forms “a,” “the,” and “the” used in this application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0047] It should be understood that although the terms first, second, etc., may be used in this application to describe various information, this information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, without departing from the scope of this application, a first parameter may also be referred to as a second parameter, and similarly, a second parameter may also be referred to as a first parameter. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0048] It should be noted that this application may display prompt interfaces, pop-ups, or output voice prompts before and during the collection of user data. These prompt interfaces, pop-ups, or voice prompts are used to inform the user that their data is being collected. This ensures that the application only begins the steps for collecting user data after receiving confirmation from the user regarding the prompt interface or pop-up; otherwise (i.e., without user confirmation), the steps for collecting user data end, meaning no user data is collected. In other words, all user data collected in this application is collected with the user's consent and authorization, and the collection, use, and processing of related user data must comply with the relevant laws, regulations, and standards of the relevant countries and regions.

[0049] First, let me introduce the relevant terms used in this application:

[0050] Message bubbles: Also known as chat bubbles, these are container elements in instant messaging applications used to display conversation content (messages in a chat session). They are used to display and differentiate messages sent by different users. Message bubbles are typically displayed with different colors or shapes based on the sender's identity (such as the user themselves or the other party) to distinguish between the two parties in the conversation.

[0051] Figure 1 An architectural diagram of a computer system provided in an exemplary embodiment of this application is given. The computer system 100 includes: a first terminal 110, a server 120, and a second terminal 130.

[0052] The first terminal 110 has a first client 111 installed and running. The first client 111 is a client for the target application. For example, the first client 111 can be an application with instant messaging functionality or a web client. When the first terminal 110 runs the first client 111, the user interface of the first client 111 is displayed on the screen of the first terminal 110. The target application can be any one of an instant messaging program, a microblogging program, a voice call program, a conferencing program, an online community program, a payment program, a shopping program, a dating program, or a marriage and matchmaking program. In this embodiment, the application is an instant messaging program as an example. The first terminal 110 is the terminal used by the first user 112, and the first account of the first user 112 is logged in on the first client 111. This application embodiment uses an instant messaging program as an example for illustration.

[0053] The second terminal 130 installs and runs the second client 131, which is a client for the target application. For example, the second client 131 can be an application with instant messaging functionality or a web client. When the second terminal 130 runs the second client 131, the user interface of the second client 131 is displayed on the screen of the second terminal 130. This application can be any one of an instant messaging program, a microblogging program, a voice call program, a conferencing program, an online community program, a payment program, a shopping program, a dating program, or a marriage and matchmaking program. In this embodiment, an instant messaging program is used as an example. The second terminal 130 is the terminal used by the second user 132, and the second account of the second user 132 is logged in on the second client 131.

[0054] Optionally, the first and second accounts can be friends in the communication list or have temporary communication permissions.

[0055] Optionally, the target application installed on the first terminal 110 and the second terminal 130 is the same, or the application installed on the two terminals is the same type of target application on different operating system platforms (Android or iOS). The first terminal 110 can refer to one of a plurality of terminals, and the second terminal 130 can refer to another of a plurality of terminals. This embodiment only uses the first terminal 110 and the second terminal 130 as examples. The device types of the first terminal 110 and the second terminal 130 may be the same or different, and the device types include at least one of the following: smartphone, tablet computer, e-book reader, MP3 player, MP4 player, laptop computer, and desktop computer.

[0056] Figure 1Only two terminals are shown in the diagram, but in different embodiments, multiple other terminals 140 can access the server 120. Optionally, one or more terminals 140 may also be terminals corresponding to developers, on which a development and editing platform supporting instant messaging clients is installed. Developers can edit and update the client on the terminal 140 and transmit the updated application installation package to the server 120 via wired or wireless network. The first terminal 110 and the second terminal 130 can download the application installation package from the server 120 to update the client.

[0057] The first terminal 110, the second terminal 130, and other terminals 140 are connected to the server 120 via a wireless network or a wired network.

[0058] Server 120 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. Server 120 is used to provide backend services for clients supporting three-dimensional instant messaging. Optionally, server 120 undertakes the main computing work, and the terminal undertakes the secondary computing work; or, server 120 undertakes the secondary computing work, and the terminal undertakes the main computing work; or, server 120 and the terminal use a distributed computing architecture for collaborative computing.

[0059] In an illustrative example, server 120 includes processor 122, user account database 123, instant messaging service module 124, and user-facing input / output interface (I / O interface) 125. Processor 122 loads instructions stored in server 120 and processes data in user account database 123 and instant messaging service module 124. User account database 123 stores user account data used by first terminal 110, second terminal 130, and other terminals 140, such as user account avatars, nicknames, and group memberships. Instant messaging service module 124 provides multiple chat rooms (two-person or multi-person chat) for users to chat, send emoticons, send red envelopes, etc., in real-time. User-facing I / O interface 125 establishes communication and exchanges data with first terminal 110 and / or second terminal 130 via wireless or wired network.

[0060] The interactive method based on message bubbles provided in this application will be described in conjunction with the above embodiments, taking the execution subject of the method as... Figure 1 The example shown illustrates a client running on a terminal. This terminal runs a client, for example, an application that supports instant messaging.

[0061] In instant messaging applications, message bubbles are a common display format used to show messages sent by users. Message bubbles are generally simplified into two types: messages representing oneself and messages representing the recipient. Instant messaging applications primarily use a tap-to-send method for sending messages; for example, users send messages by clicking the send control. Users can also personalize their message bubbles. For example, referencing [reference / reference]... Figure 2 Chat interface 200 is the chat interface of user A. Chat interface 200 is used to display the chat conversation between user A and user B. There is a send control 201 in chat interface 200. User A triggers send control 201 to send a message. The message is carried based on message bubble. The message sent by user A is carried based on message bubble 202, and the message sent by user B is carried based on message bubble 203. Message bubble 202 and message bubble 203 have different styles.

[0062] In related technologies, messages are typically displayed from top to bottom at fixed intervals, with each message occupying a separate line. The size of the message bubbles varies according to the message content; for example, the width and height of the message bubbles adaptively adjust based on the message length. The methods of sending and displaying messages in these technologies are relatively simple, with the main difference in display methods being the shape and color of the message bubbles, making it difficult to meet users' personalized needs. Furthermore, since only one message can be displayed per line on the screen, and message bubbles maintain a fixed interval, a significant amount of blank space remains unused.

[0063] For example, in conjunction with reference Figure 3 Chat interface 300 is a group chat interface where multiple users can converse. Messages are generally displayed from top to bottom at fixed intervals. Each message bubble carries one message, and there is a fixed interval between message bubbles, resulting in a significant amount of unused blank space. For example, there is blank space (unused space 1) between user A's message "Have you heard?" and user B's message "What's wrong?"; blank space (unused space 2) between user B's message "What's wrong?" and user A's message "Xu X posted an update saying he's releasing a new song!"; blank space (unused space 3) between user A's message "Xu X posted an update saying he's releasing a new song!" and user C's emoji; and blank space (unused space 4) between user C's emoji and user D's message "That's great!".

[0064] In view of this, in order to solve the problems existing in the related technologies, this application provides an interactive method based on message bubbles. Figure 4This illustration shows a schematic diagram of an interactive method based on message bubbles provided in an exemplary embodiment of this application. The method is executed by a computer device, with the computer device serving as the... Figure 1 Taking the first terminal 110 as an example, or executed by the first client on the first terminal 110, the first client is logged into a first account. This application sends different bubble effects through single click, long press, and triple click. For example, in the single click mode, the first message bubble is sent in a floating manner, presenting a floating bubble effect; in the long press mode, the first message bubble collides with the historical message bubble (second message bubble), presenting a bubble effect closely connected to the historical message bubble; in the triple click mode, multiple first message bubbles appear, and the multiple first message bubbles will collide with the historical message bubble in a scattering manner, presenting a bubble effect that clears the screen of the historical message bubble. This application breaks the original sending method and the fixed interval layout of message bubbles, enriches the correlation between the sending method and the appearance of the message, and also increases the fun and interactivity in the process of sending message bubbles.

[0065] The steps of the message bubble-based interactive method are briefly described below:

[0066] (1) Display the chat interface 10;

[0067] For example, a chat interface 10 is displayed on the first client. The chat interface 10 may be a conversation interface provided by an instant messaging program; or, the chat interface 10 may be a bullet screen interface provided by a video playback program; or, the chat interface 10 may be a dialogue interface provided by a social networking program.

[0068] In this embodiment, the example described is a chat interface 10 provided by an instant messaging program. The chat interface 10 can be a two-person chat interface or a multi-person chat interface (group chat interface).

[0069] (2) Perform message editing operations in message editing area 20 to determine the first message to be sent by the first account;

[0070] Optionally, the chat interface 10 displays a message editing area 20, which is the area in the chat interface 10 used for editing the first message. The user edits the first message in the message editing area 20. For example, the message editing area 20 is an input box.

[0071] Optionally, a sending control 30 is displayed on the chat interface 10. The sending control 30 is used to send a first message edited by the first account. The first message includes, but is not limited to, at least one of text messages, voice messages, image messages, video messages, file messages, and emoticon messages. This application does not limit the specific content of the first message.

[0072] (3) Display the first message bubble 40 moving from the first position in the chat interface 10 to the second position along the movement path, and display the animation effect of the first message bubble 40.

[0073] The first message bubble 40 is a message bubble used to carry the first message. The first position is the starting position of the first message bubble 40 in the chat interface 10, and the second position is the ending position of the first message bubble 40 in the chat interface 10.

[0074] The movement path is the route taken by the first message bubble 40 as it moves from the first position to the second position in the chat interface 10.

[0075] In some embodiments, in response to a message sending operation, a first message bubble 40 is displayed moving from a first position in the chat interface 10 to a second position along a movement path. Optionally, different message sending operations correspond to different message sending methods, which may include at least one of different movement methods, different movement paths, different second positions, different number of bubbles, and different interaction forms with the second message bubble 50. The second message bubble 50 is an existing message bubble in the chat interface 10.

[0076] Optionally, the chat interface 10 includes a send control 30, and the message sending operation includes an interactive operation on the send control 30. In response to the interactive operation on the send control 30, a first message bubble 40 is displayed moving from a first position to a second position along a movement path in the chat interface 10, and an animation effect is displayed on the first message bubble 40.

[0077] The following mainly introduces three message sending operations, that is, three interactive operations for the sending control 30:

[0078] The first message operation is a click operation on the send control 30.

[0079] Optionally, in response to a message sending operation, specifically a first message sending operation, the first message bubble 40 is displayed moving from a first position to a second position along a first movement path in a floating manner, and an interactive effect is displayed where the first message bubble 40 and the second message bubble 50 maintain a fixed interval. The first message operation is a click operation on the sending control 30. The floating manner refers to the movement mode of the first message bubble 40 along the first movement path. The first message bubble 40 moves at a constant speed in the floating manner.

[0080] In some embodiments, in response to a click operation on the send control 30, a first message bubble 40 is displayed moving at a constant speed from a first position to a second position along a first moving path in a floating manner; during the constant speed movement of the first message bubble 40, the visual effect of the display form of the first message bubble 40 gradually becomes stronger, and the interactive effect of the first message bubble 40 and the second message bubble 50 maintaining a fixed interval is displayed. Optionally, the visual effect of the first message bubble 40 gradually becoming stronger includes at least one of the following: the display area of ​​the first message bubble 40 gradually increases; the display position of the first message bubble 40 gradually shifts; the display brightness of the first message bubble gradually increases; the background transparency of the first message bubble 40 gradually increases; and the animation effect of the first message bubble 40 gradually becomes richer.

[0081] For example, if the send control 30 is clicked once within 1 second, the first message bubble 40 is displayed and floats upward at a constant speed from the bottom position of the chat interface 10 along the first moving path. During the movement of the first message bubble 40, the first message bubble 40 gradually becomes larger and gradually changes from transparent to opaque, and finally stops at a position that maintains a fixed interval with the second message bubble 50.

[0082] The second message operation is a long press operation on the sending control 30.

[0083] Optionally, in response to a second message sending operation, the first message bubble 40 is displayed moving from the first position to the second position along a second movement path in a launch manner, and an interactive effect of collision between the first message bubble 40 and the second message bubble 50 is displayed. The second message operation is a long press operation on the sending control 30. The launch manner is the movement method of the first message bubble 40 along the second movement path. The first message bubble 40 moves at a constant speed in the launch manner.

[0084] In some embodiments, in response to a long press operation on the send control 30, the first message bubble 40 is shown to accelerate from the first position to the second position along the second movement path in a ejection manner according to the duration of the long press operation; during the accelerated movement of the first message bubble 40, the first message bubble 40 is shown to collide with the second message bubble 50, and the first message bubble 40 and the second message bubble 50 are shown to be in a close contact state; or, the first message bubble 40 and the second message bubble 50 are shown to be in a merged state.

[0085] Optionally, the first movement path and the second movement path may be the same path or different paths. If the first and second movement paths are the same path, the movement speed of the first message bubble 40 along the first movement path is different from its movement speed along the second movement path; or, the movement time of the first message bubble 40 along the first movement path is different from its movement time along the second movement path. Optionally, after the first message bubble 40 and the second message bubble 50 collide, a collision atmosphere element is displayed in the chat interface 10. This collision atmosphere element is an atmosphere element generated after the accelerated collision of the first message bubble 40. For example, the collision atmosphere element could be a firework element, a bouquet element, etc.

[0086] For example, such as Figure 4 As shown in part (a) of the diagram, the user completes the editing of the first message in the message editing area 20. The first message is "Wow! I'll try it too." The second message sending operation is a long press operation on the sending control 30. For example, the long press duration of the sending control 30 is greater than 2 seconds. Figure 4 As shown in part (b) of the diagram, the first message bubble 40 accelerates and bounces upward along the second movement path from the bottom position of the chat interface 10, and the first message bubble 40 and the second message bubble 50 collide and stick together.

[0087] The third message operation is a continuous click operation on the send control 30.

[0088] Optionally, in response to a message sending operation being a third message sending operation, the first message bubble 40 is displayed moving from a first position to different second positions along multiple third movement paths in a scattering manner, and an interactive effect is displayed where the first message bubble 40 hits and clears the second message bubble 50. The third message operation is a multi-click operation on the sending control 30. The scattering manner is the movement pattern of the first message bubble 40 along the third movement paths. The first message bubble 40 moves irregularly in the scattering manner.

[0089] In some embodiments, in response to a combo operation on the send control 30, a preset number of first message bubbles 40 are displayed and moved from a first position to a second position along a third movement path in a scattering manner, based on the combo frequency. During the movement of the preset number of first message bubbles 40, after the preset number of first message bubbles 40 collide with a second message bubble 50, the second message bubble 50 is moved out of the chat interface 10. The preset number is positively correlated with the combo frequency. For example, if the preset number is equal to the number of combos (5 combos), the number of first message bubbles 40 is 5. Or, if the preset number is twice the number of combos (5 combos), the number of first message bubbles 40 is 10.

[0090] Optionally, when the screen clearing conditions are met, a screen clearing prompt message 60 is displayed in a preset area of ​​the chat interface 10. The screen clearing prompt message 60 is used to indicate that the second message bubble 50 has been moved out of the current chat session. The screen clearing conditions include at least one of the following: the frequency of the continuous click operation reaches a preset frequency threshold; the number of first message bubbles 40 reaches a preset number threshold; the duration of stopping the continuous click operation reaches a stop duration threshold; the duration of the continuous click operation reaches a click duration threshold.

[0091] For example, such as Figure 4 As shown in part (c) of the diagram, the third message sending operation is a repeated click operation on the sending control 30. For example, the repeated click frequency on the sending control 30 reaches 6 times, such as... Figure 4 As shown in part (d) of the diagram, six first message bubbles 40 collide with and clear the second message bubble 50 in a scattering manner, removing the second message bubble 50 from the chat interface 10. After the second message bubble 50 is removed, a clearing prompt message 60 is displayed in the chat interface 10. For example, the clearing prompt message 60 is displayed as "You have cleared the screen in a row".

[0092] In summary, the method provided in this application offers different animation effects (floating, bouncing, scattering) for message sending operations. Different message sending operations correspond to different animation effects; for example, the floating method provides uniform motion and gradually increasing visual effects, the bouncing method provides acceleration and collision effects, and the scattering method provides irregular motion and impact clearing effects. This allows users to receive richer and more intuitive feedback when sending their first message, thereby enhancing the interactivity and fun of chatting. Through different animation effects, users can intuitively distinguish different functions and operations, such as single-click sending, long-press sending, and multi-click sending. This design provides an innovative interaction method, offering users a novel chatting experience through the combination of animation and visual effects.

[0093] The following examples will provide a detailed description of the message bubble-based interactive method.

[0094] Figure 5 This is a flowchart illustrating an exemplary embodiment of the interactive method based on message bubbles provided in this application. The method is executed by a computer device, with the computer device serving as the... Figure 1 Taking the first terminal 110 as an example, the method is executed by the first terminal 110 or by a first client on the first terminal 110, where the first client is logged into a first account. The method includes at least a portion of steps 210, 220, and 230:

[0095] Step 210: Display the chat interface of the first account;

[0096] The first account is the account logged into the first client. Optionally, the first account is a user account; or, the first account is an account controlled by artificial intelligence (AI); or, the first account is an account controlled by a robot; or, the first account is an account controlled by a chat assistant. This application does not limit this. The embodiments of this application mainly use a user account as an example for illustration.

[0097] Optionally, the chat interface of the first account is displayed on the first client. Optionally, the chat interface is the conversation interface of an instant messaging program; or, the chat interface is the bullet screen interface provided by a video playback program; or, the chat interface is the conversation interface provided by a social networking program. This application does not limit this. The embodiments of this application are mainly described using the example of the chat interface being the conversation interface of an instant messaging program.

[0098] In some embodiments, an instant messaging program is installed on the first client, providing instant messaging functionality. When the chat interface is a session interface of the instant messaging program, the chat interface can be a two-person chat interface or a multi-person chat interface (group chat interface). The chat interface can be the chat interface of a first type of chat session, for example, a long-term chat session; or, the chat interface can be the chat interface of a second type of chat session, for example, a temporary chat session.

[0099] Step 220: In response to the message editing operation, determine the first message to be sent by the first account;

[0100] The message editing operation refers to the action of the first account editing the first message in the chat interface. The first message to be sent refers to the message that the first account has finished editing and is ready to send.

[0101] In some embodiments, the message editing operation is a manual editing operation performed in a message editing area. Optionally, a message editing area is displayed in the chat interface, and in response to a manual editing operation for a first message, a first message to be sent by a first account is determined in the message editing area. For example, the message editing area includes a message input box in which the user edits the first message to be sent.

[0102] In some embodiments, the message editing operation is an automatic editing operation performed by an AI assistant. Optionally, the terminal device is equipped with an audio collector that has the function of receiving voice commands. In response to the input operation for the voice command, the audio collector determines the first message to be sent by the first account based on the AI ​​assistant. For example, the voice command issued by the user to the AI ​​assistant is "Please help me open the dialog box with XX and send a message with the content XXXX".

[0103] In some embodiments, the first message is a multimedia message edited by the first account. Optionally, the first message includes at least one of text messages, voice messages, image messages, video messages, emoticon messages, file messages, hyperlink messages, and character messages. This application does not limit the specific content of the first message.

[0104] Step 230: In response to the message sending operation, display the first message bubble moving from the first position in the chat interface to the second position along the movement path. The first message bubble is a message bubble used to carry the first message.

[0105] In some embodiments, the first message bubble is a container element in the chat interface used to carry the first message. Optionally, the size of the first message bubble is related to the message content corresponding to the first message. Taking a text message as an example, the more characters a text message contains, the larger the size of the first message bubble is usually, such as a larger length and / or a larger height; conversely, the fewer characters a text message contains, the smaller the size of the first message bubble is usually, such as a smaller length and / or a smaller height. Taking a voice message as an example, the longer the duration of a voice message, the larger the size of the first message bubble is usually, such as a larger length and / or a larger height; conversely, the shorter the duration of a voice message, the smaller the size of the first message bubble is usually, such as a smaller length and / or a smaller height.

[0106] In some embodiments, the message sending operation is a sending operation for a first message. Optionally, in response to the sending operation for the first message, a first message bubble carrying the first message is displayed moving from a first position in the chat interface along a movement path to a second position. Here, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

[0107] In some embodiments, the movement path refers to the trajectory of the message bubble from a first position to a second position. Optionally, the movement path includes, but is not limited to, at least one of a straight path, a curved path, a spiral path, a loop path, or a custom path. This application does not limit the movement trajectory of the movement path.

[0108] In some embodiments, the first position is the position in the message editing area of ​​the chat interface, and the second position is the position in the message display area of ​​the chat interface; or, the first position is the position in the side area of ​​the chat interface, and the second position is the position in the message display area of ​​the chat interface; or, the first position is the position in the avatar area of ​​the first account, and the second position is the position in the message display area of ​​the chat interface; or, the first position is the position related to the virtual character corresponding to the first account, and the second position is the position in the message display area of ​​the chat interface.

[0109] For example, the first position is a position in the message editing area, and the second position is a position in the message display area. The message editing area is the area in the chat interface used to edit the first message, and the message display area is the area in the chat interface used to display the first message. For example, the message editing area includes an input box in the chat interface, and the message display area includes a visualization window in the chat interface. Optionally, in response to a message sending operation, the first message bubble moves from its position in the message editing area to its position in the message display area along a movement path.

[0110] For example, the first position is a position in the side area of ​​the chat interface, and the second position is a position in the message display area of ​​the chat interface. Optionally, in response to a message sending operation, a first message bubble is displayed that moves from its position in the side area of ​​the chat interface to its position in the message display area along a movement path.

[0111] For example, the first position is the position in the profile picture area of ​​the first account, and the second position is the position in the message display area of ​​the chat interface. Optionally, in response to a message sending operation, the first message bubble is displayed and moves from the position in the profile picture area of ​​the first account to the position in the message display area along a movement path.

[0112] For example, the first position is the position related to the virtual character corresponding to the first account, and the second position is the position in the message display area of ​​the chat interface. Here, the virtual character refers to the personalized virtual character set by the first account. The virtual character can be a static virtual character, or it can be a dynamic virtual character. Optionally, in response to a message sending operation, the first message bubble is displayed moving from the position related to the virtual character corresponding to the first account along a movement path to the position in the message display area. For example, if the virtual character is a virtual pet character raised by the first account, and the virtual pet character is in motion in the chat interface of the first account, in response to a message sending operation, the first message bubble is displayed moving from the mouth of the virtual pet character along a curved path in the form of blowing bubbles to the message display area. As another example, if the virtual character is a virtual human character set by the first account, in response to a message sending operation, the virtual human character is displayed throwing the first message bubble to the other end of the chat interface like a basketball shot; the first message bubble moves along a parabolic path and eventually "enters the basket" or "lands" in the message display area.

[0113] In summary, the method provided in this application allows for the sending of a first message bubble carrying the first message through various message sending methods after the first account has edited the first message to be sent in the chat interface. The first message bubble is displayed on the chat interface as it moves along a movement path from a first position (starting point) to a second position (ending point). The movement path of the first message bubble can be customized, and the movement effect of the first message bubble is also displayed on the chat interface. Compared to the direct display of message bubbles in related technologies, this application allows users to intuitively see the sending process of the first message by displaying the dynamic movement of the first message bubble. This enriches the sending and display methods of the first message bubble.

[0114] How to trigger message sending operation

[0115] In some embodiments, in response to a message sending operation, a first message bubble is displayed that moves from a first position in the chat interface to a second position along a movement path. Optionally, the sending operation for the first message is triggered based on different triggering methods.

[0116] Optionally, the message sending operation can be triggered by at least one of the following methods: a triggering method based on a virtual interactive control; a triggering method based on an audio acquisition device; a triggering method based on a motion sensor; or a triggering method based on an image acquisition device.

[0117] In some embodiments, the message sending operation is triggered by a touch operation of a virtual interactive control. Optionally, a virtual interactive control is displayed on the chat interface, and in response to a touch operation on the sending control collected by the terminal device, the sending of a first message is controlled, and a first message bubble is displayed moving from a first position to a second position along a movement path in the chat interface. For example, the virtual interactive control is a sending control displayed on the chat interface, and the sending of the first message is controlled in response to a click operation on the sending control.

[0118] In some embodiments, the message sending operation is triggered based on a voice command from an audio collector. Optionally, the terminal device is equipped with an audio collector that has the function of receiving voice commands. In response to the voice command collected by the audio collector, the device controls the sending of a first message and displays a first message bubble moving from a first position in the chat interface to a second position along a movement path. For example, the voice command is a voice command issued to an AI assistant. The user's voice command to the AI ​​assistant is "Please send the latest photo in my album to XX." The audio collector collects the user's voice command and transmits it to the AI ​​assistant. After receiving the user's voice command, the AI ​​assistant controls the sending of the first message.

[0119] In some embodiments, the message sending operation is triggered by a control operation based on a motion sensor. The motion sensor is a sensor in the terminal device capable of detecting the device's posture; common motion sensors include at least one of a gyroscope, accelerometer, orientation sensor, and gravity sensor. The device's posture refers to its position and orientation in space. The motion sensor can detect data about the terminal device in different postures, such as tilting or rotating. Optionally, in response to the posture control operation collected by the motion sensor, the sending of a first message is controlled, and a first message bubble is displayed moving from a first position in the chat interface along a movement path to a second position. For example, the motion sensor controls the sending of the first message after detecting a user's shaking action on the terminal device.

[0120] In some embodiments, the message sending operation is triggered based on image recognition by an image acquisition device. Here, the image acquisition device refers to a device built into the terminal device used to capture and collect the user's facial movements. Optionally, in response to the image acquisition operation of the image acquisition device, control the sending of a first message and display a first message bubble moving from a first position to a second position along a movement path in the chat interface. For example, the image acquisition device is a camera, and control the sending of the first message in response to the camera capturing the user's nodding action.

[0121] It should be noted that the above is only an exemplary description of the triggering method corresponding to the message sending operation, and this application does not limit the triggering method of the message sending operation.

[0122] In this embodiment, the first message is sent based on the triggering methods of virtual interactive controls, voice acquisition components, motion sensors, and image acquisition devices. This diversified triggering method provides different perception modes (sound, motion, image, etc.) to trigger message sending, which can adapt to more usage scenarios, meet the needs of different environments, and improve interactivity.

[0123] The first message bubble moves according to the message sending method corresponding to the message sending operation.

[0124] In some embodiments, the message sending operation is a sending operation for a first message. Optionally, in response to the sending operation for the first message, a first message bubble carrying the first message is displayed and moved from a first position in the chat interface to a second position along a movement path using the message sending method corresponding to the message sending operation.

[0125] Figure 6 This is a flowchart of an exemplary embodiment of the interaction method based on message bubbles provided in this application. Step 230 above can be replaced by step 231.

[0126] Step 231: In response to the message sending operation, display an animation effect showing the first message bubble moving from the first position in the chat interface to the second position along the movement path in accordance with the message sending method corresponding to the message sending operation.

[0127] The first message bubble is the message bubble used to carry the first message, and the second message bubble is the existing message bubble in the chat interface. The animation effect refers to the visual dynamic effect displayed during the movement of the first message bubble from its starting position (first position) to its ending position (second position).

[0128] In some embodiments, the chat interface can be a two-person chat interface or a multi-person chat interface (group chat interface). Optionally, the chat interface displays n multimedia messages sorted chronologically, where n is greater than or equal to 0. The second message bubble is a message bubble in the chat interface used to carry the n multimedia messages; it can also be understood as a message bubble in the chat interface used to carry multimedia messages sent by the first account and / or other accounts.

[0129] In some embodiments, the message sending operation is a sending operation for a first message. The message sending method of the first message is determined based on the message sending operation. Here, the message sending method refers to the interaction method when sending the first message.

[0130] Taking message sending as an example, triggered by touch operation based on a virtual interactive control. Optionally, a send control (virtual interactive control) is displayed on the chat interface. Different interaction methods of the send control can trigger different message sending methods. For example, a click operation on the send control can trigger the message sending method corresponding to the click operation; similarly, a double-click operation can trigger the message sending method corresponding to the double-click operation. Optionally, a microphone control (virtual interactive control) is displayed on the chat interface. Different interaction methods of the microphone control can trigger different message sending methods. For example, after inputting a voice message to be sent using the microphone control, a left swipe operation on the voice message to be sent can trigger the message sending method corresponding to the left swipe operation; similarly, a right swipe operation on the voice message to be sent can trigger the message sending method corresponding to the right swipe operation.

[0131] Taking message sending as an example, triggered by a motion sensor-based control operation. Optionally, the chat interface is associated with a motion sensor, and different interaction methods detected by the motion sensor can trigger different message sending methods. For example, if the motion sensor detects a leftward tilt of the aircraft, it can trigger the message sending method corresponding to a leftward tilt; if the motion sensor detects a rightward tilt of the aircraft, it can trigger the message sending method corresponding to a rightward tilt.

[0132] Taking message sending as an example, triggered by image recognition from an image acquisition device. Optionally, the chat interface can be associated with the image acquisition device, and different interaction methods captured by the image acquisition device can trigger different message sending methods. For example, after triggering the image acquisition device to capture the user's actions, if the image acquisition device captures the user's action as looking up, it can trigger the message sending method corresponding to the looking up action. If the image acquisition device captures the user's action as looking down, it can trigger the message sending method corresponding to the looking down action.

[0133] In some embodiments, different message sending methods correspond to at least one of different movement methods, different movement paths, different second locations, different number of bubbles, and different interaction forms with the second message bubble.

[0134] Different message sending methods correspond to different mobile methods.

[0135] For example, different message sending methods correspond to different movement methods. In response to a message sending operation, an animation effect is displayed showing the first message bubble moving from a first position in the chat interface along a movement path to a second position using the movement method corresponding to the message sending method. Here, the movement method refers to the motion pattern adopted by the first message bubble from the first position to the second position. The first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement. Optionally, the movement method includes at least one of a floating mode, a bouncing mode, and a scattering mode.

[0136] For example, the message sending method is a click operation on the send control. The movement method corresponding to the click operation is the floating mode. In the floating mode, the first message bubble will rise from the first position to the second position along the movement path with a floating animation effect, simulating the natural floating effect of a balloon.

[0137] For example, the message sending method is based on the upward tilting motion captured by the image sensor. The movement mode corresponding to the upward tilting motion is a catapult motion. In the catapult motion mode, the first message bubble is displayed with a catapult animation effect, rising from a first position to a second position along a movement path. The catapult speed of the first message bubble is related to the speed of the upward tilting motion; the faster the user tilts their head up, the faster the catapult speed of the first message bubble.

[0138] Different message sending methods correspond to different movement paths.

[0139] For example, different message sending methods correspond to different movement paths. In response to a message sending operation, an animation effect is displayed showing the first message bubble moving from a first position in the chat interface to a second position along the movement path corresponding to the message sending method. Here, the movement path refers to the trajectory of the first message bubble from the first position to the second position. Optionally, the movement path includes, but is not limited to, at least one of a straight path, a curved path, a spiral path, a loop path, or a custom path.

[0140] For example, the message sending method is a rightward tilt operation collected by the motion sensor. The movement path corresponding to the rightward tilt operation is a curved path. Under the curved path, the first message bubble is displayed moving from the first position to the second position along a curved route from left to right.

[0141] Different message sending methods correspond to different second locations.

[0142] For example, different message sending methods correspond to different second positions. The second position is the endpoint of the first message bubble's movement. In response to a message sending operation, an animation effect is displayed showing the first message bubble moving from its first position in the chat interface along a movement path to different endpoint positions.

[0143] For example, the message sending method uses a nodding motion captured by an image sensor. The number of nodding actions is related to the final position of the first message bubble's movement. With each nodding action, the first message bubble moves 1cm across the chat interface. When the image sensor captures two nodding actions, an animation shows the first message bubble moving upwards 2cm from its initial position on the chat interface. When the image sensor captures four nodding actions, an animation shows the first message bubble moving upwards 4cm from its initial position on the chat interface, until the first message bubble reaches its maximum movement endpoint.

[0144] Different message sending methods correspond to different numbers of bubbles.

[0145] For example, different message sending methods correspond to different numbers of bubbles. In response to a message sending operation, an animation effect is displayed where the first message bubble, with the number of bubbles corresponding to the message sending method, moves from a first position in the chat interface to a second position along a movement path. Here, the number of bubbles refers to the number of the first message bubble in the chat interface.

[0146] For example, the message sending method involves a combo attack on the send control, and the number of message bubbles is related to the combo attack frequency. When the combo attack frequency is 5 times, an animation effect is displayed showing 5 first message bubbles moving from the first position in the chat interface along a path to the second position. When the combo attack frequency is 10 times, an animation effect is displayed showing 10 first message bubbles moving from the first position in the chat interface along a path to the second position.

[0147] Different message sending methods correspond to different interaction formats of the second message bubble.

[0148] For example, different message sending methods correspond to different interaction forms with the second message bubble. In response to a message sending operation, an animation effect is displayed showing the first message bubble moving from a first position in the chat interface to a second position along a movement path, according to the interaction form corresponding to the message sending method with the second message bubble. Here, the interaction form refers to the interaction form between the first message bubble and the second message bubble, that is, the interaction form between the newly sent message bubble from the first account and other existing message bubbles in the chat interface.

[0149] For example, if the message sending method is a shaking operation detected by a motion sensor, the interaction between the first and second message bubbles depends on the intensity of the shaking operation. When the shaking operation is relatively weak, an animation effect shows the first message bubble and the nearest second message bubble side-by-side. When the shaking operation is relatively strong, an animation effect shows the first message bubble colliding with the second message bubble in the chat interface.

[0150] In this embodiment, the message sending operation corresponds to different message sending methods. These different message sending methods correspond to at least one of the following: different movement methods, different movement paths, different second positions, different number of bubbles, and different interaction forms with the second message bubble. Through different message sending methods, users can see different animation effects. These effects (such as floating, bouncing, scattering, etc.) demonstrate the message sending process, making the chat interface more vivid, intuitive, and interesting. These animation effects and interaction methods enhance the user's interactive experience.

[0151] Different message sending operations correspond to different message sending methods, which in turn correspond to different movement methods.

[0152] In some embodiments, in response to a message sending operation, an animation effect is displayed in which a first message bubble moves from a first position in the chat interface to a second position along a movement path, according to the message sending method corresponding to the message sending operation. Optionally, different message sending operations correspond to different movement methods. The movement methods include at least one of floating, bouncing, and scattering.

[0153] • Movement method is drifting

[0154] In one alternative embodiment, in response to a message sending operation being a first message sending operation, a first message bubble is displayed moving from a first position to a second position along a first moving path in a floating manner, and an interactive effect is displayed where the first message bubble and the second message bubble maintain a fixed interval.

[0155] The first message sending operation is a message sending operation that triggers the movement of the first message bubble in a floating manner. Optionally, the triggering method of the first message sending operation includes, but is not limited to, at least one of the following: a triggering method based on a virtual interactive control; a triggering method based on an audio collector; a triggering method based on a motion sensor; and a triggering method based on an image collector.

[0156] For example, the first message sending operation (the message sending method corresponding to the first message sending operation) is triggered based on a click operation on the sending control. Another example is that the first message sending operation (the message sending method corresponding to the first message sending operation) is triggered based on a first voice command captured by an audio acquisition device (e.g., the first voice command is "send the message in a floating manner"). Yet another example is that the first message sending operation (the message sending method corresponding to the first message sending operation) is triggered based on an upward tilting operation captured by a motion sensor. Still another example is that the first message sending operation (the message sending method corresponding to the first message sending operation) is triggered based on an upward head-raising action captured by an image acquisition device. The above are merely illustrative examples, and this application does not limit the triggering method of the first message sending operation.

[0157] Optionally, the "floating mode" is used to indicate the floating effect displayed during the movement of the first message bubble from its starting position (first position) along a first movement path to its ending position (second position). The first movement path includes, but is not limited to, at least one of a straight path, a curved path, a spiral path, a loop path, or a custom path. The "floating effect" refers to the effect of the first message bubble moving slowly and smoothly from the first position to the second position along the first movement path.

[0158] When the movement mode is floating, an interactive effect is displayed where the first message bubble and the second message bubble maintain a fixed interval. The fixed interval indicates the fixed distance between message bubbles in a stationary state. Optionally, the fixed interval is a custom setting by the first account, or it may be preset by the relevant developers; this application does not limit this.

[0159] In some embodiments, the first message bubble and the second message bubble maintain a fixed interval, that is, the first message bubble maintains a fixed interval with the second message bubble when it moves to the second position. The first message bubble moves from the first position to the second position along the first movement path in a floating manner. The second position is the endpoint position (or target position) of the first message bubble in the chat interface. When the first message bubble is at the second position, it changes from a moving state to a stationary state and maintains a fixed interval with the second message bubble.

[0160] For example, with a fixed interval of 10 pixels, the first message bubble moves along a curved path from the message editing area (e.g., the input box) to the endpoint position in a floating manner. The first message bubble floats in a certain direction, and the distance between the first message bubble and the second message bubble always remains at 10 pixels when the first message bubble is at the endpoint position, and it will not move closer or further away.

[0161] • Movement method is catapult-style

[0162] In one optional embodiment, in response to a message sending operation being a second message sending operation, the first message bubble is displayed to move from a first position to a second position along a second moving path in a catapult manner, and the first message bubble and the second message bubble are displayed to perform a collision interaction effect.

[0163] The second message sending operation is a message sending operation that triggers the movement of the first message bubble in a launch manner. Optionally, the triggering method for the second message sending operation includes, but is not limited to, at least one of the following: a triggering method based on a virtual interactive control; a triggering method based on an audio acquisition device; a triggering method based on a motion sensor; and a triggering method based on an image acquisition device.

[0164] For example, the second message sending operation (the message sending method corresponding to the second message sending operation) is triggered by a long press operation on the sending control. Another example is that the second message sending operation (the message sending method corresponding to the second message sending operation) is triggered by a second voice command captured by an audio acquisition device (e.g., the second voice command is "send the message in a launch manner"). Yet another example is that the second message sending operation (the launch method triggered by the second message sending operation) is triggered by a downward shaking operation captured by a motion sensor. Still another example is that the second message sending operation (the message sending method corresponding to the second message sending operation) is triggered by a downward head-down movement captured by an image acquisition device. The above are merely illustrative examples, and this application does not limit the triggering method of the second message sending operation.

[0165] Optionally, the "launching mode" is used to indicate the launch effect displayed during the movement of the first message bubble from its starting position (first position) along the second movement path to its ending position (second position). The second movement path includes, but is not limited to, at least one of a straight path, a curved path, a spiral path, a loop path, or a custom path. The launch effect refers to the first message bubble jumping from the first position to the second position in a manner similar to bouncing or rebounding.

[0166] When the movement mode is catapult-style, an interactive effect is displayed where the first message bubble and the second message bubble collide. "Collision" refers to the physical or visual collision between the first and second message bubbles during their movement.

[0167] In some embodiments, the first message bubble moves from the first position to the second position along the second moving path in a catapult manner. When the first message bubble is at the second position, it collides with the second message bubble, resulting in a collision effect.

[0168] For example, after the first message bubble and the second message bubble collide, the collision effect is that the first message bubble and the second message bubble are pressed together or merged. For example, after the first message bubble and the second message bubble collide, the collision effect is a physical collision, and the two message bubbles may bounce off each other, change direction or speed, simulating a collision reaction in the real world.

[0169] • Movement mode is scattering

[0170] In one alternative embodiment, in response to a message sending operation being a third message sending operation, the system displays a first message bubble moving from a first position to different second positions along multiple third moving paths in a scattering manner, and displays an interactive effect of the first message bubble colliding with and moving out of a second message bubble.

[0171] The third message sending operation is a message sending operation that triggers the movement of the first message bubble in a scattering manner. Optionally, the triggering method of the third message sending operation includes, but is not limited to, at least one of the following: a triggering method based on a virtual interactive control; a triggering method based on an audio acquisition device; a triggering method based on a motion sensor; and a triggering method based on an image acquisition device.

[0172] For example, the third message sending operation (the message sending method corresponding to the third message sending operation) is triggered by a repeated click on the sending control. Another example is that the third message sending operation (the message sending method corresponding to the third message sending operation) is triggered by a third voice command (e.g., the third voice command is "send the message in a scattering manner") acquired by an audio acquisition device. Yet another example is that the third message sending operation (the message sending method corresponding to the third message sending operation) is triggered by a random continuous shaking operation acquired by a motion sensor. Yet another example is that the third message sending operation (the message sending method corresponding to the third message sending operation) is triggered by a continuous nodding action acquired by an image acquisition device. The above are merely illustrative examples, and this application does not limit the triggering method of the third message sending operation.

[0173] Optionally, the scattering mode is used to indicate the scattering effect exhibited by the first message bubble as it moves from the starting position (first position) along the third movement path to the ending position (second position). The third movement path includes, but is not limited to, at least one of a straight path, a curved path, a spiral path, a loop path, or a custom path. The scattering effect refers to the first message bubble spreading out along multiple paths from the first position, simulating an "explosion" or "diffusion" effect.

[0174] When the movement mode is scattering, the interactive effect is displayed where the first message bubble moves from the first position to different second positions along multiple third movement paths according to the scattering mode; or, the interactive effect is displayed where the first message bubble moves from the first position to the same second position according to the scattering mode along multiple third movement paths.

[0175] In some embodiments, when the movement mode is scattering, multiple first message bubbles are displayed moving along multiple scattering paths, each first message bubble moving along a random scattering path, and the multiple first message bubbles moving from a first position to different second positions or the same second position respectively along multiple third movement paths according to the scattering mode.

[0176] In this embodiment, different bubble movement methods (floating, bouncing, scattering) and interactive effects (maintaining a fixed interval, collision, multi-path movement, etc.) are used to increase the visual interest and dynamism, making the message display more vivid and interesting.

[0177] Furthermore, by setting different movement methods and interactive effects, different message types can have different presentations, helping users visually distinguish the priority or content of messages. For example, a bouncing bubble might indicate an urgent message, while a floating bubble might indicate a regular notification or prompt, helping users more quickly identify the type and importance of information.

[0178] The message sending operation includes interactive operations on the send control.

[0179] Taking the message sending operation triggered by touch operation based on a virtual interactive control as an example, for instance, the virtual interactive control is a send control displayed on the chat interface, which is used to trigger the sending operation of the first message (message sending operation). Optionally, through interactive operation with the send control, an animation effect is displayed showing the first message bubble moving from a first position to a second position along a movement path according to different movement methods.

[0180] For example, in conjunction with reference Figure 7 In the chat interface 400, the user edits the first message in the input box 401. The first message is "Wow! The bubble can float now". The chat interface 400 includes a send control 402, which is used to trigger the sending operation of the first message. The user can interact with the send control 402 to trigger the message sending operation.

[0181] 1. The first message sending operation includes a click operation on the send control.

[0182] In an optional example, in response to a click on the send control, a first message bubble is displayed moving at a constant speed from a first position to a second position along a first movement path in a floating manner; during the constant speed movement of the first message bubble, the visual effect of the display shape of the first message bubble gradually becomes stronger, and the interactive effect of the first message bubble and the second message bubble maintaining a fixed interval is displayed.

[0183] In some embodiments, the chat interface includes a send control. In response to a click operation on the send control, a first message bubble is displayed that moves at a constant speed from a first position to a second position in a floating manner along a first movement path. The click operation indicates a single click on the send control. The constant speed indicates that the first message bubble maintains a constant speed during its movement from the first position along the first movement path.

[0184] Optionally, during the uniform movement of the first message bubble, the visual effect of displaying the shape of the first message bubble gradually becomes stronger, and after the first message bubble moves to the second position at a uniform speed, an interactive effect is displayed in which the first message bubble and the second message bubble maintain a fixed interval.

[0185] The visual effect of the first message bubble gradually intensifies, including at least one of the following:

[0186] • The display area of ​​the first message bubble gradually increases;

[0187] • The display position of the first message bubble gradually shifts;

[0188] • The display brightness of the first message bubble gradually increases;

[0189] • The transparency of the first message bubble gradually decreases;

[0190] • The animation effects of the first message bubble have been gradually enriched.

[0191] In some embodiments, during the uniform movement of the first message bubble, the display area of ​​the first message bubble gradually increases. The display area refers to the screen area covered by the size of the first message bubble in the chat interface. The gradual increase in display area includes a gradual increase in the height and / or width of the first message bubble. Optionally, during the uniform movement of the first message bubble, in response to the gradual closing of the distance between the first message bubble and the second message bubble (the first message bubble gradually approaches the second position), the display area of ​​the first message bubble in the chat interface gradually increases.

[0192] For example, when the first message bubble moves at a constant speed from the first position, the display area of ​​the first message bubble is 60px × 40px. As the distance between the first message bubble and the second message bubble gradually approaches, when the first message bubble reaches the second position, the display area of ​​the first message bubble is 150px × 60px.

[0193] In some embodiments, during the uniform movement of the first message bubble, the display position of the first message bubble gradually shifts. The display position refers to the coordinate position of the first message bubble within the chat interface. For example, the display position of the first message bubble is the coordinate position of its center point within the chat interface. The gradual shift in display position indicates that the display position of the first message bubble changes over time, and the coordinates of the first message bubble gradually move on the screen, possibly upwards, downwards, leftwards, rightwards, or in other directions, presenting a smooth movement effect. Optionally, during the uniform movement of the first message bubble, in response to the distance between the first message bubble and the second message bubble gradually decreasing (the first message bubble gradually approaches the second position), the display position of the first message bubble in the chat interface gradually shifts, moving from a position far from the second message bubble to a position close to the second message bubble.

[0194] For example, the initial display position of the first message bubble in the chat interface is in the message editing area, such as near the input box. As the first message bubble moves at a constant speed, and the distance between the first message bubble and the second message bubble gradually approaches, the final display position of the first message bubble in the chat interface is in the message display area of ​​the chat interface, such as the upper right corner of the visual window in the chat interface.

[0195] In some embodiments, during the uniform movement of the first message bubble, the display brightness of the first message bubble gradually increases. Here, display brightness refers to the brightness level of the first message bubble displayed in the chat interface. The gradually increasing display brightness indicates that the brightness or darkness of the first message bubble gradually increases during its movement, making the first message bubble more prominent. Optionally, during the uniform movement of the first message bubble, in response to the gradual closing of the distance between the first message bubble and the second message bubble (the first message bubble gradually approaches the second position), the display brightness of the first message bubble in the chat interface gradually increases.

[0196] For example, the first message bubble is displayed at low brightness in the initial moving state. During the uniform movement of the first message bubble, as the distance between the first message bubble and the second message bubble gradually approaches, the display brightness of the first message bubble will gradually increase, such as the color of the first message bubble changing from dark blue to bright blue, or from dark gray to bright white.

[0197] In some embodiments, during the uniform movement of the first message bubble, the display transparency of the first message bubble gradually decreases. Here, display transparency refers to the transparency of the first message bubble superimposed on the chat interface. A gradual increase in display transparency indicates that the first message bubble is gradually changing from transparent to opaque. Optionally, during the uniform movement of the first message bubble, in response to the distance between the first message bubble and the second message bubble gradually decreasing (the first message bubble gradually approaches the second position), the display transparency of the first message bubble in the chat interface gradually decreases.

[0198] For example, the background of the first message bubble may be relatively transparent in its initial moving state. During the uniform movement of the first message bubble, as the distance between the first message bubble and the second message bubble gradually approaches, the display transparency of the first message bubble may gradually darken, that is, the first message bubble gradually becomes opaque, such as with an opacity of 100%, in order to highlight the first message bubble.

[0199] In some embodiments, during the uniform movement of the first message bubble, the animation effects of the first message bubble are gradually enriched. Here, animation effects refer to the visual effects displayed by the first message bubble in the chat interface. The gradual enrichment of animation effects indicates that the animation effects of the first message bubble gradually become more diverse, including rotation effects, shaking effects, etc. Optionally, during the uniform movement of the first message bubble, in response to the gradual closing of the distance between the first message bubble and the second message bubble (the first message bubble gradually approaches the second position), the animation effects of the first message bubble in the chat interface are gradually enriched.

[0200] For example, the first message bubble displays a simple animation effect in its initial moving state, which only includes the movement effect. As the first message bubble moves at a constant speed, the animation effect of the first message bubble gradually becomes richer as the distance between the first message bubble and the second message bubble gradually approaches, including rotation effects and color changes.

[0201] For example, in conjunction with reference Figure 8 In the chat interface 500, the send control 501 is displayed, such as... Figure 8 As shown in part (a) of the diagram, in response to a click operation on the send control 501, a first message bubble 502 is displayed, moving from a first position, for example, the periphery of the send control 501. The chat interface 500 includes a second message bubble 503, which represents a message sent by the second account in the chat interface 500. Optionally, the first message bubble 502 is displayed, moving at a constant speed from the first position along a first movement path 504 in a floating manner to a second position, for example, a curved path. Figure 8 As shown in part (b) of the figure, the first message bubble 502 moves at a constant speed from the first position to the second position along the first moving path 504 (curved path). During the constant speed movement of the first message bubble 502, the display area of ​​the first message bubble 502 gradually increases and the display transparency of the first message bubble 502 gradually decreases, that is, the first message bubble 502 gradually becomes opaque.

[0202] In this embodiment, the gradually increasing visual effect of the display helps to enhance the prominence of the first message bubble, ensuring that users can clearly see the changes and updates of the first message bubble. This gradually increasing effect can attract the user's attention and highlight important interactive elements.

[0203] In summary, this application's embodiments describe the behavior of responding to a click operation of the send control, and the process of the first message bubble moving at a constant speed on the screen and presenting interactive effects. By moving the first message bubble to a second position at a constant speed and gradually enhancing its visual effects, a smooth and consistent interactive experience can be provided to the user.

[0204] 2. The second message sending operation includes a long press operation on the send control.

[0205] In an optional example, in response to a long press operation on the send control, the first message bubble is displayed to accelerate from the first position to the second position along the second movement path in a ejection manner, depending on the duration of the long press operation; during the accelerated movement of the first message bubble, the first message bubble is displayed to collide with the second message bubble, and the first message bubble and the second message bubble are displayed to be in close contact; or, the first message bubble and the second message bubble are displayed to be in a merged state.

[0206] In some embodiments, the chat interface includes a send control. In response to a long press on the send control, a first message bubble is displayed that accelerates from a first position to a second position along a second movement path in a launch-like manner, based on the duration of the long press. The long press indicates a long press operation on the send control. The acceleration indicates that the speed of the first message bubble gradually increases as it moves from the first position along the second movement path.

[0207] In some embodiments, the duration of the long press operation is related to the acceleration of the first message bubble. Optionally, the duration of the long press operation affects the degree of acceleration of the first message bubble or the duration of the animation effect. For example, the longer the long press operation, the more obvious the acceleration effect of the first message bubble, and the movement speed gradually increases over time. A shorter long press operation results in a relatively weaker acceleration effect. Similarly, a longer long press operation results in a more pronounced bouncing effect of the first message bubble, while a shorter long press operation results in a relatively less pronounced bouncing effect.

[0208] In some embodiments, in response to a long press operation on the send control, a charging prompt is displayed in the chat interface, and a first message bubble is displayed that accelerates from a first position to a second position along a second movement path in a bouncing manner according to the duration of the long press operation. Here, the charging prompt refers to an interactive prompt displayed when the send control is long-pressed, indicating through some visual feedback (e.g., a progress bar, animation effects, etc.) that the user is performing a charging operation, and the charging prompt indicates the duration and pressure of the user's long press on the send control.

[0209] For example, the charging indicator may appear as a progress bar. When a user long-presses the send control, a progress bar, circular animation, or other visual element may be displayed on the chat interface to indicate the duration of the long press. The progress bar indicates the charging progress. Alternatively, the charging indicator may appear as a pressure indicator, showing the user's long press strength through changes in pressure. For example, the longer the user long-presses the send control, the greater the displayed charging strength. Finally, the charging indicator may appear as a text message. When a user long-presses the send control, text messages such as "Charging...", "Ready to send", or "Charging reached 3 seconds" may be displayed on the chat interface. These text messages indicate the current long-press status.

[0210] For example, such as Figure 9 As shown in part (a) of the diagram, a send control 601 is displayed in the chat interface 600. In response to a long press operation on the send control 601, as shown... Figure 9As shown in part (b) of the diagram, a charging prompt 602 is displayed in the chat interface. The charging prompt 602 is displayed around the sending control 601 and is represented as a charging visual element. For example, the longer the long press operation on the sending control 601, the more charging visual elements are displayed on the charging prompt 602, and the larger the display size of the sending control 601, to represent the "charging" process corresponding to the long press operation.

[0211] Optionally, during the accelerated movement of the first message bubble, the system may display a collision between the first message bubble and the second message bubble, or display that the first message bubble and the second message bubble are in close contact; or, it may display that the first message bubble and the second message bubble are in a merged state.

[0212] 2.1 Regarding the first message bubble and the second message bubble being in a state of close proximity.

[0213] The "close contact" state indicates that the first message bubble and the second message bubble are in contact but not overlapping. Optionally, after the first message bubble collides with the second message bubble, the first message bubble and the second message bubble are pressed together, with the top of the first message bubble pressed against the bottom of the second message bubble, without any gap between them.

[0214] In some embodiments, the number of second message bubbles in the chat interface is i, where i is a positive integer greater than 1. During the accelerated movement of the first message bubble, it is shown that the first message bubble collides with the i-th second message bubble, and that the first message bubble and the i-th second message bubble are in a close-fitting state; after the first message bubble and the i-th second message bubble are in a close-fitting state, it is shown that the i-th second message bubble collides with the (i-1)-th second message bubble, and that the i-th second message bubble and the (i-1)-th second message bubble are in a close-fitting state; the above steps are repeated until the first message bubble and all i second message bubbles are in a close-fitting state.

[0215] During the accelerated movement of the first message bubble, in the initial stage, the first message bubble collides with the i-th second message bubble and is in a close-fitting state. In the intermediate stage, after the first message bubble is in close-fitting state with the i-th second message bubble, the i-th second message bubble continues to collide with the second message bubble above it (the (i-1)-th second message bubble) and then enters a close-fitting state. That is, the i-th second message bubble will move forward and contact the previous bubble (the (i-1)-th second message bubble), and the (i-1)-th, (i-2)-th, and so on will collide with each other and then enter a close-fitting state. In the final stage, the first message bubble is in a close-fitting state with all the second message bubbles (from the i-th to the 1st).

[0216] For example, the chat interface contains three (i=3) second message bubbles, arranged from top to bottom as the first, 22nd, and 3rd second message bubbles. In response to a long press on the send control, the first message bubble accelerates upwards from its initial position. It first collides with the 3rd second message bubble and remains attached. The 3rd second message bubble then moves forward, colliding with the 2nd second message bubble and remaining attached. The 2nd second message bubble continues moving forward, colliding with the first second message bubble and remaining attached. The chat interface displays the first message bubble and all three second message bubbles in a close-up state, with the first message bubble at the bottom and the 1st second message bubble at the top.

[0217] For example, such as Figure 10 As shown in part (a) of the diagram, a send control 701 is displayed in the chat interface 700. In response to a long press operation on the send control 701, for example, a long press operation on the send control 701 for 2 seconds, a first message bubble 702 is displayed and moves from a first position in a launch manner, for example, the first position is the periphery of the send control 701. The first message bubble 702 is used to carry the first message "Wow! The bubble can float now" sent by the first account. Figure 10 As shown in part (b) of the diagram, the first message bubble accelerates from a first position to a second position along a second movement path 703 in a catapult-like manner. For example, the second movement path 703 is a curved path. During the accelerated movement of the first message bubble 701, the first message bubble 702 collides with the second message bubble 704. The message carried by the second message bubble 704 is "Everyone come out and stick together, it's so much fun~". After the collision, the first message bubble 702 and the second message bubble 704 are in a close-fitting state. The second message bubble 704 will move forward and collide with the first message bubble 705. The message carried by the first message bubble 705 is "Why is the group suddenly so lively?". Figure 10 As shown in part (c) of the figure, the second second message bubble 704 and the first second message bubble 705 are in a close contact state after colliding.

[0218] In this embodiment, message bubbles will be in a close-fitting state after colliding. When the chat interface includes multiple second message bubbles, the collision will create a chain reaction, with the collided message bubble continuing to collide with the previous message bubble. Through continuous collisions, the interaction between the first message bubble and multiple second message bubbles can present a sense of hierarchy. Through this layered collision effect, users can more intuitively understand the transmission and association of messages. The display of collision and close-fitting states provides an instant feedback mechanism, visually reflecting the interaction process between message bubbles. This feedback enhances the user's sense of interaction with the interface and avoids a monotonous display.

[0219] In some embodiments, in response to a collision operation between a first message bubble and a second message bubble, a collision atmosphere element is displayed in the chat interface. The collision atmosphere element is an atmosphere element generated after the first message bubble undergoes accelerated collision. Optionally, the collision atmosphere element includes at least one of pattern elements, symbol elements, animation elements, avatar elements, text elements, or other atmosphere elements.

[0220] For example, collision-themed elements include pattern elements. In response to a collision between a first message bubble and a second message bubble, pattern elements are displayed in the chat interface. For example, pattern elements could be light spots, sparkling sparks, fireworks, flowers, bouquets, etc. (See reference...) Figure 11 ,like Figure 11 As shown in part (a) of the figure, in the chat interface 800, in response to the collision operation of the first message bubble 801 and the second message bubble 802, a pattern element 803 is displayed in the chat interface 800, for example, the pattern element 803 is a flower element.

[0221] For example, the collision atmosphere elements include avatar elements and text elements. In response to a collision between a first message bubble and a second message bubble, avatar elements and text elements are displayed in the chat interface. The avatar element is the avatar corresponding to the message bubble that caused the collision. (Refer to the reference...) Figure 11 Combined with reference Figure 11 ,like Figure 11 As shown in part (b) of the figure, in the chat interface 800, in response to the collision operation of the first message bubble 801 and the second message bubble 802, a collision atmosphere element 804 is displayed. The collision atmosphere element 804 includes an avatar element and a text element. The avatar element is the avatar of the first account (the account that sent the first message bubble 801) and the second account (the account that sent the second message bubble 802). The text element is displayed as "Collision Sticker".

[0222] In this embodiment of the application, collision atmosphere elements refer to additional animated or graphic elements displayed to enhance visual effects and user experience when message bubbles collide. Collision atmosphere elements can improve the interactivity between message bubbles.

[0223] 2.2 Regarding the first message bubble and the second message bubble being in a merged state

[0224] The fusion state indicates that the first message bubble and the second message bubble merge into a single message bubble after the collision. Optionally, after the first message bubble and the second message bubble collide, the original boundary between the first message bubble and the second message bubble is eliminated, and a new message bubble is synthesized.

[0225] In some embodiments, where the first message carried by the first message bubble and the second message carried by the second message bubble are related, the first message bubble and the second message bubble are displayed as a merged third message bubble. The third message bubble is a message bubble synthesized from the first message bubble and the second message bubble.

[0226] In some embodiments, the third message bubble is a new message bubble formed by merging the first and second message bubbles. The third message bubble carries a third message, which is the merged message of the first and second messages. Optionally, the third message bubble represents the composite effect of the first and second message bubbles, including at least one of display size, display color, display style, or other composite effects. The composite effect of the third message bubble is related to the first and second message bubbles. For example, if the display size of the first message bubble is A, the display size of the second message bubble is B, and the display size of the third message bubble is C, then the display size C may be greater than, equal to, or less than the display size A+B; this is not limited.

[0227] In some embodiments, when the first message (based on a first message bubble) and the second message (based on a second message bubble) are associated, the first message bubble and the second message bubble are displayed as a third message bubble. The associated relationships include at least one of the following:

[0228] The first and second messages contain the same content;

[0229] The first and second messages are semantically related;

[0230] The contexts of the first and second messages are related;

[0231] • The emotional relevance of the first and second messages.

[0232] In some embodiments, when the content of the first message and the second message is the same, the first message bubble and the second message bubble are displayed as a third message bubble. The situation where the content of the first message and the second message is the same includes at least one of the following: the text content of the first message and the second message is the same; the voice content of the first message and the second message is the same; the image content of the first message and the second message is the same; the emoticon content of the first message and the second message is the same. For example, referring to the reference... Figure 12 ,like Figure 12 As shown in part (a) of the diagram, in the chat interface 900, the first message bubble 901 carries the first message "Happy New Year, wishing you prosperity," and the second message bubble 902 carries the second message "Happy New Year, wishing you prosperity." The content of the first message carried by the first message bubble 901 and the second message carried by the second message bubble 902 is the same. During the accelerated movement of the first message bubble 901 in a catapult-like manner, it is shown that the first message bubble 901 collides with the second message bubble 902, as shown in the diagram. Figure 12 As shown in part (b) of the figure, the first message bubble 901 and the second message bubble 902 are merged into the third message bubble 903. The avatar elements corresponding to the third message bubble 903 include the avatar elements of the first message bubble 901 and the second message bubble 902. The third message carried by the third message bubble 903 is "Happy New Year, wishing you prosperity".

[0233] In some embodiments, where the first and second messages are semantically related, the first message bubble and the second message bubble are displayed merged into a third message bubble. Semantically related means that the first and second messages express similar or related meanings in their content. Even if the words and sentence structures of the first and second messages are different, the information or meaning they convey is similar. For example, such as... Figure 13 As shown in part (a) of the diagram, in the chat interface 1000, the first message bubble 1001 carries the first message "The weather is nice today," and the second message bubble 1002 carries the second message "The weather is sunny today." During the accelerated movement of the first message bubble 1001 in a catapult-like manner, it is shown that the first message bubble 1001 collides with the second message bubble 1002, as shown in the diagram. Figure 13 As shown in part (b) of the figure, the first message carried by the first message bubble 1001 and the second message carried by the second message bubble 1002 are semantically related, showing that the first message bubble 1001 and the second message bubble 1002 are merged into the third message bubble 1003. The avatar element corresponding to the third message bubble 1003 includes the avatar element of the first message bubble 1001 and the avatar element of the second message bubble 1002. The third message carried by the third message bubble 1003 is the merged information of the first message and the second message, for example, the third message is "The weather is really nice today. The weather is very sunny today".

[0234] In some embodiments, when the first message and the second message are context-related, the first message bubble and the second message bubble are displayed as a third message bubble. Context-related means that the first message and the second message appear in the same or similar context. Optionally, the context-related situations of the first message and the second message include, but are not limited to, at least one of the following: the first message and the second message discuss the same topic; the first message and the second message are lyrics from the same song; the first message and the second message are lines from the same classical Chinese poem; the first message and the second message are the upper and lower lines of a couplet.

[0235] For example, such as Figure 14 As shown in part (a) of the diagram, in the chat interface 1100, the first second message bubble 1103 carries the second message "Under the bridge in front of the door", the second second message bubble 1102 carries the second message "A flock of ducks swam by", and the first message bubble 1101 carries the first message "Come quickly and count them". The messages carried by the first second message bubble 1103, the second second message bubble 1102, and the first message bubble 1101 are lyrics from the same song. During the accelerated movement of the first message bubble 1101 in a catapult-like manner, it is shown that the first message bubble 1101 collides with the second second message bubble 1002. The second second message bubble 1002 will move forward and collide with the first second message bubble 1103. Figure 14 As shown in part (b) of the diagram, the first message bubble 1101, the second message bubble 1102, and the first message bubble 1103 are in a close-fitting state after their collision. The first message carried by the first message bubble 1101, and the second messages carried by the second message bubble 1102 and the first message bubble 1103 are context-dependent, as follows: Figure 14 As shown in part (c) of the figure, the first message bubble 1101, the second message bubble 1102, and the first message bubble 1103 are merged into a third message bubble 1004. The avatar elements corresponding to the third message bubble 1104 include the avatar elements of the first message bubble 1101, the second message bubble 1102, and the first message bubble 1103. The third message carried by the third message bubble 1103 is the merged information of the first and second messages. For example, the third message is "A flock of ducks swam across the bridge in front of the door. Come quickly and count them."

[0236] In some embodiments, when the first and second messages are emotionally related, the first message bubble and the second message bubble are displayed as a merged third message bubble. Emotional relevance refers to a correlation in the emotional expression of the first and second messages. Emotional expression includes positive and negative emotional expression. For example, the first message bubble carries the message "I'm so happy to see your great success," and the second message bubble carries the message "I'm so proud of you, congratulations!" Both messages express positive emotions; after the first and second message bubbles collide, they are displayed as a merged third message bubble.

[0237] In this embodiment, message bubbles with related relationships (such as identical content, semantic relevance, contextual relevance, emotional relevance, etc.) are merged into a new message bubble (i.e., a third message bubble), avoiding redundant repetitive display. This makes the message display on the chat interface more compact and concise, allowing users to obtain information more clearly without feeling overwhelmed by similar or related messages.

[0238] Furthermore, since the messages carried by multiple message bubbles have content, semantic, contextual, or emotional relevance, merging multiple message bubbles into a single message bubble helps maintain the continuity and consistency of information. This approach helps users perceive the logical relationships between messages, making the message presentation more coherent and reducing the sense of discontinuity in context.

[0239] In summary, this application's embodiments describe an interactive process between a first and second message bubble presented through accelerated animation and collision / merging effects when a long-press operation is performed on the send control. The accelerated process simulates a physical reaction, enhancing the interactivity between message bubbles. The close-fitting or merged display, along with the movement and collision / merging process of the message bubbles, can attract user attention, especially in complex application interfaces. Such dynamic effects can help users quickly grasp key information or activities. This attractiveness may increase user engagement and focus.

[0240] 3. The third message sending operation includes a multi-click operation on the send control.

[0241] In an optional example, in response to a combo operation on the send control, j first message bubbles are displayed, which move from the first position to different or the same second position along multiple third movement paths in a scattering manner, depending on the frequency of the combo operation. Here, j is a positive integer greater than 2.

[0242] In some embodiments, the chat interface includes a send control. In response to a combo operation on the send control, j first message bubbles are displayed, moving in a scattering manner from a first position along multiple third movement paths to different or the same second positions, based on the combo frequency. The combo operation indicates a series of consecutive clicks on the send control. The combo frequency refers to the number of consecutive clicks performed on the send control within a preset time. For example, if a user clicks the send control three times consecutively within one second, the combo frequency is 3 clicks.

[0243] In some embodiments, the frequency of a multi-click operation is related to the number of first message bubbles. Optionally, the number of first message bubbles (the size of j) and the frequency of multi-clicks are positively correlated.

[0244] For example, the number of first message bubbles is equal to the combo frequency. Each time a combo operation is performed on the send control, the same number of first message bubbles are displayed on the chat interface as the combo frequency. For instance, if the combo frequency for performing a combo operation on the send control is 5 times, 5 first message bubbles are displayed on the chat interface.

[0245] For example, the number of first message bubbles is a multiple of the combo frequency. Each time a combo operation is performed on the send control, a number of first message bubbles that is a multiple of the combo frequency is displayed on the chat interface. For instance, if the number of first message bubbles is twice the combo frequency, and the combo operation on the send control is performed 5 times, 10 first message bubbles will be displayed on the chat interface.

[0246] In this embodiment, the number and behavior of the first message bubble are dynamically controlled according to the frequency of the consecutive clicks, which allows users to feel the direct impact of their operations on the interface, increasing the diversity and depth of the interaction.

[0247] In some embodiments, j first message bubbles are displayed moving from a first position to different second positions along multiple third movement paths in a scattering manner. The multiple third movement paths represent that each first message bubble moves to the second position along a different path (a straight path, a curved path, or other custom paths, etc.). The multiple third movement paths are scattering, that is, the movement path of each first message bubble is random, and this application does not limit this.

[0248] For example, in conjunction with reference Figure 15 ,like Figure 15 As shown in part (a) of the diagram, a send control 1201 is displayed in the chat interface 1200. The number of first message bubbles is equal to the frequency of consecutive clicks on the send control 1201. In response to a consecutive click on the send control 1201, for example, clicking the send control 1201 four times within one second... Figure 15As shown in part (b) of the figure, four first message bubbles move from the first position to different second positions along four third movement paths according to the scattering method. The four third movement paths are random scattering paths, the directions of the four first message bubbles are random directions, and the speeds of the four first message bubbles are random speeds.

[0249] In summary, this application's embodiments describe an interactive effect where, when a combo operation is performed on a send control, multiple first message bubbles (j in total) move along multiple movement paths to the same or different second positions. This change, as a form of instant feedback, clearly conveys the result of the user's operation. Through the animation and collision process of multiple message bubbles triggered by the combo operation, the user can more intuitively perceive the causal relationship between their operation and the interface response. This feedback mechanism enhances the intuitiveness and controllability of the user's operation.

[0250] The second message bubble moved out of the chat interface.

[0251] In some embodiments, during the movement of the first message bubble, the second message bubble is moved out of the chat interface after the first message bubble interacts with the second message bubble. Optionally, "moved out" includes removal and clearing. The second message bubble being moved out of the chat interface includes either removing the second message bubble from the chat interface or clearing the second message bubble from the chat interface. Here, removal indicates that the second message bubble still exists in the current chat session, and clearing indicates that the second message bubble does not exist in the current chat session.

[0252] In some embodiments, in response to a message sending operation being a fourth message sending operation, a third message bubble is sent, and after the third message bubble interacts with the second message bubble, the second message bubble is removed from the chat interface; wherein, the third message bubble is a message bubble used to carry a third message or an empty message. The fourth message sending operation includes at least one of a single-click operation, a long-press operation, and a multi-click operation.

[0253] In some embodiments, during the movement of the first or third message bubble, if the screen clearing condition is met, the first or third message bubble is displayed, and after interacting with the second message bubble, the second message bubble is moved out of the chat interface. The interaction between the first or third message bubble and the second message bubble includes direct contact (e.g., the first or third message bubble colliding with the second message bubble) or non-direct contact.

[0254] In some embodiments, when the screen clearing conditions are met, a screen clearing prompt message is displayed in a preset area of ​​the chat interface. The screen clearing prompt message is used to indicate that the second message bubble has been moved out of the chat interface.

[0255] Interaction between the first and second message bubbles

[0256] In some embodiments, the first message bubble is a message bubble used to carry a first message, which includes, but is not limited to, at least one of text messages, voice messages, image messages, video messages, file messages, and emoticon messages. This application does not limit the specific content of the first message.

[0257] During the movement of the first message bubble, if the screen clearing conditions are met, the first message bubble interacts with the second message bubble, and then the second message bubble is moved out of the chat interface.

[0258] Optionally, the conditions for clearing the screen include at least one of the following:

[0259] • The click force of the click operation reaches the preset force threshold;

[0260] • The first message bubble and the second message bubble maintain a fixed interval until the first time threshold is reached;

[0261] • The duration of the long press operation reaches the second time threshold;

[0262] • The first message bubble and the second message bubble are in a close-fitting state or merged state, reaching the third time threshold;

[0263] • The frequency of consecutive clicks in a combo operation reaches a preset frequency threshold;

[0264] • The number of first message bubbles has reached a preset threshold;

[0265] • The duration of continuous continuous clicking operations reaches the click duration threshold;

[0266] • The duration of the stop-combo operation has reached the stop duration threshold.

[0267] In some embodiments, the screen clearing condition is that the click force of the click operation reaches a preset force threshold. The preset force threshold indicates the maximum force threshold for clicking the send control. Optionally, the terminal device is equipped with a touch sensor to detect the user's click force. When the user's click operation on the send control reaches the preset force threshold, the screen clearing condition of the chat interface is triggered, displaying a second message bubble that moves out of the chat interface, and displaying a screen clearing prompt message in the chat interface.

[0268] In some embodiments, the screen clearing condition is that the first message bubble and the second message bubble maintain a fixed interval for a period of time reaching a first time threshold. The first time threshold indicates the maximum time threshold for maintaining a fixed interval between the first and second message bubbles. Optionally, when the first message bubble moves in a floating manner, the first message bubble is displayed moving at a constant speed from a first position along a first movement path to a second position in a floating manner. The screen clearing condition of the chat interface is triggered when the time the first and second message bubbles maintain a fixed interval reaches the first time threshold. For example, if the time the first and second message bubbles maintain a fixed interval reaches 10 seconds, the screen clearing condition of the chat interface is triggered, the second message bubble is displayed moving out of the chat interface, and a screen clearing prompt message is displayed in the chat interface.

[0269] In some embodiments, the screen-clearing condition is that the duration of the long press operation reaches a second time threshold. The second time threshold indicates the maximum time threshold for long-pressing the send control. Optionally, when the user's long press duration on the send control reaches the second time threshold, the screen-clearing condition of the chat interface is triggered. For example, if the second time threshold is 8 seconds, triggering the screen-clearing condition of the chat interface involves displaying a first message bubble accelerating in a bouncing motion, colliding with a second message bubble, removing the second message bubble from the chat interface, and displaying a screen-clearing prompt message in the chat interface.

[0270] In some embodiments, the screen-clearing condition is that the first message bubble and the second message bubble are in a close-fitting or merged state for a third time threshold. The third time threshold indicates the maximum time threshold for the first and second message bubbles to be in a close-fitting or merged state. Optionally, when the first message bubble moves in a catapult-like manner, the first message bubble is shown to accelerate from a first position along a first movement path to a second position in a catapult-like manner. If the first and second message bubbles collide and are in a close-fitting or merged state for a period of time reaching the third time threshold, the screen-clearing condition of the chat interface is triggered. For example, if the first and second message bubbles are in a close-fitting or merged state for 10 seconds after colliding, the screen-clearing condition of the chat interface is triggered, the second message bubble is shown to move out of the chat interface, and a screen-clearing prompt message is displayed in the chat interface.

[0271] In some embodiments, the screen clearing condition is that the frequency of consecutive clicks in a multi-click operation reaches a preset frequency threshold. The preset frequency threshold indicates the maximum frequency threshold for continuous clicks on the send control. Optionally, the screen clearing condition of the chat interface is triggered when the number of consecutive clicks on the send control reaches the preset frequency threshold. For example, if the preset frequency threshold is 6 times, when the number of consecutive clicks on the send control reaches 6 times, the screen clearing condition of the chat interface is triggered, a second message bubble is displayed and moves out of the chat interface, and a screen clearing prompt message is displayed in the chat interface.

[0272] In some embodiments, the screen clearing condition is that the number of first message bubbles reaches a preset threshold. The preset threshold indicates the maximum number of first message bubbles. Optionally, the screen clearing condition of the chat interface is triggered when the number of first message bubbles reaches the preset threshold. For example, if the preset threshold for the number of first message bubbles is 10, when the number of first message bubbles in the chat interface reaches 10, the screen clearing condition of the chat interface is triggered, displaying a second message bubble moving out of the chat interface, and displaying a screen clearing prompt message in the chat interface.

[0273] In some embodiments, the screen-clearing condition is that the duration of continuous clicking reaches a click duration threshold. The click duration threshold indicates the maximum duration of continuous clicking on the send control. Optionally, the screen-clearing condition of the chat interface is triggered when the duration of continuous clicking on the send control reaches the click duration threshold. For example, if the click duration threshold is 5 seconds, and the user continuously clicks the send control for more than 5 seconds, the screen-clearing condition of the chat interface is triggered, displaying a second message bubble that moves out of the chat interface, and displaying a screen-clearing prompt message in the chat interface.

[0274] In some embodiments, the screen-clearing condition is that the duration of the continuous clicking operation reaches a stop duration threshold. The stop duration threshold indicates the maximum duration for which clicking stops after continuous clicking. Optionally, the screen-clearing condition of the chat interface is triggered when the duration of stopping clicking the send control reaches the stop duration threshold. For example, if the stop duration threshold is 3 seconds, and the user stops clicking the send control for more than 3 seconds after continuous clicking, the screen-clearing condition of the chat interface is triggered, displaying a second message bubble that moves out of the chat interface, and displaying a screen-clearing prompt message in the chat interface.

[0275] The following explanation will primarily focus on removing the second message bubble from the chat interface using a scattering method (such as a scattering method triggered by a combo attack).

[0276] In some embodiments, when the first message bubble moves in a scattering manner, the system displays the first message bubble moving from a first position along multiple third movement paths to different or the same second position, and displays an interactive effect of the first message bubble colliding with and then moving out of the second message bubble. Optionally, a preset number of first message bubbles collide with the second message bubble one by one. When the number of collisions reaches a threshold, the system displays the second message bubble moving out of the chat interface. Moving out includes removal and clearing. Removal indicates that the second message bubble still exists in the current chat session, while clearing indicates that the second message bubble no longer exists in the current chat session.

[0277] In some embodiments, the second message bubble is removed from the chat interface, and a preset number of first message bubbles collide with the second message bubble one by one. The second message bubble is "pushed" to an invisible area in the chat interface by the preset number of first message bubbles. It is necessary to swipe down to view the second message bubble. The second message bubble is equivalent to a change in its position in the chat interface, but the second message bubble still exists in the current chat session.

[0278] In some embodiments, the second message bubble is cleared from the chat interface, and a preset number of first message bubbles collide with the second message bubble one by one. Each time a collision is performed, the size of the second message bubble changes (the second message bubble becomes smaller). When the preset number of collisions threshold is reached, the size of the second message bubble is 0, and the second message bubble is no longer present in the current chat session with the first account.

[0279] In an optional example, in response to a combo attack on the send control, j first message bubbles are displayed, moving from a first position along multiple third movement paths in a scattering manner to different or the same second position, depending on the frequency of the combo attack. During the movement of the j first message bubbles, after the j first message bubbles collide with second message bubbles, the second message bubbles are moved out of the chat interface. Here, j is a positive integer greater than 2.

[0280] In some embodiments, j first message bubbles are displayed moving from a first position to different or the same second position respectively along multiple third movement paths in a scattering manner. The multiple third movement paths represent that each first message bubble moves to the second position along a different movement path (a straight path, a curved path, or other custom paths, etc.). The multiple third movement paths are scattering, that is, the movement path of each first message bubble is random, and this application does not limit this.

[0281] In some embodiments, during the movement of the j first message bubbles, after the j first message bubbles collide with the second message bubbles, the second message bubbles are moved out of the chat interface. Optionally, the j second message bubbles are removed from the chat interface, or the j second message bubbles are cleared from the chat interface. Removal indicates that the j second message bubbles still exist in the current chat session, and clearing indicates that the j second message bubbles do not exist in the current chat session. This application does not limit the specific circumstances of the removal.

[0282] For example, in conjunction with reference Figure 16 ,like Figure 16As shown in part (a) of the diagram, a send control 1301 is displayed in the chat interface 1300. In response to a combo operation on the send control 1301, multiple first message bubbles are displayed, and the first second message bubble 1303 and the second second message bubble 1302 are moved out of the chat interface 1300. Figure 16 As shown in part (b) of the diagram, the first second message bubble 1303 and the second second message bubble 1302 are removed from the chat interface 1300. Optionally, if the screen clearing conditions are met, for example, if the duration of continuous clicking on the send control 1301 reaches a click duration threshold (e.g., 5 seconds), then... Figure 16 As shown in part (c) of the diagram, a screen clearing prompt message 1304 is displayed in the chat interface 1300. For example, the screen clearing prompt message 1304 is displayed as "You have sent multiple screen clear messages".

[0283] It should be noted that the above is only an illustrative description of the screen clearing conditions, and this application does not limit the screen clearing conditions.

[0284] Interaction between the third message bubble and the second message bubble

[0285] In some embodiments, the third message bubble is a message bubble used to carry a third message or an empty message. When the message content of the third message is an empty message, the third message bubble is an air bubble.

[0286] Optionally, in response to a message sending operation, a fourth message sending operation is performed, sending a third message bubble and displaying the interaction effect between the third message bubble and the second message bubble. The fourth message sending operation includes at least one of a single click, a long press, and a double-click operation.

[0287] In some embodiments, the third message bubble moves from a first position in the chat interface to a third position along a movement path. The first position is the starting point of the third message bubble's movement, and the third position is the ending point. The movement of the third message bubble includes at least one of the following: floating, bouncing, and scattering.

[0288] During the movement of the third message bubble, if the screen clearing conditions are met, the third message bubble will interact with the second message bubble before the second message bubble is moved out of the chat interface.

[0289] Optionally, the conditions for clearing the screen include at least one of the following:

[0290] • The click force of the click operation reaches the preset force threshold;

[0291] • The third message bubble maintains a fixed interval with the second message bubble until the first time threshold is reached;

[0292] • The duration of the long press operation reaches the second time threshold;

[0293] • The third message bubble and the second message bubble are in a state of being adjacent or merged, reaching the third time threshold;

[0294] • The frequency of consecutive clicks in a combo operation reaches a preset frequency threshold;

[0295] • The number of third message bubbles has reached a preset threshold;

[0296] • The duration of continuous continuous clicking operations reaches the click duration threshold;

[0297] • The duration of the stop-combo operation has reached the stop duration threshold.

[0298] For details regarding the conditions for clearing the screen, please refer to the relevant content in "Interaction between the first and second message bubbles" above, which will not be repeated here.

[0299] In this embodiment, by providing a screen-clearing prompt when the screen-clearing conditions are met, the second message bubble can be moved out of the chat interface. The screen-clearing prompt includes multiple triggering conditions, such as the frequency of consecutive taps, the number of message bubbles, and the duration of consecutive taps. This method prevents excessive information accumulation on the chat interface, maintaining its simplicity. The screen-clearing conditions provide multiple triggering threshold options (such as the frequency of consecutive taps threshold), allowing users or developers to flexibly configure the screen-clearing conditions as needed. This flexibility enables the system to be optimized for different usage scenarios to adapt to different needs and user preferences.

[0300] The embodiments of this application can be applied to various chat interfaces, such as the conversation interface in an instant messaging program; the bullet screen interface provided by a video playback program; the conversation interface provided by a social networking program; and the comment interface in a live streaming scenario. The embodiments of this application do not limit the application scenario.

[0301] The message sending operation triggering methods in the embodiments of this application include, but are not limited to, at least one of the following: triggering method based on virtual interactive controls; triggering method based on audio acquisition device; triggering method based on motion sensor; and triggering method based on image acquisition device.

[0302] This application's embodiments mainly use the message sending operation triggered by touch operation based on a virtual interactive control (sending control) as an example for illustration.

[0303] This application embodiment sends different bubble effects by clicking the send control, long-pressing the send control, and repeatedly clicking the send control. For example, when clicking the send control, the first message bubble is sent in a floating manner, presenting a floating bubble effect; when long-pressing the send control, the first message bubble collides with the second message bubble, presenting a bubble effect of being closely connected to the second message bubble; when repeatedly clicking the send control, multiple first message bubbles appear, and the multiple first message bubbles will collide with the second message bubble in a scattering manner, presenting a bubble effect of clearing the second message bubble from the screen.

[0304] The following section provides a detailed description of the backend technical implementation of the message bubble-based interactive method provided in this application.

[0305] 1. Click operation for the send control

[0306] In some embodiments, in response to a click operation on the send control satisfying a click interaction condition, a first message bubble is triggered to move from a first position to a second position along a first movement path in a floating manner. When the movement mode is floating, the first message bubble maintains a fixed interval with the second message bubble when it reaches the second position. The click interaction condition includes a time condition and a frequency condition; for example, the click interaction condition is: click the send control once within 1 second.

[0307] For example, Figure 17 A schematic diagram of a click-to-send control provided in an exemplary embodiment of this application is shown. (Referring to the reference...) Figure 17 , Figure 17 The horizontal axis represents time (seconds), increasing from left to right. The vertical axis represents intensity, increasing from bottom to top. Each circle represents the frequency of clicking the send control. A single click is performed on the send control within 0 to 1 second, within 1 to 2 seconds, and within 2 to 3 seconds.

[0308] 2. Long press operation for the send control

[0309] In some embodiments, in response to a long-press operation on the send control satisfying the long-press interaction condition, a first message bubble is triggered to move from a first position to a second position along a second movement path in a catapult-like manner. When the movement is in a catapult-like manner, the first message bubble collides with the second message bubble when it reaches the second position, and remains in close contact with the second message bubble after the collision. The long-press interaction condition includes a time condition and a frequency condition; for example, the long-press interaction condition is: the duration of the long press on the send control is greater than 2 seconds.

[0310] For example, Figure 18A schematic diagram of a long-press send control provided in an exemplary embodiment of this application is shown. (Refer to reference...) Figure 18 , Figure 18 The horizontal axis represents time (seconds), increasing from left to right. The vertical axis represents intensity, increasing from bottom to top. Each circle represents the frequency of clicking the send control. A long press is performed once within 0 to 2 seconds, and once within 3 to 5 seconds.

[0311] 3. Continuous click operation for the send control

[0312] In some embodiments, in response to a long-press operation on the send control satisfying the long-press interaction condition, j first message bubbles are triggered to move from a first position to a second position along multiple (j) third movement paths in a scattering manner. When the movement method is scattering, the first message bubbles collide with the second message bubbles, and the second message bubbles are moved out of the chat interface. The long-press interaction condition includes a time condition and a frequency condition; for example, the combo interaction condition is: clicking the send control at least twice within 1 second.

[0313] For example, Figure 19 A schematic diagram of a multi-click sending control provided in an exemplary embodiment of this application is shown. (Referring to the reference...) Figure 19 , Figure 19 The horizontal axis represents time (seconds), increasing from left to right. The vertical axis represents intensity, increasing from bottom to top. Each circle represents the frequency of clicking the send control. Within 0 to 1 second, a combo click on the send control occurs 2 times; within 1 to 2 seconds, 4 times; within 2 to 3 seconds, 3 times; within 3 to 4 seconds, 3 times; and within 4 to 5 seconds, 2 times.

[0314] Logic for determining if an operation on the send control is a preset operation

[0315] For example, Figure 20 The diagram illustrates an overall flowchart of an interactive method based on message bubbles provided in an exemplary embodiment of this application. Figure 20 The method shown is used to determine whether an operation on the send control is a single click, a double click, or a long press.

[0316] Step 1: Monitor the touch start event;

[0317] Optionally, core variables are set, including touch start time (startTime), touch end time (endTime), and touch action (action). The touch start time indicates when the user begins to trigger the send control, the touch end time indicates when the user ends to trigger the send control, and the touch action indicates the user's behavior when touching the send control.

[0318] In some embodiments, touch actions include an initial touch action (none), a single-touch action (tap), and a multiple-touch action (multipleTap). The initial touch action (none) indicates that the user has entered a touch operation but has not yet explicitly performed a specific touch action; it is typically used for the preparation state when initializing a touch operation. When the user begins touching the screen but also performs a single tap or multiple taps, the value of `action` is `none`. A single-touch action (tap) indicates that the user has completed a single tap operation. A multiple-touch action (multipleTap) indicates that the user has performed multiple tap operations; when the user touches the screen two or more times consecutively within a preset time, the value of `action` is `multipleTap`.

[0319] In some embodiments, the touch start event is set to touchstart, which is used to monitor user touch events on the send control. The touch end event is set to touchend, which is used to monitor user end touch events on the send control. Represented in code:

[0320]

[0321] Here, `button` is a DOM element representing the send control on the chat interface. `button` can be a `div` node or any other HTML element that can function as a button. `addEventListener` is used to monitor touch start and touch end events.

[0322] Step 2: Record the touch start time;

[0323] Step 3: Determine if the touch duration is greater than the first threshold;

[0324] The first threshold is a time threshold, for example, the first threshold is 300 milliseconds (ms).

[0325] The touch duration is determined based on the touch start time and touch end time, and the touch duration is the difference between the touch start time and touch end time.

[0326] The logic within the touchstart event is as follows:

[0327]

[0328]

[0329] In some embodiments, it is determined whether the touch duration (startTime-endTime) is greater than a first threshold, where the touch duration represents the time interval between two touch actions. Optionally, if the touch duration is less than the first threshold, it is determined that the message sending operation retains the previous operation. For example, taking a first threshold of 300ms as an example, if the touch duration is less than 300ms, and the previous operation was a continuous click operation on the send control, it is determined that the message sending operation retains the continuous click operation.

[0330] Step 4: If the value is less than the first threshold, maintain the previous operation;

[0331] Step 5: If the value exceeds the first threshold, monitor the touch end event;

[0332] Optionally, if the touch duration exceeds a first threshold, the message sending operation is determined to be a newly initiated operation. For example, with a first threshold of 300ms, if the touch duration exceeds 300ms, the touch end event is monitored and the touch end time is recorded.

[0333] Step 6: Record the touch end time;

[0334] Step 7: Determine if the touch duration is greater than the second threshold;

[0335] The second threshold is a time threshold, for example, the second threshold is 2 seconds (s).

[0336] The touch duration (second touch duration) is determined based on the second touch start time and the second touch end time. The touch duration is the difference between the second touch start time and the second touch end time.

[0337] In some embodiments, it is determined whether the touch duration (startTime-endTime) is greater than a second threshold, where the touch duration represents the time interval between two touch actions. Optionally, if the touch duration is greater than the second threshold, the message sending operation is determined to be a long press operation on the send control. If the touch duration is less than the second threshold, it is determined whether the current touch action is a single-click touch action.

[0338] Step 8: If the value exceeds the second threshold, trigger a long press operation;

[0339] Step 9: If the value is less than the second threshold, determine whether the current touch action is a single click;

[0340] Step 10: If the current touch action is a single click, trigger the single click operation;

[0341] Optionally, if the current touch behavior is a click touch behavior, determine that the message sending operation is a click operation on the sending control, and trigger a click operation on the sending control.

[0342] Step 11: If the current touch action is not a single click, trigger a double-click operation.

[0343] Optionally, if the current touch action is not a single-click touch action, determine that the message sending operation is a double-click operation on the sending control, and trigger a double-click operation on the sending control.

[0344] Implementing the animation effect of message bubbles

[0345] In some embodiments, in response to a message sending operation, that is, in response to an interactive operation (one of a single click, a long press, and a double-click) on the sending control, a first message bubble is displayed, and an animation effect is shown in which the first message bubble moves from a first position in the chat interface to a second position along a movement path in accordance with the message sending method corresponding to the interactive operation of the sending control.

[0346] Optionally, the animation effect of the first message bubble is determined based on the movement path, movement angle, and movement distance. The movement path attribute is `offset-path`, which defines the movement path (SVG path) of the first message bubble, and the first message bubble will move along this path. The movement angle attribute is `offset-rotate`, which defines the movement angle of the first message bubble, that is, the angle of the first message bubble relative to the movement path. The movement distance attribute is `offset-distance`, which defines the movement distance of the first message bubble, and the movement distance is used to indicate the position of the second location in the chat interface.

[0347] In some embodiments, the movement path of the first message bubble is determined based on a cubic Bézier curve. Optionally, at least four key points of the movement path are obtained, and these at least four key points are used as control points for the cubic Bézier curve. A cubic Bézier curve is determined based on these at least four key points, and the cubic Bézier curve is used as the movement path of the first message bubble, controlling the first message bubble to move along the cubic Bézier curve. The at least four key points of the movement path include: a starting point position, an ending point position, and at least two path points.

[0348] The implementation code is as follows:

[0349]

[0350]

[0351] Here, `bubble-animation` refers to the CSS class name of the first message bubble. When the user enters the first message to be sent, the `bubble-animation` class name will be assigned to the first message bubble. `offset-path` defines the upward movement path of the first message bubble, using the CSS path definition, in the form of a command + parameter. In this scenario, the following commands are mainly used:

[0352] • M(x, y): Command M means to move to position (x, y). Here, (x, y) indicates the second position of the first message bubble in the chat interface, that is, the final position of the first message bubble's movement in the chat interface.

[0353] • C(x1, y1, x2, y2, x, y): The command is C, meaning to draw a cubic Bézier curve to (x, y), with control points at (x1, y1)(x2, y2)(x, y). For example, in the code above, C(-30, -150, -60, -300, 0, -460) defines a cubic Bézier curve to control the movement trajectory of the first message bubble. This curve means that the first message bubble starts from the origin, moves to the lower left, then to the lower right, and finally reaches a point at the top of the screen.

[0354] • offset-rotate: Defines the angle of the first message bubble along its movement path. offset-rotate can be auto, reverse, or a specific angle value. If offset-rotate is set to auto, the first message bubble will automatically rotate according to the tangent direction of the movement path, ensuring that the first message bubble's orientation is consistent with the direction of movement. If offset-rotate is set to reverse, the first message bubble's orientation will be the opposite of auto. Optionally, setting offset-rotate to 0deg will cause the first message bubble to rise horizontally without rotating an angle according to the movement path.

[0355] • Animation: Used to define the animation name of the first message bubble. For example, if the animation name is Move Bubble, the animation of the first message bubble is linear, and the duration of the animation effect of the first message bubble is 2 seconds.

[0356] * `@keyframes moveBubble`: Defines the keyframes for the first message bubble, controlling its properties during animation. For example, an `offset-distance` property of 0% indicates the first message bubble is at the starting point of its movement path (the first position). Similarly, a `scale` property of 0 indicates the initial size of the first message bubble is 0. Finally, a `opacity` property of 0 indicates the initial transparency of the first message bubble is 0, meaning it is completely transparent.

[0357] The code above demonstrates the animation effect of the first message bubble in a floating mode: starting from the bottom of the screen, the first message bubble moves upward along a defined curved path, gradually changing from transparent to opaque, and its size gradually increases from zero to its original size. This effect can be used to simulate the first message bubble "floating" onto the screen, increasing the interactivity and visual appeal of chat applications.

[0358] In some embodiments, since the final display position (second position) of each message bubble is uncertain, it is necessary to calculate the final display position coordinates of the first message bubble, that is, the y coordinate of the endpoint in the offset-path attribute (the x coordinate is considered fixed).

[0359] Calculate the second position

[0360] For situations where a control is clicked:

[0361] In some embodiments, a message list in the chat interface is obtained, as well as a visual area of ​​the chat interface, which is used to indicate the screen area size of the endpoint device's display; the second messages in the message list are traversed, and the second message bubbles corresponding to m second messages in the visual area are determined; the display height of the m second message bubbles and the total fixed interval are calculated to obtain the height of the second position of the first message bubble. Here, m is a positive integer greater than or equal to 1, and the total fixed interval is used to indicate m fixed intervals in the chat interface, including the fixed intervals between the m second message bubbles.

[0362] The implementation code is as follows:

[0363]

[0364]

[0365] In some embodiments, when the interactive operation for the send control is a click operation, the first message bubble and the second message bubble maintain a fixed interval when moving to the endpoint position (second position), and the second position under the floating mode is calculated based on the above code.

[0366] When a control is long-pressed:

[0367] In some embodiments, when the interaction with the send control is a long press, the first and second message bubbles collide and stick together when moving to the endpoint (second position), with a fixed interval of 0 between them. When the user long presses the send control, also based on CSS's motion-path capability, a fixed interval does not need to be added during the final coordinate calculation, because the final effect requires the message bubbles within the visual area to be joined together. This requires adjusting the following line of code:

[0368]

[0369] When the interaction of the send control is a long press, the first message bubble moves from the first position to the second position along the second movement path in a bouncing manner. To achieve the bouncing effect, the animation duration and the animation pattern throughout the cycle need to be reduced, which means modifying the animation property in the CSS:

[0370]

[0371] Specifically, the animation time of the first message bubble is shortened to 1 second, and the animation cycle of the first message bubble is implemented according to the Bézier curve (0.68, -0.55, 0.27, 1.55).

[0372] When the interaction with the send control is a long press, the first message bubble collides with the second message bubble. Therefore, collision detection needs to be performed on both the first and second message bubbles. After a second message bubble collides with a first message bubble, the collided second message bubble continues to move upwards. The collision detection algorithm is as follows:

[0373]

[0374]

[0375] The core of collision detection is that if a message bubble collides, its position is adjusted so that it "sticks" to the colliding message bubble, and the collision bubble is checked to see if it will collide with other message bubbles, thus achieving the effect of a fixed empty interval between message bubbles after a collision.

[0376] When a control is clicked repeatedly:

[0377] In some embodiments, when the interactive operation for the send control is a combo operation, when moving to the endpoint position (second position), the first message bubble and the second message bubble collide, and then the second message bubble is moved out of the chat interface.

[0378] In the bouncing mode, an empty first message bubble needs to be randomly sent upwards, and collision detection between the first and second message bubbles is required. If a collision occurs, the second message bubble needs to be moved off-screen. Generating the randomly upward-pointing first message bubble also relies on CSS's `motion-path` capability, requiring the random generation of the endpoint coordinates (second position) of the `offsetPath`. The core code is as follows:

[0379]

[0380] The interactive operation for the send control is a combo attack, and the first message bubble moves in a scattering motion under this operation. In the scattering motion, collision detection is also required for the first and second message bubbles. The collision detection algorithm for the scattering motion is the same as that for the projectile motion; the difference is that in the scattering motion, after a collision occurs, the first message bubble needs to move the second message bubble out of the chat interface. The code implementation is as follows:

[0381]

[0382] In some embodiments, after the screen clearing conditions are met, a screen clearing prompt message is displayed on the chat interface. At this point, it's necessary to know if the user has clicked "end." Returning to the previous code logic that judges touch behavior, when the touch behavior is determined to be multipleTouch, a timer is added. If no further click is received within 1 second, the click is considered end, and the screen clearing prompt message is displayed. The code implementation is as follows:

[0383]

[0384] The above method can achieve the animation effect of the first message bubble under single-click, long-press, and double-click operations.

[0385] In this embodiment, by calculating the trigger mechanism of the click time and frequency of the sending control, the first message bubble in the chat interface can dynamically change, displaying the animation effect of the first message bubble in the chat interface. This interactive method of message bubbles satisfies users' basic needs for message browsing and enriches the sending methods and display forms of message bubbles.

[0386] Figure 21This diagram illustrates a structural block diagram of an interactive device based on message bubbles, according to an embodiment of this application. The device has the functionality to implement the aforementioned example of an interactive method based on message bubbles. This functionality can be implemented in hardware or by hardware executing corresponding software. The device can be the first client described above, or it can be integrated within the first client. Figure 21 As shown, the device may include a display module 2110 and a determination module 2220.

[0387] Display module 2110 is used to display the chat interface of the first account;

[0388] The determination module 2220 is used to determine the first message to be sent by the first account in response to the message editing operation;

[0389] Display module 2110 is used to respond to a message sending operation by displaying a first message bubble moving from a first position in the chat interface to a second position along a movement path. The first message bubble is a message bubble used to carry the first message.

[0390] Wherein, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

[0391] In some embodiments, the display module 2110 further includes a display submodule.

[0392] In an optional example, a submodule is displayed to respond to the message sending operation by displaying an animation effect of the first message bubble moving from a first position in the chat interface to a second position along the movement path in accordance with the message sending method corresponding to the message sending operation.

[0393] Among them, the message sending methods corresponding to different message sending operations correspond to at least one of the following: different movement methods, different movement paths, different second positions, different number of bubbles, and different interaction forms with the second message bubble. The movement methods include at least one of the following: floating method, ejection method, and scattering method. The second message bubble is an existing message bubble in the chat interface.

[0394] In some embodiments, the display submodule further includes a display unit.

[0395] In an optional example, the display unit is configured to, in response to the message sending operation being a first message sending operation, display the first message bubble moving from the first position to the second position along a first moving path in the floating manner, and display an interactive effect in which the first message bubble and the second message bubble maintain a fixed interval;

[0396] The display unit is configured to respond to the message sending operation as a second message sending operation, display the first message bubble moving from the first position to the second position along the second moving path in the ejection manner, and display the interactive effect of the first message bubble and the second message bubble colliding;

[0397] The display unit is configured to respond to the message sending operation as a third message sending operation by displaying the interactive effect of the first message bubble moving from the first position to different second positions or the same second position along multiple third moving paths according to the scattering method.

[0398] In an optional example, the chat interface includes a send control, and the first message sending operation includes a click operation on the send control;

[0399] The display unit is configured to respond to a click operation on the sending control by displaying the first message bubble moving at a constant speed from the first position along the first moving path to the second position in accordance with the floating pattern;

[0400] The display unit is used to display the visual effect of the display form of the first message bubble gradually becoming stronger during the uniform movement of the first message bubble, and to display the interactive effect of the first message bubble and the second message bubble maintaining a fixed interval.

[0401] In one optional example, the visual effect of the first message bubble gradually intensifies, including at least one of the following:

[0402] The display area of ​​the first message bubble gradually increases;

[0403] The display position of the first message bubble gradually shifts;

[0404] The display brightness of the first message bubble gradually increases;

[0405] The transparency of the first message bubble gradually decreases;

[0406] The animation effects of the first message bubble gradually become richer.

[0407] In some embodiments, the apparatus includes a repeating module.

[0408] In an optional example, the chat interface includes a send control, and the second message sending operation includes a long press operation on the send control;

[0409] The display unit is configured to respond to a long press operation on the send control and display the first message bubble moving from the first position to the second position along the second movement path in an accelerated manner according to the duration of the long press operation.

[0410] The display unit is configured to display, during the accelerated movement of the first message bubble, the collision between the first message bubble and the second message bubble, and the close contact between the first message bubble and the second message bubble; or, the fusion of the first message bubble and the second message bubble.

[0411] In one optional example, the number of the second message bubbles is i, where i is a positive integer greater than 1;

[0412] The display unit is used to display, during the accelerated movement of the first message bubble, the collision between the first message bubble and the i-th second message bubble, and to display that the first message bubble and the i-th second message bubble are in close contact.

[0413] The display unit is configured to display, after the first message bubble and the i-th second message bubble are in close contact, that the i-th second message bubble collides with the (i-1)-th second message bubble, and to display that the i-th second message bubble and the (i-1)-th second message bubble are in close contact.

[0414] The repeat module is used to repeat the above steps until the first message bubble and i second message bubbles are in close contact.

[0415] In an optional example, the display unit is configured to display the first message bubble and the second message bubble merging into a third message bubble when the first message bubble carrying the first message and the second message bubble carrying the second message are associated.

[0416] The third message bubble is a message bubble composed of the first message bubble and the second message bubble. The related situations include at least one of the following: the content of the first message and the second message is the same; the semantics of the first message and the second message are related; the context of the first message and the second message are related; and the emotions of the first message and the second message are related.

[0417] In an optional example, a display unit is configured to display a collision atmosphere element in the chat interface in response to a collision operation between the first message bubble and the second message bubble, the collision atmosphere element being an atmosphere element generated after the first message bubble undergoes an accelerated collision.

[0418] In an optional example, the chat interface includes a send control, and the third message sending operation includes a combo operation on the send control;

[0419] The display unit is configured to respond to a combo operation on the sending control and display j first message bubbles that move from the first position to different second positions along the plurality of third moving paths according to the combo frequency of the combo operation, where j is a positive integer greater than 2.

[0420] In one optional example, the number of the first message bubbles and the frequency of the combo are positively correlated.

[0421] In an optional example, a display unit is configured to display, during the movement of the first message bubble, that the second message bubble is moved out of the chat interface after the first message bubble interacts with the second message bubble.

[0422] In an optional example, the display unit is configured to send a third message bubble in response to the message sending operation being a fourth message sending operation, and to display the third message bubble interacting with the second message bubble before removing the second message bubble from the chat interface;

[0423] The third message bubble is a message bubble used to carry a third message or an empty message.

[0424] In an optional example, the display unit is configured to display a screen clearing prompt in a preset area of ​​the chat interface when the screen clearing conditions are met. The screen clearing prompt is used to indicate that the second message bubble has been moved out of the chat interface.

[0425] In one optional example, the conditions for clearing the screen include at least one of the following:

[0426] The click force of the click operation reaches a preset force threshold;

[0427] The first message bubble or the third message bubble maintains a fixed interval with the second message bubble until a first time threshold is reached;

[0428] The duration of the long press operation reaches the second time threshold;

[0429] The first message bubble or the third message bubble is in the close contact state or the merged state with the second message bubble, reaching a third time threshold.

[0430] The frequency of the combo operation reaches a preset frequency threshold;

[0431] The number of the first message bubble or the third message bubble reaches a preset number threshold;

[0432] The duration of the continuous click operation reaches the click duration threshold;

[0433] The duration of the stopped combo operation reaches the stop duration threshold.

[0434] In an optional example, the first position is the position in the message editing area of ​​the chat interface, and the second position is the position in the message display area of ​​the chat interface; or,

[0435] The first position is a location in the side area of ​​the chat interface, and the second position is a location in the message display area of ​​the chat interface; or,

[0436] The first position is the position in the profile picture area of ​​the first account, and the second position is the position in the message display area of ​​the chat interface; or,

[0437] The first position is the position related to the virtual character corresponding to the first account, and the second position is the position in the message display area of ​​the chat interface.

[0438] It should be noted that the specific limitations of the embodiments of the one or more message bubble-based interactive devices provided above can be found in the limitations of the message bubble-based interactive methods above, and will not be repeated here. Each module of the above-mentioned device can be implemented entirely or partially through software, hardware, or a combination thereof. Each module can be embedded in hardware or independent of the processor of the computer device, or stored in software in the memory of the computer device, so that the processor can call and execute the corresponding operations of each module.

[0439] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0440] This application also provides a computer device, which includes a processor and a memory. The memory stores at least one computer program, which is loaded and executed by the processor to implement the message bubble-based interactive method provided in the above-described method embodiments.

[0441] Figure 22This illustration shows a structural block diagram of a computer device 2800 provided in an exemplary embodiment of this application. The computer device 2800 may be a portable mobile terminal, such as a smartphone, tablet computer, MP3 player (Moving Picture Experts Group Audio Layer III), or MP4 player (Moving Picture Experts Group Audio Layer IV). The computer device 2800 may also be referred to as a user device, portable terminal, or other names. Typically, the computer device 2800 includes a processor 2801 and a memory 2802.

[0442] Processor 2801 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 2801 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). Processor 2801 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 2801 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 2801 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0443] The memory 2802 may include one or more computer-readable storage media, which may be tangible and non-transitory. The memory 2802 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 2802 is used to store at least one instruction, which is executed by the processor 2801 to implement the message bubble-based interactive method provided in the embodiments of this application.

[0444] In some embodiments, the computer device 2800 may optionally include a peripheral device interface 2803 and at least one peripheral device. The processor 2801, memory 2802, and peripheral device interface 2803 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 2803 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of the following: a radio frequency circuit 2804, a touch display screen 2805, a camera assembly 2806, an audio circuit 2807, and a power supply 2808.

[0445] Peripheral device interface 2803 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 2801 and memory 2802. In some embodiments, processor 2801, memory 2802 and peripheral device interface 2803 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 2801, memory 2802 and peripheral device interface 2803 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0446] The radio frequency (RF) circuit 2804 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 2804 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 2804 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 2804 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 2804 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or Wi-Fi (Wireless Fidelity) networks. In some embodiments, the RF circuit 2804 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0447] The touch display screen 2805 is used to display a UI (User Interface). This UI may include graphics, text, icons, videos, and any combination thereof. The touch display screen 2805 also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to the processor 2801 for processing. The touch display screen 2805 is used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one touch display screen 2805, located on the front panel of the computer device 2800; in other embodiments, there may be at least two touch display screens, respectively located on different surfaces of the computer device 2800 or in a folded design; in some embodiments, the touch display screen 2805 may be a flexible display screen, located on a curved or folded surface of the computer device 2800. Furthermore, the touch display screen 2805 may be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The touch display screen 2805 may be made of materials such as LCD (Liquid Crystal Display) or OLED (Organic Light-Emitting Diode).

[0448] The camera assembly 2806 is used to acquire images or videos. Optionally, the camera assembly 2806 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is used for video calls or selfies, and the rear-facing camera is used for taking photos or videos. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, and a wide-angle camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, and panoramic shooting and VR shooting by fusion of the main camera and the wide-angle camera. In some embodiments, the camera assembly 2806 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash is a combination of a warm-light flash and a cool-light flash, which can be used for light compensation at different color temperatures.

[0449] Audio circuitry 2807 provides an audio interface between the user and computer device 2800. Audio circuitry 2807 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to processor 2801 for processing, or input to radio frequency circuitry 2804 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each located at a different location on the computer device 2800. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from processor 2801 or radio frequency circuitry 2804 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, audio circuitry 2807 may also include a headphone jack.

[0450] Power supply 2808 is used to supply power to the various components in computer device 2800. Power supply 2808 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 2808 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0451] In some embodiments, the computer device 2800 further includes one or more sensors 2809. The one or more sensors 2809 include, but are not limited to, an accelerometer 2810, a gyroscope 2811, a pressure sensor 2812, an optical sensor 2813, and a proximity sensor 2814.

[0452] Accelerometer 2810 can detect the magnitude of acceleration on the three coordinate axes of a coordinate system established by computer device 2800. For example, accelerometer 2810 can be used to detect the components of gravitational acceleration on the three coordinate axes. Processor 2801 can control touch screen 2805 to display the user interface in landscape or portrait view based on the gravitational acceleration signal collected by accelerometer 2810. Accelerometer 2810 can also be used for games or to collect user motion data. Gyroscope 2811 can detect the orientation and rotation angle of computer device 2800. Gyroscope 2811 can work in conjunction with accelerometer 2810 to collect 3D movements of the user on computer device 2800. Based on the data collected by gyroscope 2811, processor 2801 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

[0453] The pressure sensor 2812 can be disposed on the side bezel of the computer device 2800 and / or on the lower layer of the touch display screen 2805. When the pressure sensor 2812 is disposed on the side bezel of the computer device 2800, it can detect the user's grip signal on the computer device 2800 and perform left / right hand recognition or quick operation based on the grip signal. When the pressure sensor 2812 is disposed on the lower layer of the touch display screen 2805, it can control operable controls on the UI interface based on the user's pressure operation on the touch display screen 2805. Operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0454] Optical sensor 2813 is used to collect ambient light intensity. In one embodiment, processor 2801 can control the display brightness of touch display screen 2805 based on the ambient light intensity collected by optical sensor 2813. Specifically, when the ambient light intensity is high, the display brightness of touch display screen 2805 is increased; when the ambient light intensity is low, the display brightness of touch display screen 2805 is decreased. In another embodiment, processor 2801 can also dynamically adjust the shooting parameters of camera assembly 2806 based on the ambient light intensity collected by optical sensor 2813.

[0455] The proximity sensor 2814, also known as a distance sensor, is typically located on the front of the computer device 2800. The proximity sensor 2814 is used to detect the distance between the user and the front of the computer device 2800. In one embodiment, when the proximity sensor 2814 detects that the distance between the user and the front of the computer device 2800 is gradually decreasing, the processor 2801 controls the touch display screen 2805 to switch from a screen-on state to a screen-off state; when the proximity sensor 2814 detects that the distance between the user and the front of the computer device 2800 is gradually increasing, the processor 2801 controls the touch display screen 2805 to switch from a screen-off state to a screen-on state.

[0456] Those skilled in the art will understand that the above structure does not constitute a limitation on the computer device 2800, and may include more or fewer components than shown, or combine certain components, or employ different component arrangements.

[0457] This application also provides a computer-readable storage medium storing at least one computer program, which is loaded and executed by a processor to implement the message bubble-based interactive method provided in the above-described method embodiments.

[0458] This application also provides a computer program product, which includes at least one computer program stored in a computer-readable storage medium; the at least one computer program is read from and executed by a processor of a computer device from the computer-readable storage medium, causing the computer device to perform the message bubble-based interactive method provided in the above-described method embodiments.

[0459] It should be understood that "multiple" as used herein refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. Furthermore, the step numbers described herein are merely illustrative of one possible execution order. In some other embodiments, the steps may not be executed in numerical order, such as two steps with different numbers being executed simultaneously, or two steps with different numbers being executed in the reverse order of the illustration. This application does not limit this.

[0460] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0461] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent switching, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A message-bubble-based interaction method, characterized by, The method is executed by a first client, which is logged into a first account. The method includes: Display the chat interface of the first account; In response to a message editing operation, determine the first message to be sent by the first account; In response to a message sending operation, a first message bubble is displayed that moves from a first position in the chat interface to a second position along a movement path. The first message bubble is a message bubble used to carry the first message. Wherein, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

2. The method of claim 1, wherein, The step of responding to a message sending operation by displaying the first message bubble moving from a first position to a second position along a movement path in the chat interface includes: In response to the message sending operation, an animation effect is displayed in which the first message bubble moves from the first position in the chat interface to the second position along the movement path in accordance with the message sending method corresponding to the message sending operation; Among them, the message sending methods corresponding to different message sending operations correspond to at least one of the following: different movement methods, different movement paths, different second positions, different number of bubbles, and different interaction forms with the second message bubble. The movement methods include at least one of the following: floating method, ejection method, and scattering method. The second message bubble is an existing message bubble in the chat interface.

3. The method of claim 2, wherein, The animation effect that displays the first message bubble moving from a first position in the chat interface to a second position along the movement path in response to the message sending operation, using the message sending method corresponding to the message sending operation, includes at least one of the following: In response to the message sending operation being a first message sending operation, the first message bubble is displayed to move from the first position to the second position along the first moving path in the floating manner, and the first message bubble and the second message bubble are displayed to maintain a fixed interval as an interactive effect; In response to the message sending operation being a second message sending operation, the system displays the first message bubble moving from the first position to the second position along the second moving path in the ejection manner, and displays the interactive effect of the first message bubble and the second message bubble colliding. In response to the message sending operation being a third message sending operation, an interactive effect is displayed in which the first message bubble moves from the first position to different second positions or the same second position along multiple third moving paths according to the scattering method.

4. The method of claim 3, wherein, The chat interface includes a send control, and the first message sending operation includes a click operation on the send control; The response to the message sending operation being a first message sending operation includes displaying the first message bubble moving from the first position to the second position along a first moving path in the floating manner, and displaying an interactive effect where the first message bubble and the second message bubble maintain a fixed interval, including: In response to a click operation on the send control, the first message bubble is displayed to move at a constant speed from the first position to the second position along the first moving path in the floating manner; During the uniform movement of the first message bubble, the visual effect of displaying the shape of the first message bubble gradually becomes stronger, and the interactive effect of displaying the first message bubble and the second message bubble maintaining a fixed interval is also enhanced.

5. The method of claim 4, wherein, The visual effect of the first message bubble gradually intensifies, including at least one of the following: The display area of ​​the first message bubble gradually increases; The display position of the first message bubble gradually shifts; The display brightness of the first message bubble gradually increases; The transparency of the first message bubble gradually decreases; The animation effects of the first message bubble gradually become richer.

6. The method of claim 3, wherein, The chat interface includes a send control, and the second message sending operation includes a long press operation on the send control; The response to the message sending operation being a second message sending operation includes displaying the first message bubble moving from the first position to the second position along a second movement path in the ejection manner, and displaying an interactive effect of the first message bubble colliding with the second message bubble, including: In response to a long press operation on the send control, the first message bubble is displayed to move from the first position to the second position along the second movement path according to the duration of the long press operation; During the accelerated movement of the first message bubble, the system displays a collision between the first message bubble and the second message bubble, or displays the first message bubble and the second message bubble being in close contact; or displays the first message bubble and the second message bubble being in a fused state.

7. The method of claim 6, wherein, The number of the second message bubbles is i, where i is a positive integer greater than 1; The description of displaying a collision between the first message bubble and the second message bubble, and displaying the first message bubble and the second message bubble being in close contact during the accelerated movement of the first message bubble, includes: During the accelerated movement of the first message bubble, it is shown that the first message bubble collides with the i-th second message bubble, and that the first message bubble and the i-th second message bubble are in close contact. After the first message bubble and the i-th second message bubble are in close contact, it is shown that the i-th second message bubble collides with the (i-1)-th second message bubble, and it is also shown that the i-th second message bubble and the (i-1)-th second message bubble are in close contact. Repeat the above steps until the first message bubble and i second message bubbles are in close contact.

8. The method of claim 6, wherein, The display of the first message bubble and the second message bubble being in a merged state includes: When the first message carried by the first message bubble and the second message carried by the second message bubble are related, the first message bubble and the second message bubble are displayed as a third message bubble. The third message bubble is a message bubble composed of the first message bubble and the second message bubble. The related situations include at least one of the following: the content of the first message and the second message is the same; the semantics of the first message and the second message are related; the context of the first message and the second message are related; and the emotions of the first message and the second message are related.

9. The method according to any one of claims 6 to 8, characterized in that, The method further includes: In response to the collision operation between the first message bubble and the second message bubble, a collision atmosphere element is displayed in the chat interface. The collision atmosphere element is an atmosphere element generated after the first message bubble accelerates its collision.

10. The method of claim 3, wherein, The chat interface includes a send control, and the third message sending operation includes a combo operation on the send control; The response to the message sending operation is a third message sending operation, displaying an interactive effect where the first message bubble moves from the first position along multiple third movement paths according to the scattering method to different second positions or the same second position, including: In response to a combo operation on the sending control, j first message bubbles are displayed according to the combo frequency, moving from the first position to different or the same second position along the multiple third movement paths in the scattering manner, where j is a positive integer greater than 2.

11. The method of claim 10, wherein, The number of the first message bubbles and the frequency of the consecutive clicks are positively correlated.

12. The method according to any one of claims 1 to 11, characterized in that, The method further includes: During the movement of the first message bubble, the interaction between the first message bubble and the second message bubble is displayed, and then the second message bubble is moved out of the chat interface.

13. The method according to any one of claims 1 to 11, characterized in that, The method further includes: In response to the message sending operation being a fourth message sending operation, a third message bubble is sent, and after the third message bubble interacts with the second message bubble, the second message bubble is removed from the chat interface; The third message bubble is a message bubble used to carry a third message or an empty message.

14. The method according to claim 12 or 13, characterized in that, The method further includes: When the screen clearing conditions are met, a screen clearing prompt message is displayed in a preset area of ​​the chat interface. The screen clearing prompt message is used to indicate that the second message bubble has been moved out of the chat interface.

15. The method of claim 14, wherein, The conditions for meeting the screen clearing criteria include at least one of the following: The click force of the click operation reaches a preset force threshold; The first message bubble or the third message bubble maintains a fixed interval with the second message bubble until a first time threshold is reached; The duration of the long press operation reaches the second time threshold; The first message bubble or the third message bubble is in the close contact state or the merged state with the second message bubble, reaching a third time threshold. The frequency of the combo operation reaches a preset frequency threshold; The number of the first message bubble or the third message bubble reaches a preset number threshold; The duration of the continuous click operation reaches the click duration threshold; The duration of the stopped combo operation reaches the stop duration threshold.

16. The method according to any one of claims 1 to 11, characterized in that, The first position is the position in the message editing area of ​​the chat interface, and the second position is the position in the message display area of ​​the chat interface; or, The first position is a location in the side area of ​​the chat interface, and the second position is a location in the message display area of ​​the chat interface; or, The first position is the position in the profile picture area of ​​the first account, and the second position is the position in the message display area of ​​the chat interface; or, The first position is the position related to the virtual character corresponding to the first account, and the second position is the position in the message display area of ​​the chat interface.

17. An interactive device based on message bubbles, characterized in that, The device includes: The display module is used to display the chat interface of the first account; The determination module is used to determine the first message to be sent by the first account in response to a message editing operation; The display module is used to respond to a message sending operation by displaying a first message bubble moving from a first position in the chat interface to a second position along a movement path. The first message bubble is a message bubble used to carry the first message. Wherein, the first position is the starting point position of the first message bubble's movement, and the second position is the ending point position of the first message bubble's movement.

18. A computer device, comprising: The computer device includes a processor and a memory, the memory storing at least one computer program, the at least one computer program being loaded and executed by the processor to implement the message bubble-based interactive method as described in any one of claims 1 to 16.

19. A computer storage medium, characterized in that, The computer-readable storage medium stores at least one computer program, which is loaded and executed by a processor to implement the message bubble-based interactive method as described in any one of claims 1 to 16.

20. A computer program product, characterised in that, The computer program product includes a computer program stored in a computer-readable storage medium; the computer program is read from and executed by a processor of a computer device, causing the computer device to perform an interactive method based on message bubbles as described in any one of claims 1 to 16.

Images