cocos 图片放缩变化

原文链接: cocos 图片放缩变化

上一篇: 使用缓存和优先队列解决同步消息乱序的问题

下一篇: 使用 artipub 多平台发布博客

效果如下

也可以实现类似10的次方的效果, 一边平移一边缩放, 模拟视角移动和上升

简单放缩

const { ccclass, property } = cc._decorator;

const maxSize = 100;
const minSize = 20;

@ccclass
export default class NewClass extends cc.Component {
  @property(cc.Prefab)
  boxPrefab: cc.Prefab;

  boxList: cc.Node[] = [];
  onLoad() {
    const prevBtn: cc.Button = this.node.getChildByName("prev");
    const nextBtn: cc.Button = this.node.getChildByName("next");
    console.log(this.node, prevBtn);
    prevBtn.on(cc.Node.EventType.MOUSE_UP, () => this.left());
    nextBtn.on(cc.Node.EventType.MOUSE_UP, () => this.right());
    // 一共有5个box, 1,2,3,4,5
    // 3在中间最大
    // 2,4在两边小一点
    // 4,5 是在外面
    for (let i = 0; i < 3; i++) {
      const box = cc.instantiate(this.boxPrefab);
      this.node.addChild(box);
      box.height = i === 1 ? maxSize : minSize;
      box.width = i === 1 ? maxSize : minSize;
      box.x = (i - 1) * 200;
      this.boxList[i] = box;
    }
  }
  right() {
    cc.tween(this.boxList[2])
      .to(1, {
        width: 0,
        height: 0,
        x: 400,
      })
      .start();
    cc.tween(this.boxList[1])
      .to(1, {
        width: 20,
        height: 20,
        x: 200,
      })
      .start();
    cc.tween(this.boxList[0])
      .to(1, {
        width: 100,
        height: 100,
        x: 0,
      })
      .start();
    this.boxList[2] = this.boxList[1];
    this.boxList[1] = this.boxList[0];
    const box = cc.instantiate(this.boxPrefab);
    this.node.addChild(box);
    box.height = 0;
    box.width = 0;
    box.x = -400;
    this.boxList[0] = box;
    cc.tween(box)
      .to(1, {
        width: 20,
        height: 20,
        x: -200,
      })
      .start();
  }
  left() {
    console.log("left");
    cc.tween(this.boxList[0])
      .to(1, {
        width: 0,
        height: 0,
        x: -400,
      })
      .start();
    cc.tween(this.boxList[1])
      .to(1, {
        width: 20,
        height: 20,
        x: -200,
      })
      .start();
    cc.tween(this.boxList[2])
      .to(1, {
        width: 100,
        height: 100,
        x: 0,
      })
      .start();
    this.boxList[0] = this.boxList[1];
    this.boxList[1] = this.boxList[2];
    const box = cc.instantiate(this.boxPrefab);
    this.node.addChild(box);
    box.height = 0;
    box.width = 0;
    box.x = 400;
    this.boxList[2] = box;
    cc.tween(box)
      .to(1, {
        width: 20,
        height: 20,
        x: 200,
      })
      .start();
  }
}