ZimJS在限定区块路径上的蠕动动画

Animated motion on blob path with zim.js

h5, canvas, zim.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3531
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const frame = new Frame("fit", 1024, 768, "#000", "#111");
frame.on("ready", () => { // ES6 Arrow Function - similar to function(){}
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

// often need below - so consider it part of the template
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

// REFERENCES for ZIM at http://zimjs.com
    // see http://zimjs.com/learn.html for video and code tutorials
    // see http://zimjs.com/docs.html for documentation
    // see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
    // see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

// CODE HERE
    STYLE = {
        borderWidth: 3,
        stickColor: light,
        handleSize: 16,
        onTop: false
    }

// Recorded at https://zimjs.com/nio/paths.html - PIZZAZZ 4 - Blob and Squiggle paths
    // Do not be frightened of this data - you would never hand code it
    // It just represents positions of the control point and handles
    const firstPoints = [
        [-31.3, -158.3, 0, 0, -331.7, 29.2, 331.7, -29.2, "mirror"],
        [-16.6, 154.1, 0, 0, 316.8, -28.1, -316.8, 28.1, "mirror"]
    ];
    const secondPoints = [
        [-35.2, -233.4, 0, 0, -87.7, 0.1, 87.7, -0.1, "mirror"],
        [141.8, 3.7, 0, 0, 1, -86.5, -1, 86.5, "mirror"],
        [-36.1, 223, 0, 0, 109.3, -1, -109.3, 1, "mirror"],
        [-205.3, 1.6, 0, 0, 1, 96, -1, -96, "mirror"]
    ];

const blob1 = new Blob({
        points: firstPoints,
        borderColor: dark
    }).center();
    const blob2 = new Blob({
        points: secondPoints,
        borderColor: dark
    }).center();

Ticker.add(function() {
        electrics.loop(function(squiggle) {
            squiggle.update();
        });
    });

const transformManager = new TransformManager([blob1, blob2], "zinkle");

new Label({
        color: blue,
        text: "ZIM ZINKLE - change blobs - click to add points, CTRL click to remove points"
    }).sca(.6).alp(.7).pos(25, 25);

// note the second application of style
    STYLE = {
        backgroundColor: grey,
        rollBackgroundColor: blue,
        corner: 0,
        scale: .6,
        alpha: .7
    };

new Button({
            label: "RESET"
        })
        .pos(20, 20, true)
        .tap(function() {
            transformManager.clearPersist("zinkle");
            blob1.points = firstPoints;
            blob2.points = secondPoints;
            blob1.center().showControls();
            blob2.center();
        });

new Button({
            label: "DOCS"
        })
        .pos(40, 40, false, true)
        .tap(function() {
            zgo("https://zimjs.com/docs.html?items=Frame,Container,Squiggle,Blob,Label,Button,tap,animate,loop,pos,alp,sca,addTo,center,TransformManager,loop,zog,STYLE,Ticker");
        });

stage.update(); // this is needed to show any changes

// DOCS FOR ITEMS USED
    // https://zimjs.com/docs.html?item=Button
    // https://zimjs.com/docs.html?item=tap
    // https://zimjs.com/docs.html?item=pos
    // https://zimjs.com/docs.html?item=sca
    // https://zimjs.com/docs.html?item=center
    // https://zimjs.com/docs.html?item=zgo
    // https://zimjs.com/docs.html?item=STYLE
    // https://zimjs.com/docs.html?item=Ticker

// FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame, 1024 - 230, 768 - 140, (button) => {
        button.sca(1.3)
    });

}); // end of ready

编译

CSS

HTML

Animated motion on blob path with zim.js

h5, canvas, zim.js

编辑器支持Emmet

快捷键

Animated motion on blob path with zim.js

h5, canvas, zim.js

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

基于webassembly（wasm）实现的高性能实时A*路径查找动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：