JavaScript实现外溢动态爱心的效果的示例代码


Posted in Javascript onMarch 21, 2022

还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧

效果演示

JavaScript实现外溢动态爱心的效果的示例代码

源码介绍

(
    function()
    {
        var b=0;
        var c=["ms","moz","webkit","o"];
        for(var a=0;a<c.length&&!window.requestAnimationFrame;++a)
        {
            window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];
            window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]
            
        }if(!window.requestAnimationFrame)
        {
            window.requestAnimationFrame=function(h,e)
            {
                var d=new Date().getTime();
                var f=Math.max(0,16-(d-b));
                var g=window.setTimeout(function(){h(d+f)},f);
                b=d+f;
                return g
                
            }
            
        }if(!window.cancelAnimationFrame)
        {
            window.cancelAnimationFrame=function(d){clearTimeout(d)}
            
        }
        
    }
    ()
);

/*
 * Point class
 */
var Point = (function() {
  function Point(x, y) {
    this.x = (typeof x !== 'undefined') ? x : 0;
    this.y = (typeof y !== 'undefined') ? y : 0;
  }
  Point.prototype.clone = function() {
    return new Point(this.x, this.y);
  };
  Point.prototype.length = function(length) {
    if (typeof length == 'undefined')
      return Math.sqrt(this.x * this.x + this.y * this.y);
    this.normalize();
    this.x *= length;
    this.y *= length;
    return this;
  };
  Point.prototype.normalize = function() {
    var length = this.length();
    this.x /= length;
    this.y /= length;
    return this;
  };
  return Point;
})();

/*
 * Particle class
 */
var Particle = (function() {
  function Particle() {
    this.position = new Point();
    this.velocity = new Point();
    this.acceleration = new Point();
    this.age = 0;
  }
  Particle.prototype.initialize = function(x, y, dx, dy) {
    this.position.x = x;
    this.position.y = y;
    this.velocity.x = dx;
    this.velocity.y = dy;
    this.acceleration.x = dx * settings.particles.effect;
    this.acceleration.y = dy * settings.particles.effect;
    this.age = 0;
  };
  Particle.prototype.update = function(deltaTime) {
    this.position.x += this.velocity.x * deltaTime;
    this.position.y += this.velocity.y * deltaTime;
    this.velocity.x += this.acceleration.x * deltaTime;
    this.velocity.y += this.acceleration.y * deltaTime;
    this.age += deltaTime;
  };
  Particle.prototype.draw = function(context, image) {
    function ease(t) {
      return (--t) * t * t + 1;
    }
    var size = image.width * ease(this.age / settings.particles.duration);
    context.globalAlpha = 1 - this.age / settings.particles.duration;
    context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  };
  return Particle;
})();

/*
 * ParticlePool class
 */
var ParticlePool = (function() {
  var particles,
      firstActive = 0,
      firstFree   = 0,
      duration    = settings.particles.duration;
  
  function ParticlePool(length) {
    // create and populate particle pool
    particles = new Array(length);
    for (var i = 0; i < particles.length; i++)
      particles[i] = new Particle();
  }
  ParticlePool.prototype.add = function(x, y, dx, dy) {
    particles[firstFree].initialize(x, y, dx, dy);
    
    // handle circular queue
    firstFree++;
    if (firstFree   == particles.length) firstFree   = 0;
    if (firstActive == firstFree       ) firstActive++;
    if (firstActive == particles.length) firstActive = 0;
  };
  ParticlePool.prototype.update = function(deltaTime) {
    var i;
    
    // update active particles
    if (firstActive < firstFree) {
      for (i = firstActive; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    if (firstFree < firstActive) {
      for (i = firstActive; i < particles.length; i++)
        particles[i].update(deltaTime);
      for (i = 0; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    
    // remove inactive particles
    while (particles[firstActive].age >= duration && firstActive != firstFree) {
      firstActive++;
      if (firstActive == particles.length) firstActive = 0;
    }
    
    
  };
  ParticlePool.prototype.draw = function(context, image) {
    // draw active particles
    if (firstActive < firstFree) {
      for (i = firstActive; i < firstFree; i++)
        particles[i].draw(context, image);
    }
    if (firstFree < firstActive) {
      for (i = firstActive; i < particles.length; i++)
        particles[i].draw(context, image);
      for (i = 0; i < firstFree; i++)
        particles[i].draw(context, image);
    }
  };
  return ParticlePool;
})();

/*
 * Putting it all together
 */
(function(canvas) {
  var context = canvas.getContext('2d'),
      particles = new ParticlePool(settings.particles.length),
      particleRate = settings.particles.length / settings.particles.duration, // particles/sec
      time;
  
  // get point on heart with -PI <= t <= PI
  function pointOnHeart(t) {
    return new Point(
      160 * Math.pow(Math.sin(t), 3),
      130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    );
  }
  
  // creating the particle image using a dummy canvas
  var image = (function() {
    var canvas  = document.createElement('canvas'),
        context = canvas.getContext('2d');
    canvas.width  = settings.particles.size;
    canvas.height = settings.particles.size;
    // helper function to create the path
    function to(t) {
      var point = pointOnHeart(t);
      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
      point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
      return point;
    }
    // create the path
    context.beginPath();
    var t = -Math.PI;
    var point = to(t);
    context.moveTo(point.x, point.y);
    while (t < Math.PI) {
      t += 0.01; // baby steps!
      point = to(t);
      context.lineTo(point.x, point.y);
    }
    context.closePath();
    // create the fill
    context.fillStyle = '#ea80b0';
    context.fill();
    // create the image
    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
  })();
  
  // render that thing!
  function render() {
    // next animation frame
    requestAnimationFrame(render);
    
    // update time
    var newTime   = new Date().getTime() / 1000,
        deltaTime = newTime - (time || newTime);
    time = newTime;
    
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // create new particles
    var amount = particleRate * deltaTime;
    for (var i = 0; i < amount; i++) {
      var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
      var dir = pos.clone().length(settings.particles.velocity);
      particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    }
    
    // update and draw particles
    particles.update(deltaTime);
    particles.draw(context, image);
  }
  
  // handle (re-)sizing of the canvas
  function onResize() {
    canvas.width  = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
  }
  window.onresize = onResize;
  
  // delay rendering bootstrap
  setTimeout(function() {
    onResize();
    render();
  }, 10);
})(document.getElementById('pinkboard'));

以上就是JavaScript实现外溢动态爱心的效果的示例代码的详细内容,更多关于JavaScript动态爱心的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 #Javascript
一篇文章弄清楚Ajax请求的五个步骤
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
面试中canvas绘制图片模糊图片问题处理
You might like
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php批量删除操作代码分享
2017/02/26 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
独特的python循环语句
2016/11/20 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python 必须了解的5种高级特征
2020/09/10 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
中间件分为哪几类
2016/09/18 面试题
防灾减灾日活动总结
2014/08/26 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书