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. 微软欲2012年拿下智能手机系统四成市场
  2. 打印心形c语言,C语言打印心形
  3. 3011-基于二叉树的表达式求值(C++,附详细思路)
  4. Windows下Redis的启动命令
  5. Centos7安装JDK8以及环境配置
  6. STM32中断编程步骤
  7. struts2通配符的使用
  8. 如何改变hr标签的颜色
  9. 遇到问题--python--爬虫--urllib的使用协程没有并发的效果
  10. Machine Learning Practical 爱宝week2
  11. rstp edgeport
  12. c# 转换Image为Icon
  13. 职场表达,你不能没有的套路——SCQA架构
  14. 七月算法机器学习笔记1 微积分与概率论
  15. 【数据应用案例】隐私保护与PATE方法
  16. opencv21:Histograms直方图-查找、绘制和分析
  17. 中兴EPON OLT-C300开局配置
  18. 谷歌向公众开放Fuchsia操作系统,华为鸿蒙与之对标
  19. 局域网服务器常用的操作系统,局域网操作系统
  20. ZigBee无线传感器网络接入以太网研究

热门文章

  1. MySQL创建用户报错 -- ERROR 1396 (HY000): Operation CREATE USER failed for ‘user_name‘@‘localhost‘
  2. future java 多线程_Java多线程之Future与FutureTask
  3. qq html制作,jquery学习练习:制作QQ简易聊天框
  4. php中双引号的区别,PHP中单引号和双引号的区别
  5. shell脚本--使用for循环逐行访问txt文件
  6. aspose word 获取标题_Word干货|多级标题的自动编号怎么添加?
  7. 【开源项目】使用FFMPEG解析H264编码为YUV格式
  8. 为什么python代码运行不了_为什么Python代码能运行但是PyCharm给我画红线?
  9. 代码逻辑分析_双11模块79.34%的前端代码是怎样智能生成的?
  10. java结构体系_java io结构体系