CN104700444A - 一种图片动画的实现方法 - Google Patents

一种图片动画的实现方法 Download PDF

Info

Publication number
CN104700444A
CN104700444A CN201510106792.5A CN201510106792A CN104700444A CN 104700444 A CN104700444 A CN 104700444A CN 201510106792 A CN201510106792 A CN 201510106792A CN 104700444 A CN104700444 A CN 104700444A
Authority
CN
China
Prior art keywords
picture
cartoon
editing machine
key frame
implementation method
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.)
Pending
Application number
CN201510106792.5A
Other languages
English (en)
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.)
Shanghai Hong Li Numeral Science And Technology Co Ltd
Original Assignee
Shanghai Hong Li Numeral Science And Technology 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 Shanghai Hong Li Numeral Science And Technology Co Ltd filed Critical Shanghai Hong Li Numeral Science And Technology Co Ltd
Priority to CN201510106792.5A priority Critical patent/CN104700444A/zh
Publication of CN104700444A publication Critical patent/CN104700444A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00Animation
    • G06T13/802D [Two Dimensional] animation, e.g. using sprites

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提供了一种图片动画的实现方法,仅在图片中需要做动画效果的部分添加网格点,通过移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,后续仅需要连续播放n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,就可实现图片动画的显示,整个制作过程仅需一张图片,减少了其在动画文件中所占用的空间,从而获得了更加逼真,生动的动画效果。

Description

