CN109542430B - 用于实现界面交互效果的方法、装置及电子设备 - Google Patents

Abstract

本申请实施例公开了用于实现界面交互效果的方法、装置及电子设备，其中，该方法包括：接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；根据所述UI变化流提供交互结果。通过本申请实施例，可以通过低成本高效率的实现富交互效果。

Description

用于实现界面交互效果的方法、装置及电子设备

技术领域

本申请涉及界面交互技术领域，特别是涉及用于实现界面交互效果的方法、装置及电子设备。

背景技术

在一些移动版的应用程序中，经常存在一些交互效果丰富且复杂的界面，这些交互效果通常可以呈现出多个物体、多种效果的联动，同时在这些效果的基础上还会需要跳跃、运动、惯性变化等更加复杂的需求。这种复杂的交互效果通常可以称之为“富交互”。

在现有技术中，如果需要实现上述“富交互”的交互效果，则开发者通常需要处理繁琐的用户事件，基于用户事件存储多个复杂中间状态，还要基于中间状态表达用于产生效果的语义动作，实现语义动作相关的基本的效果，实现基于基本效果的上层特性例(如惯性)，等等。

但是，由于浏览器天生的事件模型的限制，开发者通常需要写出大量的回调式代码以及存储大量不必要的中间状态，因此，会影响开发效率。不仅如此，一旦到需要实现“富交互”的阶段，前面有限制的编程方式及其产生大量冗余产物就会严重阻碍开发者的更上层开发，甚至导致无法实现。另外，虽然一些开发者也会开发专用于实现交互的插件，但是，也正是由于上述限制的存在，现有技术中的插件通常只能专注于某一种特定的交互效果，例如，有的插件用于实现某种滚动效果，还有的插件用于实现视差交互效果，等等，但是，对复杂的交互场景则无能为力。虽然理论上可以通过组合多种插件等方式来实现更复杂的交互效果，但是，由于各种不同的插件通常是由不同的设计者设计的，而它们都灌注了非常多设计者自身对于各类交互问题的理解，不具备一定的抽象高度，从而带来较低的可扩展性，在进行组合使用时，可能会出现冲突，或者，对输入信息的要求不一致等问题，从而导致难以组合使用。

因此，如何更方便高效的实现“富交互”，成为需要本领域技术人员解决的技术问题。

发明内容

本申请提供了用于实现界面交互效果的方法、装置及电子设备，可以通过低成本高效率的实现富交互效果。

本申请提供了如下方案：

一种用于实现界面交互效果的方法，包括：

在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

一种用于实现界面交互效果的方法，包括：

提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

一种提供界面交互效果的方法，包括：

接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

根据所述UI变化流提供交互结果。

一种用于实现界面交互效果的装置，包括：

时间轴模块创建单元，用于在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

输出模块创建单元，用于在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

一种用于实现界面交互效果的装置，包括：

函数库提供单元，用于提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

界面提供单元，用于提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

可选输出模块提供单元，用于通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

输出模块生成单元，用于在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

一种提供界面交互效果的装置，包括：

输入信息转化单元，用于接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

至少一个输出单元，用于将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

交互结果提供单元，用于根据所述UI变化流提供交互结果。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

根据所述UI变化流提供交互结果。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，由于使用时间轴的概念将用户输入的原始信息进行转化，转化为时间进度变化信息，并将这种时间进度变化信息作为各种输出器的输入信息，并以UI变化流的方式输出，从而实现了对富交互本质的一种抽象，所以不存在只能解决特定领域交互问题的缺陷，开发者既能够通过单输入输出开发简单的效果，又能过通过组合输入输出实现复杂的交互效果，同时它的输入输出的分离特性，使得它还具备了优秀的可扩展性。另外，开发者借助本方案，可以做到将用户的输入快速转化为语义化的动作，并不产生冗余的中间状态，同时能够把富交互效果有效的拆解为多个输出器的合并，在核心的抽象时间轴的桥接作用下，做到低成本高效率的实现富交互效果。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的方案的示意图；

图2是本申请实施例提供的第一方法的流程图；

图3是本申请实施例提供的第二方法的流程图；

