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

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)
评论0