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, 3).rot(-90).addTo(this);

                    // we will wiggle the arrow between two points
                    // this dist will give us a ratio moving at least .2 and no more than .5 from the .5 start
                    // in a time of at least 1000 and no more than 5000 ms
                    // store a custom property on the arrow to wiggle
                    arrow.dist = .5;
                    arrow.wiggle("dist", .5, .2, .5, 1000, 5000);

                    // Ticker runs fast
                    Ticker.add(function() {
                        // see https://zimjs.com/noise/ for a bunch of noise examples
                        count++;
                        j += step; // increase second parameter by just a little to animate the line
                        var lastX = -5; // just off stage so can't see pink border
                        var lastY = h/2;

                        // zim provides tiny graphics API on the Shape
                        // To use full names like clear(), beginStroke(), setStrokeStyle(), beginFill(),
                        // moveTo(), lineTo(), bezierCurveTo(), etc.
                        // put these on the graphics property of the shape
                        // for instance shape.graphics.moveTo(), etc. blah
                        // The fill still has the pink stroke which we do not want to see
                        // so make this go off stage to the left, right and bottom
                        if (fill) shape.c().s(pink).ss(3).f(dark).mt(-5, w+5).lt(lastX, lastY);
                        else shape.c().s(pink).ss(3).lt(lastX, lastY); // no fill

                        loop(bumps, function(i) {
                            var x = (i+1)*w/bumps+5; // +5 just makes sure the last one is off the stage
                            var y = h/2 + noise.simplex2D(i, j)*size;
                            shape.bt(lastX+curve, lastY, x-curve, y, x, y);
                            if (i == segment) {
                                var points = [{
                                    x: lastX,
                                    y: lastY
                                },
                                    {
                                        x: lastX+curve,
                                        y: lastY
                                    },
                                    {
                                      .........完整代码请登录后点击上方下载按钮下载查看