图4是本申请实施例提供的第三方法的流程图；

图5-1至5-4是本申请实施例提供的界面变化示意图；

图6是本申请实施例提供的第一装置的示意图；

图7是本申请实施例提供的第二装置的示意图；

图8是本申请实施例提供的第三装置的示意图；

图9是本申请实施例提供的电子设备的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，为页面开发者提供了一种新型的富交互效果实现方案在该方案中，参见图1，首先可以使用抽象时间轴的概念，将各种用户输入(在触摸屏上的触摸事件、通过转动终端设备产生的转动事件等)进行归一化表达，转换为抽象时间轴上的某个时间点，通过该抽象时间轴可以将用户输入统一反映为进度的变化。接下来，这种归一化之后的信息可以提供给一个或者多个输出器，其中，每个输出器可以用于以“流”的形式输出交互效果(反映为用户界面UI的变化)，输出器中的处理方式可以通过函数(可以用代码的方式实现数学含义上的函数)来进行表达，该函数的自变量，就是上述将用户输入进行归一化处理后得到的时间进度信息，其输出就是UI变化流。也就是说，在本申请实施例中，并不直接使用用户输入信息(包括滑动的距离、转动的角度等)进行交互效果的变化，而是将用户输入转化为抽象时间轴上用以表达进度的时间点的变化，进而通过这种归一化的输入信息，来确定输出的交互效果。这样，各个输出器之间就可以做到输入信息上的一致，并且，不需要根据用户输入动作的各种中间状态，来表达具体的输出信息，也不需要再保存各种中间状态的转化结果。因此，具有较高的可扩展性，可以通过这种方式实现多种交互效果的灵活组合。

具体在开发界面时，首先可以创建一抽象时间轴，其作用就是将用户输入转化为时间轴上的时间点信息。其中，转化过程中的灵敏度可以由开发者根据实际需要来确定。所谓的灵敏度也就是用户输入信息在转化过程中，每输入一个单位的输入量，在时间轴上所响应的时间变化程度。例如，假设时间轴上的时间变化范围为0～1，用户在执行触摸输入时的最大的滑动距离为10cm(可以根据页面长度等信息而定)，则在输入量以1mm为单位的情况下，由于最大滑动距离为100mm，因此，映射到时间轴上就可以表达为：用户每滑过1mm，在时间轴上可以引起0.01的变化。这样，假设某页面当前状态下对应的时间轴上的时间点为0.2，而用户在该状态下将页面向上滑动了10mm，在时间轴上又引起了0.1的变化，则该页面状态对应的时间轴上的时间点将会变为0.3，以此类推。而如果不需要这么高的灵敏度，则可以将输入量单位设定为更大的值，例如10mm，则由于最大滑动距离为100mm，因此，可以是没滑过10mm，在时间轴上引起0.1的变化，在滑动距离小于10mm以下时，则不作响应，因此，最终也会反映为灵敏度较低。关于转动角度等输入信息也是可以进行类似的处理，也即，可以预先对用户可转动的最大角度进行设定，然后，再根据一定的灵敏度设置，确定出转动角度与时间轴上的时间点之间的映射关系，等等。这种映射关系信息可以写入到关于抽象时间轴的定义中。

在创建了抽象时间轴的情况下，还可以创建一个或者多个输出器，其中，输出器中输出的UI流是跟随时间进度信息的变化而变化，因此，输出器中可以通过数学意义上的函数对变化关系进行定义。也即，输出器中定义的函数只要能够反映这种变化即可。一般而言，可以将该函数表达式统一表达为f(progress)→UIState，其中，progress即为归一化表达之后的时间进度信息，UIState是指UI状态。例如，某输出器需要实现背景图切换功能，也即在用户滑动屏幕或者转动终端设备的过程中，界面中的背景图可以进行切换，例如，从图片1切换到图片2，再切换到图片3，则在输出器中定义一分段函数，时间点为0～0.3时，展示图片1，0.3～0.7时，展示图片2，0.7～1时，展示图片3。又如，如果某输出器需要实现透明度的渐变效果，也即，在用户滑动屏幕或者转动终端设备的过程中，界面内容的透明度呈现出有深至浅，或者由浅至深的渐变，则可以定义渐变的最小及最大值，然后，定义一连续函数，可以是线性函数(例如，y＝kx，其中，k为常量，x为前述归一化处理后的时间点值，y为输出的透明度值)，或者，也可以是非线性函数(例如，y＝k/x，等等)，从而使得透明度呈现出匀速或者非匀速的渐变效果。

