CocosCreator之节点悬浮效果组件

莫找借口失败，只找理由成功。

效果描述：就是一个节点在哪儿飘啊飘的。动画组件也能实现。

组件：FloatMove.ts

const { ccclass, property, executeInEditMode, playOnFocus } = cc._decorator;
/**
 * 悬浮效果
 * @author 神兽白泽
 */
@ccclass
@executeInEditMode()
@playOnFocus()
export default class FloatMove extends cc.Component {

    @property({ displayName: '悬浮距离' }) private value: number = 15;
    @property({ displayName: '消耗时间', tooltip: '悬浮1/4距离消耗的时间' }) private time: number = 1;

    /** 编辑器预览 */
    private _edit_play: boolean = false;
    @property({ displayName: '编辑器预览' })
    get edit_play(): boolean {
        if (this._edit_play && !this.edit_playing) this.initShakeSlow();
        this.edit_playing = this._edit_play;
        return this._edit_play;
    }
    set edit_play(v: boolean) {
        this._edit_play = v;
        if (!v) this.stop();
    }

    /** 编辑器是否正在播放 */
    private edit_playing = false;

    onLoad() {

    }

    start() {
        if (CC_EDITOR) {
            if (this.edit_play) {
                this.initShakeSlow()
            }
        } else {
            this.initShakeSlow()
        }
    }

    /**
     * 缓动
     * @param node 动画节点
     */
    private initShakeSlow() {
        let node = this.node;
        let rotate1 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, this.value), easing: 'sineOut' } })
        let rotate2 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, 0), easing: 'sineIn' } })
        let rotate3 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, -this.value), easing: 'sineOut' } })
        let rotate4 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, 0), easing: 'sineIn' } })
        let sequence1 = cc.tween().sequence(rotate1, rotate2, rotate3, rotate4)
        cc.tween(node).then(sequence1).repeatForever().start();
    }

    /** 停止动画 */
    private stop() {
        this.node.stopAllActions();
    }

}

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592