一种图片动画的实现方法
技术领域
本发明涉及计算机图形处理技术领域,特别涉及一种图片动画的实现方法。
背景技术
目前,实现图片的动画技术主要包括关节动画和帧动画,关节动画是用普通mesh保存最初始的各顶点坐标,以及一系列后续时刻所对应的各骨骼的运动矩阵,无需保存每时刻的顶点数据,节省了大量存储空间,但是其缺点也比较明显,主要是在两段骨骼交接处,容易产生裂缝,从而影响动画真实效果。帧动画是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而构成动画效果,帧动画具有非常大的灵活性,可以实现很多复杂的动画效果,它类似与电影的播放模式,较适合于表演细腻的动画。但其也存在这如下缺点,即在时间轴的每帧上逐帧绘制不同的内容的同时需要大量图片资源,因而动画文件所占用的空间特别大。
发明内容
本发明的目的在于提供一种图片动画的实现方法,以解决现有技术中关节动画和帧动画在实现图片动画过程所存在的不足的问题。
为解决上述技术问题,本发明提供一种图片动画的实现方法,所述图片动画的实现方法包括:将图片导入2D骨骼动画编辑器,并在所述图片中需要做动画效果的部分添加网格点;
设定所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到对应每个图片状态的关键帧;
移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式;
利用插值算法根据所述n个关键帧的顶点位置坐标,计算n个关键帧中每相邻两个关键帧之间过渡的中间帧的顶点位置坐标;
根据所述n个关键帧的顶点位置坐标、所有中间帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,实现图片动画显示效果。
可选的,在所述的图片动画的实现方法中,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态的过程,所述2D骨骼动画编辑器生成了json文件,所述json文件记录了所述n个关键帧的顶点位置坐标。
可选的,在所述的图片动画的实现方法中,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态的过程,所述2D骨骼动画编辑器还生成了atlas文件,所述atlas文件记录所述图片动画所需的导入2D骨骼动画编辑器的所述图片的图片大小及像素格式。
可选的,在所述的图片动画的实现方法中,通过调整所述2D骨骼动画编辑器中的贝塞尔曲线以控制所述n个关键帧中相邻两个关键帧之间的差值,以实现各关键帧之间的平滑过渡。
可选的,在所述的图片动画的实现方法中,所述插值算法为线性插值算法。
可选的,在所述的图片动画的实现方法中,所述插值算法为内在形状插值算法。
可选的,在所述的图片动画的实现方法中,所述插值算法为仿射变换插值算法。
在本发明所提供的图片动画的实现方法中,仅在图片中需要做动画效果的部分添加网格点,通过移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,后续仅需要连续播放n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,就可实现图片动画的显示,整个制作过程仅需一张图片,减少了其在动画文件中所占用的空间,从而获得了更加逼真,生动的动画效果。
附图说明
图1是本发明一实施例中图片动画的实现方法的步骤流程图。
具体实施方式
以下结合附图和具体实施例对本发明提出的图片动画的实现方法作进一步详细说明。根据下面说明和权利要求书,本发明的优点和特征将更清楚。需说明的是,附图均采用非常简化的形式且均使用非精准的比例,仅用以方便、明晰地辅助说明本发明实施例的目的。
图1是本发明一实施例中图片动画的实现方法的步骤流图,如图1所示,所述的图片动画的实现方法包括:
首先,执行步骤S1,将图片导入2D骨骼动画编辑器,并在所述图片中需要做动画效果的部分添加网格点;对于图片来说实现动画效果,可以根据需要实现动画效果的部分进行添加网格点,减少了动画制作过程中的部分工作量,满足实际需求。
接着,执行步骤S2,设定所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到对应每个图片状态的关键帧;
网格点允许你在矩形边界内定义多边形,这将提高最终纹理贴图集的空间使用率,因为在多边形外的像素将被忽略掉,这种优化对移动设备来特别重要。网格的另外一个功能就是支持图片自由变形(FFD),设置初始状态图像的顶点,适当网格点数会使图片的动画效果更细腻。这里的图片自由变形FFD可以允许通过移动网格点来变形图片。FFD能实现网格的拉伸、挤压、弯曲、反弹,等一些矩形图片无法实现的功能。
接着,执行步骤S3,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式;
具体的,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态的过程,所述2D骨骼动画编辑器生成了json文件及atlas文件,所述json文件记录了所述n个关键帧的顶点位置坐标;所述atlas文件记录所述图片动画所需的导入2D骨骼动画编辑器的所述图片的图片大小及像素格式。这里,在2D骨骼动画编辑器中时间轴上设定图片n个状态的过程,也是将动画的播放划分为n时间节点,从而得到n个关键帧,例如第一个时间节点到第二时间节点过程中,图片状态的变换对应的就是n个关键帧中第一关键帧到第二关键帧的动画播放过程。这里第一关键帧为图片的初始状态,在第二个时间节点上拖动图片的网格点,图片状态改变(图片变形),得到第二关键帧,依次类推,设置第2~n个时间节点图片状态,得到相应的关键帧,需要说明的是,本实施例中,在所述图片中需要做动画效果的部分添加网格点的图片状态对应第一关键帧,其他的关键帧都是通过对图片中的网格点拖动,即图片变形得到。
接着,执行步骤S4,利用插值算法根据所述n个关键帧的顶点位置坐标,计算n个关键帧中每相邻两个关键帧之间过渡的中间帧的顶点位置坐标;
接着,执行步骤S5,根据所述n个关键帧的顶点位置坐标、所有中间帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,实现图片动画显示效果。
实际上播放中间状态图片的过程是通过在程序中载入json文件,获取json文件中记录的n个关键帧对应的顶点位置坐标,之后根据插值算法计算获得n个关键帧中相邻两个关键帧之间过渡的中间帧所对应的顶点位置坐标,播放时调用导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,完美实现图片的动画显示效果。
实现图片动画显示的过程的程序如下:
为了使得图片的动画效果更完美,可以通过调整所述2D骨骼动画编辑器中的贝塞尔曲线以控制所述n个关键帧中相邻两个关键帧之间的差值,以实现各关键帧之间的平滑过渡。
由于插值算法又分很多种类,后续将通过比较说明几种插值方法应用于本申请的技术方案的优缺点,以获得适用于本方案的最佳的插值方法。
(1)线性插值算法
优点:方法简单,能快速的获取中间关键帧的顶点位置坐标;
缺点:带来收缩和扭结现象,尤其对于刚体旋转时表现明显。
(2)内在形状插值算法
优点:能在一定程度上避免形状插值中出现的收缩和纽结现象;
缺点:不能处理曲线形状,得到的最终多边形通常是不封闭的;当源和目标多边形中包含短边时,由于计算短边的方向不稳定,中间帧多边形有可能产生较严重的畸变。
(3)仿射变换插值算法
可应用到多边形的所有顶点对,我们得到给定多边形的中间帧多边形。这种插值方法可处理包括平移、旋转、比例缩放和剪切变换在内的所有的仿射变换。
结合上述几种插值算法的对比分析可知,选用仿射变换插值算法较适合对于图片动画的显示,由于对于图片通常会对曲线进行处理,而仿射变换插值法恰恰适用于曲线的情况,符合实际的需求。
综上,在本发明所提供的图片动画的实现方法中,仅在图片中需要做动画效果的部分添加网格点,通过移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,后续仅需要连续播放n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,就可实现图片动画的显示,整个制作过程仅需一张图片,减少了其在动画文件中所占用的空间,从而获得了更加逼真,生动的动画效果。
上述描述仅是对本发明较佳实施例的描述,并非对本发明范围的任何限定,本发明领域的普通技术人员根据上述揭示内容做的任何变更、修饰,均属于权利要求书的保护范围。

