Cocos2d-x 3,androidapp开发教程

本文详细介绍了如何在 Cocos2d-x 3 中使用 CatmullRom 和 Bezier 曲线创建流畅的动画效果,包括创建笛卡尔曲线和贝塞尔曲线动作,以及演示了ActionBlink、ActionFade、ActionTint、ActionAnimate等动画效果的实现。此外,还探讨了ActionSequence、ActionSpawn、ActionReverse、ActionDelayTime、ActionRepeat和CallFunc等动作的使用,展示如何组合动作以创建复杂的交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CatmullRomBy类 :这是一个按照笛卡尔曲线移动目标点的动作.

**

**


– ActionCatmullRom

– 笛卡尔曲线运动


local function ActionCatmullRom()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(2)

– 设置精灵位置

tamara:setPosition(cc.p(50, 50))

– 定义位置数组

local array = {

cc.p(0, 0),

cc.p(80, 80),

cc.p(size.width - 80, 80),

cc.p(size.width - 80, size.height - 80),

cc.p(80, size.height - 80),

cc.p(80, 80),

cc.p(size.width / 2, size.height / 2),

}

– 创建笛卡尔曲线运动,第一个参数为持续时间,第二个参数为位置数组

local action = cc.CatmullRomBy:create(3, array)

local reverse = action:reverse()-- 相反操作

– 创建动作序列

local seq = cc.Sequence:create(action, reverse)

tamara:runAction(seq)

local array2 = {

cc.p(size.width / 2, 30),

cc.p(size.width -80, 30),

cc.p(size.width - 80, size.height - 80),

cc.p(size.width / 2, size.height - 80),

cc.p(size.width / 2, 30),

}

local action2 = cc.CatmullRomTo:create(3, array2)

local reverse2 = action2:reverse()

local seq2 = cc.Sequence:create(action2, reverse2)

kathia:runAction(seq2)

–[[

local function drawCatmullRom()

kmGLPushMatrix()

kmGLTranslatef(50, 50, 0)

cc.DrawPrimitives.drawCatmullRom(array, 50)

kmGLPopMatrix()

cc.DrawPrimitives.drawCatmullRom(array2,50)

end

array:retain()

array2:retain()

local glNode = gl.glNodeCreate()

glNode:setContentSize(cc.size(size.width, size.height))

glNode:setAnchorPoint(cc.p(0.5, 0.5))

glNode:registerScriptDrawHandler(drawCatmullRom)

layer:addChild(glNode,-10)

glNode:setPosition( size.width / 2, size.height / 2)

]]–

– 设置标题

Helper.titleLabel:setString(“CatmullRomBy / CatmullRomTo”)

Helper.subtitleLabel:setString(“Catmull Rom spline paths. Testing reverse too”)

return layer

end

BezierBy类:贝塞尔曲线动作。提供reverse方法,用于执行相反操作

BezierTo类:贝塞尔曲线动作。

******



– ActionBezier

– 贝塞尔曲线运动


local function ActionBezier()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(3)

– sprite 1

–[[

local bezier = ccBezierConfig()

bezier.controlPoint_1 = cc.p(0, size.height / 2)

bezier.controlPoint_2 = cc.p(300, - size.height / 2)

bezier.endPosition = cc.p(300, 100)

]]–

– 贝塞尔曲线配置结构

local bezier = {

cc.p(0, size.height / 2),

cc.p(300, - size.height / 2),

cc.p(300, 100),

}

– 以持续时间和贝塞尔曲线的配置结构体为参数创建动作

local bezierForward = cc.BezierBy:create(3, bezier)

local bezierBack = bezierForward:reverse()

– 无限循环执行序列

local rep = cc.RepeatForever:create(cc.Sequence:create(bezierForward, bezierBack))

– sprite 2

tamara:setPosition(cc.p(80,160))

–[[

local bezier2 = ccBezierConfig()

bezier2.controlPoint_1 = cc.p(100, size.height / 2)

bezier2.controlPoint_2 = cc.p(200, - size.height / 2)

bezier2.endPosition = cc.p(240, 160)

]]–

