zim框架示例手册demo演示代码-html代码-BFW代码库

zim框架示例手册demo演示代码

代码语言：html

所属分类：动画

代码描述：zim框架示例手册demo演示代码，这个zim翻书手册，里面演示了zim通过几行代码实现的canvas动画交互效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  


</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/createjs-1.3.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zim-cat.4.js"></script>
<script src='//repo.bfw.wiki/bfwrepo/js/zim/asset/icon6.js'></script>
      <script  >

const scaling = "fit";
const width = 1920/2; // making sure book was 1080p ratio for video
const height = 1080/2; // divided by 2 to make demo sizes bigger
const color = grey;
const outerColor = dark;    

const frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
        zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
        
        const stage = frame.stage;
        let stageW = frame.width;
        let stageH = frame.height;

        const label = new Label({
                text:"\"Code that reads like a book!\"\nTurn the pages and interact...",
                color:white,
                italic:true,
                lineHeight:50,
                align:CENTER,
                backgroundColor:dark,
                padding:50
        }).center().mov(0,-50);
        label.background.ske(10).mov(10);

        // call remote script to make ZIM icon - you will not need this
        const icon = createIcon();

        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        // ASSETS       
        // usually we load assets in Frame call 
        // but wanted a message to show up in CodePen before book was made
        // so we show intro and use loadAssets() to load assets after 
        const border = 30;       
        const codes = [];
        loop(9, i=>{
                codes.push("code0"+(i+1)+".png");
        });
        let assets = ["pragma.jpg", "teach.jpg", "teach.json", "createjs_1.png"];
        assets = assets.concat(codes);
        const path = "//repo.bfw.wiki/bfwrepo/js/zim/asset/";
        
        frame.loadAssets(assets, path);
        frame.on("complete", ()=>{            
                const button = new Button({
                        label:"VIEW",
                        backgroundColor:blue,
                        rollBackgroundColor:green,
                        corner:10
                })
                .sca(.7)
                .center().mov(0,50)
                .tap(makeBook);   

                const subtitle = new Label({
                        text:"click to see video",
                        color:yellow.toColor(grey,.2),
                        rollColor:green,
                        size:30                              
                }).pos(0,50,CENTER,BOTTOM).tap(()=>{
                //      zgo("https://www.youtube.com/watch?v=QQR4g8irfCM", "_blank");
                });    
                
                stage.update();
        });
        
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        // MAIN CODE
        function makeBook() {
                
                icon.removeFrom();

                // page colors left and right
                const colors = [
                        "#767676", green, 
                        "#1d1f21", dark, 
                        "#e2e0de", purple, 
                        "#1d1f21", dark, 
                        "#e2e0de", green,
                        "#1d1f21", darker, 
                        "#e2e0de", yellow.darken(.2),
                        "#1d1f21", darker,
                        "#e2e0de", blue.darken(.5),
                        "#1d1f21", darker
                ];
                STYLE = {
                        type:{
                                Page:{
                                        width:stageW/2-border, 
                                        height:stageH-border*2,
                                        color:series(colors) // as each page gets made it gets the next color
                                }
                        }
                }

                // class to make dashed selection box on left pages 
                // used in ZIM Story video to highlight code
                class Selector extends Container {
                        constructor (obj) {
                                super(obj.width, obj.height);            
                                const that = this;
                                const s = new Shape().addTo(this);   
                                this.addTo(); 
                                this.obj = obj;
                                this.e1 = obj.on("mousedown", () => {
                                        s.c();
                                        that.startX = frame.mouseX;
                                        that.startY = frame.mouseY;  
                                        if (that.startY > 350) that.startY = null;    
                                })
                                this.e2 = obj.on("pressmove", () => {
                                        if (!that.startY) return;
                                        s
                                                .c().s(red).ss(2).sd([20, 10], 0)
                                                .mt(that.startX, that.startY)
                                                .lt(frame.mouseX, that.startY)
                                                .lt(frame.mouseX, frame.mouseY)
                                                .lt(that.startX, frame.mouseY)
                                                .cp();
                                .........完整代码请登录后点击上方下载按钮下载查看