mode="aspectFill">

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'

})

}

}

}

}

.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);

}

vue 圆形百分比进度条_uniapp Vue 圆环进度条相关推荐

  1. vue 圆形百分比进度条_vue实用组件——圆环百分比进度条

    有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二 ...

  2. vue圆环进度条_Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  3. vue 圆形百分比进度条_快速构建一个圆形的进度条

    在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...

  4. android自定义view圆环,Android自定义View实现圆环进度条

    本文实例为大家分享了android自定义view实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 view实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条 ...

  5. vue 做圆环进度条

    昨天公司要做一个类似于这样的效果: 上面是昨天已经做出来的效果图,感觉还不错.本来准备用canvas来做,但是有页面上有很多圆环,造成了很多canvas同时存在的时候页面卡顿,所以用的css来做的. ...

  6. vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件

    前言 这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...

  7. vue实现进度条隐藏_实现带有进度条的Vue延迟加载

    下面Vue.js栏目给大家介绍一下给Vue的惰性加载添加进度条的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面 ...

  8. java如何画百分比圆环_canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 贴上代码,仅供参考 /** * L ...

  9. 圆形百分比进度条效果

    一.前言 最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...

最新文章

  1. kettle mysql 配置_Kettle数据库配置抽离
  2. python如何删除代码_Python如何删除除字母和数字之外的所有字符?(代码示例)
  3. Python3回文相关算法小结
  4. CSS 基础框盒模型介绍
  5. 梳子刻字刻什么好_石阶上被刻了1700多个汉字,网友狂赞!
  6. 2018.10.24-day3 python总结
  7. 通过银行卡号获取所属银行「支付宝」
  8. 合并pdf文件最简单的方法
  9. 身份证阅读器在国产操作系统Linux内核中的二次开发
  10. 怎么用计算机划因果图,计算机软考考试必备知识点:鱼骨图法
  11. linux ps1 配色,bashrc - PS1(提示符配色)
  12. 看电影适合什么蓝牙耳机?四款主动降噪高品质蓝牙耳机测评
  13. 微信小程序,后台数据返回的数据带有回车符,对文本进行回车符处理
  14. VUE 通过ref 控制滚动条到底部顶部
  15. 进程与程序的区别与联系
  16. Android 连续点击屏幕(次数可定,事件可定)后进行操作
  17. 高通平台开发系列讲解(系统篇)高通平台启动流程
  18. 【历史上的今天】7 月 19 日:IMAP 协议之父出生;Project Kotlin 公开亮相;CT 成像实现新突破
  19. Spring批处理教程
  20. ROS基础四之roscpp/rospy节点编写

热门文章

  1. ActiveMQ已准备好黄金时段
  2. Windows 下使用 SecureCRT 将本地文件上传至远程的 Linux 服务器,中文乱码怎么办?
  3. JSP动作元素/活动元素
  4. 在计算机中 用户程序,在用户计算机上的万维网客户程序是()
  5. 数据追加用什么函数_RL用算法发现算法:DeepMind 数据驱动「价值函数」自我更新,14款Atari游戏完虐人类!...
  6. C语言编写简单朗读发音小工具!!
  7. mysql 排序 过滤_【MYSQL】-3 排序与过滤
  8. 学java专科_专科学历可以学习java开发吗
  9. 一加7充电_一加真无线耳机曝光,65W快速充电器获认证
  10. 工业以太网交换机的三种转发方式