Cocos2d-x-v3中3D网格特效动画的应用

Cocos2d-x-v3中3D网格特效动画的应用

一、网格特效的使用原理

基础的动作是对节点整体进行移动,变形等操作,网格特效的原理是将节点分割成多个尺寸相同的网格,根据改变每个网格块的属性使整体节点产生3D的效果。

二、网格特效的基本用法

在cocos2d-x中,v3的版本新引入了一个类NodeGrid,专门用来包装网格的特效,示例如下:

    //获取屏幕尺寸
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    //加载精灵
    auto sprite = Sprite::create("HelloWorld.png");
    sprite->setPosition(Vec2(visibleSize.width/2+origin.x, visibleSize.height/2+origin.y));
    //创建网格特效包装类
    NodeGrid * nodeg = NodeGrid::create();
    nodeg->setPosition(Vec2::ZERO);
    //添加播放特效的精灵
    nodeg->addChild(sprite);
    this->addChild(nodeg);
    //参数的含义 分别是 执行时间,切分的网格大小,波浪次数,波浪大小
    Waves3D * ani3d = Waves3D::create(2, Size(15, 15), 6, 4);
    //执行特效
    nodeg->runAction(ani3d);

三、系统提供的网格特效

static Waves3D* create(float duration, const Size& gridSize, unsigned int waves, float amplitude);

创建波浪3D效果,参数含义为:执行时间,网格尺寸,波浪次数,波浪大小

static FlipX3D* create(float duration);

以x为轴进行翻转

static FlipY3D* create(float duration);

以y为轴进行翻转

static Lens3D* create(float duration, const Size& gridSize, const Vec2& position, float radius);

创建镜头的3D效果,参数为:执行时间,网格大小,镜头中心,镜头半径

static Ripple3D* create(float duration, const Size& gridSize, const Vec2& position, float radius, unsigned int waves, float amplitude);

创建波纹特效,参数为:执行时间,网格大小,波纹中心,波纹半径,波纹计数,振幅

static Shaky3D* create(float initWithDuration, const Size& gridSize, int range, bool shakeZ);

创建震动特效,参数为:执行时间,网格大小,震动范围,是否波动z轴

static Liquid* create(float duration, const Size& gridSize, unsigned int waves, float amplitude);

创建液体特效,参数为:执行时间,网格尺寸,流动次数,幅度

static Waves* create(float duration, const Size& gridSize, unsigned int waves, float amplitude, bool horizontal, bool vertical);

创建平面波纹特效,参数为:执行时间,网格尺寸,波纹次数,波纹振幅,开关横向波纹,开关纵向波纹

static Twirl* create(float duration, const Size& gridSize, Vec2 position, unsigned int twirls, float amplitude);
创建扭曲旋转的特效,参数为:执行时间,网格尺寸,扭曲旋转中心,旋转次数,旋转幅度

时间: 2024-11-26 06:14:01

Cocos2d-x-v3中3D网格特效动画的应用的相关文章

纯CSS3炫酷3D折叠面板动画特效

这是一款效果非常炫酷的CSS3 3D折叠面板动画特效.该折叠面板特效当鼠标移动到图片上时,一个面板会以3d折叠的方式在顶部展开,并显示图片的标题等信息..这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. 在线演示:http://www.htmleaf.com/Demo/201501251276.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201501251275.html

纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效.该3D立方体使用CSS3 perspective制作,可以在水平方向.垂直方向和平面视角方向旋转,效果相当震撼.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹! 在线演示:http://www.htmleaf.com/Demo/201501251274.html 下载地址:http://ww

Cocos2d-X中的动作特效

Cocos2d-X中提供了非常丰富的动作特效 例如:网格动画 扭曲特效 3D瓷砖波动特效 程序代码: #include "ActionEffect.h" #include "HelloWorldScene.h" static const char* _actionName[] = { "CCFadeOutBLTiles", "CCFadeOutDownTiles", "CCFadeOutTRTiles",

转 threejs中3D视野的缩放实现

Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov视野角(拍摄距离)越小,场景中的物体越大. 透视相机(近大远小) PerspectiveCamera //透视照相机参数设置 var fov = 45,//拍摄距离 视野角值越大,场景中的物体越小 near = 1,//相机离视体积最近的距离 far = 1000,//相机离视体积最远的距离 asp

2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效

 1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr); //GridAction //CCFlipX3D * action = CCFlipX3D::create(2); //CCFlipY3D * action = CCFlipY3D::create(2);

网格变形动画

原文:Mesh Transforms 作者:Bartosz Ciechanowski 译者:kmyhy 我是 transform 属性的超级粉丝.让 UIView 或者 CALayer 的形体发生改变的最简单方法就是联合使用旋转.平移和缩放.在易于适用的同时,常规变换所能实现的效果也同时被限制住了--比如一个矩形只能变换成其它四边形.这是毫无疑问的,但除此之外我们还可以做的更多. 本文介绍网格变形.网格变形的核心概念非常简单:你可以将一个 layer 划分成若干个顶点,通过移动顶点的方式让几何形

Cocos2d-x Lua中实例:特效演示

Cocos2d-x Lua中实例:特效演示 下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜单场景. 特效实例 我们重点看看MyActionScene场景,MyActionScene.lua主要代码如下: [html] view plaincopy … … local sprite                                 

jQuery鼠标悬停3d菜单展开动画

效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现.支持Chrome,火狐,Edge等浏览器. 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"

开源学习--SlideExpandableListView中的列表项动画实现框架分析

前面的话 开源项目Android-SlideExpandableListView是一个简单的介绍列表项动画展示的小型项目,分析这个项目可以对自定义框架及列表类动画实现有个比较清晰的认识,工作中中时常根据需求扩展定义自己的适配器,虽然具体需求不同,但架构类似,本文把最近关于该开源项目的研究心得整理分享,共同学习~ 项目简介 github地址https://github.com/tjerkw/Android-SlideExpandableListView 这是个入门级的列表项动画展示框架,实现效果如