Claims (7)

1.一种图片动画的实现方法,其特征在于,包括:
将图片导入2D骨骼动画编辑器,并在所述图片中需要做动画效果的部分添加网格点;
设定所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到对应每个图片状态的关键帧;
移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态,以得到n个关键帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式;
利用插值算法根据所述n个关键帧的顶点位置坐标,计算n个关键帧中每相邻两个关键帧之间过渡的中间帧的顶点位置坐标;
根据所述n个关键帧的顶点位置坐标、所有中间帧的顶点位置坐标及导入2D骨骼动画编辑器的所述图片的图片大小及图片像素格式,实现图片动画显示效果。
2.如权利要求1所述的图片动画的实现方法,其特征在于,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态的过程,所述2D骨骼动画编辑器生成了json文件,所述json文件记录了所述n个关键帧的顶点位置坐标。
3.如权利要求1所述的图片动画的实现方法,其特征在于,移动所述网格点以使所述图片变形顺次历经所述图片在所述2D骨骼动画编辑器中时间轴上的n个状态的过程,所述2D骨骼动画编辑器还生成了atlas文件,所述atlas文件记录所述图片动画所需的导入2D骨骼动画编辑器的所述图片的图片大小及像素格式。
4.如权利要求1所述的图片动画的实现方法,其特征在于,通过调整所述2D骨骼动画编辑器中的贝塞尔曲线以控制所述n个关键帧中相邻两个关键帧之间的差值,以实现各关键帧之间的平滑过渡。
5.如权利要求1~4中任一项所述的图片动画的实现方法,其特征在于,所述插值算法为线性插值算法。
6.如权利要求1~4中任一项所述的图片动画的实现方法,其特征在于,所述插值算法为内在形状插值算法。
7.如权利要求1~4中任一项所述的图片动画的实现方法,其特征在于,所述插值算法为仿射变换插值算法。
CN201510106792.5A 2015-03-10 2015-03-10 一种图片动画的实现方法 Pending CN104700444A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510106792.5A CN104700444A (zh) 2015-03-10 2015-03-10 一种图片动画的实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510106792.5A CN104700444A (zh) 2015-03-10 2015-03-10 一种图片动画的实现方法

Publications (1)

Publication Number Publication Date
CN104700444A true CN104700444A (zh) 2015-06-10

Family

ID=53347526

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510106792.5A Pending CN104700444A (zh) 2015-03-10 2015-03-10 一种图片动画的实现方法

Country Status (1)