local bezier2 ={

cc.p(100, size.height / 2),

cc.p(200, - size.height / 2),

cc.p(240, 160)

}

– 创建贝塞尔曲线动作,第一个参数为持续时间,第二个参数为贝塞尔曲线结构

local bezierTo1 = cc.BezierTo:create(2, bezier2)

– sprite 3

kathia:setPosition(cc.p(400,160))

local bezierTo2 = cc.BezierTo:create(2, bezier2)

– 运行动作

grossini:runAction(rep)

tamara:runAction(bezierTo1)

kathia:runAction(bezierTo2)

Helper.subtitleLabel:setString(“BezierTo / BezierBy”)

return layer

end

Blink类:闪烁动作

**

**


– ActionBlink

– 闪烁运动


local function ActionBlink()

– 创建层

local layer = cc.Layer:create()

– 初始化层

initWithLayer(layer)

centerSprites(2)

– 创建两个闪烁动作,第一个参数为持续时间,第二个参数为闪烁次数

local action1 = cc.Blink:create(2, 10)

local action2 = cc.Blink:create(2, 5)

– 两个精灵执行动作

tamara:runAction(action1)

kathia:runAction(action2)

Helper.subtitleLabel:setString(“Blink”)

return layer

end

FadeTo类:渐变动作

FadeIn类:渐变动作 "reverse"动作是FadeOut

FadeOut类:渐变动作 "reverse"动作是FadeIn

**

**


– ActionFade

– 渐变动作


local function ActionFade()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(2)

– 设置透明度

tamara:setOpacity(0)

– 创建淡进的动作

local action1 = cc.FadeIn:create(1)

– reverse动作,FadeOut

local action1Back = action1:reverse()

– 创建淡出的动作

local action2 = cc.FadeOut:create(1)

– reverse动作,FadeIn动作

local action2Back = action2:reverse()

– 执行动作

tamara:runAction(cc.Sequence:create( action1, action1Back))

kathia:runAction(cc.Sequence:create( action2, action2Back))

Helper.subtitleLabel:setString(“FadeIn / FadeOut”)

return layer

end

TintTo类:节点变色动作

TintBy类:节点变色动作,提供reverse方法。

****



– ActionTint

– 变色动作


local function ActionTint()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(2)

– 用持续时间和颜色创建动作,第一个参数为持续时间,后面三个为颜色值

local action1 = cc.TintTo:create(2, 255, 0, 255)

local action2 = cc.TintBy:create(2, -127, -255, -127)

local action2Back = action2:reverse()

tamara:runAction(action1)

kathia:runAction(cc.Sequence:create(action2, action2Back))

Helper.subtitleLabel:setString(“TintTo / TintBy”)

return layer

end

Animation类:一个用来在精灵对象上表现动画的动画对象.

AnimationCache类:动画缓存单例类。 如何你想要保存动画,你需要使用这个缓存

Animate类:创建序列帧动画

**

**


– ActionAnimate

– 动画动作


local function ActionAnimate()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(3)

– 创建动画

local animation = cc.Animation:create()

local number, name

for i = 1, 14 do

if i < 10 then

number = “0”…i

else

number = i

end

name = “Images/grossini_dance_”…number…".png"

– 用图片名称加一个精灵帧到动画中

animation:addSpriteFrameWithFile(name)

end

– should last 2.8 seconds. And there are 14 frames.

– 在2.8秒内持续14帧

animation:setDelayPerUnit(2.8 / 14.0)

– 设置"当动画结束时,是否要存储这些原始帧",true为存储

animation:setRestoreOriginalFrame(true)

– 创建序列帧动画

local action = cc.Animate:create(animation)

grossini:runAction(cc.Sequence:create(action, action:reverse()))

– 动画缓存单例类。 如何你想要保存动画,你需要使用这个缓存。

local cache = cc.AnimationCache:getInstance()

– 添加入一个动画到缓存,并以name作为标示

cache:addAnimations(“animations/animations-2.plist”)

– Returns 查找并返回名了name的动画。 如果找不到,返回NULL.

