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(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0