先看效果

组件定义具体代码如下

<template>
    <view class="content">
        <view class="bottom-view" @click="clickAnimationView" style="display: flex; justify-content: center; align-items: center;">
            <view class="" style="position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;">
                <view class="" style="position: absolute; display: flex; justify-content: center; align-items: center;">
                    <image :animation="animationData" style="width: 46px; height: 46px; border-radius: 23px;" :src="audioCoverImg"
                     mode="aspectFill"></image>
                </view>
                <canvas class="progress_bg" canvas-id="cpbg"></canvas>
                <canvas class="progress_bg" canvas-id="cpbar"></canvas>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: '',
        props: {
            
        },
        data() {
            return {
                animationData: {},
                audioCoverImg: '../../static/player/normal.png',
            }
        },
        created() {
            this.drawProgressbg()
            console.log("动画插件 已经onLoad");
        },
        mounted() {
            
        },
        methods: {
            updateInfo: function(img) {
                if (this.audioCoverImg != '../../static/player/normal.png') {
                    return
                }
                this.audioCoverImg = img
            },
                        // 绘制路径线
            drawProgressbg: function() {
                var ctx = uni.createCanvasContext('cpbg', this);
                ctx.setLineWidth(4); 
                ctx.setStrokeStyle('#BFBFBF'); 
                ctx.setLineCap('round'); 
                ctx.beginPath(); 
                ctx.arc(25, 25, 21, 0, 2 * Math.PI, false);
                ctx.stroke(); 
                ctx.draw();
            },
                        // 动态绘制圆环
            drawCircle: function(step) {
                var ctx = uni.createCanvasContext('cpbar', this);
                ctx.setLineWidth(4);
                ctx.setStrokeStyle('#FF5B45');
                ctx.setLineCap('butt');
                ctx.beginPath();
                // 参数step 为绘制的百分比
                if (step >= 1) {
                    step = 2;
                } else {
                    step = step * 2
                }
                // console.log(step);
                ctx.arc(25, 25, 21, 0, step * Math.PI, false);
                ctx.stroke();
                ctx.draw();
            },
            // 旋转中间的图片
            rotate: function(duration) {
                var animation = uni.createAnimation({
                    duration: duration * 1000,
                    timingFunction: 'linear',
                })
                this.animation = animation
                let deg = Number(360 * duration / 8).toFixed(0)
                animation.rotate(deg).step()
                this.animationData = animation.export()
            },
                        // 停止图片旋转
            stopAnimation: function() {
                let that = this
                setTimeout(function(){
                    var animation = uni.createAnimation({
                        duration: 0,
                        timingFunction: 'linear',
                    })
                    // let count = Number(360*this.currentDuration/8).toFixed(0)
                    // let deg = count % 360
                    animation.rotate(0).step()
                    that.animationData = animation.export()
                    console.log("停止转圈");
                },500)
            },
                        // 点击事件
            clickAnimationView: function() {
                console.log("点击动画view");
                if (uni.getStorageSync('playStatus') == 'fm') {
                    uni.navigateTo({
                        url: '/pages/center/fmStory'
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/center/playing'
                    })
                }
            }
        }
    }
</script>

<style>
    .content {
        position: fixed;
        bottom: 12px;
        left: 50%;
        margin-left: -25px;
        width: 50px;
        height: 50px;
        z-index: 9999;
    }

    .progress_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        transform: rotate(-90deg);
    }
</style>

使用

import animationView from '@/components/animation_view/animation-view.vue'
components: {
    animationView
},
<animationView></animationView>