CocosCreator之绳索摆动效果

欲望以提升热忱，毅力以磨平高山。

场景编辑器：

 属性编辑器：

 记得调锚点为(0.5, 1)

请白嫖我！

上代码：

RopeSwung.ts

const { ccclass, property, executeInEditMode, playOnFocus } = cc._decorator;
/**
 * 绳索摆动效果
 * @author 神兽白泽
 */
@ccclass
@executeInEditMode()
@playOnFocus()
export default class RopeSwung extends cc.Component {

    @property({ displayName: '摆动角度' }) private angle: 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, { angle: { value: this.angle, easing: 'sineOut' } })
        let rotate2 = cc.tween().to(this.time, { angle: { value: 0, easing: 'sineIn' } })
        let rotate3 = cc.tween().to(this.time, { angle: { value: -this.angle, easing: 'sineOut' } })
        let rotate4 = cc.tween().to(this.time, { angle: { value: 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