Country Link
CN (1) CN104700444A (zh)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105427365A (zh) * 2015-11-26 2016-03-23 盛趣信息技术(上海)有限公司 动画实现方法、系统以及动画更新方法
CN105447902A (zh) * 2016-01-15 2016-03-30 网易(杭州)网络有限公司 动画处理方法和装置
CN105825537A (zh) * 2015-11-30 2016-08-03 维沃移动通信有限公司 一种生成动画曲线的方法及终端
CN106846444A (zh) * 2017-04-07 2017-06-13 成都东珑科技有限公司 一种动画制作系统及制作动画的方法
CN108668049A (zh) * 2017-03-27 2018-10-16 吴东辉 基于分散像素的图像显示方法、显示单元及系统
CN110458928A (zh) * 2019-08-12 2019-11-15 苏州悠优互娱文化传媒有限公司 基于unity3d的AR动画生成方法、装置、介质
CN111402369A (zh) * 2020-03-10 2020-07-10 京东数字科技控股有限公司 互动广告的处理方法、装置、终端设备及存储介质
CN112354186A (zh) * 2020-11-10 2021-02-12 网易(杭州)网络有限公司 游戏动画模型控制方法、装置、电子设备以及存储介质
CN112819927A (zh) * 2021-02-04 2021-05-18 上海哔哩哔哩科技有限公司 基于图片的视频生成方法、装置
CN113018855A (zh) * 2021-03-26 2021-06-25 完美世界(北京)软件科技发展有限公司 一种虚拟角色的动作切换方法和装置
CN113438541A (zh) * 2021-07-21 2021-09-24 北京优锘科技有限公司 一种视点动画生成方法、装置、设备和存储介质
CN113761965A (zh) * 2020-06-01 2021-12-07 北京达佳互联信息技术有限公司 动作捕捉方法、装置、电子设备和存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070268293A1 (en) * 2006-05-19 2007-11-22 Erick Miller Musculo-skeletal shape skinning
CN101079154A (zh) * 2007-03-02 2007-11-28 腾讯科技(深圳)有限公司 一种角色动画实现方法及系统
CN102169594A (zh) * 2010-02-26 2011-08-31 新奥特(北京)视频技术有限公司 一种实现任意区域渐变动画的方法和装置
CN104021584A (zh) * 2014-06-25 2014-09-03 无锡梵天信息技术股份有限公司 一种骨骼蒙皮动画的实现方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070268293A1 (en) * 2006-05-19 2007-11-22 Erick Miller Musculo-skeletal shape skinning
CN101079154A (zh) * 2007-03-02 2007-11-28 腾讯科技(深圳)有限公司 一种角色动画实现方法及系统
CN102169594A (zh) * 2010-02-26 2011-08-31 新奥特(北京)视频技术有限公司 一种实现任意区域渐变动画的方法和装置
CN104021584A (zh) * 2014-06-25 2014-09-03 无锡梵天信息技术股份有限公司 一种骨骼蒙皮动画的实现方法

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
CGWELL论坛: "Spine 用自由变形(FFD)_实现乳摇", 《HTTP://BBS.CGWELL.COM/FORUM.PHP?MOD=VIEWTHREAD&TID=8426&EXTRA=PAGE=1》 *
CSDN博客: "深入Spine功能 Spine Indepth Features", 《HTTP://BLOG.CSDN.NET/JX520/ARTICLE/DETAILS/21475119》 *
CSDN博客: "骨骼动画 Spine的使用(With Cocos2d-x)", 《HTTP://BLOG.CSDN.NET/LOVE_HOT_GIRL/ARTICLE/DETAILS/10113661》 *
QQ群论坛: "QQ群论坛:Spine 2D骨骼动画 教程整理 归档于此", 《HTTP://QGC.QQ.COM/222369324/T/2》 *

