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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
Javascript基础之数组的使用
May 13 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
浅谈Vue的响应式原理
May 30 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php简单的会话类代码
2011/08/08 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python实现京东秒杀功能
2018/07/30 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
全球性的女装店:storets
2019/06/12 全球购物
写给女生的道歉信
2014/01/08 职场文书
大学旷课检讨书
2014/01/28 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
先进教师个人总结
2015/02/11 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Python中re模块的元字符使用小结
2022/04/07 Python