Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)

十、开场动画
默认情况下图表的数据一开始就直接全部显示出来,我们可以通过它的 animate() 方法来设置动画,使得刚开始的显示效果更加生动些。

1,X 轴方向动画
(1)效果图
图表上的点和连线不是一次性全部显示,而是从左到右依次显示出来。
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)

(2)样例代码

//播放x轴方向动画,持续时间1秒
chartView.animate(xAxisDuration: 1)

2,Y 轴方向动画
(1)效果图
设置动画后,图表上的点和连线则会逐渐向上升起。
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)

(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 的效果。
Swift - 第三方图表库Charts使用详解11(折线图10:动画效果)

(3)使用样例

//播放y轴方向动画,持续时间1秒,动画效果是先快后慢
chartView.animate(yAxisDuration: 1, easingOption: .easeOutCubic)

原文出自:www.hangge.com 原文链接:https://www.hangge.com/blog/cache/detail_2129.html