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

扫一扫,访问微社区

教程分享

关注:689

当前位置:游戏蛮牛 技术专区 教程分享

查看: 968|回复: 3

[基础知识] iTween动画包教程专题

[复制链接]  [移动端链接]
抢楼 抢楼 本帖为抢楼帖,欢迎抢楼! 
8常驻蛮牛
9851/10000
排名
479
昨日变化
3

3421

主题

3691

帖子

9851

积分

Rank: 8Rank: 8

UID
1235
好友
168
蛮牛币
187095
威望
110
注册时间
2013-7-29
在线时间
432 小时
最后登录
2016-10-9

社区QQ达人游戏蛮牛QQ群会员蛮牛妹

发表于 2015-12-14 11:00:00 | 显示全部楼层 |阅读模式

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

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

x
  简介:

  如果你还不知道iTween是什么,这里就和大家简单介绍下:iTween是由官方论坛用户pixelplacement1 (论坛名)写的一个快速动画

  实现的辅助开发脚本.也即一个动画辅助脚本类。如果你经常使用Flash AS,你就会知道Tween这个词,AS中也有很多Tween(过渡动画)

  的功能代码。

  特点:

  可能很多人不理解,既然2.6版本有了动画编辑器,为什么还需要用这个动画脚本呢?原因很简单,iTween最大的特点就是一步到位,

  即一个简单函数就能让物体实现一个完整的动画过程,非常方便,而不用通过动画编辑器(虽然更强大)来创建动画文件,再编辑曲线等。

  在制作一些基本动画时,iTween更有时效的优势.同时也更节省资源。

  安装:直接把iTween脚本拖动到你的工程任意目录即可。(一个静态类脚本而已) 最早iTween是Js脚本,目前也有c#版本

  下载地址: http://itween.pixelplacement.com/code/iTween_1_0_32_JS.zip

  基础教程1:Hello World

  复制代码

  iTween.moveTo(gameObject,{“x”:1.7, “time”:2});

  我们可以看到iTween.moveTo函数后第一个参数是需要动画的物体,gameObject即代表自身,大括号跟随着一系列的参数表,x:代表x轴移动,

  time代表这个动画需要持续的时间,也即在2s的时间内x轴运动到1.7的位置,是不是很容易理解呢 :)

  最终效果:http://itween.pixelplacement.com/unityFiles/release/helloWorld.unity3d

  基础教程2:Hello World 更深一步

  本部分设定了隐藏,您已回复过了,以下是隐藏的内容

  复制代码

[AppleScript] 纯文本查看 复制代码
  private var go : GameObject;//需要动画的游戏物体

  private var cam : GameObject;//镜头

  function Awake(){

  //赋值

  go = gameObject;

  cam = camera.main.gameObject;

  }

  function Start(){

  iTween.rotateFrom(go,{“y”:90, “time”:1.5, “transition”:“easeInExpo”});//旋转从90度到当前

  iTween.moveFrom(go,{“y”:3.5, “time”:1.5, “transition”:“easeInExpo”});//从y值3.5移动到当前

  iTween.colorTo(go,{“r”:3, “g”:.5, “b”:1.2, “time”:.3, “delay”:1.5});//颜色变化到新的值

  iTween.shake(cam,{“y”:.3, “time”:.8, “delay”:1.5});//每1.5s震动一次镜头物体

  iTween.scaleTo(go,{“y”:2, “time”:2, “delay”:2.3});//缩放到新比例

  iTween.rotateBy(go,{“x”:.5, “delay”:4.3});//每4.3s旋转0.5度

  iTween.moveTo(go,{“y”:1.2, “delay”:4.6});//移动到新位置

  iTween.moveTo(go,{“y”:0, “delay”:5.8, “transition”:“easeInExpo”});//同前解释

  iTween.shake(cam,{“y”:.3, “time”:.8, “delay”:6.8});//同前解释

  iTween.colorTo(go,{“r”:.165, “g”:.498, “b”:.729, “time”:.5, “delay”:7.6});//同前解释

  iTween.scaleTo(go,{“y”:1, “delay”:7.6});//缩放到新比例

  }


  1.回调函数

  本部分设定了隐藏,您已回复过了,以下是隐藏的内容

  回调函数 即当动画完成时那瞬间需要执行一次的一个函数 it中默认有一个onComplete函数  当动画完成时会自动执行 且你可以提供

  需要传递的一些参数 见下列代码

