2016-09-26 08:11发布
我想做一个饼状图，效果是这个图从0点钟位置开始缓慢增加一直转360度，最后所有的扇形图都出来，然后再反弹两下，最后停在360度处。（反弹两下大概效果是扇形图达到360度后再回到某个角度比如320度然后再继续回到360度这样的效果），我用canvas实现了缓慢增加最后停在360度处的效果，但是这个反弹没思路，谁有更好的办法实现我说的全部效果，不用canvas也行
你只是画出来，动画还需要自己写。思路很简单，重绘每一帧就行了。用requestAnimationFrame函数实现，兼容低版本IE就自己写一个setTimeout的兼容。至于生动反弹效果，你可能要通过时间与速度的关于控制每一帧角度跳跃的距离。这种场景其实很明显，一个三角函数比上一个一次函数就可以了，就像波的衰变函数一样。当然以上如果第一次做，可能有点难，可以考虑第三方框架。
点击这里可以传送到项目地址
可以参考一下开源 Chart.js
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 wu102030 的问题《做一个饼状图，带动画的》','https://wenda.whatsns.com/q-300345.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
付费偷看金额在0.1-10元之间
你只是画出来，动画还需要自己写。
思路很简单，重绘每一帧就行了。用requestAnimationFrame函数实现，兼容低版本IE就自己写一个setTimeout的兼容。
至于生动反弹效果，你可能要通过时间与速度的关于控制每一帧角度跳跃的距离。
这种场景其实很明显，一个三角函数比上一个一次函数就可以了，就像波的衰变函数一样。
当然以上如果第一次做，可能有点难，可以考虑第三方框架。
点击这里可以传送到项目地址
可以参考一下开源 Chart.js
一周热门 更多>