通过上述方式，可以更好的实现富交互。例如，某界面中实现上述背景图片切换以及透明度渐变的效果，则可以分别实现上述两个输出器，最终再根据两个输出器输出的UI状态组合，这种组合在实际的终端设备界面中生效时，就可以呈现出对应的富交互效果。

具体实现时，页面开发者可以通过编写代码的方式实现上述抽象时间轴、输出器等模块，或者，为了提高页面开发者的页面开发效率，减少编程工作量，本申请实施例还可以为页面开发者提供相应的库函数，也就是将输出器的函数写入到库中，供其他人使用。其中主要可以包括用于创建一些典型的输出器的库函数，等等。并且，各个输出器对应的库函数均统一以时间进度值为自变量。另外，还可以将用于创建抽象时间轴的函数也通过库函数的形式提供给页面开发者。页面开发者可以直接在其代码中引用这些库函数，并指定相应参数值等方式，来完成页面开发。也就是说，在使用库函数的情况下，相当于创建抽象时间轴、创建一些典型的输出器过程中一些必要的代码已经在库函数中实现了，页面开发者不必再通过逐行写代码，从中选择自己所需的输出器，并对其库函数进行引用即可。当然，关于抽象时间轴的灵敏度、输出器中具体的输出内容等，可以由开发者根据具体页面的需求进行开发。例如，对于背景图片切换这一输出器，关于图片切换功能实现过程中所需用到的分段函数，可以通过在其代码中引用库函数的方式来实现，但是，关于具体在哪些图片之间进行切换，以及具体分成几段，每一段的时间进度起止点，等等，则可以由开发者进行指定。当然，在实际应用中，如果库函数中不存在当前开发者所需的输出器，则开发者也可以自行编写输出器的代码。

为了更加便于页面开发者进行页面开发，进一步降低其工作量，降低页面开发者的技术门槛，本申请实施例还可以提供带有图形界面的页面开发工具。在该开发工具的用户界面中，可以提供用于对抽象时间轴的灵敏度等参数进行配置的操作选项，还可以提供用于添加输出器的操作选项，该操作选项被操作时，可以通过下拉框等方式提供多种可选的输出器，页面开发者可以从中选择出其所需的输出器，选中一个输出器后，还可以提供出用于对该输出器的参数进行配置的操作选项，例如，包括可以配置具体的图片，设定具体的透明度渐变的起止值，等等。如果还需要在其页面中提供更多的效果，则还可以添加其他的输出器。在完成输出器的添加、参数的配置等操作后，该开发工具可以将其翻译成具体的页面代码，并进行保存，进而就可以对页面进行发布，用户就可以对页面进行访问，并在与用户进行交互的过程中，提供对应的交互效果。

另外，在该工具中还可以提供用于添加自定义输出器的操作选项，页面开发者也可以根据自身的需要，自行编写输出器的函数，并添加到该工具的输出器集合中，供后续在具体开发页面时使用。再者，这种用户自定义的输出器也还可以共享给其他用户使用，例如，还可以在界面中提供用于共享自定义输出器的操作选项，从而将该输出器可以添加到这种开发工具的输出器总列表中，供所有用户来使用，这样，使得使用者也可以成为开发工具的建设者、扩展者。

