跑马灯组件的控制方法、装置及存储介质与流程 专利技术说明

计算;推算;计数设备的制造及其应用技术1.本技术涉及计算机领域，尤其涉及一种跑马灯组件的控制方法、装置及存储介质。背景技术：2.现有技术中用于实现跑马灯的组件，是在组件里传入文字后，在组件内部会复制一个副本，跟正文一样的内容，放在正文的右边然后对内容进行滚动。但是现有组件只能沿一个方向进行内容的滚动，例如，手机横屏之后，从手机的一侧滚动至另一侧，其用户体验较差。技术实现要素：3.本技术提供了一种跑马灯组件的控制方法、装置及存储介质，以解决现有技术中跑马灯组件中的内容只能沿一个方向滚动的问题。4.第一方面，本技术提供了一种跑马灯组件的控制方法，包括：设置所述跑马灯组件中方向参数的值，其中，所述方向参数中不同的值用于表征所述跑马灯组件中内容的不同滚动方向；基于所述方向参数的值控制所述跑马灯组件中内容的滚动。5.第二方面，本技术提供了一种跑马灯组件的控制装置，包括：第一设置模块，用于设置所述跑马灯组件中方向参数的值，其中，所述方向参数中不同的值用于表征所述跑马灯组件中内容的不同滚动方向；第一控制模块，用于基于所述方向参数的值控制所述跑马灯组件中内容的滚动。6.第三方面，提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；7.存储器，用于存放计算机程序；8.处理器，用于执行存储器上所存放的程序时，实现第一方面任一项实施例所述的方法步骤。9.第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面任一项实施例所述的方法步骤。10.本技术实施例提供的上述技术方案与现有技术相比具有如下优点：11.本技术实施例提供的该方法，可以根据设置跑马灯组件中方向参数的值以控制滚动方向，即可以根据需要沿不同的方向进行内容滚动，而不仅仅是只能沿一个方向进行滚动，提升了跑马灯组件的显示效果，进一步提升了用户体验。附图说明12.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。13.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。14.图1为本技术实施例提供的一种跑马灯组件的控制方法的流程示意图；15.图2为本技术实施例提供的跑马灯组件中内容的滚动方向示意图之一；16.图3为本技术实施例提供的跑马灯组件中内容的滚动方向示意图之二；17.图4为本技术实施例提供的一种跑马灯组件的控制装置的结构示意图；18.图5为本技术实施例提供的一种电子设备的结构示意图。具体实施方式19.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术的一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本技术保护的范围。20.图1为本技术实施例提供的一种跑马灯组件的控制方法的流程示意图，如图1所示，该方法包括：21.步骤101，设置跑马灯组件中方向参数的值，其中，方向参数中不同的值用于表征跑马灯组件中内容的不同滚动方向；22.在本技术中滚动方向可以是多个，如果以设备的屏幕为坐标平面，该滚动方向可以沿x轴滚动，也可以是沿y轴滚动，如图2所示。在本技术中的其他示例中，该滚动方向还可以是以屏幕的对角连线所在直线上进行滚动，如图3所示。23.步骤102，基于方向参数的值控制跑马灯组件中内容的滚动。24.可见，在本技术实施例中，可以根据设置跑马灯组件中方向参数的值以控制滚动方向，即可以根据需要沿不同的方向进行内容滚动，而不仅仅是只能沿一个方向进行滚动，提升了跑马灯组件的显示效果，进一步提升了用户体验。25.在本技术实施例中，由于方向参数中不同的值用于表征跑马灯组件中内容的不同滚动方向，因此，在方向参数的值为多个的情况下，对于上述步骤102中涉及到的基于方向参数的值控制所跑马灯组件中内容的滚动的方式，进一步可以包括：26.步骤11，设置方向参数中多个值的排序；27.步骤12，循环执行以下步骤：在基于方向参数中的一个值控制跑马灯组件中的内容滚动预设时长后，按照所述排序选择方向参数中的下一个值以控制跑马灯组件中的内容滚动。28.对于上述步骤11和步骤11，在具体示例中，如果当前方向参数的值设置了三个，分别是第一方向、第二方向和第三方向，该三个方向均是不相同的方向，预设时长为10s，则对三个方向进行排序后的结果是第一方向、第三方向、第二方向，则在基于第一方向进行内容滚动10s后，则基于第三方向进行内容滚动10s，然后基于第二方向进行内容滚动10s，然后再循环执行上述过程。进一步地，该第一方向可以是沿x轴方向、第二方向可以是沿y轴方向、第三方向可以是沿设备的对角线所在直线的方向。可见，在本技术中不仅是可以控制跑马灯组件中的内容沿多个方向进行滚动，而且在一次滚动过程中可以控制跑马灯组件中的内容沿多个方向进行滚动，进一步提升了用户体验。29.在本技术实施例中，对于上述步骤102中涉及到的基于方向参数的值控制跑马灯组件中内容的滚动的方式，进一步可以包括：30.步骤21，基于跑马灯组件中内容的高度或宽度，以及在滚动过程中内容的间隔距离确定滚动距离；31.步骤22，沿方向参数的值所表征的方向控制跑马灯组件中的内容滚动滚动距离。32.可见，在本技术中是基于跑马灯组件中内容的高度或宽度，以及在滚动过程中内容的间隔距离确定滚动距离，该滚动距离是指一条内容的滚动距离。在初始情况下，如果不设置该间隔距离，则该间隔距离缺省默认的一个值，也就是说，可以根据需求对该间隔距离进行相应的设置。在具体示例中以滚动方向为x轴和y轴方向为例，则方向参数可以用direction来表示，在direction设置为x的情况下，则为x轴滚动，在direction设置为y的情况下，则为y轴滚动。进一步地，当设置为x时，通过transform:translate3d(distance，0，0)；当设置为y时，通过transform:translate3d(0，distance，0)。需要说明的是，translate3d中的三个值分别对应(x，y，z)轴；这时会触发相对于组件原位置的不同滚动行为。33.在本技术实施例的可选实施方式中，对于上述步骤22中涉及到的沿方向参数的值所表征的方向控制跑马灯组件中的内容滚动滚动距离的方式，进一步可以包括：34.步骤31，设置时间间隔，其中，时间间隔用于表征跑马灯组件中相邻内容之间的停顿时间；35.步骤32，沿方向参数的值所表征的方向，控制跑马灯组件中的相邻内容基于时间间隔滚动，并控制跑马灯组件中的内容滚动滚动距离。36.在本技术中可以通过设置相邻内容之间的时间间隔，来实现用户对跑马灯组件中内容的观看，如果内容较长可以将时间间隔设置的较长，如果内容较短则可以将时间间隔设置较短，还可以设置无缝滚动，即时间间隔为0。也就是说，在本技术中可以根据需求进行相应的设置。当然，该时间间隔有一个初始的时间，例如2s。37.此外，在本技术中不仅可以设置时间间隔，也可以设置滚动速率，即可以沿方向参数的值所表征的方向，控制跑马灯组件中的相邻内容基于时间间隔和滚动速率进行滚动，并控制跑马灯组件中的内容滚动滚动距离。该滚动速率也可以根据需求进行相应的设置，例如跑马灯组件中的内容较多，则滚动速率可以设置低一点，以方便用户观看，如果跑马灯组件中的内容不多，则滚动速率可以设置高一点，提升用户观看内容的进度。38.在本技术实施例的可选实施方式中，在基于方向参数的值控制跑马灯组件中内容的滚动之前，本技术实施例的方法还可以包括：39.步骤41，设置控制参数，其中，控制参数中不同的值用于控制滚动的开始或结束；40.步骤42，基于控制参数中的第一值，沿方向参数的值所表征的方向控制跑马灯组件中的内容滚动；或，基于控制参数中的第二值，停止当前正在滚动的跑马灯组件中的内容。41.可见，在本技术中可以通过控制参数控制滚动的开始和结束，在具体示例中，该控制参数可以是active变量，会在active变量的值发生变化时触发mutationobserver的回调函数，在回调函数中再执行对应的函数，为true时会执行初始化函数，符合滚动条件的就会执行滚动；为false时移除动画滚动的animation，停止滚动。42.在本技术实施例中，在停止当前正在滚动的跑马灯组件中的内容之后，本技术实施例的方法还可以包括：43.步骤51，基于预设的特效参数，控制当前跑马灯组件中所显示内容呈现与特效参数对应的特效。44.对此，在具体示例中该特效可以是，关键内容的字体变大或闪烁，或者是在屏幕其他区域出现其他表情或者提示等，例如，当前滚动的内容为“app包年不续费影视vip会员”中的“不续费”可以将其设置的字体大于其他内容的字体，或者将“不续费”字体放大后还可以添加闪烁的特效，这样就更加能够凸显出关键内容，以便用户观看。45.具体特效内容可以根据实际情况进行相应的设置。46.此外，需要说明的是，本技术实施例中的所述跑马灯组件中的内容的宽度超过所述跑马灯组件中用于插入内容的容器的宽度，或所述跑马灯组件中的内容的高度超过所述跑马灯组件中用于插入内容的容器的高度。47.对应于上述图1，本技术实施例还提供了一种跑马灯组件的控制装置，如图4所示，该装置包括：48.第一设置模块42，用于设置跑马灯组件中方向参数的值，其中，方向参数中不同的值用于表征跑马灯组件中内容的不同滚动方向；49.第一控制模块44，用于基于方向参数的值控制跑马灯组件中内容的滚动。50.可见，在本技术实施例中，可以根据设置跑马灯组件中方向参数的值以控制滚动方向，即可以根据需要沿不同的方向进行内容滚动，而不仅仅是只能沿一个方向进行滚动，提升了跑马灯组件的显示效果，进一步提升了用户体验。51.在本技术实施例的可选实施方式中，本技术实施例中涉及到的第一控制模块44进一步可以包括：确定单元，用于基于跑马灯组件中内容的高度或宽度，以及在滚动过程中内容的间隔距离确定滚动距离；第一控制单元，用于沿方向参数的值所表征的方向控制跑马灯组件中的内容滚动滚动距离。52.可见，在本技术中是基于跑马灯组件中内容的高度或宽度，以及在滚动过程中内容的间隔距离确定滚动距离，该滚动距离是指一条内容的滚动距离。在初始情况下，如果不设置该间隔距离，则该间隔距离缺省默认的一个值，也就是说，可以根据需求对该间隔距离进行相应的设置。在具体示例中以滚动方向为x轴和y轴方向为例，则方向参数可以用direction来表示，在direction设置为x的情况下，则为x轴滚动，在direction设置为y的情况下，则为y轴滚动。进一步地，当设置为x时，通过transform:translate3d(distance，0，0)；当设置为y时，通过transform:translate3d(0，distance，0)。需要说明的是，translate3d中的三个值分别对应(x，y，z)轴；这时会触发相对于组件原位置的不同滚动行为。53.在本技术实施例的可选实施方式中，在方向参数的值为多个的情况下，本技术实施例中涉及到的第一控制模块44进一步可以包括：设置单元，用于设置方向参数中多个值的排序；第二控制单元，用于循环执行以下步骤：在基于方向参数中的一个值控制跑马灯组件中的内容滚动预设时长后，按照排序选择方向参数中的下一个值以控制跑马灯组件中的内容滚动。54.对此，在具体示例中，如果当前方向参数的值设置了三个，分别是第一方向、第二方向和第三方向，该三个方向均是不相同的方向，预设时长为10s，则对三个方向进行排序后的结果是第一方向、第三方向、第二方向，则在基于第一方向进行内容滚动10s后，则基于第三方向进行内容滚动10s，然后基于第二方向进行内容滚动10s，然后再循环执行上述过程。进一步地，该第一方向可以是沿x轴方向、第二方向可以是沿y轴方向、第三方向可以是沿设备的对角线所在直线的方向。可见，在本技术中不仅是可以控制跑马灯组件中的内容沿多个方向进行滚动，而且在一次滚动过程中可以控制跑马灯组件中的内容沿多个方向进行滚动，进一步提升了用户体验。55.在本技术实施例的可选实施方式中，对于上述第一控制单元进一步可以包括：设置子单元，用于设置时间间隔，其中，时间间隔用于表征跑马灯组件中相邻内容之间的停顿时间；控制子单元，用于沿方向参数的值所表征的方向，控制跑马灯组件中的相邻内容基于时间间隔滚动，并控制跑马灯组件中的内容滚动滚动距离。56.可见，在本技术中可以通过设置相邻内容之间的时间间隔，来实现用户对跑马灯组件中内容的观看，如果内容较长可以将时间间隔设置的较长，如果内容较短则可以将时间间隔设置较短，还可以设置无缝滚动，即时间间隔为0。也就是说，在本技术中可以根据需求进行相应的设置。当然，该时间间隔有一个初始的时间，例如2s。57.在本技术实施例的可选实施方式中，本技术实施例的装置还可以包括：第二设置模块，用于在基于方向参数的值控制跑马灯组件中内容的滚动之前，设置控制参数，其中，控制参数中不同的值用于控制滚动的开始或结束；第二控制模块，用于基于控制参数中的第一值，沿方向参数的值所表征的方向控制跑马灯组件中的内容滚动；或，基于控制参数中的第二值，停止当前正在滚动的跑马灯组件中的内容。58.可见，在本技术中可以通过控制参数控制滚动的开始和结束，在具体示例中，该控制参数可以是active变量，会在active变量的值发生变化时触发mutationobserver的回调函数，在回调函数中再执行对应的函数，为true时会执行初始化函数，符合滚动条件的就会执行滚动；为false时移除动画滚动的animation，停止滚动。59.在本技术实施例的可选实施方式中，本技术实施例的装置还可以包括：第三控制模块，用于在停止当前正在滚动的跑马灯组件中的内容之后，基于预设的特效参数，控制当前跑马灯组件中所显示内容呈现与特效参数对应的特效。60.对此，在具体示例中该特效可以是，关键内容的字体变大或闪烁，或者是在屏幕其他区域出现其他表情或者提示等，具体特效内容可以根据实际情况进行相应的设置。61.可选地，跑马灯组件中的内容的宽度超过跑马灯组件中用于插入内容的容器的宽度，或跑马灯组件中的内容的高度超过跑马灯组件中用于插入内容的容器的高度。62.此外，需要说明的是，本技术实施例中的所述跑马灯组件中的内容的宽度超过所述跑马灯组件中用于插入内容的容器的宽度，或所述跑马灯组件中的内容的高度超过所述跑马灯组件中用于插入内容的容器的高度。63.如图5所示，本技术实施例提供了一种电子设备，包括处理器111、通信接口112、存储器113和通信总线114，其中，处理器111，通信接口112，存储器113通过通信总线114完成相互间的通信，64.存储器113，用于存放计算机程序；65.在本技术一个实施例中，处理器111，用于执行存储器113上所存放的程序时，实现前述任意一个方法实施例提供的跑马灯组件的控制方法，其所起到的作用也是一样的，在此不再赘述。66.本技术实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前述任意一个方法实施例提供的跑马灯组件的控制方法的步骤。67.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。68.以上所述仅是本发明的具体实施方式，使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!