cocos creator 实现switch按钮(开关按钮)

dupha

已于 2022-11-07 22:13:03 修改

阅读量1.7k

点赞数 1

分类专栏： cocos-creator 文章标签： cocos2d 游戏引擎

于 2022-11-07 16:30:16 首次发布

本文链接：https://blog.csdn.net/mingketao/article/details/127733002

版权

cocos-creator 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

cocos creator开关按钮动画实现

1.首先最简单的实现方式(没有动画),可以通过复选框
    1.1当点击复选框为选择时,可以更改图片,显示为开
    1.2档复选框取消时,图片更改为关
2.用tween动画实现
    2.1用mask来进行遮挡
    2.2通过变量进行判断,点击后相应的按钮进行移动.
    如下图所示gif

请添加图片描述

cocos switch实现、cocos creator switch按钮实现、cocos 开关按钮实现、cocos switch切换按钮实现]、cocos动画switch切换

(也可以通过复选框进行切换)

原代码在下方，免费下载无需积分

节点目录:
请添加图片描述

脚本实现:

import { _decorator, Component, Node, tween, Vec3, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SwitchController')
export class SwitchController extends Component {
    @property(Node)
    SwitchButton:Node = null;
    @property(Node)
    Off:Node = null;
    @property(Node)
    On:Node = null;
    @property(Node)
    Switch:Node = null;
    @property(Boolean)
    SwitchFlag:Boolean = true;

    radius = 0;
    radiusSwitch = 0;

    onLoad(){
        this.radius = this.SwitchButton.getComponent(UITransform).contentSize.width;
        this.radiusSwitch = this.SwitchButton.getComponent(UITransform).contentSize.width/2;

        this.switchHandle();
        this.SwitchButton.on(Node.EventType.TOUCH_END,()=>{
            this.SwitchFlag = !this.SwitchFlag;      
            this.switchHandle();
        })
    }

    switchHandle(){
        if(!this.SwitchFlag){
            tween(this.Off)
            .to(0.3, {position: new Vec3(this.SwitchButton.position.x,this.Off.position.y, 10)})
            .start();
            tween(this.Switch)
            .to(0.3, {position: new Vec3(this.radiusSwitch,this.On.position.y, 10)})
            .start();
            tween(this.On)
            .to(0.3, {position: new Vec3(this.radius,this.On.position.y, 0)})
            .start();
        }else{
            tween(this.On)
            .to(0.3, {position: new Vec3(this.SwitchButton.position.x,this.On.position.y, 10)})
            .start();

            tween(this.Switch)
            .to(0.3, {position: new Vec3(-this.radiusSwitch,this.On.position.y, 10)})
            .start();
            
            tween(this.Off)
            .to(0.3, {position: new Vec3(-this.radius,this.Off.position.y, 0)})
            .start()
        }
    }

    start() {

    }

    update(deltaTime: number) {
        
    }
}