总之，无论是页面开发者自行编写代码，还是使用一些库函数，还是通过上述带有用户图形界面的开发工具进行页面开发，最终都可以生成相应的页面代码，并可以对页面进行发布，之后，用户就可以对页面进行访问，并通过滑动、转动移动终端设备等方式，来查看页面的更多内容。而在页面展示过程中，在与用户进行交互时，就可以采用前述方式，首先将用户输入转化为用时间进度信息表示的归一化值，然后再提供给各个输出器，由输出器根据时间进度输出各自的UI变化流，然后，再将各个交互效果组合在一起输出到页面中，从而呈现出富交互的展示效果。也就是说，在本申请实施例中，关于各个输出器中定义的函数，由于是以时间进度信息作为自变量，输出信息是以UI变化流的形式存在，并跟随时间进度信息的变化而变化，因此，每个输出器中定义的交互效果可以看作一个视频，通过将用户输入信息转化为时间进度信息再输入到输出器中，可以看作是对视频播放进度的调节，具体的调节操作根据用户输入操作的方向(滑动方向、转动方向等)等的不同，可以包括前进、后退、跃迁(例如，从页面结尾处直接跃迁至页面开头处，等)，等等。

通过上述方案，实现了对富交互本质的一种抽象，所以不存在只能解决特定领域交互问题的缺陷，开发者既能够通过单输入输出开发简单的效果，又能过通过组合输入输出实现复杂的交互效果，同时它的输入输出的分离特性，使得它还具备了优秀的可扩展性。另外，开发者借助本方案，可以做到将用户的输入快速转化为语义化的动作，并不产生冗余的中间状态，同时能够把富交互效果有效的拆解为多个输出器的合并，在核心的抽象时间轴的桥接作用下，做到低成本高效率的实现富交互效果。

下面分别从多种不同的角度，对本申请实施例提供的方案进行详细介绍。

实施例一

该实施例一首先从页面开发过程的角度，提供了一种用于实现界面交互效果的方法，参见图2，该方法具体可以包括：

S201：在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

具体实现时，所述时间轴的属性信息可以包括起止时间点信息(例如，0～1，等等)，以及转化灵敏度信息(例如，在触摸屏上每滑过1mm，时间轴上推进0.01，或者，终端设备每转动1度，时间轴上推进0.01，等等)；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

S202：在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

其中，所述输出模块中可以包括以时间进度信息为自变量，以用户界面UI变化流为因变量的函数关系信息，以用于在与用户进行交互的过程中，将所述时间轴转化得到的时间进度变化信息代入所述函数关系中，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

具体实现时，创建上述时间轴模块、输出模块的方式可以有多种，例如，可以通过编写代码的方式实现，或者，还可以通过引用已有的库函数等方式来进行实现，其中，库函数可以是由设计者根据本申请实施例提供的原理进行设计，对于输出模块，需要设计为以时间进度信息为自变量，以用户界面UI变化流为因变量的函数关系，等等。

或者，如前文所述，还可以为界面开发者提供具有GUI的开发工具，使得界面开发者可以基于GUI界面进行界面的开发，从而进一步降低代码编辑的工作量。下面通过实施例二对该开发工具进行介绍。

实施例二

该实施例二是从具有GUI界面的开发工具的角度提供了一种用于实现界面交互效果的方法，也就是说，该方法各个步骤的执行主体可以是该开发工具，这种工具可以提供给界面开发者使用，用于为自己的界面设计富交互效果。具体的，参见图3，该方法可以包括：

S301：提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

在带有GUI界面的开发工具中，也可以是以预先建立的函数库为基础的，也就是说，可以预先编辑一些输出模块对应的函数，将必要代码保存在这种函数中，例如，用于实现页面滚动的输出模块，用于实现透明度渐变的输出模块，等等。将这些输出模块对应的函数保存在函数库中，供界面开发者进行使用。

S302：提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

在提供了函数库的基础上，还可以向界面开发者提供GUI界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项，这样，当界面开发者需要开发一目标界面时，就可以通过这种第一操作选项进行输出模块的添加操作。需要说明的是，目标界面是界面开发者根据自身的需求创建的，与该步骤中的GUI界面相区分，换言之，本申请实施例中所述的GUI界面是指开发工具的界面，其他界面的开发者可以通过该带有GUI界面的开发工具进行具体界面的开发，例如，具体的界面可以是“天猫”系统中某界面，等等。

S303：通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

S304：在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

