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