AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【UI】 欢快畅游的小鱼特效

2024-04-12 47
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【UI】 欢快畅游的小鱼特效

Jquery 欢快畅游的小鱼特效

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢快畅游的小鱼特效</title>
  <head>
    <!--背景渐变效果样式代码开始（可忽略）-->
    <style type="text/css">
      html,body{width:100%;height:100%;margin:0;padding:0;}
      body{
      background: -webkit-linear-gradient(left,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
      background: -o-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
      background: -moz-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
      background: linear-gradient(to right, rgba(89,114,192,0.8), rgba(89,114,192,0.2));
      background-size: 400% 400%;
      animation: gradientBG 5s ease infinite;}
      @keyframes gradientBG {
      0% {
      background-position: 0% 50%;
      }
      50% {
      background-position: 100% 50%;
      }
      100% {
      background-position: 0% 50%;
      }
      }
    </style>
    <!--背景渐变效果样式代码结束（可忽略）-->
    <!--定义底部承载游动小鱼特效的div样式开始-->
    <style type="text/css">
      .container{
      margin:0;
      padding:0;
      background-color:transparent;
      width:100%;
      height:200px;
      z-index:-1;
      position:fixed;
      bottom:0;
      left:0;}
    </style>
    <!--定义底部承载游动小鱼特效的div样式结束-->
  </head>
  <body>
    <!--引入jquery-->
    <script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <!--承载游动小鱼特效的div容器-->
    <div id="jsi-flying-fish-container" class="container"></div>
    <!--核心特效定义js-->
    <script src='fish.js'></script>
  </body>
</html>

fish.js

var RENDERER = {
  POINT_INTERVAL : 5,
  FISH_COUNT : 3,
  MAX_INTERVAL_COUNT : 50,
  INIT_HEIGHT_RATE : 0.5,
  THRESHOLD : 50,
  
  init : function(){
    this.setParameters();
    this.reconstructMethods();
    this.setup();
    this.bindEvent();
    this.render();
  },
  setParameters : function(){
    this.$window = $(window);
    this.$container = $('#jsi-flying-fish-container');
    this.$canvas = $('<canvas />');
    this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d');
    this.points = [];
    this.fishes = [];
    this.watchIds = [];
  },
  createSurfacePoints : function(){
    var count = Math.round(this.width / this.POINT_INTERVAL);
    this.pointInterval = this.width / (count - 1);
    this.points.push(new SURFACE_POINT(this, 0));
    
    for(var i = 1; i < count; i++){
      var point = new SURFACE_POINT(this, i * this.pointInterval),
        previous = this.points[i - 1];
        
      point.setPreviousPoint(previous);
      previous.setNextPoint(point);
      this.points.push(point);
    }
  },
  reconstructMethods : function(){
    this.watchWindowSize = this.watchWindowSize.bind(this);
    this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
    this.startEpicenter = this.startEpicenter.bind(this);
    this.moveEpicenter = this.moveEpicenter.bind(this);
    this.reverseVertical = this.reverseVertical.bind(this);
    this.render = this.render.bind(this);
  },
  setup : function(){
    this.points.length = 0;
    this.fishes.length = 0;
    this.watchIds.length = 0;
    this.intervalCount = this.MAX_INTERVAL_COUNT;
    this.width = this.$container.width();
    this.height = this.$container.height();
    this.fishCount = this.FISH_COUNT * this.width / 500 * this.height / 500;
    this.$canvas.attr({width : this.width, height : this.height});
    this.reverse = false;
    
    this.fishes.push(new FISH(this));
    this.createSurfacePoints();
  },
  watchWindowSize : function(){
    this.clearTimer();
    this.tmpWidth = this.$window.width();
    this.tmpHeight = this.$window.height();
    this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL));
  },
  clearTimer : function(){
    while(this.watchIds.length > 0){
      clearTimeout(this.watchIds.pop());
    }
  },
  jdugeToStopResize : function(){
    var width = this.$window.width(),
      height = this.$window.height(),
      stopped = (width == this.tmpWidth && height == this.tmpHeight);
      
    this.tmpWidth = width;
    this.tmpHeight = height;
    
    if(stopped){
      this.setup();
    }
  },
  bindEvent : function(){
    this.$window.on('resize', this.watchWindowSize);
    this.$container.on('mouseenter', this.startEpicenter);
    this.$container.on('mousemove', this.moveEpicenter);
    this.$container.on('click', this.reverseVertical);
  },
  getAxis : function(event){
    var offset = this.$container.offset();
    
    return {
      x : event.clientX - offset.left + this.$window.scrollLeft(),
      y : event.clientY - offset.top + this.$window.scrollTop()
    };
  },
  startEpicenter : function(event){
    this.axis = this.getAxis(event);
  },
  moveEpicenter : function(event){
    var axis = this.getAxis(event);
    
    if(!this.axis){
      this.axis = axis;
    }
    this.generateEpicenter(axis.x, axis.y, axis.y - this.axis.y);
    this.axis = axis;
  },
  generateEpicenter : function(x, y, velocity){
    if(y < this.height / 2 - this.THRESHOLD || y > this.height / 2 + this.THRESHOLD){
      return;
    }
    var index = Math.round(x / this.pointInterval);
    
    if(index < 0 || index >= this.points.length){
      return;
    }
    this.points[index].interfere(y, velocity);
  },
  reverseVertical : function(){
    this.reverse = !this.reverse;
    
    for(var i = 0, count = this.fishes.length; i < count; i++){
      this.fishes[i].reverseVertical();
    }
  },
  controlStatus : function(){
    for(var i = 0, count = this.points.length; i < count; i++){
      this.points[i].updateSelf();
    }
    for(var i = 0, count = this.points.length; i < count; i++){
      this.points[i].updateNeighbors();
    }
    if(this.fishes.length < this.fishCount){
      if(--this.intervalCount == 0){
        this.intervalCount = this.MAX_INTERVAL_COUNT;
        this.fishes.push(new FISH(this));
      }
    }
  },
  render : function(){
    requestAnimationFrame(this.render);
    this.controlStatus();
    this.context.clearRect(0, 0, this.width, this.height);
    this.context.fillStyle = 'hsl(0, 0%, 95%)';
    
    for(var i = 0, count = this.fishes.length; i < count; i++){
      this.fishes[i].render(this.context);
    }
    this.context.save();
    this.context.globalCompositeOperation = 'xor';
    this.context.beginPath();
    this.context.moveTo(0, this.reverse ? 0 : this.height);
    
    for(var i = 0, count = this.points.length; i < count; i++){
      this.points[i].render(this.context);
    }
    this.context.lineTo(this.width, this.reverse ? 0 : this.height);
    this.context.closePath();
    this.context.fill();
    this.context.restore();
  }
};
var SURFACE_POINT = function(renderer, x){
  this.renderer = renderer;
  this.x = x;
  this.init();
};
SURFACE_POINT.prototype = {
  SPRING_CONSTANT : 0.03,
  SPRING_FRICTION : 0.9,
  WAVE_SPREAD : 0.3,
  ACCELARATION_RATE : 0.01,
  
  init : function(){
    this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE;
    this.height = this.initHeight;
    this.fy = 0;
    this.force = {previous : 0, next : 0};
  },
  setPreviousPoint : function(previous){
    this.previous = previous;
  },
  setNextPoint : function(next){
    this.next = next;
  },
  interfere : function(y, velocity){
    this.fy = this.renderer.height * this.ACCELARATION_RATE * ((this.renderer.height - this.height - y) >= 0 ? -1 : 1) * Math.abs(velocity);
  },
  updateSelf : function(){
    this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height);
    this.fy *= this.SPRING_FRICTION;
    this.height += this.fy;
  },
  updateNeighbors : function(){
    if(this.previous){
      this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height);
    }
    if(this.next){
      this.force.next = this.WAVE_SPREAD * (this.height - this.next.height);
    }
  },
  render : function(context){
    if(this.previous){
      this.previous.height += this.force.previous;
      this.previous.fy += this.force.previous;
    }
    if(this.next){
      this.next.height += this.force.next;
      this.next.fy += this.force.next;
    }
    context.lineTo(this.x, this.renderer.height - this.height);
  }
};
var FISH = function(renderer){
  this.renderer = renderer;
  this.init();
};
FISH.prototype = {
  GRAVITY : 0.4,
  
  init : function(){
    this.direction = Math.random() < 0.5;
    this.x = this.direction ? (this.renderer.width + this.renderer.THRESHOLD) : -this.renderer.THRESHOLD;
    this.previousY = this.y;
    this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1);
    
    if(this.renderer.reverse){
      this.y = this.getRandomValue(this.renderer.height * 1 / 10, this.renderer.height * 4 / 10);
      this.vy = this.getRandomValue(2, 5);
      this.ay = this.getRandomValue(0.05, 0.2);
    }else{
      this.y = this.getRandomValue(this.renderer.height * 6 / 10, this.renderer.height * 9 / 10);
      this.vy = this.getRandomValue(-5, -2);
      this.ay = this.getRandomValue(-0.2, -0.05);
    }
    this.isOut = false;
    this.theta = 0;
    this.phi = 0;
  },
  getRandomValue : function(min, max){
    return min + (max - min) * Math.random();
  },
  reverseVertical : function(){
    this.isOut = !this.isOut;
    this.ay *= -1;
  },
  controlStatus : function(context){
    this.previousY = this.y;
    this.x += this.vx;
    this.y += this.vy;
    this.vy += this.ay;
    
    if(this.renderer.reverse){
      if(this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE){
        this.vy -= this.GRAVITY;
        this.isOut = true;
      }else{
        if(this.isOut){
          this.ay = this.getRandomValue(0.05, 0.2);
        }
        this.isOut = false;
      }
    }else{
      if(this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE){
        this.vy += this.GRAVITY;
        this.isOut = true;
      }else{
        if(this.isOut){
          this.ay = this.getRandomValue(-0.2, -0.05);
        }
        this.isOut = false;
      }
    }
    if(!this.isOut){
      this.theta += Math.PI / 20;
      this.theta %= Math.PI * 2;
      this.phi += Math.PI / 30;
      this.phi %= Math.PI * 2;
    }
    this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY);
    
    if(this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD || this.vx < 0 && this.x < -this.renderer.THRESHOLD){
      this.init();
    }
  },
  render : function(context){
    context.save();
    context.translate(this.x, this.y);
    context.rotate(Math.PI + Math.atan2(this.vy, this.vx));
    context.scale(1, this.direction ? 1 : -1);
    context.beginPath();
    context.moveTo(-30, 0);
    context.bezierCurveTo(-20, 15, 15, 10, 40, 0);
    context.bezierCurveTo(15, -10, -20, -15, -30, 0);
    context.fill();
    
    context.save();
    context.translate(40, 0);
    context.scale(0.9 + 0.2 * Math.sin(this.theta), 1);
    context.beginPath();
    context.moveTo(0, 0);
    context.quadraticCurveTo(5, 10, 20, 8);
    context.quadraticCurveTo(12, 5, 10, 0);
    context.quadraticCurveTo(12, -5, 20, -8);
    context.quadraticCurveTo(5, -10, 0, 0);
    context.fill();
    context.restore();
    
    context.save();
    context.translate(-3, 0);
    context.rotate((Math.PI / 3 + Math.PI / 10 * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1));
    
    context.beginPath();
    
    if(this.renderer.reverse){
      context.moveTo(5, 0);
      context.bezierCurveTo(10, 10, 10, 30, 0, 40);
      context.bezierCurveTo(-12, 25, -8, 10, 0, 0);
    }else{
      context.moveTo(-5, 0);
      context.bezierCurveTo(-10, -10, -10, -30, 0, -40);
      context.bezierCurveTo(12, -25, 8, -10, 0, 0);
    }
    context.closePath();
    context.fill();
    context.restore();
    context.restore();
    this.controlStatus(context);
  }
};
$(function(){
  RENDERER.init();
});

