开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1701

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2951|回复: 24

[蛮牛干货] DC老湿的私房菜 之 细说各种Tween系列一

[复制链接]  [移动端链接]
抢楼 抢楼 本帖为抢楼帖,欢迎抢楼! 
6蛮牛粉丝
1038/1500
排名
3249
昨日变化
5

365

主题

378

帖子

1038

积分

Rank: 6Rank: 6Rank: 6

UID
16254
好友
12
蛮牛币
2355
威望
0
注册时间
2014-3-3
在线时间
67 小时
最后登录
2016-11-10
发表于 2015-3-9 21:52:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
原文地址:http://url.cn/SFM02J


可能,你才刚开始研究iTween,

就突然听说有个更好用的HOTween,

赶忙跑去一看究竟,结果网页才打开,

赫然发现,人家都出到第二代了,名字都改成DOTween了,

还耳闻有LeanTween的存在,

然后又听别人讲GoKit很酷,网上搜着搜着竟然又搜出了DFTween...

……

也许有人会抱怨:尼玛,学都学不过来,时间不够用啊,有木有~

这么多tween到底哪个是哪个呀,哪个效率更高,哪个写起来更方面,哪个学习成本更低,哪个更屌,哪个更逗比呀,布拉不啦不啦不啦...


...吐槽过后,点根烟,坐着想想。



好像我们总是那个与时代潮流脱节的人,

打个比方来说,就好比台湾著名绘本画家——几米老师说的那样,

“当你喜欢我的时候,我不喜欢你;当你爱上我的时候,我喜欢你;当你离开我的时候,我却爱上你。是你走得太快,还是我跟不上你的脚步?...”

感叹人生,那些年,错过的太多...

亲爱的朋友,不要伤感,DC老湿会携手带你走出困惑、走出纠结。


在国内网上你也许能搜索到的只有部分的iTween视频教程,HOTween的文字教程略老,更别说其第二代DOTween、以及其他的你有可能听都没有听过的插件。


别担心,其实既然是同一类的插件,那么一定万变不离其宗。

我从今天开始会带你领略所有主流的Tween插件,从整体性全局的角度来对Tween有个全面的认识。


        本讲分为三部分:

                一、tween的前世今生;

                二、脚本实战;

                三、素材大放送与课后挑战



【一、Tween的前世今生】


第一个问题:什么是Tween?


我不想在一开始就给读者们灌输概念性的东西。

这样,

我会cosplay一把名侦探柯南,来思考问题、去搜索资料、找到线索、并得出结论

233055f65942622778.jpg


下面图片可能会比较多,第一部分大概有9张图,图片里信息量看似略大,实则别的你都可以不用管,只用看我红框标出强调的部分就可以了。

那么准备好了吗,我们开始了,


首先,

在谷歌上搜索,第一个是医学名词,好像不是我们要找的对象...如图1,

----------------------------------------------------------------------------------------------------

1.png

----------------------------------------------------------------------------------------------------

                                                                            图1



那就鼠标滚轮往下,好像看到几张曲线图,像是(运动)轨迹方面,如图2

----------------------------------------------------------------------------------------------------

2.png

----------------------------------------------------------------------------------------------------                                                                              图2


然后我们再回到国内的网上搜索,好像内容也差不多,不过我们发现了条线索

“prep.在两者之间,在...中间”,如图3红框部分,

----------------------------------------------------------------------------------------------------

3.png

----------------------------------------------------------------------------------------------------

                                                                            图3


慢着,上图红框部分,这让我们联想到一个小学就接触过的单词——between:在...(二者)之间


230117d32101395008.jpg


好的,气氛上好像是摸到点轮廓了,再继续搜索,点进百度百科,在条目2的位置发现了个“关于Tween类”,没错,虽然是flash方面的东东,但是至少是已经贴近游戏引擎插件方面了,比化学药剂方面的解释要强多了啊,有木有,泪流满面,如图4。

----------------------------------------------------------------------------------------------------

4.png

----------------------------------------------------------------------------------------------------

                                                                            图4


接着,药不能停……呃,不对,是手不能停。我们来把目光聚焦一下,其Tween类,然后你会发现以下关键字,如图5所示

----------------------------------------------------------------------------------------------------

5.png

----------------------------------------------------------------------------------------------------

                                                                            图5