在实际应用中，所述函数库中还可以包括用于创建时间轴模块的函数，所述图形用户界面中还包括用于对时间轴的属性信息进行配置的第三操作选项；此时，还可以通过所述第三操作选项接收对时间轴的属性信息的配置信息，并根据所述时间轴模块对应的函数以及所述配置信息生成目标界面中的时间轴模块；其中，所述时间轴模块用于在用户与目标界面进行交互的过程中，按照时间轴模块的属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息。

另外，在实际应用中，所述图形用户界面中还可以包括用于添加自定义输出模块函数的第四操作选项。这样，界面开发者在发现函数库中的函数不足以满足其需求时，可以自行编写自定义的输出模块，并可以添加到开发工具中的自定义函数库中。

再者，所述图形用户界面中还可以包括用于将自定义输出模块函数进行共享的第五操作选项；此时，还可以在通过所述第五操作选项接收到共享请求时，将指定的自定义输出模块函数添加到所述函数库中，使得用户自定义的输出模块也可以为其他界面开发者所用。

实施例三

前述实施例一以及实施例二中对界面开发过程中交互效果的实现方式进行了介绍，而本申请实施例三主要是对具体与用户进行交互过程中的处理方式进行介绍。具体的，参见图4，该实施例三提供了一种提供界面交互效果的方法，该方法具体可以包括：

S401：接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

具体实现时，所述时间轴的属性信息包括起止时间点信息，以及转化灵敏度信息；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

具体实现时，所述用户输入操作信息可以包括通过终端设备触摸屏执行的滑动操作相关信息，和/或，对终端设备执行的转动操作相关信息。

具体在将用户输入操作信息转化为时间进度变化信息时，可以将滑动操作的滑动轨迹长度以及方向，映射为时间轴上时间进度在对应方向上的变化；其中，所述时间进度的变化量根据所述滑动轨迹的长度、目标界面中定义的最大滑动长度以及时间轴的属性信息进行确定。

或者，将转动操作的转动角度以及方向，映射为时间轴上时间进度在对应方向上的变化；其中，所述时间进度的变化量根据所述转动角度、目标界面中定义的最大转动角度以及时间轴的属性信息进行确定。

其中，所述时间轴上时间进度在对应方向上的变化，包括：时间进度的前进、后退或跃迁。

S402：将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

在完成转化后，就可以将时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流。

S403：根据所述UI变化流提供交互结果。

在根据时间进度变化信息生成UI变化流后，就可以根据这种UI变化流提供具体的交互结果。其中，在所述函数关系信息为多个时，可以将各UI变化流进行组合，生成交互结果。例如，某界面中的函数关系信息包括用于切换背景图片的函数关系，用于实现透明度渐变的函数关系，等等。则假设用户在触摸屏上执行了滑动操作，并且滑动的距离转化到时间轴上的时间进度变化信息是，前进0.1，则就可以根据函数关系，输出在当前UI状态下前进0.1的过程中，对应的UI状态变化流。在将UI变化流看作一个“视频”的情况下，相当于是在“视频”播放到某时刻时，接收到用户输入操作，然后并不是直接使用该用户输入操作信息来确定具体的输出信息，而是首先转化成时间进度变化信息，从而使得输出器可以确定出将“视频”在当前播放时刻向前或者向后播放对应时间进度变化的长度。其中，在存在多个函数关系的情况下，各个函数关系收到的时间进度变化信息是相同的，因此，可以实现多种不同交互效果的同步变化，并通过组合多种交互效果，即可实现富交互的交互结果。

