cocos-creator 学习笔记 2.3.1 动画创建

时间:2024-03-19 21:59:57

2018/6/3

本节不讲逻辑。

cocoscreator 的动画属性可以修改的方面非常广,不只是修改 frame 和图片相关的参数, node 节点下的其他属性也可以修改。

1. 创建添加动画

在 assets 下创建一个新的文件夹 animation 新建 animation clip
cocos-creator 学习笔记 2.3.1 动画创建
在 canvas 下创建一个新的节点 node,添加组件中选择 animation
cocos-creator 学习笔记 2.3.1 动画创建

并将刚创建的 a 动画拖动到 default 中

cocos-creator 学习笔记 2.3.1 动画创建

勾选 play on load 将让动画在初次渲染的同时运行。

2. 动画编辑器

点击左上方的图标就能够开始动画修改。动画可以修改当前节点和子节点。

cocos-creator 学习笔记 2.3.1 动画创建

属性列表预制了可以修改的参数

cocos-creator 学习笔记 2.3.1 动画创建

如果你添加新的组件到节点上,这里也会对应更新。

比如: 添加 sprite 到节点上这里就会对应出现

cocos-creator 学习笔记 2.3.1 动画创建

通过 + 号可以在对应位置增加关键帧

cocos-creator 学习笔记 2.3.1 动画创建

与属性相互对应(这里第一个改变了 position, 第二个改变了 frame)具体可以参考 flash, 和 flash 类似。

cocos-creator 学习笔记 2.3.1 动画创建

在这块用鼠标滚轮可以有很多操作。 常见的有:上下滚动放大缩小。

鼠标右键多选,中拖动滚轮缩放

cocos-creator 学习笔记 2.3.1 动画创建

sample 和 speed 可以改变动画的 duration 和 real time。

cocos-creator 学习笔记 2.3.1 动画创建

wrapMode 规定了动画的基本运行方式

Normal: 运行一次

Loop: 循环

PingPong: 来回往复

剩下两个与上面两个方向相反


双击蓝色直线可以进入调整曲线 在这里可以对特定线段动画运行时间进行调整。

cocos-creator 学习笔记 2.3.1 动画创建

贝塞尔曲线:四点确定的曲线

这边具体按需调节。


由于动画是相对坐标系。同样可以通过改变父节点的位置改变动画的初始位置。