Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)
十、开场动画
默认情况下图表的数据一开始就直接全部显示出来,我们可以通过它的 animate() 方法来设置动画,使得刚开始的显示效果更加生动些。
1,X 轴方向动画
(1)效果图
- 图表上的点和连线不是一次性全部显示,而是从左到右依次显示出来。
(2)样例代码
//播放x轴方向动画,持续时间1秒 chartView.animate(xAxisDuration: 1)
2,Y 轴方向动画
(1)效果图
- 设置动画后,图表上的点和连线则会逐渐向上升起。
(2)样例代码
//播放y轴方向动画,持续时间1秒 chartView.animate(yAxisDuration: 1)
3,X 轴、Y 轴方向动画一起播放
//x轴、y轴方向动画一起播放,持续时间都是1秒 chartView.animate(xAxisDuration: 1, yAxisDuration: 1)
4,过渡效果
(1)默认情况下动画的过渡效果是线性的(匀速变化),通过 easingOption 属性可以设置不同的过渡效果,可选值如下:
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
(2)通过下面的图解可以更容易理解每一种 easing 的效果。
(3)使用样例
//播放y轴方向动画,持续时间1秒,动画效果是先快后慢 chartView.animate(yAxisDuration: 1, easingOption: .easeOutCubic)