sketch实现城市天际线视觉差异动画效果代码-html代码-BFW代码库

sketch实现城市天际线视觉差异动画效果代码

代码语言：html

代码描述：sketch实现城市天际线视觉差异动画效果代码

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

<html>
<head>
    <style>
        body {
            overflow: hidden
        }
        canvas {
            background:
            linear-gradient(
            hsl(200, 50%, 80%) 0%,
            hsl(200, 30%, 95%) 75%);
            display: block;
        }

        div {
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>

</head>
<body style="zoom: 1;">
    <div></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script>
    <script>
        (function() {
            var Building, Skyline, dt, sketch, skylines;

            sketch = Sketch.create();

            sketch.mouse.x = sketch.width / 10;

            sketch.mouse.y = sketch.height;

            skylines = [];

            dt = 1;


            // BUILDINGS

            Building = function(config) {
                return this.reset(config);
            };

            Building.prototype.reset = function(config) {
                this.layer = config.layer;
                this.x = config.x;
                this.y = config.y;
                this.width = config.width;
                this.height = config.height;
                this.color = config.color;
                this.slantedTop = floor(random(0, 10)) === 0;
                this.slantedTopHeight = this.width / random(2, 4);
                this.slantedTopDirection = round(random(0, 1)) === 0;
                this.spireTop = floor(random(0, 15)) === 0;
                this.spireTopWidth = random(this.width * .01, this.width * .07);
                this.spireTopHeight = random(10, 20);
                this.antennaTop = !this.spireTop && floor(random(0, 10)) === 0;
                this.antennaTopWidth = this.layer / 2;
                return this.antennaTopHeight = random(5, 20);
            };

            Building.prototype.render = function() {
                sketch.fillStyle = sketch.strokeStyle = this.color;
                sketch.lineWidth = 2;
                sketch.beginPath();
                sketch.rect(this.x, this.y, this.width, this.height);
                sketch.fill();
                sketch.stroke();
                if (this.slantedTop) {
                    sketch.beginPath();
                    sketch.moveTo(this.x, this.y);
                    sketch.lineTo(this.x + this.width, this.y);
                    if (this.slantedTopDirection) {
                        sketch.lineTo(this.x + this.width, this.y - this.slantedTopHeight);
                    } else {
                        sketch.lineTo(this.x, this.y - this.slantedTopHeight);
                    }
                    sketch.closePath();
                    sketch.fill();
                    sketch.stroke();
                }
                if (this.spireTop) {
                    sketch.beginPath();
                    sketch.moveTo(this.x + (this.width / 2), this.y - this.spireTopHeight);
                    sketch.lineTo(this.x + (this.width / 2) + this.spireTopWidth, this.y);
                    sketch.lineTo(this.x + (this.width / 2) - this.spireTopWidth, this.y);
                    sketch.closePath();
                    sketch.fill();
                    sketch.stroke();
                }
                if (this.antennaTop) {
                    sketch.beginPath();
                    sketch.moveTo(this.x + (this.width / 2), this.y - this.antennaTopHeight);
                    sketch.lineTo(this.x + (this.width / 2), this.y);
                    sketch.lineWidth = this.antennaTopWidth;
                    return sketch.stroke();
                }
            };


            // SKYLINES

            Skyline = function(config) {
                this.x = 0;
                this.buildings = [];
                this.layer = config.layer;
                this.width = {
                    min: config.width.min,
                    max: config.width.max
                };
                this.height = {
                    min: config.height.min,
                    max: config.height.max
                };
                this.speed = config.speed;
                this.color = config.color;
                this.populate();
                return this;
            };

            Skyline.prototype.pop.........完整代码请登录后点击上方下载按钮下载查看