[AppleScript] 纯文本查看 复制代码
  private var tweenTarget : GameObject;

  var counter : GUIText;

  var count : int =0;

  function Start(){

  tweenTarget=gameObject;

  roll(“right”);//开始执行

  counter.guiText.material.color = Color.black;

  }

  private function roll(direction: String): void{

  switch(direction){

  //如果向右移

  case “right”:

  iTween.rotateBy(tweenTarget,{“z”:-.5});//旋转

  iTween.moveTo(tweenTarget,{“x”:1.7, “onComplete”:“roll”, “onCompleteParams”:“left”});//移动到   当完成动画时执行onComplete 并且传递一个参数left

  //也即相当于又这样调用了一次roll(“left”); 可以推测到  当动画完成向右之后 又开始向左了

  count+=1;

  break;

  //如果向左移   同上 当完成向左动画 则又开始向右  如此实现“乒乓”效果

  case “left”:

  iTween.rotateBy(tweenTarget,{“z”:1});

  iTween.moveTo(tweenTarget,{“x”:-1.7, “onComplete”:“roll”, “onCompleteParams”:“right”});

  count+=1;

  break;

  }

  counter.text=count.ToString() + “ Loops”;

  }


  2.Bezier贝塞尔曲线运动

  除了普通的线性运动 如MoveTo这些函数 it也支持曲线运动  其中一种常用的曲线就是bezier 如下图

  iTween动画设计包使用专题(二) - aijun980204 - 学习空间

  我们再来看在it中如何使用曲线

[AppleScript] 纯文本查看 复制代码
  function Start()

  {

  iTween.moveToBezier(gameObject,{“time”:3, “transition”:“easeInOutQuint”, “bezier”:[Vector3(0,1.5,0), Vector3(0,0,1.5), Vector3(0,-1.5,3), Vector3(1.5,0,3), Vector3(1.5,0,0), Vector3(-1.5,0,0)]});

  }


  可以看到  让物体跟随曲线运动.第一个参数指定当前物体运动,接下来是过渡方式:easeInOut 是一种起点和终点平滑过渡的方式 之后专题会介绍这些相关参数

  再后我们看到共指定了6个向量点,需要记住参数是成双的即每个定点需要匹配一个控制点 才能定义好这条曲线。上面共有3个顶点,加3个这些定点的控制点。

  如果你对bezier曲线还没有概念,可以直接用代码测试效果。

我是一朵内心长满小碎花的女汉子!
回复

使用道具 举报

7日久生情
1578/5000
排名
851
昨日变化
1

0

主题

119

帖子

1578

积分

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

UID
9323
好友
0
蛮牛币
3103
威望
0
注册时间
2013-12-1
在线时间
503 小时
最后登录
2017-10-18
发表于 2015-12-14 22:52:56 来自Mobile--- | 显示全部楼层
很详细的解说!!!不错,支持!!!!!!

回复

使用道具 举报

3偶尔光临
243/300
排名
7509
昨日变化
8

2

主题

88

帖子

243

积分

Rank: 3Rank: 3Rank: 3

UID
54551
好友
2
蛮牛币
447
威望
0
注册时间
2014-11-10
在线时间
31 小时
最后登录
2016-3-28
QQ
发表于 2015-12-19 09:36:33 | 显示全部楼层
非常好的解说, 谢谢了哦, 收藏先

回复

使用道具 举报

5熟悉之中
970/1000
排名
3913
昨日变化
25

12

主题

508

帖子

970

积分

Rank: 5Rank: 5

UID
206456
好友
1
蛮牛币
1995
威望
0
注册时间
2017-2-14
在线时间
222 小时
最后登录
2017-10-18
发表于 2017-3-29 17:25:09 | 显示全部楼层
{:86:}{:86:}

回复

使用道具 举报

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

本版积分规则

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