CN107943805A - 一种动画渲染及发布方法、装置 - Google Patents

一种动画渲染及发布方法、装置 Download PDF

Info

Publication number
CN107943805A
CN107943805A CN201610890836.2A CN201610890836A CN107943805A CN 107943805 A CN107943805 A CN 107943805A CN 201610890836 A CN201610890836 A CN 201610890836A CN 107943805 A CN107943805 A CN 107943805A
Authority
CN
China
Prior art keywords
animation
configuration file
background
attribute information
dynamic graph
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201610890836.2A
Other languages
English (en)
Other versions
CN107943805B (zh
Inventor
刘力
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201610890836.2A priority Critical patent/CN107943805B/zh
Publication of CN107943805A publication Critical patent/CN107943805A/zh
Application granted granted Critical
Publication of CN107943805B publication Critical patent/CN107943805B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44505Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451User profiles; Roaming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00Animation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请涉及互联网技术领域,尤其涉及一种动画渲染及发布方法、装置,用以解决现有的动态发布动画的方案无法支持复杂的逻辑场景需求或消耗系统资源较多,容易导致页面卡顿的问题。本申请实施例提供的一种动画渲染方法包括:获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。

Description

一种动画渲染及发布方法、装置
技术领域
本申请涉及互联网技术领域,尤其涉及一种动画渲染及发布方法、装置。
背景技术
移动设备应用往往要求页面有丰富的展示效果,动画就是其中常用的一种方式。各种业务的快速发展对动画的实现提出了两道难题:一是要求动画能够无需发版立即上线,也就是能够通过服务器动态下发到客户端;二是要求动画能够具有复杂逻辑,例如,在一个动画中出现多个不同的操作区域,不同的操作区域能够具有不同的逻辑操作配置,比如点击区域A播放音乐,点击区域B出现动画1,点击区域C出现动画2等。
目前动态发布动画的两种实现方案中,一种方式是动态下发一张图像互换格式(Graphics Interchange Format,GIF)图片,通过该GIF图片实现动态动画效果。另一种方式是基于H5页面实现:在移动设备原生页面的动画所在视图(View)中内置一个浏览器内核(WebView),在该WebView中展示H5页面,通过H5页面实现动态动画效果。
在上述动态下发一张GIF图片的动画实现方案中,整个动画由一张GIF图片实现,效果单一,无法支持复杂的逻辑场景需求;另外,当动画区域较大时,GIF图片的下载数据量也会很大,动画通常需要很久才下载成功,导致动画渲染缓慢。在上述基于H5页面的动画渲染方式中,WebView会消耗较多的系统资源,容易导致移动设备当前页面出现卡顿。
发明内容
本申请实施例提供一种动画渲染及发布方法、装置,用以解决现有的动态发布动画的方案无法支持复杂的逻辑场景需求或消耗系统资源较多,容易导致页面卡顿的问题。
本申请实施例提供一种动画渲染方法,包括:
获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;
根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;
根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。
可选地,所述多个组成部分中还包含至少一个静态图;在所述应用页面中渲染所述背景图之后,还包括:
根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
可选地,所述配置文件中还包含用于合成所述动画的至少一个组成部分分别对应的逻辑操作配置信息;其中,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息。
可选地,所述获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分,包括:
从服务器下载动画的配置文件和用于合成所述动画的多个组成部分。
可选地,所述从服务器下载动画的配置文件和用于合成动画的多个组成部分,包括:
按照预设的下载顺序,分别从服务器下载所述动画的配置文件和用于合成所述动画的多个组成部分;
其中,在所述下载顺序中,所述配置文件和背景图位于其它组成部分的前面。
可选地,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分,包括:
在检测到服务器发布了所述应用页面中更新后的动画后,从服务器下载该更新后的动画的配置文件;
在用于合成该动画的多个组成部分中,下载发生更新的组成部分;并
获取本地存储的所述动画中未发生更新的组成部分。
本申请实施例提供一种动画发布方法,包括:
接收动画发布指令;
根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息;
发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
可选地,所述多个组成部分中还包含至少一个静态图;所述配置文件中包含所述背景图的属性信息、所述至少一个动态图中每个动态图的属性信息,以及所述至少一个静态图中每个静态图的属性信息。
本申请实施例提供一种进行动画渲染的客户端,包括:
获取模块,用于获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;
背景图渲染模块,用于根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;
动画渲染模块,用于根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。
可选地,所述多个组成部分中还包含至少一个静态图;所述装置还包括:
静态图渲染模块,用于根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
可选地,所述配置文件中还包含用于合成所述动画的至少一个组成部分分别对应的逻辑操作配置信息;其中,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息。可选地,所述获取模块具体用于:
从服务器下载动画的配置文件和用于合成所述动画的多个组成部分。
可选地,所述获取模块具体用于:
按照预设的下载顺序,分别从服务器下载所述动画的配置文件和用于合成所述动画的多个组成部分;其中,在所述下载顺序中,所述配置文件和背景图位于其它组成部分的前面。
本申请实施例提供一种进行动画发布的服务器,包括:
接收模块,用于接收动画发布指令;
处理模块,用于根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息;
发布模块,用于发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
本申请实施例中服务端分别发布动画的多个组成部分,及用于将这多个组成部分合成为一个整体动画的配置文件,客户端获取动画的多个组成部分及配置文件后,基于配置文件分别在屏幕上渲染这多个组成部分。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张GIF图片来实现整个动画的下载数据量,从而提高了下载速度,能够快速呈现出当前页面的动画效果。而且,这种方式无需内置WebView,可以节省系统资源,避免因WebView消耗系统资源过多而出现的页面卡顿现象。
附图说明
图1为本申请实施例一提供的动画渲染方法流程图;
图2为本申请实施例二提供的动画渲染方法流程图;
图3为本申请实施例三提供的动画渲染方法流程图;
图4(a)~图4(f)为动画示意图;
图5为本申请实施例四提供的客户端结构示意图;
图6为本申请实施例五提供的服务器结构示意图。
具体实施方式
本申请实施例用于实现应用中动画资源的动态发布及渲染。这里的动态发布即为客户端不需要通过对应用版本进行更新来实现动画的更新,只需要在打开当前应用页面后,从服务端下载更新后的动画,使用原来应用版本显示更新后的动画。本申请在服务端分别发布整个动画的多个组成部分及配置文件,客户端基于该配置文件,分别在屏幕上渲染动画的多个组成部分。
下面结合说明书附图对本申请实施例作进一步详细描述。
实施例一
如图1所示,为本申请实施例一提供的动画渲染方法流程图,包括以下步骤:
S101:客户端获取应用页面中动画的配置文件和用于合成动画的多个组成部分。
这里,客户端可以是从本地提取出之前存储的动画的配置文件和用于合成动画的多个组成部分,也可以从外置数据库中提取之前客户端存储的该应用页面中动画的配置文件和动画的多个组成部分;还可以从服务端或服务端指示的数据库中下载动画的配置文件和用于合成动画的多个组成部分。
作为一种实施方式,若客户端并不是第一次打开应用页面,则客户端本地可能存储了应用页面中的动画资源,则客户端可以先检测服务端的动画资源是否发生了更新,若没有更新,则可以直接获取本地存储的动画资源进行动画渲染,若发生了更新(可能只有部分组成部分发生了更新),则可以从服务端下载更新后的动画的配置文件以及发生更新的组成部分,并获取本地存储的动画中未发生更新的组成部分,结合本地存储的未发生更新的组成部分以及从服务端获取的发生更新的组成部分,在当前应用页面进行动画渲染。
在具体实施中,客户端从服务端下载动画后,可以将其保存在本地,即使在关闭当前应用页面后,也不删除该动画。当客户端再次打开当前应用页面,并且从服务端处检测到在当前应用页面的动画发生更新后,会进一步检测该动画中具体发生更新的组成部分,然后只将发生更新的组成部分下载下来,基于下载的更新后的组成部分及本地存储的其它未更新的组成部分,对当前应用页面进行动画渲染。
上述多个组成部分中包含位于动画底层的背景图、需要展示在背景图上的至少一个动态图(一个动态图为一个组成部分,每个动态图对应一个动画区域,每个动态图可以为一张GIF图片)和至少一个静态图(一个静态图为一个组成部分,实际实现时也可以没有静态图),其中每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息。
这里的背景图是指动画的底层图片,动态图是实现动画效果的图片,静态图是静态呈现的图片。背景图的属性信息可以包括大小调整方式(也即在下载的背景图与展示区域大小不一致时,如何对图片大小进行调整,可以进行等比例缩放或将图片调整至展示区域大小等)、透明度(即alpha值)等。每个动态图的属性信息可以包括对应的GIF图片的位置信息(包括GIF图片原点的横坐标X值、纵坐标Y值,图片宽度Width、图片高度Height)、何时播放、动画播放速度、动画播放次数、是否循环播放等属性。每个静态图的属性信息可以包括静态图的位置、拉伸方式、alpha值等。
除此各个组成部分的属性信息外,配置文件中还可以包含一个或多个组成部分分别对应的逻辑操作配置信息。这里,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息,比如用户点击每个GIF图片时触发何种操作,用户点击每个静态小图时触发何种操作,用户点击背景图时触发何种操作等。
这里,若发生更新的组成部分为背景图和/或配置文件,则需要等到更新的背景图和/或配置文件下载成功后,才能开始整个动画的渲染,因为背景图是需要首先渲染的,而更新的配置文件中有可能会涉及到背景图的属性信息的更新。若发生更新的组成部分为除背景图和配置文件之外的组成部分,则可以首先在当前应用页面渲染本地存储的未更新的背景图。
S102:客户端根据配置文件中背景图的属性信息,在应用页面中渲染所述背景图。
S103:客户端根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上,以及根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
在具体实施中,客户端可以从服务端同步下载动画的多个组成部分。为了提高下载速度,可以按照预设的下载顺序,分别从服务器下载动画的配置文件和用于合成所述动画的多个组成部分;在该下载顺序中,配置文件和背景图位于其它组成部分的前面。
在具体实施中,可以在配置文件和背景图下载成功时立即在屏幕上渲染背景图,然后将已经下载成功的GIF图片和静态图在背景图上渲染出来。在GIF图片下载成功后,首先检查背景图是否已经下载成功(这里如果检查背景图已经下载成功,则可以认为背景图已经成功渲染,因为渲染速度相比下载速度基本可以忽略不计),如果背景图已经下载成功,则立即渲染此GIF图片,无需等到所有GIF图片都下载成功;如果背景图尚未下载成功,则暂不渲染该GIF图片,在背景图下载成功后,再对该GIF图片进行渲染。同样,在静态图下载成功后,首先检查是否背景图是否已经下载成功,如果背景图已经下载成功,则立即渲染该静态图,如果背景图尚未下载成功,则暂不渲染该静态图。
本申请实施例中,客户端可以获取动画的多个组成部分及配置文件,然后针对每个组成部分分别在屏幕上进行渲染。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张GIF图片来实现整个动画的下载数据量,从而提高了下载速度,能够快速呈现出当前页面的动画效果。
实施例二
如图2所示,为本申请实施例二提供的动画渲染方法流程图,包括以下步骤:
S201:服务端接收动画发布指令。
S202:服务端根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成动画的多个组成部分;所述多个组成部分中包含位于动画底层的背景图、需要展示在背景图上的至少一个动态图(一个动态图为一个组成部分,每个动态图对应一个动画区域,每个动态图可以为一张GIF图片)和至少一个静态图(一个静态图为一个组成部分,实际实现时也可以没有静态图),其中每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息。
S203:服务端发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
在具体实施中,开发人员可以分别编写动画的每个组成部分的代码,并确定每个组成部分的属性信息,将各个组成部分的属性信息(包含背景图的属性信息、动画中每个动态图的属性信息、以及动画中每个静态图的属性信息)组织到一个配置文件中,然后将配置文件和动画的各个组成部分代码上传至服务端,服务端缓存该配置文件和动画的各个组成部分代码,在接收到动画发布指令后,提取出存储的配置文件和动画的各个组成部分代码,进行发布。
具体实现时,在服务端接收开发人员上传的1个配置文件+1个静态背景图+n个GIF图片(n为正整数)+m个静态图(m为大于或等于0的整数),所有GIF图片和静态图均需要渲染在背景图之上。
这里的背景图是指动画的底层图片,动态图是实现动画效果的图片,静态图是静态呈现的图片。背景图的属性信息可以包括大小调整方式(也即在下载的背景图与展示区域大小不一致时,如何对图片大小进行调整,可以进行等比例缩放或将图片调整至展示区域大小等)、透明度(即alpha值)等。每个动态图的属性信息可以包括对应的GIF图片的位置信息(包括GIF图片原点的横坐标X值、纵坐标Y值,图片宽度Width、图片高度Height)、何时播放、动画播放速度、动画播放次数、是否循环播放等属性。每个静态图的属性信息可以包括静态图的位置、拉伸方式、alpha值等。
除此各个组成部分的属性信息外,配置文件中还可以包含一个或多个组成部分分别对应的逻辑操作配置信息。这里,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息,比如用户点击每个GIF图片时触发何种操作,用户点击每个静态小图时触发何种操作,用户点击背景图时触发何种操作等。
最后,服务端通过发布配置文件、整个动画的背景图、至少一个动态图和至少一个静态图来实现动画的动态发布。
本申请实施例中,服务端采用新的方式进行动画的动态发布,发布的是动画的多个组成部分及配置文件,客户端可以基于配置文件针对每个组成部分分别在屏幕上进行渲染。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张GIF图片来实现整个动画的下载数据量,从而提高了客户端的下载速度,能够快速呈现出当前页面的动画效果。而且,这种方式无需客户端内置WebView,可以节省系统资源,避免因WebView消耗系统资源过多而出现的页面卡顿现象。
实施例三
如图3所示,为本申请实施例三提供的动画渲染方法流程图,包括以下步骤:
S301:服务端接收动画发布指令。
S302:服务端根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成动画的多个组成部分;所述多个组成部分中包含位于动画底层的背景图、需要展示在背景图上的至少一个动态图(一个动态图为一个组成部分,每个动态图对应一个动画区域,每个动态图可以为一张GIF图片)和至少一个静态图(一个静态图为一个组成部分,实际实现时也可以没有静态图),其中每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息。
在具体实施中,在服务端接收开发人员上传的1个配置文件+1个静态背景图+n个GIF图片(n为正整数)+m个静态图(m为大于或等于0的整数),所有GIF图片和静态图均需要渲染在背景图之上。背景图是指动画的底层图片,动态图是实现动画效果的图片,静态图是静态呈现的图片。背景图的属性信息可以包括大小调整方式(也即在下载的背景图与展示区域大小不一致时,如何对图片大小进行调整,可以进行等比例缩放或将图片调整至展示区域大小等)、透明度(即alpha值)等。每个动态图的属性信息可以包括对应的GIF图片的位置信息(包括GIF图片原点的横坐标X值、纵坐标Y值,图片宽度Width、图片高度Height)、何时播放、动画播放速度、动画播放次数、是否循环播放等属性。每个静态图的属性信息可以包括静态图的位置、拉伸方式、alpha值等。除此各个组成部分的属性信息外,配置文件中还可以包含一个或多个组成部分分别对应的逻辑操作配置信息。这里,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息,比如用户点击每个GIF图片时触发何种操作,用户点击每个静态小图时触发何种操作,用户点击背景图时触发何种操作等。
S303:服务端发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
这里,服务端通过发布配置文件、整个动画的背景图、至少一个动态图和至少一个静态图来实现动画的动态发布。
S304:客户端获取应用页面中动画的配置文件和用于合成动画的多个组成部分。
在具体实施中,客户端可以是从服务端直接下载动画的配置文件和用于合成动画的多个组成部分。若客户端并不是第一次打开应用页面,则客户端本地可能存储了应用页面中的动画资源,则客户端可以先检测服务端的动画资源是否发生了更新,若没有更新,则可以直接获取本地存储的动画资源进行动画渲染,若发生了更新(可能只有部分组成部分发生了更新),则可以从服务端下载更新后的动画的配置文件以及发生更新的组成部分,并获取本地存储的动画中未发生更新的组成部分,结合本地存储的未发生更新的组成部分以及从服务端获取的发生更新的组成部分,在当前应用页面进行动画渲染。
在具体实施中,客户端从服务端下载动画后,可以将其保存在本地,即使在关闭当前应用页面后,也不删除该动画。当客户端再次打开当前应用页面,并且从服务端处检测到在当前应用页面的动画发生更新后,会进一步检测该动画中具体发生更新的组成部分,然后只将发生更新的组成部分下载下来,基于下载的更新后的组成部分及本地存储的其它未更新的组成部分,对当前应用页面进行动画渲染。
这里,若发生更新的组成部分为背景图和/或配置文件,则需要等到更新的背景图和/或配置文件下载成功后,才能开始整个动画的渲染,因为背景图是需要首先渲染的,而更新的配置文件中有可能会涉及到背景图的属性信息的更新。若发生更新的组成部分为除背景图和配置文件之外的组成部分,则可以首先在当前应用页面渲染本地存储的未更新的背景图。
S305:客户端根据配置文件中背景图的属性信息,在应用页面中渲染所述背景图。
S306:客户端根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上,以及根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
在具体实施中,客户端可以从服务端同步下载动画的多个组成部分。为了提高下载速度,可以按照预设的下载顺序,分别从服务器下载动画的配置文件和用于合成所述动画的多个组成部分;在该下载顺序中,配置文件和背景图位于其它组成部分的前面。
在具体实施中,可以在配置文件和背景图下载成功时立即在屏幕上渲染背景图,然后将已经下载成功的GIF图片和静态图在背景图上渲染出来。在GIF图片下载成功后,首先检查背景图是否已经下载成功(这里如果检查背景图已经下载成功,则可以认为背景图已经成功渲染,因为渲染速度相比下载速度基本可以忽略不计),如果背景图已经下载成功,则立即渲染此GIF图片,无需等到所有GIF图片都下载成功;如果背景图尚未下载成功,则暂不渲染该GIF图片,在背景图下载成功后,再对该GIF图片进行渲染。同样,在静态图下载成功后,首先检查是否背景图是否已经下载成功,如果背景图已经下载成功,则立即渲染该静态图,如果背景图尚未下载成功,则暂不渲染该静态图。
如图4(a)所示,M所标识的区域中需要呈现一个比较复杂的动画,其中1、2、3三个区域需要呈现动画效果,为动画区域(如图4(b)~图4(d)所示),区域A呈现静态图(如图4(e)所示),M区域的底层为背景图(如图4(f)所示)。点击区域A、点击1、2、3三个动画区域和点击M区域中除A之外的区域,分别执行不同的逻辑。按照本申请方案,动画M被分解为如下几个组成部分:
背景图+3个GIF图片(1、2、3)+1个静态图(A)+配置文件,服务端将这些组成部分动态下发至客户端。客户端异步下载各个组成部分,完成整个M区域的渲染。
本申请实施例中,客户端可以分别下载动画的多个组成部分及配置文件,然后针对每个组成部分分别在屏幕上进行渲染。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张GIF图片来实现整个动画的下载数据量,从而提高了下载速度,能够快速呈现出当前页面的动画效果。而且,这种方式无需内置WebView,可以节省系统资源,避免因WebView消耗系统资源过多而出现的页面卡顿现象。
基于同一发明构思,本申请实施例中还提供了一种与动画渲染方法对应的服务器及客户端,由于该装置解决问题的原理与本申请实施例的动画渲染方法相似,因此该装置的实施可以参见方法的实施,重复之处不再赘述。
实施例四
如图5所示,为本申请实施例四提供的客户端结构示意图,包括:
获取模块51,用于获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;
背景图渲染模块52,用于根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;
动画渲染模块53,用于根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。
可选地,所述多个组成部分中还包含至少一个静态图;所述装置还包括:
静态图渲染模块54,用于根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
可选地,所述配置文件中还包含用于合成所述动画的至少一个组成部分分别对应的逻辑操作配置信息;其中,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息。
可选地,获取模块51具体用于:
从服务器下载动画的配置文件和用于合成所述动画的多个组成部分。
进一步地,获取模块51具体用于:
按照预设的下载顺序,分别从服务器下载所述动画的配置文件和用于合成所述动画的多个组成部分;
其中,在所述下载顺序中,所述配置文件和背景图位于其它组成部分的前面。
本申请实施例中,客户端可以分别下载动画的多个组成部分及配置文件,然后针对每个组成部分分别在屏幕上进行渲染。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张动态图片来实现整个动画的下载数据量,从而提高了下载速度,能够快速呈现出当前页面的动画效果。
实施例五
如图6所示,为本申请实施例五提供的服务器结构示意图,包括:
接收模块61,用于接收应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息;
处理模块62,用于将所述接收模块61接收的所述配置文件和所述动画的多个组成部分进行存储,并在接收到发布指令后,提取存储的所述配置文件和所述动画的多个组成部分,将所述配置文件和所述动画的多个组成部分传输至发布模块63;
发布模块63,用于发布接收的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
可选地,所述多个组成部分中还包含至少一个静态图;所述配置文件中包含所述背景图的属性信息、所述至少一个动态图中每个动态图的属性信息,以及所述至少一个静态图中每个静态图的属性信息。
本申请实施例中,服务端可以动态发布动画的多个组成部分及配置文件,客户端针对每个组成部分分别在屏幕上进行渲染。这种方式可以实现对动画中每个组成部分的灵活配置,实现效果多样化的动画效果,可以支持复杂的逻辑场景需求。另外,由于将整个动画分解为了多个组成部分,这多个组成部分的下载数据量之和会小于用一张动态图片来实现整个动画的下载数据量,从而提高了下载速度,能够快速呈现出当前页面的动画效果。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、装置(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。
显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。

Claims (15)

1.一种动画渲染方法,其特征在于,该方法包括:
获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;
根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;
根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。
2.如权利要求1所述的方法,其特征在于,所述多个组成部分中还包含至少一个静态图;在所述应用页面中渲染所述背景图之后,还包括:
根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
3.如权利要求1或2所述的方法,其特征在于,所述配置文件中还包含用于合成所述动画的至少一个组成部分分别对应的逻辑操作配置信息;其中,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息。
4.如权利要求1所述的方法,其特征在于,所述获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分,包括:
从服务器下载动画的配置文件和用于合成所述动画的多个组成部分。
5.如权利要求4所述的方法,其特征在于,所述从服务器下载动画的配置文件和用于合成动画的多个组成部分,包括:
按照预设的下载顺序,分别从服务器下载所述动画的配置文件和用于合成所述动画的多个组成部分;
其中,在所述下载顺序中,所述配置文件和背景图位于其它组成部分的前面。
6.如权利要求1所述的方法,其特征在于,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分,包括:
在检测到服务端发布了所述应用页面中更新后的动画后,从服务端下载该更新后的动画的配置文件;
在用于合成该动画的多个组成部分中,下载发生更新的组成部分;并
获取本地存储的所述动画中未发生更新的组成部分。
7.一种动画发布方法,其特征在于,该方法包括:
接收动画发布指令;
根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息;
发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
8.如权利要求7所述的方法,其特征在于,所述多个组成部分中还包含至少一个静态图;所述配置文件中包含所述背景图的属性信息、所述至少一个动态图中每个动态图的属性信息,以及所述至少一个静态图中每个静态图的属性信息。
9.一种客户端,其特征在于,该客户端包括:
获取模块,用于获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;
背景图渲染模块,用于根据所述配置文件中背景图的属性信息,在所述应用页面中渲染所述背景图;
动画渲染模块,用于根据所述配置文件中所述至少一个动态图的属性信息,将所述至少一个动态图分别覆盖在渲染后的背景图上。
10.如权利要求9所述的客户端,其特征在于,所述多个组成部分中还包含至少一个静态图;所述装置还包括:
静态图渲染模块,用于根据所述配置文件中所述至少一个静态图的属性信息,将所述至少一个静态图分别覆盖在渲染后的背景图上。
11.如权利要求9或10所述的客户端,其特征在于,所述配置文件中还包含用于合成所述动画的至少一个组成部分分别对应的逻辑操作配置信息;其中,任一组成部分对应的逻辑操作配置信息是指在用户对渲染后的该组成部分实施了预定操作后,所触发的逻辑操作信息。
12.如权利要求9所述的客户端,其特征在于,所述获取模块具体用于:
从服务器下载动画的配置文件和用于合成所述动画的多个组成部分。
13.如权利要求12所述的客户端,其特征在于,所述获取模块具体用于:
按照预设的下载顺序,分别从服务器下载所述动画的配置文件和用于合成所述动画的多个组成部分;
其中,在所述下载顺序中,所述配置文件和背景图位于其它组成部分的前面。
14.一种服务器,其特征在于,该服务器包括:
接收模块,用于接收动画发布指令;
处理模块,用于根据所述动画发布指令,获取应用页面中动画的配置文件和用于合成所述动画的多个组成部分;所述多个组成部分中包含位于所述动画底层的背景图和需要展示在所述背景图上的至少一个动态图,每个动态图对应一个动画区域;所述配置文件中包含所述多个组成部分的属性信息;
发布模块,用于发布获取的所述配置文件和用于合成所述动画的多个组成部分,以使客户端获取发布的所述配置文件和所述动画的多个组成部分后,根据所述配置文件中动画的多个组成部分的属性信息,进行动画渲染。
15.如权利要求14所述的服务器,其特征在于,所述多个组成部分中还包含至少一个静态图;所述配置文件中包含所述背景图的属性信息、所述至少一个动态图中每个动态图的属性信息,以及所述至少一个静态图中每个静态图的属性信息。
CN201610890836.2A 2016-10-12 2016-10-12 一种动画渲染及发布方法、装置 Active CN107943805B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610890836.2A CN107943805B (zh) 2016-10-12 2016-10-12 一种动画渲染及发布方法、装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610890836.2A CN107943805B (zh) 2016-10-12 2016-10-12 一种动画渲染及发布方法、装置

Publications (2)

Publication Number Publication Date
CN107943805A true CN107943805A (zh) 2018-04-20
CN107943805B CN107943805B (zh) 2022-02-25

Family

ID=61928735

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610890836.2A Active CN107943805B (zh) 2016-10-12 2016-10-12 一种动画渲染及发布方法、装置

Country Status (1)

Country Link
CN (1) CN107943805B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959198A (zh) * 2018-06-27 2018-12-07 天闻数媒科技(湖南)有限公司 一种交互式电子书分层、分类排版和渲染方法
CN111273985A (zh) * 2020-01-20 2020-06-12 北京无限光场科技有限公司 页面渲染方法、装置、电子设备及计算机可读存储介质
CN112333400A (zh) * 2020-10-20 2021-02-05 深圳市前海手绘科技文化有限公司 一种有用于线下展示的手绘视频优化方法与装置
CN113568548A (zh) * 2021-08-05 2021-10-29 北京达佳互联信息技术有限公司 动画信息处理方法和设备

Citations (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5838316A (en) * 1996-01-26 1998-11-17 International Business Machines Corporation Method and system for presenting a plurality of animated display objects to a user for selection on a graphical user interface in a data processing system
US20050104886A1 (en) * 2003-11-14 2005-05-19 Sumita Rao System and method for sequencing media objects
CN1873638A (zh) * 2005-06-02 2006-12-06 腾讯科技(深圳)有限公司 一种动画文件显示的方法和系统
CN101882321A (zh) * 2009-05-08 2010-11-10 上海科泰世纪科技有限公司 动画用户界面渲染系统及方法
CN102289835A (zh) * 2011-08-30 2011-12-21 北京瑞信在线系统技术有限公司 微动画效果查看方法及装置
CN102982164A (zh) * 2012-12-07 2013-03-20 北京奇虎科技有限公司 一种浏览器页面呈现方法和浏览器
CN103034710A (zh) * 2012-12-07 2013-04-10 北京奇虎科技有限公司 用于浏览器的页面呈现方法和装置
CN103123648A (zh) * 2011-12-30 2013-05-29 微软公司 在划定区域中呈现丰富的搜索结果
CN103414627A (zh) * 2013-04-10 2013-11-27 广州华多网络科技有限公司 虚拟礼物展示方法和系统
CN103544727A (zh) * 2013-06-26 2014-01-29 Tcl集团股份有限公司 一种基于预测分支的场景渲染优化方法、系统和移动终端
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置
US8717368B1 (en) * 2011-10-14 2014-05-06 Google Inc. Decomposing animations into primitives for browser-dependent rendering
CN103971391A (zh) * 2013-02-01 2014-08-06 腾讯科技(深圳)有限公司 一种动画生成方法及装置
CN104050232A (zh) * 2013-03-15 2014-09-17 梦工厂动画公司 计算机生成动画资产的任意分层加标签
CN104778735A (zh) * 2014-01-14 2015-07-15 腾讯科技(深圳)有限公司 一种基于不规则图形的动画生成方法和装置
CN104915977A (zh) * 2014-03-14 2015-09-16 腾讯科技(深圳)有限公司 本地应用程序的动画文件生成方法及装置
CN105205063A (zh) * 2014-06-14 2015-12-30 北京金山安全软件有限公司 一种对图片进行组合生成视频的方法及系统
CN105630787A (zh) * 2014-10-28 2016-06-01 腾讯科技(深圳)有限公司 基于动态可移植网络图形的动画实现方法及装置
CN105867857A (zh) * 2015-12-15 2016-08-17 乐视网信息技术(北京)股份有限公司 一种信息显示方法及装置
CN105869199A (zh) * 2015-02-09 2016-08-17 三星电子株式会社 用于处理动画的装置和方法

Patent Citations (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5838316A (en) * 1996-01-26 1998-11-17 International Business Machines Corporation Method and system for presenting a plurality of animated display objects to a user for selection on a graphical user interface in a data processing system
US20050104886A1 (en) * 2003-11-14 2005-05-19 Sumita Rao System and method for sequencing media objects
CN1873638A (zh) * 2005-06-02 2006-12-06 腾讯科技(深圳)有限公司 一种动画文件显示的方法和系统
CN101882321A (zh) * 2009-05-08 2010-11-10 上海科泰世纪科技有限公司 动画用户界面渲染系统及方法
CN102289835A (zh) * 2011-08-30 2011-12-21 北京瑞信在线系统技术有限公司 微动画效果查看方法及装置
US8717368B1 (en) * 2011-10-14 2014-05-06 Google Inc. Decomposing animations into primitives for browser-dependent rendering
CN103123648A (zh) * 2011-12-30 2013-05-29 微软公司 在划定区域中呈现丰富的搜索结果
CN103034710A (zh) * 2012-12-07 2013-04-10 北京奇虎科技有限公司 用于浏览器的页面呈现方法和装置
CN102982164A (zh) * 2012-12-07 2013-03-20 北京奇虎科技有限公司 一种浏览器页面呈现方法和浏览器
CN103971391A (zh) * 2013-02-01 2014-08-06 腾讯科技(深圳)有限公司 一种动画生成方法及装置
CN104050232A (zh) * 2013-03-15 2014-09-17 梦工厂动画公司 计算机生成动画资产的任意分层加标签
CN103414627A (zh) * 2013-04-10 2013-11-27 广州华多网络科技有限公司 虚拟礼物展示方法和系统
CN103544727A (zh) * 2013-06-26 2014-01-29 Tcl集团股份有限公司 一种基于预测分支的场景渲染优化方法、系统和移动终端
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置
CN104778735A (zh) * 2014-01-14 2015-07-15 腾讯科技(深圳)有限公司 一种基于不规则图形的动画生成方法和装置
CN104915977A (zh) * 2014-03-14 2015-09-16 腾讯科技(深圳)有限公司 本地应用程序的动画文件生成方法及装置
CN105205063A (zh) * 2014-06-14 2015-12-30 北京金山安全软件有限公司 一种对图片进行组合生成视频的方法及系统
CN105630787A (zh) * 2014-10-28 2016-06-01 腾讯科技(深圳)有限公司 基于动态可移植网络图形的动画实现方法及装置
CN105869199A (zh) * 2015-02-09 2016-08-17 三星电子株式会社 用于处理动画的装置和方法
CN105867857A (zh) * 2015-12-15 2016-08-17 乐视网信息技术(北京)股份有限公司 一种信息显示方法及装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959198A (zh) * 2018-06-27 2018-12-07 天闻数媒科技(湖南)有限公司 一种交互式电子书分层、分类排版和渲染方法
CN111273985A (zh) * 2020-01-20 2020-06-12 北京无限光场科技有限公司 页面渲染方法、装置、电子设备及计算机可读存储介质
CN112333400A (zh) * 2020-10-20 2021-02-05 深圳市前海手绘科技文化有限公司 一种有用于线下展示的手绘视频优化方法与装置
CN112333400B (zh) * 2020-10-20 2021-11-09 深圳市前海手绘科技文化有限公司 一种有用于线下展示的手绘视频优化方法与装置
WO2022083131A1 (zh) * 2020-10-20 2022-04-28 深圳市前海手绘科技文化有限公司 一种用于线下展示的手绘视频优化方法与装置
CN113568548A (zh) * 2021-08-05 2021-10-29 北京达佳互联信息技术有限公司 动画信息处理方法和设备

Also Published As

Publication number Publication date
CN107943805B (zh) 2022-02-25

Similar Documents

Publication Publication Date Title
CN107832108A (zh) 3D canvas网页元素的渲染方法、装置及电子设备
US20100302249A1 (en) Apparatus, systems and methods for layout of scene graphs using node bounding areas
CN107943805A (zh) 一种动画渲染及发布方法、装置
US20130151937A1 (en) Selective image loading in mobile browsers
US20150220496A1 (en) Dynamic sprite based theme switching
CN109671147B (zh) 基于三维模型的纹理贴图生成方法及装置
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
CN111951356B (zh) 基于json数据格式的动画渲染方法
US11803993B2 (en) Multiplane animation system
CN112053370A (zh) 基于增强现实的显示方法、设备及存储介质
CN105335410A (zh) 一种基于合成渲染加速的网页更新方法和装置
EP4273808A1 (en) Method and apparatus for publishing video, device, and medium
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN112486611A (zh) 页面切换显示方法、装置、存储介质及电子设备
CN116091672A (zh) 图像渲染方法、计算机设备及其介质
CN106919406A (zh) 一种桌面应用组件发布、更新方法及装置
Kelly et al. Basic introduction to pygame
CN109144655B (zh) 图像动态展示的方法、装置、系统及介质
CN108134906A (zh) 图像处理方法及其系统
US20020101449A1 (en) System and method for developing and processing a graphical user interface for a computer application
CN109885318B (zh) web应用的桌面图标更新的方法和装置
CN104679767A (zh) 依据可视区域在网页中显示图片的系统及其方法
WO2014200528A1 (en) Coalescing graphics operations
US9484002B2 (en) System and method for adaptive and persistent media presentations
US10740943B1 (en) System and method for modification of an animation effect during continuous run

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 1254211

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant