uniapp 微信小程序 冒泡点赞 任意位置

资源路径替换即可

直接贴代码（网上改的轮子

<template>
    <view class="mainview" @click="viewClick">
        <canvas canvas-id="mycanvas" class="canvas" :style="add_class_canvas"/>
        <!-- <image :src="condition == 0 ? '../../static/images/heart_button.png':'../../static/images/heart1.png'" class="heart"
            @click="onClickImage" :style="style_img"></image> -->
    </view>

</template>

<script>
    export default {
        data() {
            return {
                add_class_canvas:'',
                add_class_img:'',
                lastFrameTime: 0,
                count: 0,
                ctx: null,
                factor: {
                    speed: .008, // 运动速度，值越小越慢
                    t: 0 //  贝塞尔函数系数
                },
                timer: null,
                style_img: '',
                pageX: 0,
                pageY: 0,
                condition: 1,
                img_path: [
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 70,
                        y: 300
                    }, {
                        x: -50,
                        y: 150
                    }, {
                        x: 30,
                        y: 0
                    }],
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 30,
                        y: 300
                    }, {
                        x: 80,
                        y: 150
                    }, {
                        x: 30,
                        y: 0
                    }],
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 0,
                        y: 90
                    }, {
                        x: 80,
                        y: 100
                    }, {
                        x: 30,
                        y: 0
                    }]
                ]
            }
        },
        onLoad() {
            this.ctx = wx.createCanvasContext('mycanvas')
        },
        onUnload() {
            if (this.timer != null) {
                clearTimeout(this.timer)
            }
        },
        methods: {
            viewClick(e) {
                this.pageX = e.touches[0].pageX
                this.pageY = e.touches[0].pageY
                this.add_class_canvas = 'right:calc(100vw - '+(this.pageX+45)+'px);'+'bottom:calc(100vh - '+this.pageY+'px);';
                // this.add_class_img = 'right:calc(100vw - '+(this.pageX-25)+'px);'+'bottom:calc(100vh - '+this.pageY+'px);';
                // this.style_img = this.add_class_img+'transform:scale(1.1);'
                this.condition = 0
                this.factor.t = 2
                this.count = 0
                this.startTimer(1)
            },
            //不断绘制图片到cavans
            requestAnimationFrame(callback) {
                var currTime = new Date().getTime();
                //手机屏幕刷新率一般为60Hz，大概16ms刷新一次，这里为了使页面看上去更流畅自然,通过改变timedis的值可以控制动画的快慢
                var timedis = 16 - (currTime - this.lastFrameTime)
                var timeToCall = Math.max(0, timedis);
                var id = setTimeout(callback, timeToCall);
                this.lastFrameTime = currTime + timeToCall;
                return id;
            },
            drawImage(data, repeatcount) {
                if (repeatcount == 0) {
                    return
                }
                var p10 = data[0][0]; // 三阶贝塞尔曲线起点坐标值
                var p11 = data[0][1]; // 三阶贝塞尔曲线第一个控制点坐标值
                var p12 = data[0][2]; // 三阶贝塞尔曲线第二个控制点坐标值
                var p13 = data[0][3]; // 三阶贝塞尔曲线终点坐标值

                var p20 = data[1][0];
                var p21 = data[1][1];
                var p22 = data[1][2];
                var p23 = data[1][3];

                var p30 = data[2][0];
                var p31 = data[2][1];
                var p32 = data[2][2];
                var p33 = data[2][3];

                var t = this.factor.t;

                /*计算多项式系数*/
                var cx1 = 3 * (p11.x - p10.x);
                var bx1 = 3 * (p12.x - p11.x) - cx1;
                var ax1 = p13.x - p10.x - cx1 - bx1;

                var cy1 = 3 * (p11.y - p10.y);
                var by1 = 3 * (p12.y - p11.y) - cy1;
                var ay1 = p13.y - p10.y - cy1 - by1;

                /*计算xt yt坐标值 */
                var xt1 = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p10.x;
                var yt1 = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p10.y;

                /** 计算多项式系数*/
                var cx2 = 3 * (p21.x - p20.x);
                var bx2 = 3 * (p22.x - p21.x) - cx2;
                var ax2 = p23.x - p20.x - cx2 - bx2;

                var cy2 = 3 * (p21.y - p20.y);
                var by2 = 3 * (p22.y - p21.y) - cy2;
                var ay2 = p23.y - p20.y - cy2 - by2;

                /*计算xt yt坐标值*/
                var xt2 = ax2 * (t * t * t) + bx2 * (t * t) + cx2 * t + p20.x;
                var yt2 = ay2 * (t * t * t) + by2 * (t * t) + cy2 * t + p20.y;


                /** 计算多项式系数*/
                var cx3 = 3 * (p31.x - p30.x);
                var bx3 = 3 * (p32.x - p31.x) - cx3;
                var ax3 = p33.x - p30.x - cx3 - bx3;

                var cy3 = 3 * (p31.y - p30.y);
                var by3 = 3 * (p32.y - p31.y) - cy3;
                var ay3 = p33.y - p30.y - cy3 - by3;

                /*计算xt yt坐标值*/
                var xt3 = ax3 * (t * t * t) + bx3 * (t * t) + cx3 * t + p30.x;
                var yt3 = ay3 * (t * t * t) + by3 * (t * t) + cy3 * t + p30.y;
                this.factor.t += this.factor.speed;
                this.ctx.drawImage("../../static/images/heart1.png", xt1, yt1, 30, 30);
                this.ctx.drawImage("../../static/images/heart2.png", xt2, yt2, 30, 30);
                this.ctx.drawImage("../../static/images/heart3.png", xt3, yt3, 30, 30);
                this.ctx.draw();
                if (this.factor.t > 1) {
                    this.factor.t = 0;
                    clearTimeout(this.timer)
                    if (repeatcount <= -1) {
                        this.startTimer(repeatcount)
                    } else {
                        if (this.count < repeatcount) {
                            this.startTimer(repeatcount)
                            this.count++
                        } else {
                            this.draworiginal()
                            this.count = 0;
                        }
                    }
                } else {
                    var _this = this
                    _this.timer = _this.requestAnimationFrame(function() {
                        _this.drawImage(_this.img_path, repeatcount)
                    })
                }
            },
            // onClickImage: function(e) {
            //     //点击心形的时候动画效果
            //     // this.style_img = 'transform:scale(1.1);'+this.add_class_img
            //     this.condition = 0
            //     this.factor.t = 2
            //     this.count = 0
            //     this.startTimer(1)
            // },
            //repeatcount -1就是循环，其他大于零的整数就是动画循环次数
            startTimer: function(repeatcount) {
                this.drawImage(this.img_path, repeatcount)
            },
            draworiginal() {
                this.ctx.drawImage("../../static/images/heart1.png", 30, 400, 30, 30);
                this.ctx.drawImage("../../static/images/heart2.png", 30, 400, 30, 30);
                this.ctx.drawImage("../../static/images/heart3.png", 30, 400, 30, 30);
                this.ctx.draw();
            }
        }
    }
</script>

<style>
    .add_class_canvas{
        
    }
    .add_class_img{
        
    }
    .mainview {
        height: 100vh;
        width: 100%;
        background-color: #c2d9c1;
    }

    .canvas {
        /* background: #cfcfcf; */
        background: transparent;
        width: 90px;
        height: 400px;
        position: fixed;
        right: 20px;
        bottom: 60px;
    }

    /* transform下面的属性是为了让动画看上去更自然 */
    .heart {
        position: fixed;
        right: 45px;
        bottom: 30px;
        width: 40px;
        height: 40px;
        transform: scale(1);
        -webkit-transform: scale(1);
        -webkit-transition: ease all;
        -moz-transition: ease all;
        transition: ease all;
        -webkit-transition-duration: 700ms;
        -moz-transition-duration: 700ms;
        transition-duration: 700ms;
    }
</style>