关键词:补间动画、移动、调整大小、谈入谈出、各种缓动,过程动画加速、减速,事件处理调用等。


也许有人会问:等等,老湿,我们在讲Unity的各种Tween的插件,你和我谈flash的Tween类,你是要闹哪样?


我会说:别急,正如本老湿前面提到的“万变不离其宗”,我们讲不是“万剑归宗”,而是“万Tween归宗”。

为什么在暂时搜不到有关Unity的Tween的概念的时候,我会转而找到flash,因为如图6、7的红框部分

----------------------------------------------------------------------------------------------------

2216215573a5592877.png

----------------------------------------------------------------------------------------------------

                                                                            图6

----------------------------------------------------------------------------------------------------

221643b41df1746120.png

----------------------------------------------------------------------------------------------------

                                                                            图7


可以看到flash是1995年诞生,unity是2005年诞生的。

虽然作为游戏引擎unity3d比flash要先进很多。

但是在做2D动画缓动方面,姜还是老的辣,flash的经验肯定比unity要多太多,可以说这方面flash是unity的爸爸。

所以在作为unity插件的Tween的概念方面是可以部分参考flash里的Tween的。



然后根据目前掌握的线索,我们可以大致得出,

所谓的Tween:

是做补间动画用的,例如对物体的位移、大小设置初始值和结束值,然后做些动画效果,还能进行事件回调等。



我想,也许你会问我:什么是补间动画?,如图8

----------------------------------------------------------------------------------------------------

221904899ca3724102.png

----------------------------------------------------------------------------------------------------

                                                                            图8



再根据目前所掌握的线索:插入、初始值、结束值、动画曲线、数学函数

2331335937a4237076.jpg

这让我闪念到了一个数学概念:插值,如图9

----------------------------------------------------------------------------------------------------

9.png

----------------------------------------------------------------------------------------------------

                                                                            图9


如果我没猜错的话,这句概念性的描述你是不是看得云里雾里?没关系,

该解释说人话就是:两个独立的值(初始值、结束值)也可以是多个独立的值,如在曲线里面,就是若干个分离的点,然后将这些点连接成(补充完整成)一条曲线。



当然,这里要讲解下此插值非彼差值,概念不能搞混,

差值:相减所得到的值

插值:用来填充(补充)图像变换(做动画)时像素之间的空隙。



我们讲插值也不是什么新鲜的概念了,

我国早在公元前6世纪隋唐时期,著名经济学家、天文学家刘焯就已将等距二次差值用于天文计算。 23520557d8fe364240.png

而国外,到17世纪之后,才有牛顿、拉格朗日分别讨论了等距和非等距的一般差值公式。




ok,说了这么多,也无非就是要在开头和大伙扯扯Tween的前世今生~

我也就点到为止了,这方面要展开来说三天三夜都说不完~~


下面,


就让我们快速进入正题,Unity里的各种Tween插件



【二、脚本实战】


首先,

我们在其官网里的AssetStore上面搜索tween,可以看到,目前基本上有6种免费的、用户量多且广受好评的tween插件,分别是:

DFTweenLite、

HOTween、

GoKit Tween Library、

DOTween(HOTween v2)、

iTween、

LeanTween

如图10所示

----------------------------------------------------------------------------------------------------

0.png

----------------------------------------------------------------------------------------------------

                                                                            图10

面对上面六大Tween插件,

如果你只是一个一个的去看其官网,再从头到尾的读其文档,东玩玩例子西聊聊qq刷刷微博什么的,我敢保证,没一会儿工夫,你就走神了。(还有那种一看到英文就头大,只会知难而退的童鞋,那我也无话可说了,活该技术比别人落后)


这也是中国式教育的一大败笔之处——学无所用!

你还记得你中学学过的数理化、地理、历史、政治么?

你还记得你大学里是怎么混日子,如何学你的专业,如何应付期末考核的么?

当然,我也不是一棍子打死全部,

但我敢肯定95%以上的人,读到这里都会反思的说不出话来。


学习不仅仅是照本宣科,是抡起家伙真刀真枪的先干了再说


就好比要习得一项技能,光看秘籍,光说不练是没有用的,也练不成的。一定要自己动手去认认真真做过,才能有更深刻的体会,才会有自己的疑问,才会有自己的思考,才能逐步掌握所学所练之根本。


