点击或移动出现爱心或文字

Posted 2020-12-16 zxd66666

前言

　　有时候访问某些网站时鼠标移动或者点击出现一些较为炫酷的动画或特效，一般都是个人网站会炫酷些，公司的网站一般不会这么花里胡哨，今天就分享一下鼠标点击或移动出现简单的动画案例(复杂的动画思路也是一样，只不过要加算法)。

 

移动或点击出现爱心

　　效果图

 

 

 　　画爱心的css

.heart {
  width: 10px;
  height: 10px;
  position: fixed;
  background: #f00;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

.heart:after,
.heart:before {
  content: ‘‘;
  width: inherit;
  height: inherit;
  background: inherit;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  position: absolute;
}

.heart:after {
  top: -5px;
}

.heart:before {
  left: -5px;
}

就是三块区域，中间的为方块，左上角和右上角为圆形，通过定位元素定位上去，然后再位移一下角度即可。

 

　　JS部分

//鼠标点击出现爱心特效
// window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果
// 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
// 可以调节重新渲染，大幅提高网页性能。其中最重要的，它可以将某些代码放到下一次重新渲染时执行。避免短时间内触发大量reflow
(function(window,document,undefined){
  var hearts = [];
  window.requestAnimationFrame = (function(){
    // 有了这句话，就形成了递归调用，设置应为这个函数多用在持续的动画中
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback){
      setTimeout(callback,1000/60);
    }
  })();
  init();
  function init(){
    css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}.character{position: fixed;}");
    attachEvent();
    gameloop();
  }
  function gameloop(){
    for(var i=0;i<hearts.length;i++){
      if(hearts[i].alpha <=0){
        document.body.removeChild(hearts[i].el);
        hearts.splice(i,1);
        continue;
      }
      hearts[i].y--;
      hearts[i].scale += 0.04;
      hearts[i].alpha -= 0.013;
      hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
    }
    requestAnimationFrame(gameloop);
  }
  function attachEvent(){
    var old = typeof window.onclick==="function" && window.onclick;
    // 点击出现爱心
    window.onclick = function(event){
      old && old();
      createHeart(event);
    }
    // ==========================================================================================================
    // 移动出现爱心
    let currentTime = new Date().getTime();
    window.onmousemove = function(event){
      if(new Date().getTime() - currentTime > 100) {//这里的判断在于每隔100毫秒生成一个爱心
        currentTime = new Date().getTime();
        createHeart(event);
      }
    }
  }
  // 创建爱心
  function createHeart(event){
    var d = document.createElement("div");
    d.className = "heart";
    hearts.push({
      el : d,
      x : event.clientX - 5,
      y : event.clientY - 5,
      scale : 1,
      alpha : 1,
      color : randomColor()
    });
    document.body.appendChild(d);
  }

  // 把css样式添加到创建的元素中
  function css(css){
    var style = document.createElement("style");
    style.type="text/css";
    try{
      style.appendChild(document.createTextNode(css));
    }catch(ex){
      style.styleSheet.cssText = css;
    }
    document.getElementsByTagName(‘head‘)[0].appendChild(style);
  }
  // 随机颜色
  function randomColor(){
    return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
  }
})(window,document);

 

移动或点击展示颜文字

　　效果图

 

 

　　js部分

　　请原谅我的偷懒，里面heart的样式和属性我就拿来用了，思路相信大家看的懂的！

// window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果
// 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
// 可以调节重新渲染，大幅提高网页性能。其中最重要的，它可以将某些代码放到下一次重新渲染时执行。避免短时间内触发大量reflow
(function(window,document,undefined){
  var hearts = [];
  window.requestAnimationFrame = (function(){
    // 有了这句话，就形成了递归调用，设置应为这个函数多用在持续的动画中
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback){
      setTimeout(callback,1000/60);
    }
  })();
  init();
  function init(){
    css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}.character{position: fixed;}");
    attachEvent();
    gameloop();
  }
  function gameloop(){
    for(var i=0;i<hearts.length;i++){
      if(hearts[i].alpha <=0){
        document.body.removeChild(hearts[i].el);
        hearts.splice(i,1);
        continue;
      }
      hearts[i].y--;
      hearts[i].scale += 0.004;
      hearts[i].alpha -= 0.013;
      // hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
      hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+");color:"+hearts[i].color;
    }
    requestAnimationFrame(gameloop);
  }
  function attachEvent(){
    var old = typeof window.onclick==="function" && window.onclick;
    // 点击出现爱心/颜文字
    window.onclick = function(event){
      old && old();
      // createHeart(event);
      createTexts(event);
    }
    // ==========================================================================================================
    // 把原本的点击出现爱心改为移动出现爱心/颜文字
    let currentTime = new Date().getTime();
    window.onmousemove = function(event){
      if(new Date().getTime() - currentTime > 100) {//这里的判断在于每隔100毫秒生成一个爱心
        currentTime = new Date().getTime();
        // createHeart(event);
        createTexts(event);
      }
    }
  }
  // 创建爱心
  function createHeart(event){
    var d = document.createElement("div");
    d.className = "heart";
    hearts.push({
      el : d,
      x : event.clientX - 5,
      y : event.clientY - 5,
      scale : 1,
      alpha : 1,
      color : randomColor()
    });
    document.body.appendChild(d);
  }

  const CharArray = ["O(∩_∩)O哈哈~","┭┮﹏┭┮","(#^.^#)","?(^∇^*)","o(*￣︶￣*)o","(*^▽^*)","w(?Д?)w","(?′?‵?)Ｉ L???????"];
  // 创建颜文字
  function createTexts(event){
    var span = document.createElement("span");
    span.className = "character";
    var i = Math.floor(Math.random() * CharArray.length);
    span.textContent = CharArray[i];
    hearts.push({
      el : span,
      x : event.clientX - 5,
      y : event.clientY - 5,
      scale : 1,
      alpha : 1,
      color : randomColor()
    });
    document.body.appendChild(span);
  }
  // 把css样式添加到创建的元素中
  function css(css){
    var style = document.createElement("style");
    style.type="text/css";
    try{
      style.appendChild(document.createTextNode(css));
    }catch(ex){
      style.styleSheet.cssText = css;
    }
    document.getElementsByTagName(‘head‘)[0].appendChild(style);
  }
  // 随机颜色
  function randomColor(){
    return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
  }
})(window,document);

 

总结

　　这类动画无非就是利用鼠标移动事件的属性让我们的动画效果动态的渲染，requestAnimationFrame可以用JQuery的animate()替换，启到逐帧渲染让动画更加流畅的效果，相信聪明的小伙伴已经知道弹幕效果也是可以用这类API实现。有问题欢迎留言^_^