返回 导航

Swift

hangge.com

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)

回到顶部