local animation2 = cache:getAnimation(“dance_1”)

– 创建第二个序列帧动画

local action2 = cc.Animate:create(animation2)

– 执行动作序列

tamara:runAction(cc.Sequence:create(action2, action2:reverse()))

– 克隆一个动画

local animation3 = animation2:clone()

– 设置循环次数

animation3:setLoops(4)

– 创建一个序列帧动画

local action3 = cc.Animate:create(animation3)

– 执行动作

kathia:runAction(action3)

Helper.titleLabel:setString(“Animation”)

Helper.subtitleLabel:setString(“Center: Manual animation. Border: using file format animation”)

return layer

end

Sequence类:顺序执行动作

**

**


– ActionSequence

– 动作序列


local function ActionSequence()

– 创建层

local layer = cc.Layer:create()

initWithLayer(layer)

alignSpritesLeft(1)

– 创建动作序列,第一个动作是MoveBy,第二个动作是RotateBy

local action = cc.Sequence:create(

cc.MoveBy:create(2, cc.p(240,0)),

cc.RotateBy:create(2, 540))

– 执行动作

grossini:runAction(action)

Helper.subtitleLabel:setString(“Sequence: Move + Rotate”)

return layer

end


– ActionSequence2

– 动作序列2


local actionSequenceLayer = nil

– 动作序列回调1

local function ActionSequenceCallback1()

– 创建标签

local label = cc.Label:createWithTTF(“callback 1 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))-- 设置锚点

label:setPosition(size.width / 4, size.height / 2)-- 设置显示位置

– 添加节点到层中

actionSequenceLayer:addChild(label)

end

– 动作序列回调2

local function ActionSequenceCallback2(sender)

– 创建标签

local label = cc.Label:createWithTTF(“callback 2 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))-- 设置锚点

label:setPosition(cc.p(size.width / 4 * 2, size.height / 2))-- 设置显示位置

– 添加节点到层中

actionSequenceLayer:addChild(label)

end

– 动作序列回调3

local function ActionSequenceCallback3(sender)

– 创建标签

local label = cc.Label:createWithTTF(“callback 3 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))-- 设置锚点

label:setPosition(cc.p(size.width / 4 * 3, size.height / 2))-- 设置显示位置

actionSequenceLayer:addChild(label)

end

local function ActionSequence2()

– 创建层

actionSequenceLayer = cc.Layer:create()

initWithLayer(actionSequenceLayer)

alignSpritesLeft(1)

grossini:setVisible(false)-- 设置节点不可见

– 创建一个顺序执行的动作,分别为Place:放置节点到某个位置,Show:显示节点;MoveBy:移动到(100,0)的位置;CallFunc:调用回调方法

local action = cc.Sequence:create(cc.Place:create(cc.p(200,200)),cc.Show:create(),cc.MoveBy:create(1, cc.p(100,0)), cc.CallFunc:create(ActionSequenceCallback1),cc.CallFunc:create(ActionSequenceCallback2),cc.CallFunc:create(ActionSequenceCallback3))

grossini:runAction(action)

Helper.subtitleLabel:setString(“Sequence of InstantActions”)

return actionSequenceLayer

end

Spawn类:并行动作

**

**


– ActionSpawn

– 同时执行一批动作


local function ActionSpawn()

local layer = cc.Layer:create()

initWithLayer(layer)

alignSpritesLeft(1)

– 创建一个并行动作,第一个动作为JumpBy,第二个动作为RotateBy

local action = cc.Spawn:create(

cc.JumpBy:create(2, cc.p(300,0), 50, 4),

cc.RotateBy:create( 2, 720))

– 执行动作

grossini:runAction(action)

Helper.subtitleLabel:setString(“Spawn: Jump + Rotate”)

return layer

end

Cocos2d-x 中相关动作提供reverse方法,用于执行Action的相反动作,一般以XXXBy这类的,都具有reverse方法

**

**


– ActionReverse

– Action的相反动作


local function ActionReverse()

local layer = cc.Layer:create()

initWithLayer(layer)

alignSpritesLeft(1)

