Swift - 第三方图表库Charts使用详解11（折线图10：动画效果）
作者：hangge | 2018-08-13 08: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)
全部评论（0）