微信案例演示-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53573893

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>微信案例</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script src="lib/js/konva/konva.js"></script>
    <script src="scence.js"></script>
</head>
<body>
    <div id="container">
    </div>
    <script src="weixin.js"></script>

</body>
</html>

weixin.js

'use strict';
var stage = new Konva.Stage({
    container:'container',
    width:window.innerWidth,
    height:window.innerHeight
});

var sceneBuilders = [builderHtml5Scene,builderC3Scene,builderDemoScene];
var sceneIndex = 0 ;

sceneBuilders[0]().play();

//构造h5的场景
function builderHtml5Scene(){
    var bgLayer = new Konva.Layer();
    var animateLayer = new Konva.Layer();
    var lightLayer = new Konva.Layer();

    var rect = new Konva.Rect({
        x:-100,
        y:-100,
        fill:'red',
        width:100,
        height:100
    });

    return new Scene({
        name:'场景1',
        layers:[bgLayer,animateLayer,lightLayer],//最后的层放到最上面
        stage:stage,
        init:function(){
            //初始化场景中的所有形状
            animateLayer.add(rect);
            this.layers.forEach(function(layer){
                layer.draw();
            });
        },
        pre:function(){
            rect.to({
                x:100,
                y:100,
                duration:1,
                scaleX:2,
                scaleY:2,
                opacity:.4
            });
        },
        post:function(dopre){
            dopre();//执行下一个场景的初始化和入场动画
        }
    });
}
//构造c3的场景
function builderC3Scene(){
    return new Scene({
    });
}
//构造demo场景
function builderDemoScene(){
    return new Scene({
    });
}

function addStageEvent(){

    var startY = 0;
    var endY = 0;

    stage.on('contentMousedown contentTouchstart',function(e){
        if(e.type == 'contentMousedown'){
            startY = e.evt.screenY;
        }else if(e.type == 'contentTouchstart'){
            startY = e.evt.touches[0].screenY;
        }
    });
    stage.on('contentMousemove contentTouchmove',function(e){
        if(e.type == 'contentMousedown'){
            endY = e.evt.screenY;
        }else if(e.type == 'contentTouchmove'){

            endY = e.evt.touches[0].screenY;
        }
    });
    stage.on('contentMouseup contentTouchend',function(e){
        if(endY > startY){
            //下滑动，执行上一个场景的play()
            sceneIndex = sceneIndex <=0 ? 0 :sceneIndex - 1;
        }else {
            //执行下一个场景的play()
            sceneIndex = sceneIndex >= sceneBuilders.length-1 ? sceneBuilders.length-1 :sceneIndex - 1;
        }

        sceneBuilders[sceneIndex]().play();
    });
}

//给舞台添加滑动事件
addStageEvent();

scene.js场景类

'use strict';
//场景类
function Scene( options ){
    this.stage = options.stage;
    //执行场景的初始化
    this.init = options.init || Scene.voidFn;
    //执行场景的进场动画
    this.pre = options.pre || Scene.voidFn;
    //执行场景的出场动画
    this.post = options.post || Scene.voidFn;

    //当前场景的所有的层
    this.layers = options.layers || [new Konva.Layer()];
    this.name = options.name || '';
    this.init();
}
Scene.prototype = {
    constructor:Scene,
    voidFn:function(){},
    CurrentScene:null,
    //场景要进入舞台，只需要调用场景的play方法
    play:function(){
        var self = this;
        var doPre = function doPre(){
            //把当前场景中的所有的层添加到舞台中
            self.layers.forEach(function(val){
                self.stage.add(val);
            });
            //设置当前场景为this
            Scene.currentScene = self;
            //执行当前场景的入场动画
            self.pre();
        };
        //如果不是第一个场景，先执行当前场景的出场动画
        //然后执行在下一个场景的入场动画
        //需要在场景的post方法中执行传进去的next方法
        if(Scene.currentScene){
            //执行上一个场景的出场动画
            Scene.currentScene.post(doPre);
        }else {
            //如果是第一个场景直接执行入场动画
            doPre();
        }
    }// play 
};