– 创建JumpBy动作

local jump = cc.JumpBy:create(2, cc.p(300,0), 50, 4)

– 动作序列,第一个动作为跳跃的动作,第二个是跳的反操作

local action = cc.Sequence:create(jump, jump:reverse())

grossini:runAction(action)

Helper.subtitleLabel:setString(“Reverse an action”)

return layer

end

DelayTime类:延时动作

**

**


– ActionDelaytime

– 延迟动作


local function ActionDelaytime()

local layer = cc.Layer:create()

initWithLayer(layer)

alignSpritesLeft(1)

– 创建移动动作,移动到(150,0)位置

local move = cc.MoveBy:create(1, cc.p(150,0))

– 第一个动作move,然后延迟2秒,再继续移动

local action = cc.Sequence:create(move, cc.DelayTime:create(2), move)

grossini:runAction(action)

Helper.subtitleLabel:setString(“DelayTime: m + delay + m”)

return layer

end

**Repeat类:重复执行动作很多次。次数由参数决定。 要无线循环动作,使用RepeatForever。

**

RepeatForever类:无线循环一个动作。 如果要循环有限次数,请使用Repeat动作。


– ActionRepeat

– 重复动作


local function ActionRepeat()

local layer = cc.Layer:create()

initWithLayer(layer)

alignSpritesLeft(2)

– 创建MoveBy动作,移动到(150,0)的位置

local a1 = cc.MoveBy:create(1, cc.p(150,0))

– 创建重复执行的动作序列,这里重复3次

local action1 = cc.Repeat:create(cc.Sequence:create(cc.Place:create(cc.p(60,60)), a1), 3)

– 创建MoveBy动作,移动到(150,0)的位置

local a2 = cc.MoveBy:create(1, cc.p(150,0))

– 创建重复执行的动作序列,这里无限重复执行

local action2 = cc.RepeatForever:create(cc.Sequence:create(a2, a1:reverse()))

– 两个精灵分别执行动作

kathia:runAction(action1)

tamara:runAction(action2)

Helper.subtitleLabel:setString(“Repeat / RepeatForever actions”)

return layer

end


– ActionRepeatForever

– 无限重复的动作


local function repeatForever(sender)

local repeatAction = cc.RepeatForever:create(cc.RotateBy:create(1.0, 360))

sender:runAction(repeatAction)

end

local function ActionRepeatForever()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(1)

– 创建一个动作序列,第一个动作先延时1秒,第二个动作调用无限重复的方法

local action = cc.Sequence:create(

cc.DelayTime:create(1),

cc.CallFunc:create(repeatForever) )

grossini:runAction(action)

Helper.subtitleLabel:setString(“CallFuncN + RepeatForever”)

return layer

end


– ActionRotateToRepeat

– 重复执行旋转的动作


local function ActionRotateToRepeat()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(2)

– 创建两个旋转的动作

local act1 = cc.RotateTo:create(1, 90)

local act2 = cc.RotateTo:create(1, 0)

– 创建动作序列

local seq = cc.Sequence:create(act1, act2)

– 一个无限重复的动作,一个重复10次的动作

local rep1 = cc.RepeatForever:create(seq)

local rep2 = cc.Repeat:create(seq:clone(), 10)

tamara:runAction(rep1)

kathia:runAction(rep2)

Helper.subtitleLabel:setString(“Repeat/RepeatForever + RotateTo”)

return layer

end

CallFunc类:调用一个 ‘callback’ 函数


– ActionCallFunc

– 调用方法


local callFuncLayer = nil

– 调用方法回调函数1

local function CallFucnCallback1()

local label = cc.Label:createWithTTF(“callback 1 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))

label:setPosition(size.width / 4, size.height / 2)

callFuncLayer:addChild(label)

end

– 调用方法回调函数2

local function CallFucnCallback2(sender)

local label = cc.Label:createWithTTF(“callback 2 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))

label:setPosition(size.width / 4 * 2, size.height / 2)

callFuncLayer:addChild(label)

end

– 调用方法回调函数3

local function CallFucnCallback3(sender)

