关于如何将annie在vue中使用的探索

var stage = new annie.Stage('bobbing',w,h,60,annie.StageScaleMode.SHOW_ALL,0);

github地址

https://github.com/ningbnii/vue_annie_demo

使用vue-cli创建的项目,SPA模式

annieCore.min.js我放在了public/lib/ 下面,在index.html中引入

页面/src/pages/ 下面

这里看一个页面吧

<template>
<div @touchmove.prevent>
<div id="bobbing"></div>
</div>
</template>

<script>
import Ball from "../../assets/js/ball";

export default {
name: "bobbing",
data(){
return {}
},
mounted() {
var backgroundLayer;
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var angle = 0;
var centerY = h/2;
var range = 50;
var speed = 0.1;
var ball;

var stage = new annie.Stage('bobbing',w,h,60,annie.StageScaleMode.SHOW_ALL,0);
main();

function main() {
initBackgroundLayer();
ball = new annie.Shape();
ball.x = w/2;
ball.y = h/2;
backgroundLayer.addChild(ball);
ball.beginFill('#ff0000');
ball.drawCircle(0,0,20);
ball.endFill();
backgroundLayer.addEventListener(annie.Event.ENTER_FRAME,onframe);
}

function onframe() {
ball.y = centerY + Math.sin(angle)*range;
angle+=speed;
}

function initBackgroundLayer() {
let s = this;
backgroundLayer = new annie.Sprite();
stage.addChild(backgroundLayer);
}
},
destroy(){}
};
</script>

<style scoped>
</style
>

初始化代码要写到mounted里,这是由vue的生命周期决定的

var stage = new annie.Stage('bobbing',w,h,60,annie.StageScaleMode.SHOW_ALL,0);

之后就随便怎么玩了,可以结合vue的路由,多页面切换,比较方便





  • 发表于 2020-04-09 09:53
  • 阅读 ( 179 )
  • 分类:AnnieJS引擎

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
ningbnii

4 篇文章

作家榜 »

  1. 大北兔 15 文章
  2. 皮卡丘先生 13 文章
  3. hero 9 文章
  4. vien007 7 文章
  5. anlun214 5 文章
  6. ningbnii 4 文章
  7. Even 4 文章
  8. 炸天 4 文章