• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

十、开场动画
默认情况下图表的数据一开始就直接全部显示出来,我们可以通过它的 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)

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Swift学习笔记1发布时间:2022-07-13
下一篇:
在 Xcode 中使用 Markdown 生成 Swift 代码文档发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap