CN106991162A - 一种网页上的节省网络资源的动画效果的实现方法 - Google Patents

一种网页上的节省网络资源的动画效果的实现方法 Download PDF

Info

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
Application number
CN201710206619.1A
Other languages
English (en)
Other versions
CN106991162B (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.)
Youdi Technology Co Ltd
FUTURE TV Co Ltd
Original Assignee
Youdi Technology Co Ltd
FUTURE TV Co 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 Youdi Technology Co Ltd, FUTURE TV Co Ltd filed Critical Youdi Technology Co Ltd
Publication of CN106991162A publication Critical patent/CN106991162A/zh
Application granted granted Critical
Publication of CN106991162B publication Critical patent/CN106991162B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

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格式的动态图片。
CN201710206619.1A 2017-03-22 2017-03-31 一种网页上的节省网络资源的动画效果的实现方法 Expired - Fee Related CN106991162B (zh)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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 天脉聚源（北京）科技有限公司 一种动态网页显示方法和系统

Patent Citations (18)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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) 显示方法、装置以及电视机、存储介质
WO2020103218A1 (zh) 一种WebRTC中的直播流处理方法及推流客户端
US9836437B2 (en) Screencasting for multi-screen applications
CN105847940B (zh) 一种弹幕显示控制方法及装置
CN102831209B (zh) 网页浏览的渲染处理方法及装置和移动终端
CN103905901A (zh) 基于android系统的视频开机方法、装置及播放设备
CN106991162A (zh) 一种网页上的节省网络资源的动画效果的实现方法
CN110268718A (zh) 用于移动设备上视频流媒体和播放的内容感知的节能
WO2015078260A1 (en) Method and device for playing video content
CN111405339A (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) 动画元素的播放方法、装置以及电子设备
CN113849143A (zh) 显示方法、显示设备和存储介质
CN111447488B (zh) 一种memc控制方法及显示设备
CN111064982B (zh) 一种显示控制方法、存储介质及显示设备
JP7179194B2 (ja) 可変エンドポイントユーザインターフェースレンダリング
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
CN114489882B (zh) 浏览器动态皮肤的实现方法及装置、存储介质

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