Cited By (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105427365A (zh) * 2015-11-26 2016-03-23 盛趣信息技术(上海)有限公司 动画实现方法、系统以及动画更新方法
CN105825537A (zh) * 2015-11-30 2016-08-03 维沃移动通信有限公司 一种生成动画曲线的方法及终端
CN105447902A (zh) * 2016-01-15 2016-03-30 网易(杭州)网络有限公司 动画处理方法和装置
CN105447902B (zh) * 2016-01-15 2018-06-22 网易(杭州)网络有限公司 动画处理方法和装置
CN108668049A (zh) * 2017-03-27 2018-10-16 吴东辉 基于分散像素的图像显示方法、显示单元及系统
CN108668049B (zh) * 2017-03-27 2024-05-10 深圳市景华显示科技有限公司 基于分散像素的图像显示方法、显示单元及系统
CN106846444B (zh) * 2017-04-07 2020-09-01 成都东珑科技有限公司 一种动画制作系统及制作动画的方法
CN106846444A (zh) * 2017-04-07 2017-06-13 成都东珑科技有限公司 一种动画制作系统及制作动画的方法
CN110458928A (zh) * 2019-08-12 2019-11-15 苏州悠优互娱文化传媒有限公司 基于unity3d的AR动画生成方法、装置、介质
CN111402369A (zh) * 2020-03-10 2020-07-10 京东数字科技控股有限公司 互动广告的处理方法、装置、终端设备及存储介质
CN111402369B (zh) * 2020-03-10 2023-11-03 京东科技控股股份有限公司 互动广告的处理方法、装置、终端设备及存储介质
CN113761965B (zh) * 2020-06-01 2024-03-12 北京达佳互联信息技术有限公司 动作捕捉方法、装置、电子设备和存储介质
CN113761965A (zh) * 2020-06-01 2021-12-07 北京达佳互联信息技术有限公司 动作捕捉方法、装置、电子设备和存储介质
CN112354186A (zh) * 2020-11-10 2021-02-12 网易(杭州)网络有限公司 游戏动画模型控制方法、装置、电子设备以及存储介质
CN112819927A (zh) * 2021-02-04 2021-05-18 上海哔哩哔哩科技有限公司 基于图片的视频生成方法、装置
WO2022166595A1 (zh) * 2021-02-04 2022-08-11 上海哔哩哔哩科技有限公司 基于图片的视频生成方法、装置
CN113018855B (zh) * 2021-03-26 2022-07-01 完美世界(北京)软件科技发展有限公司 一种虚拟角色的动作切换方法和装置
CN113018855A (zh) * 2021-03-26 2021-06-25 完美世界(北京)软件科技发展有限公司 一种虚拟角色的动作切换方法和装置
CN113438541B (zh) * 2021-07-21 2022-10-11 北京优锘科技有限公司 一种视点动画生成方法、装置、设备和存储介质
CN113438541A (zh) * 2021-07-21 2021-09-24 北京优锘科技有限公司 一种视点动画生成方法、装置、设备和存储介质

Similar Documents

Publication Publication Date Title
CN104700444A (zh) 一种图片动画的实现方法
US10579908B2 (en) Machine-learning based technique for fast image enhancement
CN104123742A (zh) 一种将静态漫画图片转化为二维动画的方法和播放器
CN107590791B (zh) 图像增强方法以及图像处理装置
US8571309B2 (en) System and method of image upsampling
US20150170404A1 (en) Virtual View Generating Method and Apparatus
CN106649541A (zh) 一种动画播放、生成方法及装置
CN103985085A (zh) 图像超分辨率放大的方法和装置
CN109584366B (zh) 一种地形渲染方法、装置、设备及可读存储介质
CN110363837B (zh) 游戏中纹理图像的处理方法及装置、电子设备、存储介质
KR20190031283A (ko) 파노라마 비디오 압축 방법 및 장치
US10269155B1 (en) Image artifact masking
CN103810672B (zh) 图像模糊处理方法及图像模糊处理装置
CN105139337A (zh) 一种图片生成方法及装置
CN103632390A (zh) 一种利用d3d技术实现裸眼3d动画实时制作的方法
WO2018113218A1 (zh) 一种拼接墙显示方法、装置及系统
JP2016529752A (ja) 密な動き場を介する下位のビデオシーケンスへの画像編集伝達
CN105578035A (zh) 一种图像处理方法及电子设备
JP2013097782A (ja) 画像ワープ方法及びそのコンピュータプログラム製品
US11341611B2 (en) Automatic generation of perceived real depth animation
CN102572219A (zh) 移动终端及其图像处理方法
CN106909263A (zh) 三维图像的交互展示方法及系统
CN111010605A (zh) 一种视频画中画窗口的显示方法
CN102169594A (zh) 一种实现任意区域渐变动画的方法和装置
US20220138906A1 (en) Image Processing Method, Apparatus, and Device

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20150610

RJ01 Rejection of invention patent application after publication