数字28

        数字28

        千锋扣丁学堂HTML5培训之vue实现直播间点赞飘心效果示例代码

        数字28 www.huaxiashuku.com 2019-09-20 13:28:44 3627浏览

        今天千锋扣丁学堂数字28老师给大家分享一篇关于vue实现直播间点赞飘心效果示例代码的详细介绍,首先在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,下面我们一起来看一下吧。

        示例:


        ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便?。?
         
        index.js代码内容如下:
         
        /**
         * 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} 心起点位置x
             * @object.y {number} 心起点位置y
             * @object.endX {number} 心结束位置x
             * @object.endY {number} 心结束位置y
             * @object.height {number} 高
             * @object.width {number} 宽
             * @object.angelBegin {number} 左右摇摆起始角度(可为负值)
             * @object.angelEnd {number} 左右摇摆结束角度
             * @object.angleLeft {bool} 是否起始从坐往右摇摆
             * @object.noScale {bool} 是否使用缩放心动画
             * @object.scaleDis {number} 缩放心临界值(默认从起始位置到升高50)
             * @object.noFadeOut {bool} 是否使用fadeOut
             * @object.opacityDis {number} fadeout心临界值(默认距离结束位置40)
             * @object.speed {number} 上升速度 
             * @object.bezierPoint {obj} 贝塞尔曲线4个点的值参考https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html
             * @object.fadeOut {function} 每个心fadeOut之后回调
             * @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();
             };
         
          };
         
         
          /**
           * 计算心左右摇摆的方法
           */
          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;
            }
         
            // 动态改变角度
            if (heart.angleLeft) {
              _angle = _angle + 1;
            } else {
              _angle = _angle - 1;
            }
         
            return _angle;
         
          }
         
         
          /**
           * 计算缩放角度的方法
           */
          function getFScale(heart){
            if (heart.noScale) {
              return 1;
            }
            let _scale = heart.scale;
         
         
            // 随着距离起始点的距离增加,scale不断变大
            let dis = heart.orignY - heart.y;
            _scale = (dis / heart.scaleDis);
         
            // 当大于设置的阈值时变成1
            if (dis >= heart.scaleDis) {
              _scale = 1;
            }
         
            return _scale;
          }
         
          /**
           * 计算透明度的方法
           */
          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的随机整数
           */
          function rand (min, max) {
           return Math.floor(Math.random() * (max - min + 1)) + min;
          }
         
          /**
           * 获得贝塞尔曲线路径
           * 一共4个点
           */
          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";
        ```第三步```:直接复制下面这一段
        <script>
        import LikeHeart from "../../../static/js/index";
        export default {
         props: ["ClassTimePlayer", "videoUrl"],
         data() {
          return {
           width: 175, //初始宽度
           height: 400, //初始高度
           heartList: [], //初始数组
           heartCount: 0 //累加计数初始值
          };
         },
         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`;
        这个就是咯
         ```最后一步```:在html里,写上这个 
          <!-- 飘心 -->
          <canvas id="cvs"></canvas>


        以上就是关于千锋扣丁学堂HTML5培训之vue实现直播间点赞飘心效果示例代码的全部内容,希望对大家的学习有所帮助,想要了解更多关于HTML5开发方面内容的小伙伴,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导,此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能??鄱⊙肏5技术交流群:673883249。


                                   【扫码进入HTML5VIP免费公开课】  


             【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  



        查看更多关于“HTML5开发技术资讯”的相关文章>>

        标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 Vue框架
        微信
        微博
        15311698296

        全国免费咨询热线

        邮箱:codingke@1000phone.com

        官方群:148715490

        北京千锋互联科技有限公司版权所有   北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
        京ICP备12003911号-6   Copyright ? 2013 - 2019
        返回顶部 返回顶部

        数字28原创 | 数字28平台 |