zim实现线条跟踪banner效果-html代码-BFW代码库

代码语言：html

所属分类：多媒体

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/createjs.min.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/zim-min.js"></script>

    <script src="http://repo.bfw.wiki/bfwrepo/js/pizzazz_03.js"></script>
    <script>

        // SCALING OPTIONS
        // scaling can have values as follows with full being the default
        // "fit"    sets canvas and stage to dimensions and scales to fit inside window size
        // "outside"    sets canvas and stage to dimensions and scales to fit outside window size
        // "full"    sets stage to window size with no scaling
        // "tagID"    add canvas to HTML tag of ID - set to dimensions if provided - no scaling

        var scaling = "banner"; // target the banner tag
        var width = 1000;
        var height = 150;
        var color = dark;
        var outerColor = dark;

        // as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
        var 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;
            const stageW = frame.width;
            const stageH = frame.height;

            // the general idea is we have two ZIM Frame objects each with their own canvas and stage
            // the first we see to start and it is scaled to fit in the div with id=banner
            // this frame is interactive
            // the second is a full window frame and it is not interactive
            // this allows us to interact with the HTML
            // we made it not interactive by turning off the canvas pointerEvents
            // we hide and show the content when we press anywhere on the banner
            // we could have made a button, etc.

            // BTW -    we can certainly make objects travel along paths see https://zimjs.com/nio/
            // here we wanted to give the illusion of a continuous path so used ZIM Noise.

            // make the animated backing lines with ZIM Pizzazz - see imported js file for details
            pizzazz.makePattern({
                type: "stripes",
                size: 50,
                cols: 20,
                colors: series([pink, purple]),
                interval: 700
            })
            .sca(-1, 1) // goes in other direction normally
            .alp(.5)
            .cur() // pass in any css cursor - default "pointer"
            .center();

            const icon = frame.makeIcon(null, "#222").pos(20, 0, LEFT, CENTER);
            // used the icon size and position but want the backing behind the icon so ord(-1)
            // will animate this in later
            const backing = new Rectangle(icon.width, icon.height, pink).loc(icon).mov(6, 6).ord(-1).alp(0);
            new Label("FOLLOW", 100, "impact", white).alp(.5).noMouse().pos(icon.width+45, 16, LEFT, CENTER);

            // constants for animated line
            const bumps = 7; // number of bumps
            const curve = 60; // "radius" of Bezier handle
            const size = 75; // height from center - so max is roughly twice this
            const step = .01; // bigger for faster speed

            // we make lots of times eventually so make a class
            // in the first case it gets a grey fill in the other cases it does not
            // segments is what line segment to put the triangle arrow at
            // and we are creating this from two different frames with different stages
            // if we want the Ticker inside to update the second stage we need the stage
            class Line extends Container {
                constructor(w, h, fill = true, segment = 4, stage) {
                    super(w, h); // make the ZIM Container

                    // the shape object
                    // this.shape if we want to reference it outside (we do not need to in this case)
                    // this is a reference to the container we have extended
                    // which will also hold all the stuff we add here and be the object made from this class
                    const shape = this.shape = new Shape(w, h).addTo(this);

                    // the noise object
                    const noise = this.noise = new Noise();

                    let j = 0; // second parameter for simplex2D
                    let count = 0; // ticker count

                    const arrow = this.arrow = new Triangle(40, 40, 40, white, pink.........完整代码请登录后点击上方下载按钮下载查看