简单的自动翻牌效果

1.准备素材(正、背面牌各一张)

2.cocos creator创建一个Sprite(width:200,height:120),SpriteFrame默认是背面牌

3.创建一个animate动画,名为fanpai:

image1.png

(1)图中poker2为牌的Sprite,选中后,点击【add property】添加width;

(2)图中时间轴,分别在0:00、0:10、0:20设置Sprite的width为200、40、200,也就是说在动画一开始到0.1秒width缩小到40,然后又增长到200,这样就多了一个视觉上翻牌的感觉。

4.接下来是换牌,正面换为背面牌

var anim = this.poker2.node.getComponent(cc.Animation);

anim.play('fanpai');//播放名为fanpai动画

  this.schedule(function(){

  var SF = this.poker2.getComponent(cc.Sprite);

  SF.spriteFrame = this.frontBgSF;//frontBgSF 是正面牌的SpriteFrame

},0.1,0);//0.1秒后把poker2的SpriteFrame换成正面牌

过程:0秒的时候是背面牌,0.1秒的时候width缩小到40,此时牌为背面牌,0.2秒的时候width增加到200,此时牌为正面牌,因此视觉上实现了翻转的感觉。实际效果可以根据Sprite的大小自己调。

5.如果是多张牌要依次翻开,可以设置好schedule的间隔时间,依次执行各Sprite的动画。

此方法也是简单实现视觉上自动翻牌的效果,欢迎指正和讨论。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,586评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,152评论 5 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,848评论 25 709
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 被生活磨平的棱角 失落了意气风发 顾虑的太多,没有了勇气去暴躁 这事要是放以前,应该是三下五除二 现在只剩那百转千...
    文刀工阅读 167评论 0 0