CN112672198B - 一种epg异形图展现方法 - Google Patents
一种epg异形图展现方法 Download PDFInfo
- Publication number
- CN112672198B CN112672198B CN202011474723.7A CN202011474723A CN112672198B CN 112672198 B CN112672198 B CN 112672198B CN 202011474723 A CN202011474723 A CN 202011474723A CN 112672198 B CN112672198 B CN 112672198B
- Authority
- CN
- China
- Prior art keywords
- picture
- special
- shaped
- focus
- animation
- 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.)
- Active
Links
Images
Landscapes
- Processing Or Creating Images (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明涉及一种EPG异形图组件及其展示方法，通过原始图片生成背景图片和异形图片；配置三个图片控件，纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件，异形图组件获取焦点时，按照初始化时的配置参数，执行相应的动画效果；异形图组件失去焦点时，异形图执行动画效果，恢复到之前的状态。能够完整的实现异形图的所有展现效果；使用者只需要按照约定的方式提供图片原型，并调用相关的初始化方法和动画方法，就可以完成异形图的渲染和移动动画；通过约定的配置方式，异形图的动画可以实现多组不同的效果；通过布局层次和焦点图样式，可以为异形图添加焦点样式，同时不影响异形图的展现效果。
Description
技术领域
本发明涉及网络电视技术领域，具体涉及一种EPG异形图组件及其展示方法。
背景技术
近年来，IPTV作为三网融合的主要试点项目之一，经历着从初步探索到迅猛发展的重要时期。依托于运营商的网络平台，通过将传统广播电视媒体与新兴互联网技术的相结合，把电视机或个人计算机作为显示终端，IPTV向用户提供数字广播电视、视频服务、信息服务等宽带业务。
随着业务的多元化发展，用户对产品使用体验的要求也越来越高。从界面体验到产品性能，再到多层次、系统化的产品功能，一款好的应用产品的迭代周期往往只在半年甚至几个月。其中界面展示往往又是变化最大迭代最快的方面，这种形式要求产品的设计者、美工人员以及技术人员都能够及时迅速的提供出能够适应市场的产品解决方案。
EPG中的异形图是一种较新颖的界面展示效果，与传统的单图展示相比，异形图的图像由多个小图像单元组成，在某些场景下，比如获取焦点时，小图像单元的相对位置发生变化，比如人的图像单元从背景的图像单元中移动出来，表现出立体或突出的视觉效果。但是目前IPTV中的内置浏览器版本较低，在Android原生态环境下，不能很流畅的实现异形图的展示，也不能够实现异形图的动画效果。
发明内容
为克服所述不足，本发明的目的在于提供一种EPG异形图组件及其展现方法，能够在Android原生环境下的异形图组件，该组件能够完整的实现EPG系统下的异形图展现要求，包括异形图的数据渲染、异行动画效果以及能够正常展示异形图的焦点框。
本发明解决其技术问题所采用的技术方案是：一种EPG异形图组件，包括两张图片、三个图片控件，所述图片分别为背景图片和异形图片，所述图片控件分别为背景图片控件、焦点框样式图片控件、异形图片控件，其纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件；
默认情况下，背景图片与异形图片完整的契合在一起，构成一个完整的画面；当组件获取焦点时，异形图片部分根据配置参数，相对于背景图片发生偏移；当组件失去焦点时，异形图片再回归到之前的位置；异形图组件同时支持焦点样式，当组件获取焦点时，显示高亮度边框，如果异形图片部分超出了背景图片的范围，异形图片会遮罩部分背景边框。
具体地，所述背景图片控件渲染背景图片，异形图片控件渲染异形图片，焦点框样式图片控件渲染焦点框样式图片。
一种EPG异形图展现方法，包括：
S1、通过原始图片生成背景图片和异形图片，异形图片使用透明背景，大小与原始图片一致，异形图像内容在异形图片中的相对位置与其在原始图片中的相对位置一致，背景图片为原始图片除去异形图像的剩余部分；
S2、配置三个图片控件，异形图组件的三个图片控件，纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件，其中背景图片控件渲染背景图片，异形图片控件渲染异形图片，焦点框样式图片控件渲染焦点框样式图片，背景图片控件和异形图片控件均使用拉伸填充；
S3、异形图组件获取焦点时，按照初始化时的配置参数，执行相应的动画效果，动画效果支持沿着指定方向的移动和缩放，配置参数有移动参数，包括水平移动距离和垂直移动距离，有缩放参数，包括缩放的比例值以及缩放轴点；
S4、异形图组件失去焦点时，异形图执行动画效果，恢复到之前的状态，通过上一步中的移动参数和缩放参数，计算出异形图恢复状态所需的移动距离和缩放参数，并执行相应动画。
具体地，所述异形图组件的大小可以配置，三个图片控件的大小始终与异形图组件的大小一致，即三个子布局的大小与父布局大小一致，因此三个图片控件的大小也一致，保证按照步骤S1的约定生产的异形图片和背景图片，在异形图片控件和背景图片控件中渲染后的展示效果，与原始图片按照异形图组件大小拉伸渲染的效果相同。
具体地，通过配置参数计算缩放的轴点，目前支持的缩放轴点有左下侧、中间下侧、右侧下侧、中心点。
具体地，所述动画效果通过Android第三方工具com.nineoldandroids.animation.AnimatorSet执行相应的动画集，该工具能够保证在低版本Android系统上执行动画时的流程度。
具体地，所述焦点框样式图片控件使用Android的ShapDrawable对象填充，ShapDrawable包含两个像素的实线边框，当获取焦点时显示背景图片控件，当失去焦点时隐藏背景图片控件，获取焦点时，异形图片控件覆盖部分焦点框样式图片控件，焦点框样式图片控件覆盖背景图片控件的边缘位置。
本发明具有以下有益效果：一种Android原始环境下的异形图组件的实现方式，能够完整的实现异形图的所有展现效果；使用者只需要按照约定的方式提供图片原型，并调用相关的初始化方法和动画方法，就可以完成异形图的渲染和移动动画；通过约定的配置方式，异形图的动画可以实现多组不同的效果；通过布局层次和焦点图样式，可以为异形图添加焦点样式，同时不影响异形图的展现效果。
附图说明
图1-1为本发明异形图原始图片。
图1-2为本发明生成的异形图片。
图1-3为本发明生成的背景图片。
图2-1为本发明异形图组件的默认状态。
图2-2为本发明异形图组件的焦点状态。
图3为本发明异形图组件层级示意图。
图4为本发明的流程图。
图5为本发明配置参数计算动画执行参数流程图。
图6为本发明的异形图组件尺寸示意图。
具体实施方式
现在结合附图对本发明作进一步详细的说明。
一种EPG异形图组件，包括两张图片、三个图片控件，所述图片分别为背景图片和异形图片，所述图片控件分别为背景图片控件、焦点框样式图片控件、异形图片控件，其纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件；
默认情况下，背景图片与异形图片完整的契合在一起，构成一个完整的画面；当组件获取焦点时，异形图片部分根据配置参数，相对于背景图片发生偏移；当组件失去焦点时，异形图片再回归到之前的位置；异形图组件同时支持焦点样式，当组件获取焦点时，显示高亮度边框，如果异形图片部分超出了背景图片的范围，异形图片会遮罩部分背景边框。
具体地，所述背景图片控件渲染背景图片，异形图片控件渲染异形图片，焦点框样式图片控件渲染焦点框样式图片。
一种EPG异形图展现方法，包括
S1、通过原始图片生成背景图片和异形图片；
如图1-1中原始图片为生产异形图单元图片的原始图片，其中心形图像是该图的主体内容，黑色斜线部分是该图的背景部分，由图1-1生成图1-2异形图片和图1-3背景图片；
如图1-2所示的异形图片的大小与图1-1所示的原始图片相同，图1-2拥有与图1-1完全相同的心形图像，且心形图像在图1-2中的位置与在图1-1的位置完全相同，图1-2的白色区域使用透明色作为图片背景；
如图1-3为图1-1去除心形图像后的剩余内容，图1-3大小与图1-1相同，心形遗留区域为原心形图像所在区域，该区域可选择使用与黑色斜线代表的背景部分的色度类似的过渡色度填充。
S2、配置三个图片控件，纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件，其中背景图片控件渲染背景图片，异形图片控件渲染异形图片，焦点框样式图片渲染焦点框样式图片，背景图片控件和异形图片控件均使用拉伸填充；
S3、异形图组件获取焦点时，按照初始化时的配置参数，执行相应的动画效果，动画效果支持沿着指定方向的移动和缩放，配置参数有移动参数，包括水平移动距离和垂直移动距离，缩放参数包括缩放的比例值，以及缩放轴点；
S4、异形图组件失去焦点时，异形图执行动画效果，恢复到之前的状态，通过上一步中的移动参数和缩放参数，计算出异形图恢复状态所需的移动距离和缩放参数，并执行相应动画。
具体地，所述异形图组件获取焦点、失去焦点时的状态图见图2-1、2-2其变化过程见下：
如图2-1所示异形图组件的默认状态，为异形图组件渲染完毕后，未获取焦点时的状态，该状态在视觉效果上与普通图片没有区别，但却是由多个不同的图片单元组成的；
如图2-2所示异形图组件的焦点状态，为异形图获取焦点后的状态，通过对异形图片控件执行动画，如2-2所示，该图的异形图片控件承载的心形图像，水平向右、垂直向上发生移动，图像比例放大，同时焦点框样式图片控件由隐藏转为显示，该焦点框样式图片控件承载的是一个有边框的透明图像，详见图3中说明。
当异形图组件失去焦点时，异形图片控件承载的心形图像，水平向左、垂直向下发生对等距离的移动，图像比例缩小，最终恢复到图2-1的状态。
具体地，如图3所示的异形图组件层级，异形图组件的层级由下向上，依次为背景图片控件、焦点框样式图片控件、异形图片控件，其作用原理为：
如图2-1所示异形图组件的默认状态，焦点框样式图片控件处于隐藏状态，异形图片控件承载图片的心形图像区域覆盖了背景图控件承载图片的一部分，异形图片控件承载图片的除心形图像区域外其它部分为透明色，该重叠区域显示的是背景图控件承载图片的内容。
如图2-2异形图组件的焦点状态，焦点框样式图片控件处于显示状态，在上部边界处，异形图片控件承载的心形图像区域覆盖了焦点框样式图片控件和背景图片控件承载的图片的区域，焦点框样式图片控件承载的图片的边框覆盖了背景图图片的边框区域，非边框区域为透明色，重叠区域显示的背景图图片内容。
具体地，通过配置参数进行计算动画执行参数，即动画效果中的缩放轴点、移动距离，目前支持的缩放轴点有左下侧、中间下侧、右侧下侧、中心点，配置参数计算动画执行参数的方法，如图5所示，包括以下步骤：
(1)、根据约定的配置参数的值计算缩放轴点，目前支持四种缩放轴点，分别是左下侧、中间下侧、右侧下侧、中心点，左下侧轴点水平方向坐标为：0，垂直方向坐标为height；中间下侧轴点水平方向坐标为：width/2，垂直方向坐标为height；右下侧轴点水平方向坐标为：width，垂直方向坐标为height；中心点轴点水平方向坐标为：width/2，垂直方向坐标为height/2，根据缩放比例进行缩放；
（2）、根据约定的配置参数的值计算水平移动的距离，配置参数中的移动方向分为正方向（水平向右）和负方向（水平向左），以及移动距离的绝对值，即水平移动的值最终是一个矢量值，获取焦点时水平移动值和失去焦点时的水平移动值互为相反数；
（3）、根据约定的配置参数的值计算垂直移动的距离，该步骤与上述水平移动步骤（2）一致；
（4）、根据约定的配置参数的值计算缩放比例，该缩放比例为一个浮点数，异形图片控件会根据该浮点数进行等比例缩放，获取焦点时缩/放值和失去焦点时的放/缩值互为倒数；
（5）、综合上述动画执行参数后，通过动画集执行动画，使用了第三方工具com.nineoldandroids.animation.AnimatorSet执行相应动画，以保证在低版本android系统上的体验流程性。
本发明不局限于所述实施方式，任何人应得知在本发明的启示下作出的结构变化，凡是与本发明具有相同或相近的技术方案，均落入本发明的保护范围之内。
本发明未详细描述的技术、形状、构造部分均为公知技术。
Claims (5)
1.一种EPG异形图展现方法，其特征在于：包括：
S1、通过原始图片生成背景图片和异形图片，异形图片使用透明背景，大小与原始图片一致，异形图像内容在异形图片中的相对位置与其在原始图片中的相对位置一致，背景图片为原始图片除去异形图像的剩余部分；
S2、配置三个图片控件，异形图组件的三个图片控件，纵向顺序自底部向顶部依次为背景图片控件、焦点框样式图片控件、异形图片控件，其中背景图片控件渲染背景图片，异形图片控件渲染异形图片，焦点框样式图片渲染焦点框样式图片，背景图片控件和异形图片控件均使用拉伸填充；
S3、异形图组件获取焦点时，按照初始化时的配置参数，执行相应的动画效果，动画效果支持沿着指定方向的移动和缩放；
S4、异形图组件失去焦点时，异形图执行动画效果，恢复到之前的状态，通过上一步中的配置参数，计算出动画执行参数，即异形图恢复状态所需的移动距离和缩放参数，并执行相应动画；
所述步骤S4中计算动画执行参数的方法，包括以下步骤：
(1)、根据约定的配置参数的值计算缩放轴点，目前支持四种缩放轴点，分别是左下侧、中间下侧、右侧下侧、中心点，左下侧轴点水平方向坐标为：0，垂直方向坐标为height；中间下侧轴点水平方向坐标为：width/2，垂直方向坐标为height；右下侧轴点水平方向坐标为：width，垂直方向坐标为height；中心点轴点水平方向坐标为：width/2，垂直方向坐标为height/2，根据缩放比例进行缩放；
（2）、根据约定的配置参数的值计算水平移动的距离，配置参数中的移动方向分为水平向右和水平向左，以及移动距离的绝对值，即水平移动的值最终是一个矢量值，获取焦点时水平移动值和失去焦点时的水平移动值互为相反数；
（3）、根据约定的配置参数的值计算垂直移动的距离，该步骤与上述水平移动步骤（2）一致；
（4）、根据约定的配置参数的值计算缩放比例，该缩放比例为一个浮点数，异形图片控件会根据该浮点数进行等比例缩放，获取焦点时缩/放值和失去焦点时的放/缩值互为倒数；
（5）、综合上述动画执行参数后，通过动画集执行动画，使用了第三方工具com.nineoldandroids.animation.AnimatorSet执行相应动画。
2.根据权利要求1所述的一种EPG异形图展现方法，其特征在于：所述异形图组件的大小可以配置，三个图片控件的大小始终与异形图组件的大小一致，因此三个图片控件的大小也一致，保证按照步骤S1的约定生产的异形图片和背景图片，在异形图片控件和背景图片控件中渲染后的展示效果，与原始图片按照异形图组件大小拉伸渲染的效果相同。
3.根据权利要求1所述的一种EPG异形图展现方法，其特征在于：所述步骤S3中的配置参数有移动参数、缩放参数，所述移动参数包括水平移动距离和垂直移动距离，缩放参数包括缩放的比例值以及缩放轴点。
4.根据权利要求1所述的一种EPG异形图展现方法，其特征在于：所述动画效果通过Android第三方工具com.nineoldandroids.animation.AnimatorSet执行相应的动画集，该工具能够保证在低版本Android系统上执行动画时的流程度。
5.根据权利要求1所述的一种EPG异形图展现方法，其特征在于：所述焦点框样式图片控件使用Android的ShapDrawable对象填充，ShapDrawable包含两个像素的实线边框，当获取焦点时显示背景图片控件，当失去焦点时隐藏背景图片控件，获取焦点时，异形图片控件覆盖部分焦点控件，焦点框样式图片控件覆盖背景图片控件的边缘位置。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011474723.7A CN112672198B (zh) | 2020-12-14 | 2020-12-14 | 一种epg异形图展现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011474723.7A CN112672198B (zh) | 2020-12-14 | 2020-12-14 | 一种epg异形图展现方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112672198A CN112672198A (zh) | 2021-04-16 |
| CN112672198B true CN112672198B (zh) | 2022-11-22 |
Family
ID=75404465
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011474723.7A Active CN112672198B (zh) | 2020-12-14 | 2020-12-14 | 一种epg异形图展现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112672198B (zh) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106547571A (zh) * | 2016-11-30 | 2017-03-29 | 北京酷我科技有限公司 | 一种可自定义的动图显示方法 |
| CN111309321A (zh) * | 2019-11-12 | 2020-06-19 | 广州银汉科技有限公司 | 一种基于数据驱动的可定制化gui系统 |
Family Cites Families (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2004096557A (ja) * | 2002-09-02 | 2004-03-25 | Canon Inc | 画像処理装置及び画像処理方法 |
| CN1512770A (zh) * | 2002-12-30 | 2004-07-14 | 北京中视联数字系统有限公司 | 一种电子节目指南的实现方法 |
| CN101499172A (zh) * | 2009-03-06 | 2009-08-05 | 深圳华为通信技术有限公司 | 控件绘制方法及装置 |
| CN105245774B (zh) * | 2015-09-15 | 2018-12-21 | 努比亚技术有限公司 | 一种图片处理方法及终端 |
| CN105931285A (zh) * | 2016-04-29 | 2016-09-07 | 乐视控股（北京）有限公司 | 一种3d空间中的控件实现方法及其装置 |
| CN106095744B (zh) * | 2016-05-27 | 2019-01-08 | 努比亚技术有限公司 | 不规则控件图标处理装置及方法 |
| CN107436765A (zh) * | 2017-07-27 | 2017-12-05 | 青岛海信电器股份有限公司 | 视图控件的处理方法和装置 |
| CN107835450B (zh) * | 2017-10-26 | 2020-12-08 | 深圳市雷鸟网络传媒有限公司 | 焦点显示方法、显示装置及计算机可读存储介质 |
| CN108519894B (zh) * | 2018-03-21 | 2021-06-01 | 北京酷我科技有限公司 | 一种音乐盒加载初始化的方法 |
| CN109086047B (zh) * | 2018-08-13 | 2019-12-10 | 南京星邺汇捷网络科技有限公司 | 基于eul的epg页面可视化设计方法和装置 |
-
2020
- 2020-12-14 CN CN202011474723.7A patent/CN112672198B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106547571A (zh) * | 2016-11-30 | 2017-03-29 | 北京酷我科技有限公司 | 一种可自定义的动图显示方法 |
| CN111309321A (zh) * | 2019-11-12 | 2020-06-19 | 广州银汉科技有限公司 | 一种基于数据驱动的可定制化gui系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112672198A (zh) | 2021-04-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110650368B (zh) | 视频处理方法、装置和电子设备 | |
| US20110273466A1 (en) | View-dependent rendering system with intuitive mixed reality | |
| CN102663766B (zh) | 一种基于非真实感的艺术插画效果绘制方法 | |
| US20080246757A1 (en) | 3D Image Generation and Display System | |
| CN104123742A (zh) | 一种将静态漫画图片转化为二维动画的方法和播放器 | |
| CN105678724A (zh) | 图像的背景替换方法及装置 | |
| CN111882627A (zh) | 图像处理方法、视频处理方法、装置、设备和存储介质 | |
| CN103139478A (zh) | 一种主副画面实时渲染的拍照方法 | |
| CN111292389B (zh) | 一种图像处理的方法和装置 | |
| CN111145135B (zh) | 一种图像去扰处理方法、装置、设备及存储介质 | |
| CN111161392A (zh) | 一种视频的生成方法、装置及计算机系统 | |
| CN105282536A (zh) | 一种基于Unity3D引擎的裸眼3D图文交互方法 | |
| CN110502205A (zh) | 图片显示边缘处理方法、装置、电子设备和可读存储介质 | |
| CN115512193A (zh) | 面部表情生成方法和装置 | |
| US20180268730A1 (en) | Process, system and method for step-by-step painting of an image on a transparent surface | |
| CN112672198B (zh) | 一种epg异形图展现方法 | |
| CN114520924A (zh) | 弹幕展示方法及装置 | |
| CN117788689A (zh) | 一种基于三维建模的可交互式虚拟云展厅构建方法及系统 | |
| JP2020014075A (ja) | 画像投影システム、画像投影方法、及びプログラム | |
| CN113516761A (zh) | 视错觉类裸眼3d内容制作方法及装置 | |
| CN109242761A (zh) | 一种图片显示方法及装置 | |
| CN104243949B (zh) | 3d显示方法及装置 | |
| CN116310005A (zh) | 全息柜、动态虚拟形象视频处理方法及图像处理方法 | |
| CN102474579A (zh) | 影像终端和显示图像形成方法 | |
| CN105263015A (zh) | 一种Android设备控制裸眼3D视频显示的方法 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |