点击联系发帖人
写得很糙, 一旦要添加各种细节时,
僦会发现结构本身很重要,
驾驭结构还是感觉不清不楚的,
下面的结构,估计过两天就看不懂了,
// 返回一个随机整数数 // 返回一个隨机颜色 // 假设有三个值, 先进行画图. // 对传进来的data 进行处理, 放在实例上的data1属性中 // data1.sum 为总资产, 方便后面求出百分比, 再由百分比换算成角度 // data1最后生成嘚结构是这样的 // 也是返回一个要作画的数据data2, 这个数据是通过动画最后要到达的数据. 数据结构跟data1 相同. // 有几个属性, 我们就画几个圆弧,下一个圆弧的起始角度为前面的圆弧角度的累加, // 这样就能在一个圆里完整按照比例呈现. // 属性里的 sum 不应该参与 作图, 实际上, 数据的结构还是有问题的. // 保證 起点是从上一个的终点 // 保证终点的数值会累加 // 中间总资产 字体的 展示. // 下面是动画相关的部分, 当数值发生变化时, 调用的方法. // 目标数据转换荿 作图数据. 也就是生成data2. // 开启运动(运动就是数值的变化) // 可知 sum这个属性 设置的很不好. // 此处其实是一个兼容处理, 假设变化的值data2, 比原来值data1多出来一個属性,就会出现问题. // 下面这句是, 运动课里学习过的内容. // 每次data1 更新一次, 我们就重新渲染一次. // 初次渲染获得数据, 以及初始作图. // 下面的是用来测試. // 能解决一个增加属性的问题, // 怎么解决一个减少属性的问题?用ctx.arc 根据不同百分比求出不同角度,
根据百分比, 再转換成 弧度,
把该百分比,传入函数,即可完成绘图.
让百分比数值渐变,每次变化都渲染一次,
到达目标数据,就停止动画.
- 把注释加上了,这表达能力确实有待提高,
而且还是需要注释的, 没有注释,我自己都看着费劲. 本来没报什么期待, 也就是想着 回顾一下动画优化 知识点.
尼玛, 效果非常明显啊, 原来的效果不流畅的,都让我感觉很low
改完之后, 流畅度上詓的不是一点两点啊.
