Swift - 第三方图表库AAInfographics使用详解12(动画效果、缓动效果)
作者:hangge | 2019-03-04 08:10
一、动画效果(缓动效果)
1,修改动画效果
(1)在图表展示时是有动画效果的,默认使用的是 easeInQuad 这个缓动效果。除此之外,AAInfographics 还内置了如下这些效果:
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeOutBounce
- easeInBack
- easeOutBack
- easeInOutBack
- elastic
- swingFromTo
- swingFrom
- swingTo
- bounce
- bouncePast
- easeFromTo
- easeFrom
- easeTo
(2)通过下面的图解可以更容易理解每一种 easing 的效果。

(3)下面样例我们将动画效果改成 easeOutBack:柱子不断伸长 -> 超出目标位置一点 -> 回缩到正常高度



import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 初始化图表视图控件
let chartWidth = self.view.frame.size.width
let chartHeight = self.view.frame.size.height - 200
let aaChartView = AAChartView()
aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
self.view.addSubview(aaChartView)
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column)//图表类型
.title("城市天气变化")//图表主标题
.categories(["一月", "二月", "三月", "四月", "五月", "六月"])
.colorsTheme(["#fe117c","#ffc069"])//主题颜色数组
.animationType(.easeOutBack) //修改动画效果
.series([
AASeriesElement()
.name("东京")
.data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5])
.toDic()!,
AASeriesElement()
.name("纽约")
.data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0])
.toDic()!])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
2,修改动画时长
默认情况下动画持续时长是 800 毫秒,我们可以通过 animationDuration 对其进行修改。let chartModel = AAChartModel()
.chartType(.column)//图表类型
.title("城市天气变化")//图表主标题
.animationType(.easeOutBack) //修改动画效果
.animationDuration(1000) //修改动画持续时间(1s)
//.....
全部评论(0)