例如，假设某界面中包括背景图片切换、透明度渐变等多个交互效果，则在初始状态下，界面展示效果可以如图5-1所示，其中展示出第一张背景图片，透明度比较高，相应的，在时间轴上的时间进度滑块位于501中所示的起点位置。需要说明的是，在具体进行界面展示时，关于501所示的时间轴以及滑块、快进、快退、随机跃迁按钮等，并不会展示给界面访问者，这里只是为了便于描述和理解，将上述时间轴相关的内容进行了展示。在图5-1所示的状态下，如果访问者用户在触摸屏上执行了向上滑动操作，则本申请实施例中，会将该向上滑动操作的相关信息，转化为时间轴上时间进度的变化，并进而出发交互效果的变化。例如，当滑动一段距离后，时间轴上的时间进度变化为图5-2中的502所示的位置，则界面交互效果也随之发生了变化。从图5-2中可以看出，界面背景的透明度降低，界面前景内容也发生了向上移动。当用户继续向上滑动，以至于时间轴上的时间进度变化为图5-3中503所示的位置时，界面效果变化为：界面背景变化为另一张图片，界面前景中的内容继续向上移动。进而，再进行向上滑动，使得时间轴上的时间进度变化为图5-4中504所示的位置时，界面效果变化为：界面背景又变化为第三张图片，界面前景中的内容继续向上移动。在此过程中，界面背景的透明度也在不断发生变化，图中未示出。当然，用户还可以在触摸屏上执行向下滑动的操作，此时，时间轴上的时间进度变化会呈现出后退的状态，例如，从图5-4中的状态退回到图5-3中的状态，等等。

关于上述各个实施例中各步骤的具体实现，还可以参见本申请说明书中其他部分内容的记载，这里不再赘述。

与实施例一相对应，本申请实施例还提供了一种用于实现界面交互效果的装置，参见图6，该装置可以包括：

时间轴模块创建单元601，用于在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

输出模块创建单元602，用于在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

具体实现时，所述输出模块中可以包括以时间进度信息为自变量，以用户界面UI变化流为因变量的函数关系信息，以用于在与用户进行交互的过程中，将所述时间轴转化得到的时间进度变化信息代入所述函数关系中，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

所述时间轴的属性信息可以包括起止时间点信息，以及转化灵敏度信息；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

与实施例二相对应，本申请实施例还提供了一种用于实现界面交互效果的装置，参见图7，该装置包括：

函数库提供单元701，用于提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

界面提供单元702，用于提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

可选输出模块提供单元703，用于通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

输出模块生成单元704，用于在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

具体实现时，所述函数库中还包括用于创建时间轴模块的函数，所述图形用户界面中还包括用于对时间轴的属性信息进行配置的第三操作选项；

此时，所述装置还可以包括：

时间轴模块生成单元，用于通过所述第三操作选项接收对时间轴的属性信息的配置信息，并根据所述时间轴模块对应的函数以及所述配置信息生成目标界面中的时间轴模块；

其中，所述时间轴模块用于在用户与目标界面进行交互的过程中，按照时间轴模块的属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息。

另外，所述图形用户界面中还可以包括用于添加自定义输出模块函数的第四操作选项。

再者，所述图形用户界面中还可以包括用于将自定义输出模块函数进行共享的第五操作选项；

所述装置还可以包括：

自定义函数添加单元，用于通过所述第五操作选项接收到共享请求时，将指定的自定义输出模块函数添加到所述函数库中。

与实施例三相对应，本申请实施例还提供了一种提供界面交互效果的装置，参见图8，该装置可以包括：

输入信息转化单元801，用于接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

至少一个输出单元802，用于将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

交互结果提供单元803，用于根据所述UI变化流提供交互结果。

其中，所述用户输入操作信息包括通过终端设备触摸屏执行的滑动操作相关信息，和/或，对终端设备执行的转动操作相关信息。

具体的，所述输入信息转化单元具体可以用于：

将滑动操作的滑动轨迹长度以及方向，映射为时间轴上时间进度在对应方向上的变化；其中，所述时间进度的变化量根据所述滑动轨迹的长度、目标界面中定义的最大滑动长度以及时间轴的属性信息进行确定。

另一种方式下，输入信息转化单元具体可以用于

将转动操作的转动角度以及方向，映射为时间轴上时间进度在对应方向上的变化；其中，所述时间进度的变化量根据所述转动角度、目标界面中定义的最大转动角度以及时间轴的属性信息进行确定。

具体的，所述时间轴上时间进度在对应方向上的变化，包括：时间进度的前进、后退或跃迁。

其中，所述时间轴的属性信息包括起止时间点信息，以及转化灵敏度信息；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

所述函数关系信息为多个时，所述交互结果提供单元具体可以用于：将各UI变化流进行组合，生成交互结果。

