09、Action_1(帧与延时动作)
来源:互联网 发布:淘宝云客服在哪里找 编辑:程序博客网 时间:2024/06/05 10:21
帧的概念
帧是动画或影响的最基本单位。每一帧是一个画面,连续的多帧画面组合在一起播放就形成了影响,就好像电影胶卷的一格。而帧频就是一秒内帧的数量,通常用fps(Frames Per Second)表示,帧频越高,画面就越流畅。
一般电影为一秒24帧,而游戏则一般以60fps作为最高帧频,因为60fps已经是人眼正常识别的最高频率了,设置再高的频率只会造成性能浪费。相反,如果游戏画面的帧频低于30fps,我们就会感觉到不流畅,也就是所谓的“卡”。游戏流畅度跟游戏的设计好坏还有手机的硬件水平都有关系。
Cocos2d-js中,也有帧频这个概念,在项目文件project.json中就有帧频的设置,一般默认是60。如下 :
(以上文案出自Cocos2d-js游戏开发之旅)
延时动作
延时动作代表精灵由一个状态变化到另外一个状态,这个变化的过程是有一个过渡时间的。如css3的animation。
移动精灵
cc.MoveTo :移动到绝对坐标处
cc.MoveBy :以自身为原点,移动到对应坐标
例子
var sprite = new cc.Sprite(sprite.png);sprite.attr({ x:0, y:0 });this.addChild(sprite);var moveTo = new cc.MoveTo(2, cc.p(600, 220)); //参数意义 :过渡时间、坐标sprite.runAction(moveTo);
跳跃
cc.JumpTo :跳跃到绝对坐标处
cc.JumpBy :以自身为原点,跳跃到对应坐标
例子
var sprite = new cc.Sprite(sprite.png);sprite.attr({ x:200, y:200 });this.addChild(sprite);var jumpTo = new cc.JumpTo(2, cc.p(600, 220), 50, 5); //参数意义 :过渡时间、坐标、跳跃高度、跳跃次数sprite.runAction(jumpTo);
cc.ScaleTo :精灵的宽高 x 缩放值
cc.ScaleBy :精灵的宽高 x 倍率
例子
var sprite = new cc.Sprite(sprite.png)sprite.attr({ x:200, y:200 })this.addChild(sprite);var scaleTo = new cc.ScaleTo(2, 2); //参数意义 :过渡时间,缩放值。(值<1为缩小,值=1为不缩放,值>1为放大)sprite.runAction(scaleTo);
cc.ScaleTo与cc.ScaleBy的区别
如果精灵没有设置setScale函数或者scale属性,那么ScaleTo 与 ScaleBy并无区别。但是如果精灵设置了,则cc.ScaleTo是缩放到指定值,而cc.ScaleBy则是目前精灵的宽高x 的倍率。
例子
//精灵1var sprite1 = new cc.Sprite(sprite.png);sprite1.attr({x:200, y:220});sprite1.setScale(2.0);this.addChild(sprite1);var scaleTo = new cc.ScaleTo(2, 1);sprite1.runAction(scaleTo);//精灵2var sprite2 = new cc.Sprite(sprite.png);sprite2.attr({x:200, y:220});sprite2.setScale(2.0); this.addChild(sprite2);var scaleBy = new cc.ScaleBy(2, 1);sprite2.runAction(scaleBy);
运行效果 :
(左边是精灵1、右边是精灵2)
精灵1是缩小一倍,所以宽和高都缩小了一倍。而精灵2是以自己的宽高在乘以1倍,所以宽高并无变化。
旋转
cc.RotateTo :旋转的时候,选择最短的路径进行旋转。所以有时候会逆时针旋转
cc.RotateBy :永远都是顺时针旋转
例子
var sprite = new cc.Sprite(sprite.png);sprite.attr({x:200,y:220});this.addChild(sprite);var rotate1 = new cc.RotateTo(2, 350);//参数意义 :过度时间,旋转角度。(逆时针旋转,因为0°到350°最短的路径是从360°转到350°)var rotate2 = new cc.RotateBy(2, 350);//参数意义 :过度时间,旋转角度。(顺时针选择)sprite.runAction(rotate2);
闪烁
cc.Blink :闪烁
例子
var sprite = new cc.Sprite(sprite.png);sprite.attr({x : 200, y : 220});this.addChild(sprite);var bk = new cc.Blink(2, 10); //参数意义 :过渡时间,闪烁次数sprite.runAction(bk);
色调
cc.TintTo :渐变到某个颜色
cc.TintBy :以自身的颜色 + 指定的颜色, 混合到某个颜色
例子
var sprite = new cc.Sprite(sprite.png);sprite.attr({x:200,y:220});this.addChild(sprite);var tintTo = new cc.TintTo (3, 255,0,0); //参数意义 :过渡时间, R、G、B颜色值sprite.runAction(tintTo);
cc.FadeTo : 在一定的时间内设置精灵的透明度
var sprite = new cc.Sprite(sprite.png);sprite.attr({x:200, y:220});this.addChild(sprite);var fadeOut = new cc.FadeOut(3); //参数意义 :过渡时间 var fadeIn = new cc.FadeIn(3); //参数意义 :过渡时间var fadeTo = new cc.FadeTo(3, 128) //参数意义 : 过渡时间, 透明度sprite.runAction(fadeOut);
var sprite = new cc.Sprite('sprite.png'); sprite.attr({x:220, y : 200}); this.addChild(sprite); var bezier = [cc.p(220, 200), cc.p(400, 400), cc.p(600, 200)]; //写好曲线的坐标点,这里的坐标点至少需要3个 var bezierTo = new cc.BezierTo(1, bezier); //参数意义 :过渡时间,坐标点对象 sprite.runAction(bezierTo);
- 09、Action_1(帧与延时动作)
- Cocos2d-x学习:动作Action(延时类动作)
- cocos2d-x基础知识(二)瞬时动作/延时动作
- cocos2d-x——CCActionInterval(延时动作)例子
- cocos2d-x——CCActionInterval(延时动作)例子
- Cocos2d-x学习(二):动作Action(延时类动作)
- Cocos2d-x学习(二):动作Action(延时类动作)
- cocos2d-x学习(二):动作Action(延时类动作)
- Cocos2d-x学习:动作Action(延时类动作)[2.0.1]
- cocos2d-x 瞬时动作/延时动作
- (八)动画与动作
- 【iOS-Cocos2d游戏开发】Cocos2d-iPhone动作Action-延时动作
- 【iOS-Cocos2d游戏开发】Cocos2d-iPhone动作Action-延时动作
- cocos2d-android基础——瞬时动作和延时动作
- cocos2dx之如何延时当前动作
- 牧师与魔鬼(动作分离版)
- 09、Action_2(组合动作)
- 09、Action_3(重复动作)
- wpa_supplicnat之eloop_run分析
- 配置java环境变量
- JFinal 中使用 Dubbo —— 3 集群
- Linux 源码系列之可变参数列表实现
- Adafruit的樹莓派教程第十一課:DS18B20溫度傳感器
- 09、Action_1(帧与延时动作)
- IO流
- svn常用命令
- 关于烂代码的那些事(中)
- CentOS yum 源的配置与使用
- Java中Iterator迭代器设计原理
- IntelliJ IDEA 默认显示行号
- hadoop
- POJ 3617 Best Cow Line