解读 Layabox 示例 03

Author Avatar
tanglijun 6月 04, 2018

本文记录第三个引擎示例展示旋转缩放的应用。

示例效果

result

概念简介

Event 类

Event 是事件类型的集合。API 详情

其他

其余概念均在示例一中描述。查看

示例代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./LayaAirJS_1.7.19.1_beta/js/libs/laya.core.js"></script>
    <script src="./LayaAirJS_1.7.19.1_beta/js/libs/laya.webgl.js"></script>
  </head>
  <body>
    <script>
      (function() {
        var Sprite  = Laya.Sprite;
        var Stage   = Laya.Stage;
        var Event   = Laya.Event;
        var Browser = Laya.Browser;
        var WebGL   = Laya.WebGL;

        var ape;
        var scaleDelta = 0;

        ;(function () {

          // 不支持 WebGL 时自动切换至 Canvas
          Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL)

          Laya.stage.alignV = Stage.ALIGN_MIDDLE
          Laya.stage.alignH = Stage.ALIGN_CENTER

          Laya.stage.scaleMode = 'showall'
          Laya.stage.bgColor = '#232628'

          createApe()
        }());

        function createApe() {
          ape = new Sprite();

          // 加载图片
          ape.loadImage('./res/apes/monkey2.png');

          // 添加图形到舞台中
          Laya.stage.addChild(ape);

          // 设置中心点 (monkey2.png 110 * 145)
          ape.pivot(55, 72);

          // 设置图形的 x 坐标
          ape.x = Laya.stage.width / 2;

          // 设置图形的 y 坐标
          ape.y = Laya.stage.height / 2;

          // 设置没 1 帧的动画
          Laya.timer.frameLoop(1, this, animate);
        }

        function animate(e) {

          // 旋转角度增加 2 度
          ape.rotation += 2;

          // 设置心跳缩放比例
          scaleDelta += 0.02;
          var scaleValue = Math.sin(scaleDelta);
          ape.scale(scaleValue, scaleValue);
        }
      })()
    </script>
  </body>
</html>

参考资料

许可协议:署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
本文链接:https://tanglj.cn/2018/06/04/read-layabox-demo-3/