另外，本申请实施例还提供了一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

根据所述UI变化流提供交互结果。

其中，图9示例性的展示出了电子设备的架构，例如，设备900可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理，飞行器等。

参照图9，设备900可以包括以下一个或多个组件：处理组件902，存储器904，电源组件906，多媒体组件908，音频组件910，输入/输出(I/O)的接口912，传感器组件914，以及通信组件916。

处理组件902通常控制设备900的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件902可以包括一个或多个处理器920来执行指令，以完成本公开技术方案提供的视频播放方法中的当满足预设条件时，生成流量压缩请求，并发送给服务器，其中所述流量压缩请求中记录有用于触发服务器获取目标关注区域的信息，所述流量压缩请求用于请求服务器优先保证目标关注区域内视频内容的码率；根据服务器返回的码流文件播放所述码流文件对应的视频内容，其中所述码流文件为服务器根据所述流量压缩请求对所述目标关注区域之外的视频内容进行码率压缩处理得到的视频文件的全部或部分步骤。此外，处理组件902可以包括一个或多个模块，便于处理组件902和其他组件之间的交互。例如，处理部件902可以包括多媒体模块，以方便多媒体组件908和处理组件902之间的交互。

存储器904被配置为存储各种类型的数据以支持在设备900的操作。这些数据的示例包括用于在设备900上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器904可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件906为设备900的各种组件提供电力。电源组件906可以包括电源管理系统，一个或多个电源，及其他与为设备900生成、管理和分配电力相关联的组件。

多媒体组件908包括在设备900和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件908包括一个前置摄像头和/或后置摄像头。当设备900处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件910被配置为输出和/或输入音频信号。例如，音频组件910包括一个麦克风(MIC)，当设备900处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器904或经由通信组件916发送。在一些实施例中，音频组件910还包括一个扬声器，用于输出音频信号。

I/O接口912为处理组件902和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件914包括一个或多个传感器，用于为设备900提供各个方面的状态评估。例如，传感器组件914可以检测到设备900的打开/关闭状态，组件的相对定位，例如所述组件为设备900的显示器和小键盘，传感器组件914还可以检测设备900或设备900一个组件的位置改变，用户与设备900接触的存在或不存在，设备900方位或加速/减速和设备900的温度变化。传感器组件914可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件914还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件914还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件916被配置为便于设备900和其他设备之间有线或无线方式的通信。设备900可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件916经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件916还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备900可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器904，上述指令可由设备900的处理器920执行以完成本公开技术方案提供的视频播放方法中的当满足预设条件时，生成流量压缩请求，并发送给服务器，其中所述流量压缩请求中记录有用于触发服务器获取目标关注区域的信息，所述流量压缩请求用于请求服务器优先保证目标关注区域内视频内容的码率；根据服务器返回的码流文件播放所述码流文件对应的视频内容，其中所述码流文件为服务器根据所述流量压缩请求对所述目标关注区域之外的视频内容进行码率压缩处理得到的视频文件。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的用于实现界面交互效果的方法、装置及电子设备，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (18)

1.一种用于实现界面交互效果的方法，其特征在于，包括：

在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

2.根据权利要求1所述的方法，其特征在于，所述输出模块中包括以时间进度信息为自变量，以用户界面UI变化流为因变量的函数关系信息，以用于在与用户进行交互的过程中，将所述时间轴转化得到的时间进度变化信息代入所述函数关系中，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

3.根据权利要求1所述的方法，其特征在于，所述时间轴的属性信息包括起止时间点信息，以及转化灵敏度信息；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

4.一种用于实现界面交互效果的方法，其特征在于，包括：

提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

5.根据权利要求4所述的方法，其特征在于，所述函数库中还包括用于创建时间轴模块的函数，所述图形用户界面中还包括用于对时间轴的属性信息进行配置的第三操作选项；

所述方法还包括：

通过所述第三操作选项接收对时间轴的属性信息的配置信息，并根据所述时间轴模块对应的函数以及所述配置信息生成目标界面中的时间轴模块；

其中，所述时间轴模块用于在用户与目标界面进行交互的过程中，按照时间轴模块的属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息。

6.根据权利要求4所述的方法，其特征在于，所述图形用户界面中还包括用于添加自定义输出模块函数的第四操作选项。

7.根据权利要求6所述的方法，其特征在于，所述图形用户界面中还包括用于将自定义输出模块函数进行共享的第五操作选项；

所述方法还包括：

通过所述第五操作选项接收到共享请求时，将指定的自定义输出模块函数添加到所述函数库中。

8.一种提供界面交互效果的方法，其特征在于，包括：

接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

根据所述UI变化流提供交互结果。

9.根据权利要求8所述的方法，其特征在于，所述用户输入操作信息包括通过终端设备触摸屏执行的滑动操作相关信息，和/或，对终端设备执行的转动操作相关信息。

10.根据权利要求9所述的方法，其特征在于，所述将用户输入操作信息转化为时间进度变化信息，包括：

将滑动操作的滑动轨迹长度以及方向，映射为时间轴上时间进度在对应方向上的变化；

其中，所述时间进度的变化量根据所述滑动轨迹的长度、目标界面中定义的最大滑动长度以及时间轴的属性信息进行确定。

11.根据权利要求9所述的方法，其特征在于，所述将用户输入操作信息转化为时间进度变化信息，包括：

将转动操作的转动角度以及方向，映射为时间轴上时间进度在对应方向上的变化；

其中，所述时间进度的变化量根据所述转动角度、目标界面中定义的最大转动角度以及时间轴的属性信息进行确定。

12.根据权利要求10或11所述的方法，其特征在于，所述时间轴上时间进度在对应方向上的变化，包括：时间进度的前进、后退或跃迁。

13.根据权利要求8至11任一项所述的方法，其特征在于，所述时间轴的属性信息包括起止时间点信息，以及转化灵敏度信息；其中，所述转化灵敏度用于表达一个单位数量的用户输入操作信息引起的时间进度的变化程度。

14.根据权利要求8至11任一项所述的方法，其特征在于，所述函数关系信息为多个时，所述根据所述UI变化流提供交互结果，包括：

将各UI变化流进行组合，生成交互结果。

15.一种用于实现界面交互效果的装置，其特征在于，包括：

时间轴模块创建单元，用于在界面代码中创建时间轴模块，并设定时间轴的属性信息，以用于在与用户进行交互的过程中，按照所述属性信息，将用户输入操作信息转化为所述时间轴上的时间进度变化信息；

输出模块创建单元，用于在界面代码中创建至少一个输出模块，所述输出模块用于在与用户进行交互的过程中，根据时间进度信息，输出UI变化流，通过组合所述输出模块输出的UI变化流提供界面交互结果。

16.一种用于实现界面交互效果的装置，其特征在于，包括：

函数库提供单元，用于提供函数库，所述函数库中包括用于至少一个用于创建输出模块的函数，其中，所述函数以时间进度信息为自变量，以用户界面UI变化流为因变量；

界面提供单元，用于提供图形用户界面，并在所述图形用户界面中提供用于添加输出模块第一操作选项；

可选输出模块提供单元，用于通过所述第一操作选项接收到添加请求时，提供可选的输出模块信息，并在其中一输出模块被选中后，提供用于对该输出模块的相关参数进行配置的第二操作选项，并通过所述第二操作选项接收参数配置结果；

输出模块生成单元，用于在完成对至少一个输出模块的添加操作以及参数配置操作后，根据选择的输出模块对应的函数以及所述参数配置结果，生成目标界面中的至少一个输出模块。

17.一种提供界面交互效果的装置，其特征在于，包括：

输入信息转化单元，用于接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

至少一个输出单元，用于将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

交互结果提供单元，用于根据所述UI变化流提供交互结果。

18.一种电子设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收针对目标界面的用户输入操作信息，并根据预置的时间轴的属性信息，将用户输入操作信息转化为时间进度变化信息；

将所述时间进度变化信息代入到至少一个预置的函数关系中，输出至少一种用户界面UI变化流；

根据所述UI变化流提供交互结果。

Images