8.canvas 简单实现一下环形动图

环形动图效果

image.png

1.gif

写得很糙, 一旦要添加各种细节时,
就会发现结构本身很重要,
驾驭结构还是感觉不清不楚的,
下面的结构,估计过两天就看不懂了,

版本1.0

思路:
如果用canvas?
用ctx.arc 根据不同百分比求出不同角度,
linewidth + strokeStyle 能够完成 渲染
中间总资产 求和 用 filltext
需要一个数据
各项资产的数值.
传进函数中时,
会遍历求出总和,
以及各自的百分比,
根据百分比, 再转换成 弧度,
把该百分比,传入函数,即可完成绘图.
如何实现动画?
canvas 无法通过 css transition , 和animation
可以通过 setInterval
让百分比数值渐变,每次变化都渲染一次,
到达目标数据,就停止动画.



    
        
        
        
        dddd
        
    
    
      
      
      
         
         
         
house:
car :
money :

今天回顾的时候,

  1. 把注释加上了,这表达能力确实有待提高,
    而且还是需要注释的, 没有注释,我自己都看着费劲.
  2. 把setInterval 先改成 settimeout, 再改成 requestanimationframe
    本来没报什么期待, 也就是想着 回顾一下动画优化 知识点.
    尼玛, 效果非常明显啊, 原来的效果不流畅的,都让我感觉很low
    改完之后, 流畅度上去的不是一点两点啊.
                this.timer = requestAnimationFrame(function () {
                  var flag = true;
                  for(var key in data2) {
                    // 可知 sum这个属性 设置的很不好.
                    if (key != "sum") {
                      // 此处其实是一个兼容处理, 假设变化的值data2, 比原来值data1多出来一个属性,就会出现问题.
                    if (typeof data1[key] == "undefined") {
                      console.log(123);
                        data1[key] = {};
                        data1[key].rad = 0;
                        data1[key].bgColor = data2[key].bgColor;
                    }
                    // 下面这句是, 运动课里学习过的内容.
                    // 保证 data1的值,都向着 data2的值接近
                    // 保证每个data1的值,都足够和data2接近时, 才让 flag 保持 true, 关闭 定时器.关闭运动.
                    if (Math.abs(data2[key].rad * 100 - data1[key].rad * 100) > 1) {
                        data1[key].rad += (data2[key].rad*100 - data1[key].rad*100)/ 700;
                        flag = false;
                    }
                    // 每次data1 更新一次, 我们就重新渲染一次.
                    self.render();
                  }
                    }
                  if (flag) {// 关闭定时器.停止运动.
                    cancelAnimationFrame(self.timer);
                    console.log("over");
                    console.log(data1);
                  } else {
                    console.log(111111);
                    self.change(data);
                  }
                },50);
                
              }

你可能感兴趣的:(8.canvas 简单实现一下环形动图)