201 lines
7.3 KiB
Markdown
201 lines
7.3 KiB
Markdown
|
||
## 快速开始
|
||
|
||
下面通过一个简单的缓动动画来说明如何使用动画功能。
|
||
|
||
|
||
|
||
### 创建EUI项目和皮肤文件
|
||
|
||
从项目创建向导中选择创建一个Egret EUI项目。
|
||
|
||
创建一个AnimationSkin.exml的皮肤文件。设置皮肤的类名为"skins.AnimationSkin"
|
||
|
||
|
||
|
||
在**设计模式**下拖拽添加一个新的按钮到皮肤文件中。
|
||
|
||
|
||
|
||
由于动画涉及到改变组件的旋转属性，建议将锚点设置到中心，设置按钮的宽高和描点属性。
|
||
|
||
|
||
|
||
|
||
**TIPS:** 尽量不要给要添加动画的目标对象设置自动布局(left, right, top, bottom, horizontalCenter，verticalCenter)属性。这些属性可能会使对象的x, y, widht, height属性失效，如果动画里面涉及到改变这些属性的值，那么动画的表现也会出现异常。
|
||
|
||
|
||
### 切换到动画模式
|
||
|
||
动画模式的入口在编辑器的模式切换按钮组上。
|
||
|
||
|
||
|
||
在动画模式下，下面的Panel面板中会多一个动画面板。
|
||
|
||
|
||
|
||
请记住这个重要的面板，动画的添加，编辑和预览都将在这个面板上完成。
|
||
|
||
**TIPS:** 一些行为在动画模式下将会被禁用或者限制。 例如在动画模式下，无法删除/复制/粘贴显示对象，对应的快捷键也会失效。 在**非关键帧状态下**也无法设置显示对象的位置, 大小等属性。 如果要对显示对象进行操作请**切换到设计模式**或者**在关键帧下操作属性**。
|
||
|
||
|
||
### 添加动画组和动画
|
||
|
||
动画是以**组为单位**进行播放的，每个动画组可以为**多个显示对象**设置动画属性。
|
||
|
||
首先使用动画面板左下角的'+'按钮，添加一个动画组，并设置动画组的id，这里设置id为tweenGroup。
|
||
|
||
|
||
|
||
接下来为动画组添加第一个动画。 但是可以发现动画那一栏的添加按钮是灰色不可用的。 在添加动画之前需要先选中一个显示对象，指定动画对应的目标才能添加动画。
|
||
|
||
这里以刚刚添加的按钮为例，先在编辑区选中该按钮。
|
||
|
||
|
||
|
||
此时动画面板上动画那一栏的添加按钮已经可以操作了。
|
||
|
||
|
||
|
||
点击添加按钮将会为该对象添加一个动画。
|
||
|
||
|
||
|
||
“button”是这个按钮的id。 如果目标对象没有设置id属性则会自动创建一个，否则使用用户设置的id。
|
||
|
||
### 编辑动画属性
|
||
|
||
每个动画对应一个动画时间轴，通过在时间轴上**添加关键帧**和**缓动行为**来改变目标对象在不同时刻的属性。 此时时间轴上还没有关键帧和动画行为。
|
||
|
||
|
||
|
||
#### 添加关键帧
|
||
|
||
首先在时间轴上1s的位置点击右键选择“添加关键帧”。
|
||
|
||
|
||
|
||
添加完成后时间轴上会使用 “■” 符号表示这是一个关键帧。
|
||
|
||
|
||
|
||
在关键帧的位置可以设置对象的大小，位置，缩放，旋转，透明度等属性。 与设计模式类似，可以**在编辑区操作显示对象**或者**在右侧的属性面板**中可以设置关键帧属性。
|
||
|
||
|
||
|
||
这里我们根据动画的在该时刻的状态，设置了Y，缩放，透明度，旋转，缓动函数等属性。 注意：如果关键帧的属性不填留空则表示不对该属性做改变。
|
||
|
||
|
||
|
||
#### 创建补间动画
|
||
|
||
有了关键帧还不够，动画在关键帧的时候会直接将目标属性设置成关键帧的值。 如果要让目标对象”动“起来，需要添加一个补间动画。
|
||
|
||
在关键帧的位置或者之前的某一时刻右键选择“创建补间动画”。
|
||
|
||
|
||
|
||
时间轴上将会使用“●”标记补间动画的开头和结束，“→”标记这一段是补间动画。
|
||
|
||
|
||
|
||
由于在添加补间动画的位置之前没有其他的关键帧，所以该段补间动画的开头是开始0时刻的位置。
|
||
|
||
这样就创建了一个持续1s的补间动画，动画会不停设置目标的属性动起来。
|
||
|
||
#### 修改关键帧位置和补间动画时间
|
||
|
||
如果要改变关键帧或者补间动画的起始位置或者持续时间，可以直接在时间轴上左右拖拽关键帧的位置。
|
||
|
||
|
||
|
||
### 预览动画
|
||
|
||
动画编辑完成后可以通过**拖拽时间轴上的时间戳**或者**直接点击时间轴下方的播放按钮**预览动画。
|
||
|
||
|
||
|
||
### 代码中调用
|
||
|
||
最终的皮肤文件：
|
||
|
||
AnimationSkin.exml
|
||
|
||
<?xml version="1.0" encoding="utf-8"?>
|
||
<e:Skin class="skins.AnimationSkin" width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:tween="egret.tween.*">
|
||
<w:Declarations>
|
||
<tween:TweenGroup id="tweenGroup">
|
||
<tween:TweenItem target="{button}">
|
||
<tween:Wait duration="500"/>
|
||
<tween:To duration="500">
|
||
<tween:props>
|
||
<e:Object y="{200}" scaleX="{1.5}" scaleY="{1.5}" rotation="{180}" alpha="{0.5}"/>
|
||
</tween:props>
|
||
</tween:To>
|
||
</tween:TweenItem>
|
||
</tween:TweenGroup>
|
||
</w:Declarations>
|
||
<e:Button id="button" label="按钮" x="193" y="35" width="100" height="50" anchorOffsetX="50" anchorOffsetY="25"/>
|
||
</e:Skin>
|
||
|
||
|
||
在项目中，通过以下代码，当用户点击按钮的时候播放该动画组中的动画：
|
||
|
||
AnimationPanel.ts
|
||
|
||
class AnimationPanel extends eui.Component {
|
||
constructor() {
|
||
super();
|
||
// 设置当前面板的皮肤
|
||
this.skinName = skins.AnimationSkin;
|
||
}
|
||
|
||
/**
|
||
* EXML中对应id为tweenGroup的动画组对象
|
||
*/
|
||
public tweenGroup: egret.tween.TweenGroup;
|
||
|
||
/**
|
||
* EXML中对应id为button的按钮对象
|
||
*/
|
||
public button: eui.Button;
|
||
|
||
/**
|
||
* 动画组播放完成
|
||
*/
|
||
private onTweenGroupComplete(): void {
|
||
console.log('TweenGroup play completed.');
|
||
}
|
||
|
||
/**
|
||
* 动画组中的一项播放完成
|
||
*/
|
||
private onTweenItemComplete(event: egret.Event): void {
|
||
const item = event.data as egret.tween.TweenItem;
|
||
console.log(item.target);
|
||
console.log('TweenItem play completed.');
|
||
}
|
||
|
||
/**
|
||
* 当点击按钮时播放动画
|
||
*/
|
||
private onButtonClick(): void {
|
||
this.tweenGroup.play();
|
||
//this.tweenGroup.play(0);从头播放
|
||
}
|
||
|
||
protected createChildren(): void {
|
||
super.createChildren();
|
||
this.tweenGroup.addEventListener('complete', this.onTweenGroupComplete, this);
|
||
this.tweenGroup.addEventListener('itemComplete', this.onTweenItemComplete, this);
|
||
this.button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);
|
||
}
|
||
}
|
||
|
||
|
||
最后如果对动画的实现感兴趣可以研究下EXML中关于动画的部分，以及在GitHub上可以找到动画实现的源代码：
|
||
|
||
https://github.com/egret-labs/egret-core/blob/master/src/extension/tween/TweenWrapper.ts
|
||
|