local label = cc.Label:createWithTTF(“callback 3 called”, s_markerFeltFontPath, 16)

label:setAnchorPoint(cc.p(0.5, 0.5))

label:setPosition(size.width / 4 * 3, size.height / 2)

callFuncLayer:addChild(label)

end

– 调用“Call back"

local function ActionCallFunc()

callFuncLayer = cc.Layer:create()

initWithLayer(callFuncLayer)

centerSprites(3)

– 创建动作序列,第一个动作为MoveBy,第二个动作为CallFunc

local action = cc.Sequence:create(

cc.MoveBy:create(2, cc.p(200,0)),

cc.CallFunc:create(CallFucnCallback1) )

– 创建动作序列,第一个动作为ScaleBy,第二个动作为淡出,第三个动作为CallFunc

local action2 = cc.Sequence:create(cc.ScaleBy:create(2, 2),cc.FadeOut:create(2),cc.CallFunc:create(CallFucnCallback2))

– 创建动作序列,第一个动作为RotateBy,第二个动作w为淡出,第三个动作为CallFunc

local action3 = cc.Sequence:create(cc.RotateBy:create(3 , 360),cc.FadeOut:create(2),cc.CallFunc:create(CallFucnCallback3))

– 运行动作

grossini:runAction(action)

tamara:runAction(action2)

kathia:runAction(action3)

Helper.subtitleLabel:setString(“Callbacks: CallFunc and friends”)

return callFuncLayer

end

OrbitCamera类:创建一个带有起始半径、半径差、起始z角、旋转z角的差、起始x角、旋转x角的差 这些参数的运动视角动作类

**

**


– ActionOrbit

– OrbitCamera类 :action 视角按照球面坐标轨迹 围绕屏幕中心进行旋转


local function ActionOrbit()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(3)

– 创建一个带有起始半径、半径差、起始z角、旋转z角的差、起始x角、旋转x角的差 这些参数的运动视角动作类

local orbit1 = cc.OrbitCamera:create(2,1, 0, 0, 180, 0, 0)

local action1 = cc.Sequence:create(orbit1, orbit1:reverse())

最后

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识,这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析,我把大厂面试中常被问到的技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。

还有 高级架构技术进阶脑图 帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习,也可以分享给身边好友一起学习。

Android 基础知识点

Java 基础知识点

Android 源码相关分析

常见的一些原理性问题

希望大家在今年一切顺利,进到自己想进的公司,共勉!

作序列,第一个动作为RotateBy,第二个动作w为淡出,第三个动作为CallFunc

local action3 = cc.Sequence:create(cc.RotateBy:create(3 , 360),cc.FadeOut:create(2),cc.CallFunc:create(CallFucnCallback3))

– 运行动作

grossini:runAction(action)

tamara:runAction(action2)

kathia:runAction(action3)

Helper.subtitleLabel:setString(“Callbacks: CallFunc and friends”)

return callFuncLayer

end

OrbitCamera类:创建一个带有起始半径、半径差、起始z角、旋转z角的差、起始x角、旋转x角的差 这些参数的运动视角动作类

**

**


– ActionOrbit

– OrbitCamera类 :action 视角按照球面坐标轨迹 围绕屏幕中心进行旋转


local function ActionOrbit()

local layer = cc.Layer:create()

initWithLayer(layer)

centerSprites(3)

– 创建一个带有起始半径、半径差、起始z角、旋转z角的差、起始x角、旋转x角的差 这些参数的运动视角动作类

local orbit1 = cc.OrbitCamera:create(2,1, 0, 0, 180, 0, 0)

local action1 = cc.Sequence:create(orbit1, orbit1:reverse())

最后

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识,这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析,我把大厂面试中常被问到的技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。

还有 高级架构技术进阶脑图 帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习,也可以分享给身边好友一起学习。

Android 基础知识点

Java 基础知识点

Android 源码相关分析

常见的一些原理性问题

[外链图片转存中…(img-BziMz2Hf-1643879060806)]

希望大家在今年一切顺利,进到自己想进的公司,共勉!

本文已被CODING开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值