在下载完这些插件并导入之后,

2342240d4e65726973.png


我们就来动手做一个例子,如图11

----------------------------------------------------------------------------------------------------

234325d68062118948.gif

----------------------------------------------------------------------------------------------------

                                                                            图11


例子需求分析:先让物体向上位移到一定的位置之后,做淡出,最后销毁物体本身。


我们就以完成这一个简单的小功能来进行,

六大热门Tween之初体验~

美其名曰:hello all tweens~


场景,正如你所见到的,很简单,一个主相机Main Camera、一个Cube、一个平行光Directional light


既然是六个插件,那我们就先用最笨的方法,写六个测试脚本,统统挂在Cube上面,用脚本禁用启用的方式,

0004375d6dcf110530.png

来观看运行效果。


下面,由于发帖功能的局限,我就直接截图6段代码,给各位看看,这些tween在处理位移、淡出做动画的时候,脚本是如何写的,

下图的12~17分别对应的调用的是,LeanTween、HOTween、DOTween、iTween、GoKit、DFTween

----------------------------------------------------------------------------------------------------

0013448d443e252315.png

                                                                            图12


13.png

                                                                            图13


14.png

                                                                            图14


15.png

                                                                            图15


16.png

                                                                            图16


17.png

                                                                            图17

----------------------------------------------------------------------------------------------------

对于上述代码都看不懂的童鞋,

我会说,别担心,

如果你仔细的看完了前2个的代码和其对应的注解,那么再往下看,你其实会发现很多相似处,

比如position、delay、easing、onComplete、alpha等等。


那么如果你已经看懂了的话,那就请你最小化浏览器,然后打开Unity,自己动手来做一做,来加深印象,并看看有哪里是一时过不去的坎。


当然,对于稍微熟练,技艺更高一筹的小伙伴来说,别着急,马上进入到我们的素材大放送与作业挑战环节。


【三、素材大放送与课后挑战】


新建文本文档.txt (48 Bytes, 下载次数: 225)

评分

参与人数 1鲜花 +5 收起 理由
sanguojixuan + 5 赞一个!

查看全部评分

本帖被以下淘专辑推荐:


回复

使用道具 举报

4四处流浪
467/500
排名
5235
昨日变化
5

1

主题

43

帖子

467

积分

Rank: 4

UID
44052
好友
0
蛮牛币
530
威望
0
注册时间
2014-9-8
在线时间
242 小时
最后登录
2017-2-1
发表于 2015-3-10 08:46:48 | 显示全部楼层
没有结论的横评都是耍流氓

回复

使用道具 举报

排名
2402
昨日变化
1

1

主题

92

帖子

822

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
12772
好友
2
蛮牛币
958
威望
0
注册时间
2014-1-17
在线时间
305 小时
最后登录
2017-3-27
发表于 2015-3-10 14:43:23 | 显示全部楼层
耍流氓

回复

使用道具 举报

4四处流浪
457/500
排名
6098
昨日变化
6

3

主题

33

帖子

457

积分

Rank: 4

UID
70373
好友
0
蛮牛币
995
威望
0
注册时间
2015-1-22
在线时间
274 小时
最后登录
2017-4-7
发表于 2015-3-10 15:53:15 | 显示全部楼层
耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓耍流氓

回复

使用道具 举报

4四处流浪
470/500
排名
3595
昨日变化
3

1

主题

58

帖子

470

积分

Rank: 4

UID
1770
好友
0
蛮牛币
806
威望
0
注册时间
2013-8-9
在线时间
125 小时
最后登录
2015-9-2

社区QQ达人

发表于 2015-3-10 16:04:04 | 显示全部楼层
为长文点赞,为没有结论而惋惜

回复

使用道具 举报

5熟悉之中
910/1000
排名
2147
昨日变化
2

1

主题

267

帖子

910

积分

Rank: 5Rank: 5

UID
24688
好友
0
蛮牛币
1035
威望
0
注册时间
2014-5-12
在线时间
169 小时
最后登录
2015-6-23
QQ
发表于 2015-3-10 16:19:53 | 显示全部楼层
流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓流氓

回复

使用道具 举报

5熟悉之中
951/1000
排名
1984
昨日变化
4

0

主题

202

帖子

951

积分