jquery.min.js 1.7.1下载

也可引入在线jquery

下班~

文章标签：
JavaScript
fruge365
目录
相关文章
小蚂蚁XMY
|
7月前
泡泡龙游戏开发实战教程(4)：泡泡停靠处理
泡泡龙游戏开发实战教程(4)：泡泡停靠处理
小蚂蚁XMY
83 0
游客7ak5wlcievars
|
前端开发 程序员
程序员也可以很浪漫，精选10个圣诞节特效及源码
最近离圣诞节不远了、整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家、直接上效果吧。 代码过长的 可直接预览获取 [快速预览](https://www.hereitis.cn/articleDetails/969)
游客7ak5wlcievars
310 0
程序员也可以很浪漫，精选10个圣诞节特效及源码
chinar-yunxi
|
图形学
Unity 3D游戏-消消乐（三消类）教程和源码
Unity 消消乐教程和源码 本文提供全流程，中文翻译。Chinar坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） ...
chinar-yunxi
5608 0
JavaPub
|
6月前
|
Java
3D炫酷赛车游戏【附源码】设计实现
3D炫酷赛车游戏【附源码】设计实现
JavaPub
72 10
游客fz577umxdejsg
|
4月前
|
前端开发
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
游客fz577umxdejsg
52 2
七七喝椰奶
|
算法 图形学
Unity小游戏——武士击杀小怪兽（无限滚动的背景）
Unity小游戏——武士击杀小怪兽（无限滚动的背景）
七七喝椰奶
66 1
&amp;ACE&amp;
酷炫代码雨
酷炫代码雨
&amp;ACE&amp;
73 0
不坑老师
[视频]高端微课|W01.初尝万彩动画——人人都能制作动画版微课！
或许，你也曾想抛弃PPT那万年不变的动画模式！或许，你也想让你的微课提升一个档次！或许，你也羡慕网上那些科普类动画的的炫酷！
不坑老师
101 0
somnus_小凯
|
JavaScript 前端开发 程序员
【中秋征文】手把手教你海面月亮升起中秋节特效制作
【中秋征文】手把手教你海面月亮升起中秋节特效制作
somnus_小凯
234 0
【中秋征文】手把手教你海面月亮升起中秋节特效制作
游客qyqtqgybni43a
|
前端开发
HTML+CSS+JS实现卡通人物C罗ui特效
2022年卡塔尔世界杯（英语：FIFA World Cup Qatar 2022）是第二十二届世界杯足球赛，是历史上首次在卡塔尔和中东国家境内举行、也是第二次在亚洲举行的世界杯足球赛。除此之外，卡塔尔世界杯还是首次在北半球冬季举行、首次由从未进过世界杯决赛圈的国家举办的世界杯足球赛
游客qyqtqgybni43a
318 0
HTML+CSS+JS实现卡通人物C罗ui特效

热门文章

最新文章

  • 1
    使用MaxCompute访问TableStore（OTS） 简明手册
  • 2
    从超模转职成为程序媛是一种怎样的体验
  • 3
    阿里巴巴NACOS（6）- 在k8s上部署Nacos
  • 4
    将任意应用窗口置顶显示，这个工具太强了。
  • 5
    Wi-Fi物联网设备配网的N种方式
  • 6
    WCF分布式安全开发实践(8):消息安全模式之用户名身份验证:Message_UserName_WSHttpBinding
  • 7
    TechED2010与我（二）—— Windows Phone 7 Develop
  • 8
    华尔街认为Twitter出售毫无悬念 只是不会在今年发生
  • 9
    迂者趣事之——下错楼层
  • 10
    Unix Regex
  • 1
    检测指定TCP端口开放状态免费API接口教程
    22
  • 2
    Python 语言：强大、灵活与高效的编程之选
    27
  • 3
    发现一肉鸡接口，快来围攻啦~
    28
  • 4
    深入解析PID控制算法：从理论到实践的完整指南
    26
  • 5
    《C++ 模型训练之早停法：有效预防过拟合的关键策略》
    24
  • 6
    C++构建 GAN 模型：生成器与判别器平衡训练的关键秘籍
    22
  • 7
    通过matlab分别对比PSO,反向学习PSO,多策略改进反向学习PSO三种优化算法
    24
  • 8
    【C语言】宏定义详解
    22
  • 9
    【C语言】进程和线程详解
    17
  • 10
    【C语言】宏定义详解
    20

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 相册服务中的故事生成算法介绍
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 【科技少年】Python绘画编程第一课

    • 相关电子书

    更多
  • 数据如何让运动更好玩
  • 数据如何让运动更好玩有趣
  • 藏经阁精华技术作品

    • 相关实验场景

    更多
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 2048小游戏
  • 重温童年的“五子棋”，赢取专属阿里云Serverless证书
  • 一键创建和部署高分电影推荐语音技能
  • 1分钟部署经典小游戏
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月