zim实现一个多彩的年轮变形动画效果代码-html代码-BFW代码库

zim实现一个多彩的年轮变形动画效果代码

代码语言：html

所属分类：动画

代码描述：zim实现一个多彩的年轮变形动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">




</head>

<bodystyle="background-color: rgb(0, 0, 0); overflow: hidden;">

    <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="https://zimjs.org/cdn/icon6.js"></script>
    <script>
        // Using a Frame for animation and a Frame for interface
        // so animation does not have to update interface
        // Storing data outside the Frame calls so both Frames can use it

        const data = {
            curve: .5,
            // curve factor
            speed: .02,
            // speed factor
            delay: .03 // delay of pattern between rings
        };

        // ~~~~~~~ Rings animation Frame

        const scaling = "outside"; // this will resize to fit outside the screen dimensions
        const width = 1024;
        const height = 768;
        const color = black;
        const outerColor = black;

        // turning off rollovers and press events (last false, false)
        const frame = new Frame(scaling, width, height, color, outerColor, null, null, null, false, false);
        frame.on("ready", function () {

            zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

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

            // REFERENCES for ZIM at https://zimjs.com
            // see https://zimjs.com/intro.html for an intro example
            // see https://zimjs.com/learn.html for video and code tutorials
            // see https://zimjs.com/docs.html for documentation
            // see https://codepen.io/topic/zim/ for ZIM on CodePen

            // *** NOTE: ZIM Cat defaults to time in seconds
            // All previous versions, examples, videos, etc. have time in milliseconds
            // This can be set back with TIME = "milliseconds" but we suggest you give it a try!
            // There will be a warning in the conslole if your animation is not moving ;-)

            // CODE HERE
            // rings are made with little lines in a ring
            const segments = 180; // how many lines
            const delta = 360 / segments; // angle for each line
            const inner = 50; // inner radius - multiplied by 2 at largest ring, etc.
            const outer = 200; // outer radius
            const variation = outer - inner; // maximum noise
            const colors = series(green, blue, yellow, orange, red, purple);
            let time = 0;

            // The ZIM Generator() works somewhat like Processing / P5js
            // Setting stamp instead of draw will draw all generations immediately
            // rather than one generation at a time
            // and then we will call restamp() in a Ticker to animate patterns
            var g = new Generator({
                stamp: gen,
                maxCount: segments
            });


            // Generator lines do not fill (Generator shapes do)
            // so send info to Shape objects on stage
            var shapes = [];
            loop(6, i => {
                shapes.push(new Shape(stageW, stageH).addTo());
            });

            function gen(count) {
                let angle = delta * count * RAD; // (0-360 degrees in radians)
                loop(6, i => {
                    let noise = g.noise(data.curve * Math.sin(angle), data.curve * Math.cos(angle), time + i * data.delay);
                    let radius = inner + variation * noise;
                    g.push().translate(radius * (2 - i * .3), 0).pop();
                    // find global position of generator
                    let p = g.drawing.localToGlobal(g.currentX, g.currentY);
                    // if first time then start the drawing otherwise draw line
                    if (count == 1) shapes[i].c().f(colors()).mt(p.x, p.y); else
                        shapes[i].lt(p.x, p.y);
  .........完整代码请登录后点击上方下载按钮下载查看