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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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多进程之pcntl_fork的实例详解
2017/10/15 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
jQuery each和js forEach用法比较
2019/02/27 jQuery
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python db类用法说明
2020/07/07 Python
Python分类测试代码实例汇总
2020/07/23 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
上课玩手机检讨书
2014/02/08 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
文员岗位职责
2015/02/04 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript