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(); }); this.e3 = obj.on("pressup", () => { if (!that.startY) return; s.c(); }); } dispose() { this.obj.off("pressdown", this.e1); this.obj.off("pressmove", this.e2); this.obj.off("pressup", this.e3); super.dispose(true); } } // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // INTRO // loads a Sprite const page0 = new Page(); new Sprite({json:asset("teach.json")}) .sca(.7) .pos(30,0,RIGHT,BOTTOM,page0) .run({wait:2, time:3, rewind:true, rewindWait:3, loop:true, loopWait:3}) const page1 = new Page(); frame.madeWith(tin, "ZIM Story!").sca(3).center(page1).mov(0,-10); // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // DRAGGING const page2 = new Page(); asset("code01.png").scaleTo(page2,98).center(page2); frame.makeIcon().sca(.4).pos(40,25,RIGHT,BOTTOM,page2).tap(function(){zgo("https://zimjs.com", "_blank");}); const page3 = new Page(); const circle = new Circle(100,yellow).center(page3).drag().setMask(page3.backing); asset("createjs_1.png").scaleTo(circle,50,50).center(circle); new Label({text:"drag", color:white}).alp(.7).sca(.6).pos(30,30,RIGHT,TOP,page3); // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // EMITTER const page4 = new Page(); asset("code02.png").scaleTo(page4,98).center(page4); frame.makeIcon().sca(.4).pos(40,25,RIGHT,BOTTOM,page4).tap(function(){zgo("https://zimjs.com", "_blank");}); const page5 = new Page(); const emitter = new Emitter().center(page5); emitter.particles.setMask(page5.backing); // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // ANIMATION const page6 = new Page(); asset("code03.png").scaleTo(page6,98).center(page6); frame.makeIcon().sca(.4).pos(40,25,RIGHT,BOTTOM,page6).tap(function(){zgo("https://zimjs.com", "_blank");}); const page7 = new Page(); new Rectangle(100,100,blue) .center.........完整代码请登录后点击上方下载按钮下载查看
网友评论0