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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值