Rank: 5Rank: 5

UID
54765
好友
8
蛮牛币
1683
威望
0
注册时间
2014-11-11
在线时间
245 小时
最后登录
2016-12-2
QQ
发表于 2015-3-10 17:22:22 | 显示全部楼层
没有结论的长文就是耍流氓?啊,我还是涨姿势了

回复

使用道具 举报

7日久生情
1828/5000
排名
664
昨日变化
4

0

主题

119

帖子

1828

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
63538
好友
1
蛮牛币
1681
威望
0
注册时间
2014-12-25
在线时间
709 小时
最后登录
2017-5-25
发表于 2015-3-10 17:24:19 | 显示全部楼层
呃。。。被坑了。。。所以结论是啥。。。。

回复

使用道具 举报

排名
2046
昨日变化
2

30

主题

287

帖子

2204

积分

Rank: 9Rank: 9Rank: 9

UID
3006
好友
62
蛮牛币
1728
威望
0
注册时间
2013-9-2
在线时间
363 小时
最后登录
2017-3-6

专栏作家社区QQ达人认证开发者

发表于 2015-3-10 18:12:33 | 显示全部楼层
写的不错,惟妙惟肖,赞之。

HOTween用过几次,非常不错,解决了UGUI做简单动画的困扰。


回复

使用道具 举报

排名
2046
昨日变化
2

30

主题

287

帖子

2204

积分

Rank: 9Rank: 9Rank: 9

UID
3006
好友
62
蛮牛币
1728
威望
0
注册时间
2013-9-2
在线时间
363 小时
最后登录
2017-3-6

专栏作家社区QQ达人认证开发者

发表于 2015-3-10 18:13:54 | 显示全部楼层
王文刚 发表于 2015-3-10 18:12
写的不错,惟妙惟肖,赞之。

HOTween用过几次,非常不错,解决了UGUI做简单动画的困扰。

首次在蛮牛社区看到分享资源,而不要蛮牛币的,楼主好人啊。

回复

使用道具 举报

排名
1927
昨日变化

0

主题

88

帖子

813

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
12013
好友
1
蛮牛币
47
威望
0
注册时间
2014-1-7
在线时间
207 小时
最后登录
2017-3-30
发表于 2015-3-10 20:29:02 | 显示全部楼层
支持个,这又不是评测文,好好看看不同tween的用法就是了

回复

使用道具 举报

7日久生情
3073/5000
排名
96
昨日变化
1

3

主题

482

帖子

3073

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
32341
好友
2
蛮牛币
8081
威望
0
注册时间
2014-7-3
在线时间
732 小时
最后登录
2017-4-9
发表于 2015-3-11 11:41:26 | 显示全部楼层
好多流氓,我是来打酱油的

回复

使用道具 举报

5熟悉之中
578/1000
排名
2649
昨日变化
1

0

主题

39

帖子

578

积分

Rank: 5Rank: 5

UID
38406
好友
0
蛮牛币
653
威望
0
注册时间
2014-8-6
在线时间
204 小时
最后登录
2016-2-17
发表于 2015-3-11 12:44:21 | 显示全部楼层
楼主好人,应该再出一贴把结论贴一下

回复

使用道具 举报

排名
1476
昨日变化
2

12

主题

139

帖子

1597

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
2416
好友
26
蛮牛币
4001
威望
0
注册时间
2013-8-22
在线时间
383 小时
最后登录
2017-4-16

社区QQ达人

发表于 2015-3-11 19:34:36 | 显示全部楼层
wizardc 发表于 2015-3-11 12:44
楼主好人,应该再出一贴把结论贴一下

结论:简单来讲,tween就是调节插值运动曲线的一个库(曲线即路径)

回复

使用道具 举报

6蛮牛粉丝
1106/1500
排名
1486
昨日变化
2

0

主题

140

帖子

1106

积分

Rank: 6Rank: 6Rank: 6

UID
36222
好友
0
蛮牛币
890
威望
0
注册时间
2014-7-25
在线时间
340 小时
最后登录
2017-5-25
发表于 2015-3-12 14:12:53 | 显示全部楼层
天之道 发表于 2015-3-11 19:34
结论:简单来讲,tween就是调节插值运动曲线的一个库(曲线即路径)

DC老湿怎么没在蛮牛发

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表