{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/743c2b09-7941-467c-92a1-2536c7c44b3a/demo_animation_node_node/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/0af4d966-407a-4e24-bc39-751fb75e9dab/demo_animation_node_node/dependencies/herbox/0d7b758fdc47c7af5db47deeda4d99d4.json","ETag":"0D7B758FDC47C7AF5DB47DEEDA4D99D4","type":"json"}],"sourceCode":{"app.js":"App({\n onLaunch(options) {\n // 第一次打开\n // options.query == {number:1}\n console.info('App onLaunch');\n },\n onShow(options) {\n // 从后台被 scheme 重新打开\n // options.query == {number:1}\n },\n});\n","app.json":"{\"window\":{\"defaultTitle\":\"F6移动端demo\",\"allowsBounceVertical\":\"NO\",\"canPullDown\":\"NO\"},\"pages\":[\"pages/Animation/node_node/index\"]}\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}","package.json":"{\n \"name\": \"f6demo\",\n \"version\": \"1.0.0\",\n \"description\": \"f6demo\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"@antv/f6\": \"^0.0.12\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n","pages/Animation/node_node/data.js":"export default {\n nodes: [\n {\n id: 'node1',\n x: 100,\n y: 100,\n type: 'circle-animate',\n size: 20,\n label: 'Scale Animation',\n labelCfg: {\n position: 'top',\n },\n },\n {\n id: 'node2',\n x: 300,\n y: 200,\n type: 'background-animate',\n color: '#40a9ff',\n size: 20,\n label: 'Background Animation',\n labelCfg: {\n position: 'left',\n offset: 10,\n },\n },\n {\n id: 'node3',\n x: 400,\n y: 100,\n size: [40, 40],\n type: 'inner-animate',\n img:\n 'data:image/webp;base64,UklGRq4FAABXRUJQVlA4IKIFAABwHwCdASo8ADwAPiEMhEGhhv6rQAYAgS2NHsdCq/4D8AOoA64OEUAj/XPxVwyvRGvyO/gGxN/t3oK/1X6zesX3L/p/RP/2HCgKAB9AGeAbCB+AGwAbQBtA/8c/m/4PYHTonm+SzRH6B9sv2i/rOZC+G/ln9l/ML/GdoD7APcA/TD+09QDzAfrX+vHYM9AD+Uf0zrAPQA/bH0vv2t+CH9qf2R+A39e6X098/I7IAcLcs8Gjmc/9T7gPbX9H+wJ+rPVV9En9ZmBI5oUiYhkYHIVjRr9hzCTPcV5Rs/wjjIHkxPgtr/3ALZSuUm146HHwqQVA23hnnqH/4aJ/k4v4hU6RBZ0AAAD+//8ARPyL9yWIlAbWBAD0oKSqlYWreuRa3Oj02u+TvSQS8iwMYewUYTWLDNp9wOlFJaWnqE+za35UwUXuDAT6T0I4fwY+u+qrRVhl+S1ir4X7BQiNswug5AX+MjQcXEeUwfSIEUT+DFPCr+BUiwTbFxLni7fv61vRbmXoauLz4tiqOFTzEGP8tNXP5+H7mZVGfNjIxapT3FGUtqBdp/SD5cTOYOkn2fawkpqpCSqf2+CfiGWtIF673fEzlk/hIbWDhQ81C/ddxLn609d/5efckbdZ8HZbhhVmM82/Uat7CFmw1SH5xCxRxEEhjpf1EP1Xn5q9VZfm1+OFTab/MN67Xha8K//5oVBlMgZALE653X0fas/+2xMqiyCu5Wa7PHsCwbBwqROfNmzi4LPOTjkFPHVKDD1Nfj4/sul6cANdF68rf2jszlyZsUUoLTP7H3swSroc3ssNXSRVAcYd7+iBZpfoAYWvKgnr+Hv62fHZX5ZbjYbYzVjq6fsXkubto858NuUx4+ILb5y7dP6W3/IYVeUSF0yZseKIZhOMs9BBf5uB2Y3Ott//+1OG7hYINzcqigrzWAOJbSmVw3G0ULywkobx+rvfk8VmZFzQGgP/+4T74mp/vsZyM1NLguiTO2gNO05tcpXwveq5mrcweXrJ/bRZDmU2KBrnXhkXq+735c+UHTFq4h4jMOPm5shKioB6XaqhUf3DJlMg8937g/SKjrgD0H5sNm0/k4FfilBbcrsjc3dd6cwEYJo3CNhe3SpNJ2geNXyV4/hq/BZXZ1kiVknjmf5cUx7Tv/9Sb+fQ/DgAsRNSz1wiVodiLjP7aVrkxbWx5gJ8U/j0o1Ipm/nyDZRPrQXmbPAcy1eDDejxTDBKe42ElHpC2QlFdhOedsp4i9QVjt8EqWGy1YzPaGqZhCVg/LWt8/+4BmiCzNGtpR21MGJf4kI/n/1sbe36e1QBCBAx4EVfTM82ZM2lh0P189e7eY0A3NzXWVrUek8SEn+DYYCQeEaC5hDHGreFHT1baY6KyrFx3G9oMm3fLrCqmNjFRnZa3LB/5m8FgCpq9B/1OCLRE5GzVTZnVzj/4V38PgCIpX16Kznijf01+MkDeS9oCF2hEXQ9tr+mPLrjGy4Cg5fyLgyCj1fUq33nMf79Svli2h83m3gqkoxJcXvBetFQP8V/gRjBNGmFXK5TfwLhbolWEjDqUGK3n+hxzQLif9zreYO88EIRTUNbzE1/Sn7rBEtjB0uawNje5OubWsB62SOlMZoZpxrDbMb4UvQrODPhSafmhcYe9zm/dHxssMfUthhDKjyMhoRhngPjbzfGXmIV2Omgrn/zbefK/PawUGSH6x4Qk4HCN4/X8S+XCf51JJtOQeHST/yfwg69uMkE07SONnhGUrL6j5oQn6JI+zkaH/H/P/Ti/pfOTfAWxQNiMvWX08mqbuUweFSQ/G5YUP/uCvZAXutf1+Nhl2jj/n4/fPOihPjwvfFnnjOaQvs9PSpF33d+396LASZ3IID/4UP4pf9eOMXw82ccoUUUHX6MfBWyBDvARCrdPmerUwKwW+lBIAe1dsAAAA==',\n label: 'Image Rotate',\n labelCfg: {\n position: 'right',\n },\n },\n {\n id: 'node4',\n x: 300,\n y: 300,\n type: 'rect',\n label: 'No Animation',\n labelCfg: {\n position: 'bottom',\n },\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n {\n source: 'node3',\n target: 'node2',\n },\n {\n source: 'node2',\n target: 'node4',\n },\n ],\n};\n","pages/Animation/node_node/index.acss":"/* required by usingComponents */","pages/Animation/node_node/index.axml":"<f6-canvas\n width=\"{{width}}\"\n height=\"{{height}}\"\n forceMini=\"{{forceMini}}\"\n pixelRatio=\"{{pixelRatio}}\"\n onTouchEvent=\"handleTouch\"\n onInit=\"handleInit\"\n></f6-canvas>","pages/Animation/node_node/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport data from './data';\n\n/**\n * node#node\n */\n\nconst { Util } = F6;\n\n// // Scale Animation\nF6.registerNode(\n 'circle-animate',\n {\n afterDraw(cfg, group) {\n const shape = group.get('children')[0];\n shape.animate(\n (ratio) => {\n const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;\n return {\n r: cfg.size / 2 + diff,\n };\n },\n {\n repeat: true,\n duration: 3000,\n easing: 'easeCubic',\n },\n );\n },\n },\n 'circle',\n);\n\n// Background Animation\nF6.registerNode(\n 'background-animate',\n {\n afterDraw(cfg, group) {\n const r = cfg.size / 2;\n const back1 = group.addShape('circle', {\n zIndex: -3,\n attrs: {\n x: 0,\n y: 0,\n r,\n fill: cfg.color,\n opacity: 0.6,\n },\n name: 'back1-shape',\n });\n const back2 = group.addShape('circle', {\n zIndex: -2,\n attrs: {\n x: 0,\n y: 0,\n r,\n fill: cfg.color,\n opacity: 0.6,\n },\n name: 'back2-shape',\n });\n const back3 = group.addShape('circle', {\n zIndex: -1,\n attrs: {\n x: 0,\n y: 0,\n r,\n fill: cfg.color,\n opacity: 0.6,\n },\n name: 'back3-shape',\n });\n group.sort(); // Sort according to the zIndex\n back1.animate(\n {\n // Magnifying and disappearing\n r: r + 10,\n opacity: 0.1,\n },\n {\n duration: 3000,\n easing: 'easeCubic',\n delay: 0,\n repeat: true, // repeat\n },\n ); // no delay\n back2.animate(\n {\n // Magnifying and disappearing\n r: r + 10,\n opacity: 0.1,\n },\n {\n duration: 3000,\n easing: 'easeCubic',\n delay: 1000,\n repeat: true, // repeat\n },\n ); // 1s delay\n back3.animate(\n {\n // Magnifying and disappearing\n r: r + 10,\n opacity: 0.1,\n },\n {\n duration: 3000,\n easing: 'easeCubic',\n delay: 2000,\n repeat: true, // repeat\n },\n ); // 3s delay\n },\n },\n 'circle',\n);\n\n// // Image animation\nF6.registerNode(\n 'inner-animate',\n {\n afterDraw(cfg, group) {\n const { size } = cfg;\n const width = size[0] - 12;\n const height = size[1] - 12;\n const image = group.addShape('image', {\n attrs: {\n x: -width / 2,\n y: -height / 2,\n width,\n height,\n img: cfg.img,\n },\n name: 'image-shape',\n });\n image.animate(\n (ratio) => {\n const toMatrix = Util.transform(\n [1, 0, 0, 0, 1, 0, 0, 0, 1],\n [['r', ratio * Math.PI * 2]],\n );\n return {\n matrix: toMatrix,\n };\n },\n {\n repeat: true,\n duration: 3000,\n easing: 'easeCubic',\n },\n );\n },\n },\n 'rect',\n);\n\nPage({\n canvas: null,\n ctx: null,\n renderer: '', // mini、mini-native等，F6需要，标记环境\n isCanvasInit: false, // canvas是否准备好了\n graph: null,\n\n data: {\n width: 375,\n height: 600,\n pixelRatio: 2,\n forceMini: false,\n },\n\n onLoad() {\n // 同步获取window的宽高\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n\n this.setData({\n width: windowWidth,\n height: windowHeight,\n pixelRatio,\n });\n },\n\n /**\n * 初始化cnavas回调，缓存获得的context\n * @param {*} ctx 绘图context\n * @param {*} rect 宽高信息\n * @param {*} canvas canvas对象，在render为mini时为null\n * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native\n */\n handleInit(ctx, rect, canvas, renderer) {\n this.isCanvasInit = true;\n this.ctx = wrapContext(ctx);\n this.renderer = renderer;\n this.canvas = canvas;\n this.updateChart();\n },\n\n /**\n * canvas派发的事件，转派给graph实例\n */\n handleTouch(e) {\n this.graph && this.graph.emitEvent(e);\n },\n\n updateChart() {\n const { width, height, pixelRatio } = this.data;\n\n // 创建F6实例\n this.graph = new F6.Graph({\n context: this.ctx,\n renderer: this.renderer,\n width,\n height,\n pixelRatio,\n fitView: true,\n extra: {\n createImage: this.canvas && this.canvas.createImage,\n },\n defaultNode: {\n style: {\n fill: '#DEE9FF',\n stroke: '#5B8FF9',\n },\n },\n defaultEdge: {\n style: {\n lineWidth: 1,\n stroke: '#b5b5b5',\n },\n },\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/Animation/node_node/index.json":"{\n \"defaultTitle\": \"node_node\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/Animation/node_node/index.less":"page {\n background-color: #f7f7f7;\n border: 1px solid rgba(0,0,0,0);\n box-sizing: border-box;\n}\n\n.page-section-demo {\n padding: 32rpx;\n}","utils/common.js":"function strLen(str = '') {\n let len = 0;\n for (let i = 0; i < str.length; i++) {\n if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {\n len += 1;\n } else {\n len += 2;\n }\n }\n\n return len;\n}\n\nfunction measureText(text, font) {\n let fontSize = 12;\n if (font) {\n fontSize = parseInt(font.split(' ')[3], 10);\n }\n fontSize /= 2;\n return {\n width: strLen(text) * fontSize,\n };\n}\n\nexport { measureText };\n","utils/context.js":"import { measureText } from './common';\n/**\n * 部分小程序context会缺少函数，补上\n */\nfunction wrapContext(ctx) {\n if (!ctx) return;\n if (!ctx.measureText) {\n ctx.measureText = measureText;\n }\n return ctx;\n}\n\nexport { wrapContext };\n"},"dist":[{"name":"3766a4c06d5bcb58ff5a0938bf555ed0.json","size":692482,"url":"https://gw.alipayobjects.com/os/f6/9623791d-d134-48e1-ba35-23c2313ff8ea/demo_animation_node_node/dist/herbox/3766a4c06d5bcb58ff5a0938bf555ed0.json","ETag":"3766A4C06D5BCB58FF5A0938BF555ED0","type":"json"}],"name":"pages/Animation/node_node/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}