欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

千鋒扣丁學(xué)堂HTML5培訓(xùn)之vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果示例代碼

2019-09-20 13:28:44 5885瀏覽

今天千鋒扣丁學(xué)堂HTML5培訓(xùn)老師給大家分享一篇關(guān)于vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果示例代碼的詳細(xì)介紹，首先在開發(fā)公司項(xiàng)目的時(shí)候，遇到了直播間的一些功能，其中點(diǎn)贊冒泡飄心，下面我們一起來看一下吧。

示例：

```第一步```：先在外部新建一個(gè)js文件,取名index.js（名字自己隨便?。?
 
index.js代碼內(nèi)容如下：
 
/**
 * LikeHeart
 * @version: 1.0.0
 * @author tennylv
 * @date 2018-05-24
 *
 */
'use strict';
(function (root, factory) {
  if (typeof exports === 'object') {
    module.exports = factory();
    //CMD
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
    //AMD
  } else {
    //WINDOW
    root.LikeHeart = factory(); 
  }
})(this, function() {
 
  var LikeHeart = function(opt) {
 
    /**
     * 初始化心
     * 
     * @param {object} 
     * @object.x {number} 心起點(diǎn)位置x
     * @object.y {number} 心起點(diǎn)位置y
     * @object.endX {number} 心結(jié)束位置x
     * @object.endY {number} 心結(jié)束位置y
     * @object.height {number} 高
     * @object.width {number} 寬
     * @object.angelBegin {number} 左右搖擺起始角度(可為負(fù)值)
     * @object.angelEnd {number} 左右搖擺結(jié)束角度
     * @object.angleLeft {bool} 是否起始從坐往右搖擺
     * @object.noScale {bool} 是否使用縮放心動畫
     * @object.scaleDis {number} 縮放心臨界值(默認(rèn)從起始位置到升高50)
     * @object.noFadeOut {bool} 是否使用fadeOut
     * @object.opacityDis {number} fadeout心臨界值(默認(rèn)距離結(jié)束位置40)
     * @object.speed {number} 上升速度 
     * @object.bezierPoint {obj} 貝塞爾曲線4個(gè)點(diǎn)的值參考https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html
     * @object.fadeOut {function} 每個(gè)心fadeOut之后回調(diào)
     * @object.image {obj} 圖片對象
     */
 
 
     this.id = opt.id;
     this.x = opt.x;
     this.y = opt.y;
     this.endX = opt.endX;
     this.endY = opt.endY;
     this.orignY = opt.y;
     this.height = opt.height;
     this.width = opt.width;
     this.angle = 0;
     this.angleLeft = opt.angleLeft;
     this.angelBegin = opt.angelBegin || (-20 + rand(1,2));
     this.angelEnd = opt.angelEnd || (20 + rand(1,4));
     this.scale = 0;
     this.scaleDis = opt.scaleDis || 50;
     this.opacityDis = opt.opacityDis || 40;
     this.noScale = opt.noScale;
     this.noAngel = opt.noAngel;
     this.opacity = 1;
     this.speed = opt.speed || 0.0027;
     this.bezierPoint = opt.bezierPoint;
     this.bezierDis = 0;
     this.onFadeOut = opt.onFadeOut;
     this.IMG = opt.image;
 
     this.move = function (ctx) {
 
      if (this.opacity === 0) {
 
        this.onFadeOut && this.onFadeOut(this);
      }
 
      this.y = getBezierLine(this).yt;
      this.x = getBezierLine(this).xt;
 
 
      this.angle = rangeAngle(this);
      this.scale = getFScale(this);
      this.opacity = getFAlpha(this);
 
 
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.angle*(Math.PI/180));
      ctx.scale(this.scale, this.scale);
      ctx.globalAlpha = this.opacity;
 
      ctx.drawImage(this.IMG, -(this.IMG.width/2), -(this.IMG.height/2), this.width, this.height);
      ctx.restore();
     };
 
  };
 
 
  /**
   * 計(jì)算心左右搖擺的方法
   */
  function rangeAngle(heart) {
    if (heart.noAngel) {
      return 0;
    }
    let _angle = heart.angle;
 
    // 心介于[start, end]之間不斷變化角度
    if(_angle >= heart.angelEnd) {
      // 角度不斷變小，向左搖擺
      heart.angleLeft = false;
    } else if (_angle <= heart.angelBegin){
      // 角度不斷變大，向又搖擺
      heart.angleLeft = true;
    }
 
    // 動態(tài)改變角度
    if (heart.angleLeft) {
      _angle = _angle + 1;
    } else {
      _angle = _angle - 1;
    }
 
    return _angle;
 
  }
 
 
  /**
   * 計(jì)算縮放角度的方法
   */
  function getFScale(heart){
    if (heart.noScale) {
      return 1;
    }
    let _scale = heart.scale;
 
 
    // 隨著距離起始點(diǎn)的距離增加，scale不斷變大
    let dis = heart.orignY - heart.y;
    _scale = (dis / heart.scaleDis);
 
    // 當(dāng)大于設(shè)置的閾值時(shí)變成1
    if (dis >= heart.scaleDis) {
      _scale = 1;
    }
 
    return _scale;
  }
 
  /**
   * 計(jì)算透明度的方法
   */
  function getFAlpha(heart) {
 
    let _opacity = heart.opacity;
 
    let dis = heart.y - heart.endY;
 
    if (dis <= heart.opacityDis) {
 
      _opacity = Math.max((dis / heart.opacityDis), 0);
 
    } else {
      _opacity = 1;
    }
    return _opacity;
  }
 
  /**
   * 獲得min-max的隨機(jī)整數(shù)
   */
  function rand (min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
  }
 
  /**
   * 獲得貝塞爾曲線路徑
   * 一共4個(gè)點(diǎn)
   */
  function getBezierLine(heart){
    var obj = heart.bezierPoint;
    var p0 = obj.p0;
    var p1 = obj.p1;
    var p2 = obj.p2;
    var p3 = obj.p3;
    var t = heart.bezierDis;
    var cx = 3 * (p1.x - p0.x),
      bx = 3 * (p2.x - p1.x) - cx,
      ax = p3.x - p0.x - cx - bx,
 
      cy = 3 * (p1.y - p0.y),
      by = 3 * (p2.y - p1.y) - cy,
      ay = p3.y - p0.y - cy - by,
 
      xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x,
      yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;
 
    heart.bezierDis += heart.speed;
 
    return {
      xt: xt,
      yt: yt
    }
  }
 
  return LikeHeart;
 
});
```第二步```：引入需要用到的頁面
import LikeHeart from "../../../static/js/index";
```第三步```：直接復(fù)制下面這一段
<script>
import LikeHeart from "../../../static/js/index";
export default {
 props: ["ClassTimePlayer", "videoUrl"],
 data() {
  return {
   width: 175, //初始寬度
   height: 400, //初始高度
   heartList: [], //初始數(shù)組
   heartCount: 0 //累加計(jì)數(shù)初始值
  };
 },
 methods: {
  getRandomDis() {
   if (Math.random() > 0.5) {
    return -(Math.random() * 43);
   } else {
    return +(Math.random() * 43);
   }
  },
  createHeart() {
   this.heartCount++;
   let positionArray = [
    {
     x: 100,
     y: 400,
     endX: 100,
     endY: 100
    }
   ];
   let img = new Image();
   // img.src = "../../static/img/" + Math.ceil(Math.random() * 2) + ".png";
   img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
   let p1 = {
    x: 100 + this.getRandomDis(),
    y: 300 + this.getRandomDis()
   };
   let p2 = {
    x: 100 + this.getRandomDis(),
    y: 200 + this.getRandomDis()
   };
   return new LikeHeart({
    id: this.heartCount,
    x: positionArray[0].x,
    y: positionArray[0].y,
    endX: positionArray[0].endX,
    endY: positionArray[0].endY,
    onFadeOut: this.removeItem,
    noAngel: true,//決定是否從小到大
    // noScale: true,//決定是否左右擺動
    width: 30, //決定心的大小
    height: 30,
    image: img,
    bezierPoint: {
     p0: {
      x: positionArray[0].x,
      y: positionArray[0].y
     },
     p1: p1,
     p2: p2,
     p3: {
      x: positionArray[0].endX,
      y: positionArray[0].endY
     }
    }
   });
  },
  removeItem(item) {
   var array = [];
   for (var i = 0; i < this.heartList.length; i++) {
    if (this.heartList[i].id !== item.id) {
     array.push(this.heartList[i]);
    }
   }
   this.heartList = array;
  },
  },
 
   
   
  
 mounted() {
  // 飄心
  var _this = this;
  var ctx = document.getElementById("cvs").getContext("2d");
  (ctx.canvas.width = _this.width),
   (ctx.canvas.height = _this.height),
   (function loop() {
    ctx.clearRect(0, 0, _this.width, _this.height);
    _this.heartList.forEach(function(item) {
     item && item.move(ctx);
    });
    requestAnimationFrame(loop);
   })();
  setInterval(function() {
   _this.heartList.push(_this.createHeart());
  }, 700);
  document.getElementById("cvs").addEventListener(
   "click",
   function() {
    console.log(111111)
    _this.heartList.push(_this.createHeart());
   },
   false
  );
 },
};
</script>
圖片自己去換，至于在哪里換 
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
這個(gè)就是咯
 ```最后一步```：在html里，寫上這個(gè) 
  <!-- 飄心 -->
  <canvas id="cvs"></canvas>

以上就是關(guān)于千鋒扣丁學(xué)堂HTML5培訓(xùn)之vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果示例代碼的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，想要了解更多關(guān)于HTML5開發(fā)方面內(nèi)容的小伙伴，請關(guān)注扣丁學(xué)堂HTML5培訓(xùn)官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育有專業(yè)的HTML5講師為您指導(dǎo)，此外扣丁學(xué)堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發(fā)實(shí)戰(zhàn)技能?？鄱W(xué)堂H5技術(shù)交流群：673883249。

                             

     【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開發(fā)VIP免費(fèi)公開課】  

查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>