文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js怎么实现花瓣漫天飞舞特效

2023-07-04 21:44

关注

这篇文章主要讲解了“js怎么实现花瓣漫天飞舞特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js怎么实现花瓣漫天飞舞特效”吧!

效果:

js怎么实现花瓣漫天飞舞特效

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>    <TITLE>花瓣漫天飞舞入流水</TITLE>    <META NAME="Generator" CONTENT="EditPlus">    <META NAME="Author" CONTENT="">    <META NAME="Keywords" CONTENT="">    <META NAME="Description" CONTENT="">    <style>        html, body{            width: 100%;            height: 100%;            margin: 0;            padding: 0;            overflow: hidden;        }        .container{            width: 100%;            height: 100%;            margin: 0;            padding: 0;            background-color: #000000;        }    </style>    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></HEAD> <BODY> <div id="jsi-cherry-container" class="container"></div><script>    var RENDERER = {        INIT_CHERRY_BLOSSOM_COUNT : 30,        MAX_ADDING_INTERVAL : 10,         init : function(){            this.setParameters();            this.reconstructMethods();            this.createCherries();            this.render();        },        setParameters : function(){            this.$container = $('#jsi-cherry-container');            this.width = this.$container.width();            this.height = this.$container.height();            this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');            this.cherries = [];            this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);            this.addingInterval = this.maxAddingInterval;        },        reconstructMethods : function(){            this.render = this.render.bind(this);        },        createCherries : function(){            for(var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++){                this.cherries.push(new CHERRY_BLOSSOM(this, true));            }        },        render : function(){            requestAnimationFrame(this.render);            this.context.clearRect(0, 0, this.width, this.height);             this.cherries.sort(function(cherry1, cherry2){                return cherry1.z - cherry2.z;            });            for(var i = this.cherries.length - 1; i >= 0; i--){                if(!this.cherries[i].render(this.context)){                    this.cherries.splice(i, 1);                }            }            if(--this.addingInterval == 0){                this.addingInterval = this.maxAddingInterval;                this.cherries.push(new CHERRY_BLOSSOM(this, false));            }        }    };    var CHERRY_BLOSSOM = function(renderer, isRandom){        this.renderer = renderer;        this.init(isRandom);    };    CHERRY_BLOSSOM.prototype = {        FOCUS_POSITION : 300,        FAR_LIMIT : 600,        MAX_RIPPLE_COUNT : 100,        RIPPLE_RADIUS : 100,        SURFACE_RATE : 0.5,        SINK_OFFSET : 20,         init : function(isRandom){            this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);            this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;            this.z = this.getRandomValue(0, this.FAR_LIMIT);            this.vx = this.getRandomValue(-2, 2);            this.vy = -2;            this.theta = this.getRandomValue(0, Math.PI * 2);            this.phi = this.getRandomValue(0, Math.PI * 2);            this.psi = 0;            this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);            this.opacity = 0;            this.endTheta = false;            this.endPhi = false;            this.rippleCount = 0;             var axis = this.getAxis(),                theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;            theta %= Math.PI * 2;             this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);            this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;            this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);            this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');            this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');            this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');            this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);            this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');            this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');            this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');        },        getRandomValue : function(min, max){            return min + (max - min) * Math.random();        },        getAxis : function(){            var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),                x = this.renderer.width / 2 + this.x * rate,                y = this.renderer.height / 2 - this.y * rate;            return {rate : rate, x : x, y : y};        },        renderCherry : function(context, axis){            context.beginPath();            context.moveTo(0, 40);            context.bezierCurveTo(-60, 20, -10, -60, 0, -20);            context.bezierCurveTo(10, -60, 60, 20, 0, 40);            context.fill();             for(var i = -4; i < 4; i++){                context.beginPath();                context.moveTo(0, 40);                context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);                context.stroke();            }        },        render : function(context){            var axis = this.getAxis();             if(axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT){                context.save();                context.lineWidth = 2;                context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';                context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);                context.scale(1, 0.3);                context.beginPath();                context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);                context.stroke();                context.restore();                this.rippleCount++;            }            if(axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)){                if(this.y <= 0){                    this.opacity = Math.min(this.opacity + 0.01, 1);                }                context.save();                context.globalAlpha = this.opacity;                context.fillStyle = this.shadowColor;                context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';                context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));                context.rotate(Math.PI - this.theta);                context.scale(axis.rate * -Math.sin(this.phi), axis.rate);                context.translate(0, this.offsetY);                this.renderCherry(context, axis);                context.restore();            }            context.save();            context.fillStyle = this.entityColor;            context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';            context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));            context.rotate(this.theta);            context.scale(axis.rate * Math.sin(this.phi), axis.rate);            context.translate(0, this.offsetY);            this.renderCherry(context, axis);            context.restore();             if(this.y <= -this.renderer.height / 4){                if(!this.endTheta){                    for(var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI){                        if(this.theta < theta && this.theta + Math.PI / 200 > theta){                            this.theta = theta;                            this.endTheta = true;                            break;                        }                    }                }                if(!this.endPhi){                    for(var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4){                        if(this.phi < phi && this.phi + Math.PI / 200 > phi){                            this.phi = Math.PI / 8;                            this.endPhi = true;                            break;                        }                    }                }            }            if(!this.endTheta){                if(axis.y == this.thresholdY){                    this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);                }else{                    this.theta += Math.PI / 500;                }                this.theta %= Math.PI * 2;            }            if(this.endPhi){                if(this.rippleCount == this.MAX_RIPPLE_COUNT){                    this.psi += this.dpsi;                    this.psi %= Math.PI * 2;                }            }else{                this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);                this.phi %= Math.PI;            }            if(this.y <= -this.renderer.height * this.SURFACE_RATE){                this.x += 2;                this.y = -this.renderer.height * this.SURFACE_RATE;            }else{                this.x += this.vx;                this.y += this.vy;            }            return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;        }    };    $(function(){        RENDERER.init();    });</script></BODY></HTML>

感谢各位的阅读,以上就是“js怎么实现花瓣漫天飞舞特效”的内容了,经过本文的学习后,相信大家对js怎么实现花瓣漫天飞舞特效这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