CN106991162A - 一种网页上的节省网络资源的动画效果的实现方法 - Google Patents
一种网页上的节省网络资源的动画效果的实现方法 Download PDFInfo
- Publication number
- CN106991162A CN106991162A CN201710206619.1A CN201710206619A CN106991162A CN 106991162 A CN106991162 A CN 106991162A CN 201710206619 A CN201710206619 A CN 201710206619A CN 106991162 A CN106991162 A CN 106991162A
- Authority
- CN
- China
- Prior art keywords
- dynamic
- picture
- several
- webpage
- animation effect
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Information Transfer Between Computers (AREA)
- Processing Or Creating Images (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
一种网页上的节省网络资源的动画效果的实现方法,包括:把网页动画的画面分为若干个静止部分和若干个动态部分;用若干个矩形框框住动态部分;把用矩形框框住的部分分别做成gif格式的动态图片;利用网页的布局css的position属性,把gif格式的动态图片精准的放到对应的矩形框内,形成若干个新的动态部分;将若干个新的动态部分与若干个静止部分组合,完成网页的动画效果。本发明的一种网页上的节省网络资源的动画效果的实现方法,解决了配置不高的终端(电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果,增加了交互性,给用户更好地体验。
Description
技术领域
本发明涉及一种动画效果的实现方法。特别是涉及一种网页上的节省网络资源的动画效果的实现方法。
背景技术
随着互联网的蓬勃发展和html5技术的兴起,html5技术为网页提供了音频、视频、动画等各种多媒体表现手段,网页不再是单纯的静态的网页,里面还包含有音频、视频、动画等多媒体,给用户带来更好的体验,但与此同时也带来了一些问题,如资源越来越大、消耗的带宽越来越多、客户端浏览器上消耗的内存越来越多,特别是在硬件配置不高的电视盒子、手机在加载动画的时候,可能出现卡顿、甚至闪退,这个时候就需要考虑消耗硬件资源低的动画实现方案。
现有技术是采用javascript脚本语言编写动画。动画由多个帧图片组成,由javascript语言控制帧图片的展示,从而实现动画的播放。其存在如下不足:
1、需要很多的帧图片,对网络带宽有很高的要求;
2、javascript在播放帧动画的时候,会消耗较多的硬件资源,需要硬件配置较高。
发明内容
本发明所要解决的技术问题是,提供一种应用效果好的网页上的节省网络资源的动画效果的实现方法。
本发明所采用的技术方案是:一种网页上的节省网络资源的动画效果的实现方法,包括如下步骤:
1)把网页动画的画面分为若干个静止部分和若干个动态部分;
2)用若干个矩形框框住动态部分;
3)把用矩形框框住的部分分别做成gif格式的动态图片;
4)利用网页的布局css的position属性,把gif格式的动态图片精准的放到对应的矩形框内,形成若干个新的动态部分;
5)将若干个新的动态部分与步骤1)中的若干个静止部分组合,完成网页的动画效果。
步骤1)所述的静止的部分就是画面固定不变的部分;动态的部分就是画面动态改变的部分。
步骤3)在做成gif格式的动态图片过程中,要把框里的所有内容都做成gif格式的动态图片。
本发明的一种网页上的节省网络资源的动画效果的实现方法,解决了配置不高的终端(电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果,增加了交互性,给用户更好地体验。
具体实施方式
下面结合实施例对本发明的一种网页上的节省网络资源的动画效果的实现方法做出详细说明。
本发明的一种网页上的节省网络资源的动画效果的实现方法,包括如下步骤:
1)把网页动画的画面分为若干个静止部分和若干个动态部分;所述的静止的部分就是画面固定不变的部分例如远山;动态的部分就是画面动态改变的部分,如人物的胡须随风飘动。
2)用若干个矩形框框住动态部分,所述的矩形框尽可能小;之所以要求矩形框尽可能小,是因为gif格式的动态图片存储起来比一般静态图片大的多;用尽可能小的矩形框去框住网页画面动态的部分,gif动态图片作的就越小,就越节省网络带宽和加载图片的时间。
3)把用矩形框框住的部分分别做成gif格式的动态图片;在做成gif格式的动态图片过程中,要把框里的所有内容都做成gif格式的动态图片,否则就会有很难看的白边,明显看出图片之间不融洽。
4)利用网页的布局css的position属性,把gif格式的动态图片精准的放到对应的矩形框内,形成若干个新的动态部分;
5)将若干个新的动态部分与步骤1)中的若干个静止部分组合,完成网页的动画效果。
Claims (3)
1.一种网页上的节省网络资源的动画效果的实现方法,其特征在于,包括如下步骤:
1)把网页动画的画面分为若干个静止部分和若干个动态部分;
2)用若干个矩形框框住动态部分;
3)把用矩形框框住的部分分别做成gif格式的动态图片;
4)利用网页的布局css的position属性,把gif格式的动态图片精准的放到对应的矩形框内,形成若干个新的动态部分;
5)将若干个新的动态部分与步骤1)中的若干个静止部分组合,完成网页的动画效果。
2.根据权利要求1所述的一种网页上的节省网络资源的动画效果的实现方法,其特征在于,步骤1)所述的静止的部分就是画面固定不变的部分;动态的部分就是画面动态改变的部分。
3.根据权利要求1所述的一种网页上的节省网络资源的动画效果的实现方法,其特征在于,步骤3)在做成gif格式的动态图片过程中,要把框里的所有内容都做成gif格式的动态图片。
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN2017101734237 | 2017-03-22 | ||
CN201710173423 | 2017-03-22 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106991162A true CN106991162A (zh) | 2017-07-28 |
CN106991162B CN106991162B (zh) | 2020-07-28 |
Family
ID=59414666
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710206619.1A Expired - Fee Related CN106991162B (zh) | 2017-03-22 | 2017-03-31 | 一种网页上的节省网络资源的动画效果的实现方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106991162B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107967344A (zh) * | 2017-12-11 | 2018-04-27 | 上海携程商务有限公司 | 网页动画效果的实现方法、***、设备及存储介质 |
CN111475245A (zh) * | 2020-04-08 | 2020-07-31 | 腾讯科技(深圳)有限公司 | 动态图片显示方法、装置、电子设备及计算机存储介质 |
Citations (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050005025A1 (en) * | 2003-07-04 | 2005-01-06 | Michael Harville | Method for managing a streaming media service |
CN101287195A (zh) * | 2007-04-11 | 2008-10-15 | 北京三星通信技术研究有限公司 | Html彩信编辑器和方法 |
CN101398754A (zh) * | 2007-09-26 | 2009-04-01 | 中国科学院声学研究所 | 一种嵌入式设备的交互*** |
CN102098327A (zh) * | 2010-12-15 | 2011-06-15 | 百度在线网络技术(北京)有限公司 | 在线视频嗅探下载方法及装置 |
CN102346918A (zh) * | 2011-09-30 | 2012-02-08 | 长春理工大学 | 一种只包含物体变化的三维动画场景的绘制方法 |
CN102364459A (zh) * | 2011-06-28 | 2012-02-29 | 广州市动景计算机科技有限公司 | 基于移动终端的网页Flash动画显示方法和装置 |
JP2012074962A (ja) * | 2010-09-29 | 2012-04-12 | Nikon Corp | 撮像装置 |
US20120134194A1 (en) * | 2008-10-14 | 2012-05-31 | Mosaid Technologies Incorporated | Bridge device architecture for connecting discrete memory devices to a system |
CN102737067A (zh) * | 2011-04-15 | 2012-10-17 | 阿里巴巴集团控股有限公司 | 输出网页的方法和*** |
CN103544048A (zh) * | 2013-10-31 | 2014-01-29 | Tcl集团股份有限公司 | 一种Androd***开机动画显示方法及*** |
CN103578126A (zh) * | 2012-08-09 | 2014-02-12 | 福州福昕软件开发有限公司北京分公司 | 一种将gif图片转换到pdf文档后动态显示图片的方法 |
CN104778735A (zh) * | 2014-01-14 | 2015-07-15 | 腾讯科技(深圳)有限公司 | 一种基于不规则图形的动画生成方法和装置 |
CN105205063A (zh) * | 2014-06-14 | 2015-12-30 | 北京金山安全软件有限公司 | 一种对图片进行组合生成视频的方法及*** |
CN105867857A (zh) * | 2015-12-15 | 2016-08-17 | 乐视网信息技术(北京)股份有限公司 | 一种信息显示方法及装置 |
CN105894484A (zh) * | 2016-03-30 | 2016-08-24 | 山东大学 | 一种基于直方图归一化与超像素分割的hdr重建算法 |
CN106126760A (zh) * | 2016-09-08 | 2016-11-16 | 福建中金在线信息科技有限公司 | 一种web网页图片优化的方法 |
CN106251388A (zh) * | 2016-08-01 | 2016-12-21 | 乐视控股(北京)有限公司 | 照片处理方法和装置 |
CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源(北京)科技有限公司 | 一种动态网页显示方法和*** |
-
2017
- 2017-03-31 CN CN201710206619.1A patent/CN106991162B/zh not_active Expired - Fee Related
Patent Citations (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050005025A1 (en) * | 2003-07-04 | 2005-01-06 | Michael Harville | Method for managing a streaming media service |
CN101287195A (zh) * | 2007-04-11 | 2008-10-15 | 北京三星通信技术研究有限公司 | Html彩信编辑器和方法 |
CN101398754A (zh) * | 2007-09-26 | 2009-04-01 | 中国科学院声学研究所 | 一种嵌入式设备的交互*** |
US20120134194A1 (en) * | 2008-10-14 | 2012-05-31 | Mosaid Technologies Incorporated | Bridge device architecture for connecting discrete memory devices to a system |
JP2012074962A (ja) * | 2010-09-29 | 2012-04-12 | Nikon Corp | 撮像装置 |
CN102098327A (zh) * | 2010-12-15 | 2011-06-15 | 百度在线网络技术(北京)有限公司 | 在线视频嗅探下载方法及装置 |
CN102737067A (zh) * | 2011-04-15 | 2012-10-17 | 阿里巴巴集团控股有限公司 | 输出网页的方法和*** |
CN102364459A (zh) * | 2011-06-28 | 2012-02-29 | 广州市动景计算机科技有限公司 | 基于移动终端的网页Flash动画显示方法和装置 |
CN102346918A (zh) * | 2011-09-30 | 2012-02-08 | 长春理工大学 | 一种只包含物体变化的三维动画场景的绘制方法 |
CN103578126A (zh) * | 2012-08-09 | 2014-02-12 | 福州福昕软件开发有限公司北京分公司 | 一种将gif图片转换到pdf文档后动态显示图片的方法 |
CN103544048A (zh) * | 2013-10-31 | 2014-01-29 | Tcl集团股份有限公司 | 一种Androd***开机动画显示方法及*** |
CN104778735A (zh) * | 2014-01-14 | 2015-07-15 | 腾讯科技(深圳)有限公司 | 一种基于不规则图形的动画生成方法和装置 |
CN105205063A (zh) * | 2014-06-14 | 2015-12-30 | 北京金山安全软件有限公司 | 一种对图片进行组合生成视频的方法及*** |
CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源(北京)科技有限公司 | 一种动态网页显示方法和*** |
CN105867857A (zh) * | 2015-12-15 | 2016-08-17 | 乐视网信息技术(北京)股份有限公司 | 一种信息显示方法及装置 |
CN105894484A (zh) * | 2016-03-30 | 2016-08-24 | 山东大学 | 一种基于直方图归一化与超像素分割的hdr重建算法 |
CN106251388A (zh) * | 2016-08-01 | 2016-12-21 | 乐视控股(北京)有限公司 | 照片处理方法和装置 |
CN106126760A (zh) * | 2016-09-08 | 2016-11-16 | 福建中金在线信息科技有限公司 | 一种web网页图片优化的方法 |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107967344A (zh) * | 2017-12-11 | 2018-04-27 | 上海携程商务有限公司 | 网页动画效果的实现方法、***、设备及存储介质 |
CN107967344B (zh) * | 2017-12-11 | 2020-07-14 | 上海携程商务有限公司 | 网页动画效果的实现方法、***、设备及存储介质 |
CN111475245A (zh) * | 2020-04-08 | 2020-07-31 | 腾讯科技(深圳)有限公司 | 动态图片显示方法、装置、电子设备及计算机存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN106991162B (zh) | 2020-07-28 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108924621B (zh) | 显示方法、装置以及电视机、存储介质 | |
US9836437B2 (en) | Screencasting for multi-screen applications | |
CN105847940B (zh) | 一种弹幕显示控制方法及装置 | |
US20130002532A1 (en) | Method, apparatus, and computer program product for shared synchronous viewing of content | |
WO2018126899A1 (zh) | 一种视频界面显示方法及装置 | |
CN103905901A (zh) | 基于android***的视频开机方法、装置及播放设备 | |
CN106991162A (zh) | 一种网页上的节省网络资源的动画效果的实现方法 | |
CN110268718A (zh) | 用于移动设备上视频流媒体和播放的内容感知的节能 | |
WO2015078260A1 (en) | Method and device for playing video content | |
CN111405339A (zh) | 一种分屏显示方法、电子设备及存储介质 | |
CN110020311B (zh) | 网页显示方法、浏览器、终端和计算机可读存储介质 | |
WO2022227974A1 (zh) | 字幕处理方法、装置、设备及存储介质 | |
US20130002708A1 (en) | Method, apparatus, and computer program product for presenting interactive dynamic content in front of static content | |
CN109993817A (zh) | 一种动画的实现方法和终端 | |
US11513937B2 (en) | Method and device of displaying video comments, computing device, and readable storage medium | |
CN104615738A (zh) | 一种基于远程同步的移动终端照片分享方法 | |
CN107450911A (zh) | 动画元素的播放方法、装置以及电子设备 | |
CN111064982B (zh) | 一种显示控制方法、存储介质及显示设备 | |
JP7179194B2 (ja) | 可変エンドポイントユーザインターフェースレンダリング | |
CN111447488A (zh) | 一种memc控制方法及显示设备 | |
WO2020038071A1 (zh) | 视频增强控制方法、装置、电子设备及存储介质 | |
EP2693426A1 (en) | Display apparatus, image post-processing apparatus and method for image post-processing of contents | |
US11070867B2 (en) | Method, device, and computing apparatus for acquiring broadcasting content | |
KR20160131829A (ko) | 클라우드 스트리밍 서비스 시스템, 이미지 타입에 따른 알파 값을 이용한 이미지 클라우드 스트리밍 서비스 방법 및 이를 위한 장치 | |
US9361860B2 (en) | Display apparatus, image post-processing apparatus and method for image post-processing of contents |
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 | ||
CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20200728 |
|
CF01 | Termination of patent right due to non-payment of annual fee |