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 相关文章推荐
取得传值的函数
Oct 27 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Vue组件开发初探
Feb 14 Javascript
layui选项卡效果实现代码
May 19 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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文件下载类
2006/12/06 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP比你想象的好得多
2014/11/27 PHP
JS input 数字验证代码
2009/07/30 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
20招让你的Python飞起来!
2016/09/27 Python
SVM基本概念及Python实现代码
2017/12/27 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python判断无向图环是否存在的示例
2019/11/22 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python 的topk算法实例
2020/04/02 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
迟到检讨书1000字
2014/01/15 职场文书
海飞丝的广告词
2014/03/20 职场文书
节能环保口号
2014/06/12 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
安全先进班组材料
2014/12/26 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers