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的路由，多页面切换，比较方便
