ZeroOnet https://www.gravatar.com/avatar/36085a43c8eb4204439a44831045d404 从零开始，一直向前...... 2025-07-11T09:56:53.583Z https://zeroonet.com/ ZeroOnet zeroonetworkspace@gmail.com Hexo ⌈iOS⌋Lottie 的性能问题 https://zeroonet.com/2024/08/15/poor-lottie/ 2024-08-14T16:00:00.000Z 2025-07-11T09:56:53.583Z

Lottie 是一个让开发者“轻松搞定炫酷动画”的利器。设计师用 After Effects 做好动画后，只需导出一个 JSON 文件，开发者就可以直接用 Lottie 加到 App 或网页中，无需写复杂的动画代码。它体积小、效率高，还能交互控制，比如暂停、进度跳转、颜色变换，非常适合做 App 的加载动画、图标动效等。
但是在 iOS 上，如果你把开发者模式中的卡顿检测打开，你会发现在渲染一些复杂的 JSON 文件时，会出现明显的主线程卡顿。🤔

问题 1: 本地读取

对于本地的 JSON 文件而言，LottieAnimation 在初始化过程中会同步的读取路径文本内容。对于复杂的动画来说，这部分会有卡顿的隐患，所以需要对 LottieAnimationView 进行封装，让 LottieAnimation 异步进行加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

/// 异步加载 Lottie 动画的 LottieAnimationView。
public final class AsyncLottieView: LottieAnimationView {
    public let filePath: String

    /// 构造函数。
    /// - Parameters:
    ///   - filePath: JSON 完整文件路径。
    ///   - option: 渲染模式，默认根据动画类型自动选择。
    public required init(
        filePath: String,
        option: RenderingEngineOption = .automatic
    ) {
        self.filePath = filePath
        super.init(configuration: .init(renderingEngine: option))
        _loadAnimationAsynchronously()
    }

    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    public override func play(completion: LottieCompletionBlock? = nil) {
        _executeOrPend { super.play(completion: completion) }
    }

    public override func play(
        _ mode: LottiePlaybackMode.PlaybackMode,
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend { super.play(mode, completion: completion) }
    }

    public override func play(
        markers: [String],
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend { super.play(markers: markers, completion: completion) }
    }

    public override func play(
        marker: String,
        loopMode: LottieLoopMode? = nil,
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend { super.play(marker: marker, loopMode: loopMode, completion: completion) }
    }

    public override func play(
        fromFrame: AnimationFrameTime? = nil,
        toFrame: AnimationFrameTime,
        loopMode: LottieLoopMode? = nil,
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend {
            super.play(fromFrame: fromFrame, toFrame: toFrame, loopMode: loopMode, completion: completion)
        }
    }

    public override func play(
        fromProgress: AnimationProgressTime? = nil,
        toProgress: AnimationProgressTime,
        loopMode: LottieLoopMode? = nil,
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend {
            super.play(fromProgress: fromProgress, toProgress: toProgress, loopMode: loopMode, completion: completion)
        }
    }

    public override func play(
        fromMarker: String? = nil,
        toMarker: String,
        playEndMarkerFrame: Bool = true,
        loopMode: LottieLoopMode? = nil,
        completion: LottieCompletionBlock? = nil
    ) {
        _executeOrPend {
            super.play(
                fromMarker: fromMarker,
                toMarker: toMarker,
                playEndMarkerFrame: playEndMarkerFrame,
                loopMode: loopMode,
                completion: completion
            )
        }
    }

    public override func pause() {
        _pendingPlayback = nil
        super.pause()
    }

    public override func stop() {
        _pendingPlayback = nil
        super.stop()
    }

    private let _queue = DispatchQueue(label: "com.shanbay.lottie", qos: .userInitiated)

    private var _pendingPlayback: (() -> Void)?
}

extension AsyncLottieView {
    private func _loadAnimationAsynchronously() {
        _queue.async { [weak self] in
            guard
                let filePath = self?.filePath,
                let animation = LottieAnimation.filepath(filePath)
            else { return }
            DispatchQueue.main.async {
                guard let self else { return }
                self.animation = animation
                self._pendingPlayback?()
                self._pendingPlayback = nil
            }
        }
    }

    private func _executeOrPend(_ playback: @escaping () -> Void) {
        guard animation != nil else { _pendingPlayback = playback; return }
        playback()
    }
}

问题 2: 渲染模式

默认情况下，Lottie 会自动选择使用 CoreAnimation 还是 MainThread 进行动画的绘制，无疑前者会更加流程。但此时，你将会喜提肉眼可见的卡顿，此问题在 repo 的 issue 有所记录。Issue #2002 Issue #872

在 Debug 模式下，通过 Time Profiler 可以看到明确的崩溃标识：

而在其分析出来的调用堆栈信息来看，并没有找到耗时异常的相关函数。

😳 ！！！这就很奇怪了，如果使用 MainThread 的方式来渲染又会是怎样呢？卡顿确实是消失了，换成动画掉帧了，而且 CPU 占用飙升了。

通过肉眼实际对比线上 App 和调试 App，发现线上动画的表现正常，且没有明显感知到的渲染卡顿，马萨卡……

编辑 Scheme，将 Debug 和 Profile 的 Build Configuration 都从 Debug 变更为 Release。为了起对照作用，人为制造卡顿，如下：

1
2
3
4
5
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    super.touchesBegan(touches, with: event)
    Thread.sleep(forTimeInterval: 3)
}

先做个心理预期：

  • A: Time Profiler 在 Release 环境不能检测出卡顿，那么我们人为制造的卡顿也不会生效。
  • B: Time Profiler 能够检测出人为制造卡顿，却没有 Lottie 的卡顿，则说明在 Release 环境下通过 Core Animation 渲染的动画实际上并不会发生卡顿，而是 Debug Build Configuration 下的缺陷。

测试结果如下：

即实验证明了假设 B 成立（由于主线程是休眠状态，Time Profiler 中无法检测出耗时的函数堆栈，原因未知）。

附：JSON 文件的优化

Lottie 生成的文件内容有优化的空间，富哥直接用官方的优化工具即可，免费版可以看这里。

附：测试 JSON 文件

为了避免被恶心的 PCDN 刷下行流量，测试用的 JSON 文件不通过下载链接的方式给出，而以字符串内容贴出：

1
2
{"v":"5.6.10","fr":60,"ip":0,"op":299,"w":1080,"h":1000,"ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":260},"p":{"a":0,"k":[256,256,0]},"a":{"a":0,"k":[50,50,0]},"s":{"a":0,"k":[102,102,100]}},"ao":0,"ip":10,"op":120,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":28,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":38,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":82,"s":[100]},{"t":114,"s":[0]}]},"r":{"a":0,"k":487},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[41,41,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-19.36,34.5],[7.9,-25.43],[37.61,53.87],[11.91,108.59]],"o":[[0,0],[42.46,-75.65],[-9.02,29.06],[-47.22,-67.64],[-3.81,-34.72]],"v":[[1,2],[-48.54,-23.61],[-76.48,-100.02],[27.1,-130.11],[-120.81,-222.71]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":34,"s":[0]},{"t":108,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":28,"s":[0]},{"t":98,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":28,"op":120,"st":28,"bm":0},{"ddd":0,"ind":6,"ty":4,"parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":30,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":74,"s":[100]},{"t":106,"s":[0]}]},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-14,37],[-1,38],[35.01,-27.83],[-11,31]],"o":[[0,0],[9.97,-26.34],[1,-38],[-39,31],[11,-31]],"v":[[1,2],[48,-39],[29,-112],[136,-107],[103,-176]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":26,"s":[0]},{"t":100,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":20,"s":[0]},{"t":90,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":20,"op":120,"st":20,"bm":0},{"ddd":0,"ind":7,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":18,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":28,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":72,"s":[100]},{"t":104,"s":[0]}]},"r":{"a":0,"k":487},"p":{"a":0,"k":[256,256,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[41,41,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-19.36,34.5],[7.9,-25.43],[37.61,53.87],[11.91,108.59]],"o":[[0,0],[42.46,-75.65],[-9.02,29.06],[-47.22,-67.64],[-3.81,-34.72]],"v":[[1,2],[-48.54,-23.61],[-76.48,-100.02],[27.1,-130.11],[-120.81,-222.71]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":24,"s":[0]},{"t":98,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":18,"s":[0]},{"t":88,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":18,"op":120,"st":18,"bm":0},{"ddd":0,"ind":8,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":16,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":70,"s":[100]},{"t":102,"s":[0]}]},"r":{"a":0,"k":353},"p":{"a":0,"k":[256,256,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[70,70,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-14,37],[8.51,-58.53],[28.33,67.27],[11.91,108.59]],"o":[[0,0],[9.97,-26.34],[-12.36,85.08],[-32.01,-76.02],[-3.81,-34.72]],"v":[[1,2],[-48.54,-23.61],[-76.48,-100.02],[27.1,-130.11],[-120.81,-222.71]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":22,"s":[0]},{"t":96,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":16,"s":[0]},{"t":86,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":16,"op":120,"st":16,"bm":0},{"ddd":0,"ind":9,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":14,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":24,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":68,"s":[100]},{"t":100,"s":[0]}]},"r":{"a":0,"k":187},"p":{"a":0,"k":[256,256,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[70,70,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-14,37],[8.25,-31.24],[20.69,70],[17.8,30.06]],"o":[[0,0],[9.97,-26.34],[-7.44,28.15],[-10.77,-36.44],[-17.8,-30.05]],"v":[[1,2],[2.69,-79.78],[-49.42,-90.65],[-14.59,-135.23],[-105.31,-168.42]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":20,"s":[0]},{"t":94,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":14,"s":[0]},{"t":84,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":14,"op":120,"st":14,"bm":0},{"ddd":0,"ind":11,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":10,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":64,"s":[100]},{"t":96,"s":[0]}]},"r":{"a":0,"k":0},"p":{"a":0,"k":[256,256,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-14,37],[-1,38],[35.01,-27.83],[-11,31]],"o":[[0,0],[9.97,-26.34],[1,-38],[-39,31],[11,-31]],"v":[[1,2],[48,-39],[29,-112],[136,-107],[103,-176]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = wiggle(5, 3);"},"lc":1,"lj":1,"ml":4,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":16,"s":[0]},{"t":90,"s":[100]}]},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.14],"y":[0]},"t":10,"s":[0]},{"t":80,"s":[100]}]},"o":{"a":0,"k":0},"m":1}],"ip":10,"op":120,"st":10,"bm":0},{"ddd":0,"ind":12,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":12,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":22,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":66,"s":[100]},{"t":98,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":12,"s":[269.95,307.11,0],"to":[-0.32,-0.36,0],"ti":[1.35,1.54,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[268.01,304.95,0],"to":[-1.35,-1.54,0],"ti":[2.46,3.54,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[261.88,297.86,0],"to":[-2.46,-3.54,0],"ti":[2.23,5.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[253.25,283.7,0],"to":[-2.23,-5.31,0],"ti":[0.64,5.63,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":20,"s":[248.48,265.99,0],"to":[-0.64,-5.63,0],"ti":[-0.92,4.79,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":22,"s":[249.43,249.94,0],"to":[0.92,-4.79,0],"ti":[-1.8,3.71,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.1},"t":24,"s":[254.01,237.26,0],"to":[1.8,-3.7,0],"ti":[-2.15,2.78,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.12},"t":26,"s":[260.21,227.71,0],"to":[2.15,-2.78,0],"ti":[-2.22,2.09,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.14},"t":28,"s":[266.89,220.56,0],"to":[2.22,-2.09,0],"ti":[-2.16,1.58,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":30,"s":[273.51,215.18,0],"to":[2.16,-1.58,0],"ti":[-2.05,1.2,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":32,"s":[279.86,211.09,0],"to":[2.05,-1.2,0],"ti":[-1.93,0.92,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":34,"s":[285.83,207.96,0],"to":[1.93,-0.92,0],"ti":[-1.8,0.7,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":36,"s":[291.43,205.58,0],"to":[1.8,-0.7,0],"ti":[-1.67,0.54,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":38,"s":[296.64,203.76,0],"to":[1.67,-0.54,0],"ti":[-1.53,0.42,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":40,"s":[301.43,202.35,0],"to":[1.53,-0.42,0],"ti":[-1.4,0.32,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":42,"s":[305.82,201.27,0],"to":[1.4,-0.32,0],"ti":[-1.28,0.24,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":44,"s":[309.84,200.43,0],"to":[1.28,-0.24,0],"ti":[-1.17,0.18,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":46,"s":[313.51,199.81,0],"to":[1.17,-0.18,0],"ti":[-1.07,0.13,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":48,"s":[316.87,199.36,0],"to":[1.07,-0.13,0],"ti":[-0.97,0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":50,"s":[319.92,199.04,0],"to":[0.97,-0.08,0],"ti":[-0.88,0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":52,"s":[322.69,198.85,0],"to":[0.88,-0.05,0],"ti":[-0.79,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":54,"s":[325.19,198.76,0],"to":[0.79,-0.02,0],"ti":[-0.71,-0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":56,"s":[327.45,198.75,0],"to":[0.71,0.01,0],"ti":[-0.64,-0.03,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":58,"s":[329.47,198.81,0],"to":[0.64,0.03,0],"ti":[-0.56,-0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":60,"s":[331.27,198.93,0],"to":[0.56,0.05,0],"ti":[-0.5,-0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":62,"s":[332.85,199.1,0],"to":[0.5,0.06,0],"ti":[-0.43,-0.08,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":64,"s":[334.25,199.31,0],"to":[0.43,0.08,0],"ti":[-0.37,-0.08,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":66,"s":[335.46,199.55,0],"to":[0.38,0.09,0],"ti":[-0.32,-0.09,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":68,"s":[336.5,199.82,0],"to":[0.32,0.09,0],"ti":[-0.27,-0.1,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":70,"s":[337.38,200.11,0],"to":[0.27,0.1,0],"ti":[-0.22,-0.1,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":72,"s":[338.11,200.4,0],"to":[0.22,0.1,0],"ti":[-0.18,-0.1,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.16},"t":74,"s":[338.7,200.7,0],"to":[0.18,0.1,0],"ti":[-0.14,-0.1,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.14},"t":76,"s":[339.18,201,0],"to":[0.14,0.1,0],"ti":[-0.1,-0.09,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.13},"t":78,"s":[339.53,201.29,0],"to":[0.1,0.09,0],"ti":[-0.07,-0.09,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.1},"t":80,"s":[339.79,201.56,0],"to":[0.07,0.09,0],"ti":[-0.04,-0.08,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":82,"s":[339.96,201.81,0],"to":[0.04,0.08,0],"ti":[-0.02,-0.07,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":84,"s":[340.05,202.04,0],"to":[0.02,0.07,0],"ti":[0,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[340.08,202.22,0],"to":[0,0.06,0],"ti":[0.01,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[340.05,202.37,0],"to":[-0.01,0.04,0],"ti":[0.03,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[339.99,202.46,0],"to":[-0.02,0.02,0],"ti":[0.02,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[339.9,202.5,0],"to":[-0.02,0,0],"ti":[0.01,0.02,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.02},"t":94,"s":[339.84,202.47,0],"to":[-0.01,-0.02,0],"ti":[-0.01,0.04,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.04},"t":96,"s":[339.86,202.37,0],"to":[0.01,-0.04,0],"ti":[-0.01,0.06,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":98,"s":[339.91,202.22,0],"to":[0.01,-0.06,0],"ti":[0,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[339.93,202.03,0],"to":[0,-0.07,0],"ti":[0.01,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[339.92,201.82,0],"to":[-0.01,-0.07,0],"ti":[0.02,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[339.88,201.6,0],"to":[-0.02,-0.08,0],"ti":[0.03,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[339.81,201.37,0],"to":[-0.03,-0.08,0],"ti":[0.03,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[339.72,201.13,0],"to":[-0.03,-0.08,0],"ti":[0.04,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[339.61,200.9,0],"to":[-0.04,-0.08,0],"ti":[0.05,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[339.48,200.67,0],"to":[-0.05,-0.07,0],"ti":[0.05,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[339.34,200.46,0],"to":[-0.05,-0.07,0],"ti":[0.06,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[339.18,200.26,0],"to":[-0.05,-0.06,0],"ti":[0.03,0.03,0]},{"t":118,"s":[339.01,200.09,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[1.27,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":12,"s":[140.03,87.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,4.38,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.57,0]},"t":14,"s":[149.72,81.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.24,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.16,0.08,0]},"t":16,"s":[108.65,80.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.23,0]},"t":18,"s":[122.85,125.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.36,0.05,0]},"t":20,"s":[67.44,114,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.46,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,-0.02,0]},"t":22,"s":[77.83,139.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.14,0]},"t":24,"s":[86.28,118.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.04,-1.48,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.6,-4.08,0]},"t":26,"s":[132.52,84.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.09,0]},"t":28,"s":[130.23,85.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.34,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.4,0.04,0]},"t":30,"s":[104.06,104.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.03,0]},"t":32,"s":[97.16,67.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.65,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.61,-0.01,0]},"t":34,"s":[131.99,124.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.04,0]},"t":36,"s":[137.53,73.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,0.2,0]},"t":38,"s":[88.62,106.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.03,0]},"t":40,"s":[55.62,129.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.26,4.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.63,5,0]},"t":42,"s":[102.91,93.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.08,0]},"t":44,"s":[97.42,93.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.7,0.5,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,-0.16,0]},"t":46,"s":[54.26,122.9,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.1,0]},"t":48,"s":[69.39,112.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.46,0]},"t":50,"s":[108.19,60.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.13,0.06,0]},"t":52,"s":[70.4,49.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.59,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.49,0.35,0]},"t":54,"s":[84.85,97.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.23,0.72,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0,0]},"t":56,"s":[85.71,111.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.12,0]},"t":58,"s":[89.14,97.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.38,0.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-3.19,0]},"t":60,"s":[76.08,63.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.09,0]},"t":62,"s":[85.22,64.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.14,0]},"t":64,"s":[34.99,72.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.03,0]},"t":66,"s":[97.85,83.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,2.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,2.26,0]},"t":68,"s":[127.94,67.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.55,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.54,0.08,0]},"t":70,"s":[103.7,66.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.7,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.02,0]},"t":72,"s":[99.23,81.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.12,0]},"t":74,"s":[79.73,70.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.14,0]},"t":76,"s":[48.15,40.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.71,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,-0.11,0]},"t":78,"s":[26.23,1.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.12,0]},"t":80,"s":[35.88,18.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.64,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.07,0]},"t":82,"s":[45.8,60.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.17,0]},"t":84,"s":[29.73,37.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,-0.59,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.91,0]},"t":86,"s":[-23.83,13.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.09,0]},"t":88,"s":[23.28,15.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.57,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.38,0.24,0]},"t":90,"s":[-4.08,51.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.03,0]},"t":92,"s":[-11.79,71.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.14,0]},"t":94,"s":[48.64,43.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,-0.03,0]},"t":96,"s":[13.64,2.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.16,0]},"t":98,"s":[-18.39,32.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.02,0]},"t":100,"s":[63.19,66.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,0.22,0]},"t":102,"s":[2.26,24.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.04,0]},"t":104,"s":[24.37,-2.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.52,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.31,-0.03,0]},"t":106,"s":[43.66,54.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0,0]},"t":108,"s":[39.61,13.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.27,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.36,-0.01,0]},"t":110,"s":[20.36,53.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.37,0]},"t":112,"s":[23.99,18.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.18,0]},"t":114,"s":[52.38,8.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.03,0]},"t":116,"s":[84.41,-0.48,100]},{"t":118,"s":[26.09,14.02,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.313725501299,0.890196084976,0.760784327984,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":12,"op":120,"st":12,"bm":0},{"ddd":0,"ind":13,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":32,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":76,"s":[100]},{"t":108,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[266.71,299.63,0],"to":[-0.01,0.38,0],"ti":[0.2,-1.85,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[266.62,301.89,0],"to":[-0.2,1.85,0],"ti":[0.96,-4.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[265.49,310.75,0],"to":[-0.96,4.09,0],"ti":[2.2,-5.28,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[260.86,326.43,0],"to":[-2.2,5.28,0],"ti":[3.15,-4.69,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[252.28,342.46,0],"to":[-3.14,4.69,0],"ti":[3.44,-3.4,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[241.99,354.56,0],"to":[-3.44,3.4,0],"ti":[3.35,-2.29,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[231.63,362.84,0],"to":[-3.35,2.29,0],"ti":[3.11,-1.51,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[221.89,368.32,0],"to":[-3.11,1.51,0],"ti":[2.82,-0.97,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[212.99,371.89,0],"to":[-2.82,0.97,0],"ti":[2.55,-0.61,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[204.95,374.16,0],"to":[-2.54,0.61,0],"ti":[2.29,-0.36,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[197.72,375.54,0],"to":[-2.29,0.36,0],"ti":[2.06,-0.19,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[191.22,376.32,0],"to":[-2.06,0.19,0],"ti":[1.86,-0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[185.37,376.68,0],"to":[-1.85,0.07,0],"ti":[1.68,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[180.09,376.74,0],"to":[-1.68,-0.02,0],"ti":[1.52,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[175.31,376.58,0],"to":[-1.52,-0.08,0],"ti":[1.38,0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[170.97,376.27,0],"to":[-1.38,-0.12,0],"ti":[1.25,0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[167.03,375.85,0],"to":[-1.25,-0.15,0],"ti":[1.14,0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[163.46,375.34,0],"to":[-1.14,-0.18,0],"ti":[1.03,0.2,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[160.21,374.77,0],"to":[-1.03,-0.2,0],"ti":[0.93,0.21,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[157.27,374.15,0],"to":[-0.93,-0.21,0],"ti":[0.84,0.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[154.62,373.49,0],"to":[-0.84,-0.22,0],"ti":[0.76,0.23,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[152.22,372.81,0],"to":[-0.76,-0.23,0],"ti":[0.68,0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[150.07,372.1,0],"to":[-0.68,-0.24,0],"ti":[0.62,0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[148.12,371.37,0],"to":[-0.62,-0.24,0],"ti":[0.56,0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[146.35,370.65,0],"to":[-0.56,-0.24,0],"ti":[0.51,0.23,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[144.76,369.94,0],"to":[-0.51,-0.23,0],"ti":[0.45,0.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[143.32,369.26,0],"to":[-0.45,-0.22,0],"ti":[0.41,0.2,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[142.03,368.62,0],"to":[-0.41,-0.2,0],"ti":[0.36,0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[140.89,368.04,0],"to":[-0.36,-0.18,0],"ti":[0.32,0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[139.87,367.52,0],"to":[-0.32,-0.16,0],"ti":[0.28,0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[138.98,367.07,0],"to":[-0.28,-0.14,0],"ti":[0.24,0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[138.21,366.69,0],"to":[-0.24,-0.11,0],"ti":[0.2,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[137.55,366.4,0],"to":[-0.2,-0.08,0],"ti":[0.17,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[137.01,366.19,0],"to":[-0.17,-0.05,0],"ti":[0.13,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[136.56,366.07,0],"to":[-0.13,-0.02,0],"ti":[0.1,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[136.21,366.04,0],"to":[-0.1,0.01,0],"ti":[0.07,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[135.96,366.1,0],"to":[-0.07,0.03,0],"ti":[0.04,-0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[135.8,366.24,0],"to":[-0.04,0.06,0],"ti":[0.01,-0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[135.72,366.48,0],"to":[-0.01,0.09,0],"ti":[-0.02,-0.12,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.03},"t":100,"s":[135.73,366.79,0],"to":[0.02,0.12,0],"ti":[-0.04,-0.14,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.04},"t":102,"s":[135.82,367.18,0],"to":[0.04,0.14,0],"ti":[-0.04,-0.16,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":104,"s":[135.95,367.63,0],"to":[0.04,0.16,0],"ti":[-0.05,-0.17,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":106,"s":[136.09,368.13,0],"to":[0.05,0.17,0],"ti":[-0.05,-0.18,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":108,"s":[136.22,368.67,0],"to":[0.05,0.18,0],"ti":[-0.05,-0.19,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":110,"s":[136.37,369.24,0],"to":[0.05,0.19,0],"ti":[-0.05,-0.2,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":112,"s":[136.51,369.83,0],"to":[0.05,0.2,0],"ti":[-0.05,-0.2,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":114,"s":[136.65,370.42,0],"to":[0.05,0.2,0],"ti":[-0.05,-0.19,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":116,"s":[136.8,371.02,0],"to":[0.05,0.2,0],"ti":[-0.02,-0.1,0]},{"t":118,"s":[136.94,371.59,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":22,"s":[59.34,96.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,-0.11,0]},"t":24,"s":[89.74,43.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.17,0]},"t":26,"s":[104.2,66.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.42,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,0.04,0]},"t":28,"s":[95.2,89.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.04,0]},"t":30,"s":[89.15,41.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.55,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.62,0]},"t":32,"s":[125.95,74.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.1,0]},"t":34,"s":[169.12,79.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.51,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.67,0]},"t":36,"s":[129.75,102.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.27,0.07,0]},"t":38,"s":[81.73,99.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.04,0]},"t":40,"s":[93.2,117.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.32,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.47,0]},"t":42,"s":[116.59,84.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.47,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.18,0.07,0]},"t":44,"s":[77.77,77.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.03,0]},"t":46,"s":[80.34,112.07,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.36,0.57,0]},"t":48,"s":[93.98,55.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.83,0.73,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.05,0]},"t":50,"s":[91.44,45.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.12,0]},"t":52,"s":[94.78,67.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.12,0]},"t":54,"s":[58.11,118.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.49,0]},"t":56,"s":[125.07,97.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.41,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.1,0]},"t":58,"s":[95.02,93.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0,0]},"t":60,"s":[108.36,63.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,-0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,-1.22,0]},"t":62,"s":[29.72,92.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.09,0]},"t":64,"s":[91.79,90.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.18,-0.04,0]},"t":66,"s":[150.24,55.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":68,"s":[131.53,79.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.33,0]},"t":70,"s":[114.42,104,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.46,0.73,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.03,0]},"t":72,"s":[99.13,112.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.12,0]},"t":74,"s":[104.83,98.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.4,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.54,0.13,0]},"t":76,"s":[67.48,67.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.01,0]},"t":78,"s":[65.34,10.52,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-3.21,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.91,0.26,0]},"t":80,"s":[77.67,71.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.04,0]},"t":82,"s":[76.64,101.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.24,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.44,0.68,0]},"t":84,"s":[25.53,39.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.06,0]},"t":86,"s":[33.63,30.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.68,0.71,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.19,0]},"t":88,"s":[29.42,64.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.12,0]},"t":90,"s":[40.37,53.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,1.36,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.14,0]},"t":92,"s":[71.13,29.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.07,0]},"t":94,"s":[37.38,38.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0,0]},"t":96,"s":[-15.32,-10.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.7,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,-0.25,0]},"t":98,"s":[86.71,39.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.31,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.67,0.12,0]},"t":100,"s":[48.49,27.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.01,0]},"t":102,"s":[46.48,-5.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.19,0]},"t":104,"s":[56.05,33.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.3,0]},"t":106,"s":[77.51,62.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.32,0.06,0]},"t":108,"s":[46.91,73.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.04,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,0.19,0]},"t":110,"s":[53.17,25.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,1.42,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,1.71,0]},"t":112,"s":[56.95,-11.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.67,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.07,0]},"t":114,"s":[96.79,-13.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.36,0.11,0]},"t":116,"s":[45.55,-2.06,100]},{"t":118,"s":[29.92,33.38,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.192156866193,0.560784339905,1,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":22,"op":120,"st":22,"bm":0},{"ddd":0,"ind":14,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":14,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":24,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":68,"s":[100]},{"t":100,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.62},"o":{"x":0.17,"y":0.16},"t":14,"s":[262.44,299.33,0],"to":[0.49,-0.19,0],"ti":[-2.35,1.05,0]},{"i":{"x":0.83,"y":0.79},"o":{"x":0.17,"y":0.1},"t":16,"s":[265.37,298.21,0],"to":[2.35,-1.05,0],"ti":[-5.03,2.85,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.11},"t":18,"s":[276.52,293.06,0],"to":[5.03,-2.85,0],"ti":[-6.17,4.88,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.11},"t":20,"s":[295.56,281.08,0],"to":[6.18,-4.88,0],"ti":[-4.92,5.97,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":22,"s":[313.57,263.76,0],"to":[4.92,-5.97,0],"ti":[-2.79,6,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":24,"s":[325.08,245.24,0],"to":[2.79,-5.99,0],"ti":[-0.96,5.47,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0.01},"t":26,"s":[330.33,227.79,0],"to":[0.96,-5.47,0],"ti":[0.38,4.71,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[330.82,212.44,0],"to":[-0.38,-4.71,0],"ti":[1.26,3.89,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[328.04,199.55,0],"to":[-1.26,-3.89,0],"ti":[1.77,3.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[323.26,189.09,0],"to":[-1.76,-3.13,0],"ti":[2,2.48,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[317.45,180.77,0],"to":[-2,-2.48,0],"ti":[2.06,1.96,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[311.25,174.2,0],"to":[-2.06,-1.96,0],"ti":[2.02,1.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[305.06,169,0],"to":[-2.02,-1.55,0],"ti":[1.93,1.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[299.11,164.88,0],"to":[-1.93,-1.24,0],"ti":[1.82,0.99,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[293.47,161.59,0],"to":[-1.82,-0.99,0],"ti":[1.69,0.8,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[288.21,158.94,0],"to":[-1.69,-0.8,0],"ti":[1.56,0.64,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[283.33,156.8,0],"to":[-1.56,-0.64,0],"ti":[1.44,0.52,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[278.84,155.08,0],"to":[-1.44,-0.52,0],"ti":[1.32,0.42,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[274.71,153.69,0],"to":[-1.32,-0.42,0],"ti":[1.2,0.33,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[270.94,152.59,0],"to":[-1.2,-0.33,0],"ti":[1.09,0.26,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[267.51,151.71,0],"to":[-1.09,-0.26,0],"ti":[0.99,0.19,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[264.38,151.04,0],"to":[-0.99,-0.19,0],"ti":[0.9,0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[261.55,150.55,0],"to":[-0.9,-0.14,0],"ti":[0.81,0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[259,150.21,0],"to":[-0.81,-0.09,0],"ti":[0.72,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[256.7,150.01,0],"to":[-0.72,-0.05,0],"ti":[0.65,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[254.65,149.93,0],"to":[-0.65,-0.01,0],"ti":[0.57,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[252.83,149.95,0],"to":[-0.57,0.03,0],"ti":[0.5,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[251.22,150.07,0],"to":[-0.5,0.06,0],"ti":[0.44,-0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[249.82,150.28,0],"to":[-0.44,0.08,0],"ti":[0.38,-0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[248.6,150.56,0],"to":[-0.38,0.11,0],"ti":[0.32,-0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[247.55,150.91,0],"to":[-0.32,0.13,0],"ti":[0.27,-0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[246.67,151.31,0],"to":[-0.27,0.14,0],"ti":[0.22,-0.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[245.94,151.76,0],"to":[-0.22,0.15,0],"ti":[0.17,-0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[245.35,152.23,0],"to":[-0.17,0.16,0],"ti":[0.13,-0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[244.9,152.73,0],"to":[-0.13,0.17,0],"ti":[0.09,-0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[244.56,153.24,0],"to":[-0.09,0.17,0],"ti":[0.06,-0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[244.34,153.75,0],"to":[-0.06,0.17,0],"ti":[0.02,-0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[244.22,154.24,0],"to":[-0.02,0.16,0],"ti":[-0.01,-0.14,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":90,"s":[244.2,154.69,0],"to":[0.01,0.14,0],"ti":[-0.03,-0.13,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":92,"s":[244.26,155.11,0],"to":[0.03,0.13,0],"ti":[-0.05,-0.11,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.08},"t":94,"s":[244.39,155.46,0],"to":[0.05,0.11,0],"ti":[-0.05,-0.11,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.06},"t":96,"s":[244.55,155.76,0],"to":[0.05,0.11,0],"ti":[-0.05,-0.12,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.05},"t":98,"s":[244.7,156.11,0],"to":[0.05,0.12,0],"ti":[-0.04,-0.13,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.05},"t":100,"s":[244.84,156.49,0],"to":[0.04,0.13,0],"ti":[-0.04,-0.14,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.05},"t":102,"s":[244.96,156.89,0],"to":[0.04,0.14,0],"ti":[-0.04,-0.14,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":104,"s":[245.09,157.31,0],"to":[0.04,0.14,0],"ti":[-0.04,-0.14,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":106,"s":[245.2,157.73,0],"to":[0.04,0.14,0],"ti":[-0.04,-0.14,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":108,"s":[245.31,158.15,0],"to":[0.04,0.14,0],"ti":[-0.03,-0.13,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":110,"s":[245.41,158.56,0],"to":[0.03,0.13,0],"ti":[-0.03,-0.12,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":112,"s":[245.5,158.95,0],"to":[0.03,0.13,0],"ti":[-0.03,-0.12,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":114,"s":[245.59,159.31,0],"to":[0.03,0.12,0],"ti":[-0.03,-0.1,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.05},"t":116,"s":[245.68,159.64,0],"to":[0.03,0.1,0],"ti":[-0.01,-0.05,0]},{"t":118,"s":[245.77,159.94,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.68,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":14,"s":[100.63,69.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.35,-1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.02,0]},"t":16,"s":[104.51,69.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.09,0]},"t":18,"s":[115.35,69.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.4,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.7,0.05,0]},"t":20,"s":[58.87,88.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.14,0]},"t":22,"s":[51.17,36.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.12,0]},"t":24,"s":[95.64,55.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.14,0]},"t":26,"s":[69.72,97.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.25,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.28,0.13,0]},"t":28,"s":[86.96,82.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.04,0]},"t":30,"s":[94.1,56.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,1.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.29,0]},"t":32,"s":[151.5,104.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.05,0]},"t":34,"s":[121.65,123.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,-0.08,0]},"t":36,"s":[91.67,73.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.02,0]},"t":38,"s":[66.05,99.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.2,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,0.24,0]},"t":40,"s":[87.75,66.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,0.06,0]},"t":42,"s":[100.66,48.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.1,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.48,-0.18,0]},"t":44,"s":[95.17,108.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.58,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.13,0]},"t":46,"s":[95.99,89.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.27,0]},"t":48,"s":[94.18,58.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.09,0]},"t":50,"s":[130.21,65.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.03,0]},"t":52,"s":[47.5,124.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.43,-0.06,0]},"t":54,"s":[105.07,83.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.17,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.02,0]},"t":56,"s":[118.92,107.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.03,0]},"t":58,"s":[134.62,75.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.21,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,-0.45,0]},"t":60,"s":[86.88,99.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.09,0]},"t":62,"s":[54.27,96.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.19,0]},"t":64,"s":[123.84,64.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.39,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.5,0.03,0]},"t":66,"s":[97.73,39.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.17,0]},"t":68,"s":[92.46,75.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.24,0]},"t":70,"s":[59.15,108.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.41,0.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.4,0.03,0]},"t":72,"s":[86.26,126.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.12,0]},"t":74,"s":[81.63,95.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.65,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,-0.39,0]},"t":76,"s":[53.31,31.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.1,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.11,0]},"t":78,"s":[67,42.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.04,0]},"t":80,"s":[81.21,78.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.04,0]},"t":82,"s":[50.27,13.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.43,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.93,-1.11,0]},"t":84,"s":[31.98,57.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.38,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.11,0]},"t":86,"s":[30.19,54.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.1,0]},"t":88,"s":[41.25,45.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[17.43,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[-2.66,-0.15,0]},"t":90,"s":[34.15,-11.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.03,0]},"t":92,"s":[34.36,9.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.25,0]},"t":94,"s":[-8.36,-24.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.38,0.16,0]},"t":96,"s":[32.62,-15.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,1.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.36,-0.01,0]},"t":98,"s":[44.33,-6.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.48,0.71,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.06,0]},"t":100,"s":[47.8,-14.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.1,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.12,0]},"t":102,"s":[50.7,8.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.46,0]},"t":104,"s":[66.04,65.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.64,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.67,0.07,0]},"t":106,"s":[32.74,78.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.19,0]},"t":108,"s":[30.98,13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,-0.3,0]},"t":110,"s":[46.16,-40.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.25,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.31,0.11,0]},"t":112,"s":[82.43,-28.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.21,0]},"t":114,"s":[74.81,1.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,-0.05,0]},"t":116,"s":[13.82,22.06,100]},{"t":118,"s":[39.78,9.17,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":14,"op":120,"st":14,"bm":0},{"ddd":0,"ind":15,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":18,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":28,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":72,"s":[100]},{"t":104,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[264.08,300.14,0],"to":[-0.07,0.47,0],"ti":[0.36,-2.34,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[263.66,302.96,0],"to":[-0.35,2.34,0],"ti":[0.56,-5.35,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[261.95,314.2,0],"to":[-0.56,5.35,0],"ti":[0,-7.36,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":24,"s":[260.31,335.07,0],"to":[0,7.36,0],"ti":[-1.22,-7.14,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":26,"s":[261.92,358.34,0],"to":[1.22,7.14,0],"ti":[-2.4,-5.72,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":28,"s":[267.6,377.93,0],"to":[2.4,5.72,0],"ti":[-3.15,-4.17,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.13},"t":30,"s":[276.3,392.65,0],"to":[3.15,4.17,0],"ti":[-3.44,-2.85,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":32,"s":[286.51,402.93,0],"to":[3.44,2.85,0],"ti":[-3.4,-1.87,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":34,"s":[296.96,409.75,0],"to":[3.41,1.87,0],"ti":[-3.2,-1.21,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":36,"s":[306.94,414.17,0],"to":[3.2,1.21,0],"ti":[-2.94,-0.77,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":38,"s":[316.16,417,0],"to":[2.94,0.77,0],"ti":[-2.67,-0.48,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":40,"s":[324.56,418.78,0],"to":[2.67,0.48,0],"ti":[-2.43,-0.29,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":42,"s":[332.19,419.88,0],"to":[2.43,0.29,0],"ti":[-2.21,-0.16,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":44,"s":[339.13,420.53,0],"to":[2.21,0.16,0],"ti":[-2.01,-0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":46,"s":[345.43,420.86,0],"to":[2.01,0.08,0],"ti":[-1.83,-0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":48,"s":[351.17,420.99,0],"to":[1.83,0.02,0],"ti":[-1.66,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":50,"s":[356.39,420.98,0],"to":[1.67,-0.02,0],"ti":[-1.52,0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":52,"s":[361.16,420.87,0],"to":[1.52,-0.05,0],"ti":[-1.39,0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":54,"s":[365.5,420.68,0],"to":[1.39,-0.07,0],"ti":[-1.26,0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":56,"s":[369.47,420.45,0],"to":[1.26,-0.08,0],"ti":[-1.15,0.1,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":58,"s":[373.09,420.18,0],"to":[1.15,-0.1,0],"ti":[-1.05,0.11,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":60,"s":[376.38,419.88,0],"to":[1.05,-0.11,0],"ti":[-0.95,0.12,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":62,"s":[379.37,419.54,0],"to":[0.95,-0.12,0],"ti":[-0.86,0.12,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":64,"s":[382.06,419.17,0],"to":[0.86,-0.12,0],"ti":[-0.77,0.12,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":66,"s":[384.5,418.8,0],"to":[0.77,-0.12,0],"ti":[-0.7,0.11,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":68,"s":[386.7,418.46,0],"to":[0.7,-0.11,0],"ti":[-0.63,0.1,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":70,"s":[388.68,418.16,0],"to":[0.63,-0.1,0],"ti":[-0.56,0.09,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":72,"s":[390.46,417.88,0],"to":[0.56,-0.09,0],"ti":[-0.5,0.08,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":74,"s":[392.05,417.63,0],"to":[0.5,-0.08,0],"ti":[-0.44,0.07,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":76,"s":[393.46,417.41,0],"to":[0.44,-0.07,0],"ti":[-0.39,0.07,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":78,"s":[394.7,417.2,0],"to":[0.39,-0.07,0],"ti":[-0.34,0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":80,"s":[395.8,417.01,0],"to":[0.34,-0.06,0],"ti":[-0.29,0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":82,"s":[396.74,416.83,0],"to":[0.29,-0.06,0],"ti":[-0.25,0.05,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":84,"s":[397.55,416.67,0],"to":[0.25,-0.05,0],"ti":[-0.21,0.05,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":86,"s":[398.23,416.51,0],"to":[0.21,-0.05,0],"ti":[-0.17,0.05,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.18},"t":88,"s":[398.79,416.37,0],"to":[0.17,-0.05,0],"ti":[-0.13,0.05,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.18},"t":90,"s":[399.24,416.23,0],"to":[0.13,-0.05,0],"ti":[-0.1,0.05,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.17},"t":92,"s":[399.58,416.09,0],"to":[0.1,-0.04,0],"ti":[-0.06,0.04,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.15},"t":94,"s":[399.82,415.95,0],"to":[0.06,-0.04,0],"ti":[-0.03,0.04,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":96,"s":[399.97,415.82,0],"to":[0.03,-0.04,0],"ti":[-0.01,0.04,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":98,"s":[400.03,415.7,0],"to":[0.01,-0.04,0],"ti":[-0.01,0.05,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":100,"s":[400.04,415.56,0],"to":[0.01,-0.05,0],"ti":[-0.01,0.06,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":102,"s":[400.06,415.4,0],"to":[0.01,-0.06,0],"ti":[-0.01,0.06,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":104,"s":[400.09,415.22,0],"to":[0.01,-0.06,0],"ti":[-0.01,0.07,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":106,"s":[400.13,415.03,0],"to":[0.01,-0.07,0],"ti":[-0.02,0.07,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":108,"s":[400.18,414.83,0],"to":[0.02,-0.07,0],"ti":[-0.02,0.07,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.05},"t":110,"s":[400.23,414.61,0],"to":[0.02,-0.07,0],"ti":[-0.02,0.07,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":112,"s":[400.3,414.39,0],"to":[0.03,-0.07,0],"ti":[-0.03,0.07,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.07},"t":114,"s":[400.38,414.17,0],"to":[0.03,-0.07,0],"ti":[-0.03,0.07,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.08},"t":116,"s":[400.48,413.95,0],"to":[0.03,-0.07,0],"ti":[-0.02,0.04,0]},{"t":118,"s":[400.59,413.74,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[2.24,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":18,"s":[60.43,69.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.01,0]},"t":20,"s":[57.04,63.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.1,0]},"t":22,"s":[110.87,70.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,2.54,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,2.81,0]},"t":24,"s":[90.38,117.24,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.62,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.08,0]},"t":26,"s":[78.76,118.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.02,0]},"t":28,"s":[89.35,91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.76,1.31,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,0.26,0]},"t":30,"s":[127.76,125.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.07,0]},"t":32,"s":[109.3,141.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,-0.13,0]},"t":34,"s":[74.47,65.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.47,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.45,0.01,0]},"t":36,"s":[46.41,94.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,2.67,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,2.04,0]},"t":38,"s":[50.79,61.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.18,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.21,0.08,0]},"t":40,"s":[74.38,60.2,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.17,0]},"t":42,"s":[67.66,89.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.32,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.58,0.03,0]},"t":44,"s":[88.82,119.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,-0.07,0]},"t":46,"s":[92.39,70.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.21,0]},"t":48,"s":[145.37,97.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.7,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.51,0,0]},"t":50,"s":[71.95,114.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.2,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.41,0]},"t":52,"s":[67.66,97.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.31,0.06,0]},"t":54,"s":[108.08,92.5,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.3,1.25,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,-0.52,0]},"t":56,"s":[122.81,108.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.24,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.06,0]},"t":58,"s":[136.89,105.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.17,0.06,0]},"t":60,"s":[71.75,114.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[4.7,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-10.73,0.17,0]},"t":62,"s":[93.33,80.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.28,2.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,1,0]},"t":64,"s":[93.16,47.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.08,0]},"t":66,"s":[100.7,44.07,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-6.85,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-7.9,0.14,0]},"t":68,"s":[67.68,88.24,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.28,0]},"t":70,"s":[68.03,152.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.56,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.21,0.11,0]},"t":72,"s":[100.15,137.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.5,0]},"t":74,"s":[91,95.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,-2.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.55,0]},"t":76,"s":[52.03,87.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-2.6,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-3.84,0.09,0]},"t":78,"s":[90.36,85.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0,0]},"t":80,"s":[89.55,32.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.45,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.67,1.09,0]},"t":82,"s":[55.17,83.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.03,0]},"t":84,"s":[58.98,88.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.32,0.09,0]},"t":86,"s":[34.79,80.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.21,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,1.84,0]},"t":88,"s":[39.73,2.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[4.23,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.29,0.06,0]},"t":90,"s":[28.35,-0.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.05,0]},"t":92,"s":[29.04,12.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,-0.04,0]},"t":94,"s":[1.64,-20.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.21,3.71,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.99,-1.39,0]},"t":96,"s":[23.8,1.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.08,0]},"t":98,"s":[22.08,0.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.44,0.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.34,0.94,0]},"t":100,"s":[48.7,41.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.1,0]},"t":102,"s":[43.44,45.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.01,0]},"t":104,"s":[13.58,72.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.12,0]},"t":106,"s":[-12.85,42.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.47,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,1.06,0]},"t":108,"s":[26.87,-22.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.01,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.83,0.07,0]},"t":110,"s":[60.7,-28.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,6.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,11.04,0]},"t":112,"s":[64.46,8.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,0.08,0]},"t":114,"s":[14.9,8.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.16,0.01,0]},"t":116,"s":[38.33,-8.34,100]},{"t":118,"s":[30.38,9.93,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.176470592618,0.521568655968,0.921568632126,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":18,"op":120,"st":18,"bm":0},{"ddd":0,"ind":16,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":10,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":64,"s":[100]},{"t":96,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.68},"o":{"x":0.17,"y":0.13},"t":10,"s":[268.5,303.89,0],"to":[0.37,-0.27,0],"ti":[-1.33,1.6,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.06},"t":12,"s":[270.74,302.29,0],"to":[1.33,-1.6,0],"ti":[1.95,1.77,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[276.49,294.29,0],"to":[-1.95,-1.77,0],"ti":[6.31,0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[259.03,291.69,0],"to":[-6.31,-0.17,0],"ti":[6.36,-0.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[238.63,293.29,0],"to":[-6.36,0.5,0],"ti":[5.44,-0.37,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[220.84,294.69,0],"to":[-5.43,0.37,0],"ti":[4.55,-0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[206.02,295.5,0],"to":[-4.55,0.18,0],"ti":[3.85,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[193.55,295.76,0],"to":[-3.85,0.01,0],"ti":[3.31,0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[182.9,295.58,0],"to":[-3.31,-0.12,0],"ti":[2.89,0.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[173.67,295.06,0],"to":[-2.89,-0.22,0],"ti":[2.54,0.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[165.58,294.24,0],"to":[-2.54,-0.31,0],"ti":[2.25,0.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[158.45,293.19,0],"to":[-2.25,-0.38,0],"ti":[2,0.44,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[152.1,291.95,0],"to":[-2,-0.44,0],"ti":[1.79,0.49,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[146.44,290.55,0],"to":[-1.79,-0.48,0],"ti":[1.6,0.52,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[141.37,289.04,0],"to":[-1.6,-0.52,0],"ti":[1.44,0.54,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[136.83,287.44,0],"to":[-1.43,-0.54,0],"ti":[1.29,0.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[132.76,285.77,0],"to":[-1.28,-0.56,0],"ti":[1.15,0.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[129.12,284.06,0],"to":[-1.15,-0.57,0],"ti":[1.03,0.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[125.86,282.33,0],"to":[-1.03,-0.58,0],"ti":[0.92,0.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[122.96,280.6,0],"to":[-0.91,-0.58,0],"ti":[0.81,0.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[120.37,278.88,0],"to":[-0.81,-0.57,0],"ti":[0.72,0.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[118.08,277.18,0],"to":[-0.72,-0.56,0],"ti":[0.64,0.54,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[116.04,275.53,0],"to":[-0.64,-0.54,0],"ti":[0.56,0.52,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[114.25,273.93,0],"to":[-0.56,-0.52,0],"ti":[0.49,0.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[112.68,272.39,0],"to":[-0.49,-0.5,0],"ti":[0.43,0.48,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[111.31,270.92,0],"to":[-0.43,-0.48,0],"ti":[0.37,0.45,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[110.12,269.52,0],"to":[-0.37,-0.45,0],"ti":[0.32,0.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[109.1,268.2,0],"to":[-0.32,-0.43,0],"ti":[0.27,0.4,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[108.22,266.97,0],"to":[-0.27,-0.4,0],"ti":[0.23,0.37,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[107.48,265.81,0],"to":[-0.23,-0.37,0],"ti":[0.19,0.34,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[106.86,264.74,0],"to":[-0.19,-0.34,0],"ti":[0.15,0.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[106.36,263.76,0],"to":[-0.15,-0.31,0],"ti":[0.12,0.28,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[105.96,262.87,0],"to":[-0.12,-0.28,0],"ti":[0.09,0.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[105.66,262.06,0],"to":[-0.09,-0.25,0],"ti":[0.06,0.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[105.45,261.35,0],"to":[-0.06,-0.22,0],"ti":[0.03,0.19,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[105.31,260.72,0],"to":[-0.03,-0.19,0],"ti":[0.01,0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[105.25,260.18,0],"to":[-0.01,-0.16,0],"ti":[-0.01,0.14,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.04},"t":84,"s":[105.26,259.73,0],"to":[0.01,-0.13,0],"ti":[-0.03,0.1,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":86,"s":[105.34,259.37,0],"to":[0.03,-0.1,0],"ti":[-0.05,0.07,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.13},"t":88,"s":[105.47,259.11,0],"to":[0.05,-0.07,0],"ti":[-0.06,0.05,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.15},"t":90,"s":[105.65,258.93,0],"to":[0.07,-0.05,0],"ti":[-0.07,0.04,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":92,"s":[105.86,258.81,0],"to":[0.07,-0.04,0],"ti":[-0.06,0.03,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.17},"t":94,"s":[106.07,258.71,0],"to":[0.06,-0.03,0],"ti":[-0.05,0.02,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.17},"t":96,"s":[106.23,258.63,0],"to":[0.05,-0.02,0],"ti":[-0.03,0.02,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.17},"t":98,"s":[106.35,258.57,0],"to":[0.03,-0.02,0],"ti":[-0.01,0.01,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.13},"t":100,"s":[106.42,258.52,0],"to":[0.02,-0.01,0],"ti":[0,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[106.44,258.48,0],"to":[0,-0.01,0],"ti":[0.02,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[106.41,258.46,0],"to":[-0.02,0,0],"ti":[0.03,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[106.34,258.46,0],"to":[-0.03,0,0],"ti":[0.05,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[106.23,258.48,0],"to":[-0.04,0.01,0],"ti":[0.06,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[106.07,258.51,0],"to":[-0.06,0.01,0],"ti":[0.07,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[105.87,258.56,0],"to":[-0.07,0.02,0],"ti":[0.08,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[105.64,258.63,0],"to":[-0.08,0.03,0],"ti":[0.1,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[105.37,258.72,0],"to":[-0.09,0.03,0],"ti":[0.05,-0.02,0]},{"t":118,"s":[105.07,258.82,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.9,-0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":10,"s":[111.82,109.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.09,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.41,0.09,0]},"t":12,"s":[100.06,106.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,-0.1,0]},"t":14,"s":[97.09,40.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.77,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,0.15,0]},"t":16,"s":[67.61,71.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.16,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,-0.13,0]},"t":18,"s":[79.87,109.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.22,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.38,0.05,0]},"t":20,"s":[101.05,94.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.01,0]},"t":22,"s":[106.98,137.49,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.48,-0.16,0]},"t":24,"s":[85.8,101.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.67,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.14,0]},"t":26,"s":[88.95,113.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.01,0]},"t":28,"s":[86.79,131.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.58,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.91,0.11,0]},"t":30,"s":[106.38,110.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,-0.03,0]},"t":32,"s":[104.74,50.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.47,0]},"t":34,"s":[75.29,93.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,0.56,0]},"t":36,"s":[57.97,102.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[6.07,1.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[2.53,-0.07,0]},"t":38,"s":[48.98,104.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,1.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.06,0]},"t":40,"s":[48.68,103.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.08,0]},"t":42,"s":[67.61,107.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.01,0]},"t":44,"s":[93.96,61.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.05,0]},"t":46,"s":[135.37,117.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.36,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.45,-0.92,0]},"t":48,"s":[94.65,82.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.15,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.28,0.07,0]},"t":50,"s":[85.35,85.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.05,0]},"t":52,"s":[87.51,70.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,1.43,0]},"t":54,"s":[107.43,104.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,1.16,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.09,0]},"t":56,"s":[140.47,106.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.05,0]},"t":58,"s":[118.15,128.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,-0.36,0]},"t":60,"s":[84.78,65.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.67,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.05,0]},"t":62,"s":[105.03,77.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.31,0]},"t":64,"s":[91.07,48.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.65,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.75,0.07,0]},"t":66,"s":[50.23,37.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.47,0]},"t":68,"s":[54.33,100.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.24,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,-0.22,0]},"t":70,"s":[67.61,90.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.6,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.03,0]},"t":72,"s":[81.9,93.51,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.11,0]},"t":74,"s":[25.7,89.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.16,0]},"t":76,"s":[51.16,75.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.43,0]},"t":78,"s":[91.35,60.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.53,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,0.05,0]},"t":80,"s":[62.73,57.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.53,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.01,0]},"t":82,"s":[70.32,67.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.1,0]},"t":84,"s":[14.17,58.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.32,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.42,-0.94,0]},"t":86,"s":[28.64,19.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,1.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.11,0]},"t":88,"s":[32.23,22.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.05,0]},"t":90,"s":[14.85,31.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.01,0]},"t":92,"s":[4.81,10.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,1.2,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.47,0,0]},"t":94,"s":[25.93,32.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.06,0]},"t":96,"s":[30.45,9.9,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,-0.02,0]},"t":98,"s":[21.83,85.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.67,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,-0.04,0]},"t":100,"s":[9.61,24.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.32,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.46,0]},"t":102,"s":[-1.29,66.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.1,0]},"t":104,"s":[-33.05,59.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,1.88,0]},"t":106,"s":[7.24,14.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.27,1.36,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.68,0.05,0]},"t":108,"s":[44.55,12.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.07,0]},"t":110,"s":[40.49,17.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.64,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.95,0,0]},"t":112,"s":[9.16,-7.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.04,0]},"t":114,"s":[7.76,16.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.3,-0.01,0]},"t":116,"s":[36.59,-26.53,100]},{"t":118,"s":[30.33,11.8,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":10,"op":120,"st":10,"bm":0},{"ddd":0,"ind":19,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":2,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":12,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":56,"s":[100]},{"t":88,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.73},"o":{"x":0.17,"y":0.13},"t":2,"s":[270.42,303.96,0],"to":[0.3,-0.27,0],"ti":[-1.39,1.06,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.09},"t":4,"s":[272.23,302.35,0],"to":[1.39,-1.06,0],"ti":[-2.91,0.5,0]},{"i":{"x":0.83,"y":0.82},"o":{"x":0.17,"y":0.13},"t":6,"s":[278.75,297.58,0],"to":[2.92,-0.5,0],"ti":[-1.55,-2.9,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":8,"s":[289.72,299.33,0],"to":[1.55,2.9,0],"ti":[0.81,-4.87,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":10,"s":[288.07,315,0],"to":[-0.81,4.87,0],"ti":[1.02,-4.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":12,"s":[284.88,328.54,0],"to":[-1.02,4.14,0],"ti":[0.91,-3.48,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[281.96,339.84,0],"to":[-0.9,3.49,0],"ti":[0.78,-2.99,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[279.46,349.45,0],"to":[-0.78,2.99,0],"ti":[0.67,-2.61,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[277.31,357.76,0],"to":[-0.67,2.61,0],"ti":[0.58,-2.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[275.46,365.09,0],"to":[-0.58,2.31,0],"ti":[0.51,-2.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[273.84,371.64,0],"to":[-0.5,2.07,0],"ti":[0.44,-1.88,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[272.43,377.54,0],"to":[-0.44,1.88,0],"ti":[0.39,-1.71,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[271.18,382.89,0],"to":[-0.39,1.71,0],"ti":[0.35,-1.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[270.07,387.78,0],"to":[-0.35,1.56,0],"ti":[0.31,-1.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[269.09,392.26,0],"to":[-0.31,1.43,0],"ti":[0.28,-1.32,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[268.21,396.39,0],"to":[-0.28,1.32,0],"ti":[0.24,-1.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[267.44,400.18,0],"to":[-0.24,1.22,0],"ti":[0.21,-1.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[266.75,403.68,0],"to":[-0.21,1.12,0],"ti":[0.19,-1.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[266.16,406.89,0],"to":[-0.18,1.03,0],"ti":[0.16,-0.94,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[265.64,409.84,0],"to":[-0.16,0.94,0],"ti":[0.13,-0.86,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[265.21,412.54,0],"to":[-0.13,0.86,0],"ti":[0.11,-0.78,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[264.86,415,0],"to":[-0.1,0.78,0],"ti":[0.08,-0.7,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[264.58,417.22,0],"to":[-0.08,0.7,0],"ti":[0.05,-0.62,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[264.39,419.21,0],"to":[-0.05,0.63,0],"ti":[0.02,-0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[264.27,420.97,0],"to":[-0.02,0.55,0],"ti":[0,-0.47,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":52,"s":[264.24,422.51,0],"to":[0,0.48,0],"ti":[-0.03,-0.4,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":54,"s":[264.3,423.82,0],"to":[0.03,0.4,0],"ti":[-0.06,-0.33,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":56,"s":[264.44,424.91,0],"to":[0.06,0.33,0],"ti":[-0.09,-0.25,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":58,"s":[264.67,425.78,0],"to":[0.09,0.25,0],"ti":[-0.12,-0.18,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.13},"t":60,"s":[264.99,426.42,0],"to":[0.12,0.18,0],"ti":[-0.14,-0.12,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.14},"t":62,"s":[265.4,426.85,0],"to":[0.14,0.13,0],"ti":[-0.15,-0.09,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.15},"t":64,"s":[265.86,427.17,0],"to":[0.15,0.09,0],"ti":[-0.16,-0.07,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":66,"s":[266.33,427.41,0],"to":[0.16,0.07,0],"ti":[-0.16,-0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":68,"s":[266.81,427.58,0],"to":[0.16,0.05,0],"ti":[-0.15,-0.03,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":70,"s":[267.28,427.69,0],"to":[0.16,0.03,0],"ti":[-0.15,-0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":72,"s":[267.74,427.74,0],"to":[0.15,0.01,0],"ti":[-0.14,0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":74,"s":[268.17,427.74,0],"to":[0.14,-0.01,0],"ti":[-0.13,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":76,"s":[268.57,427.69,0],"to":[0.13,-0.02,0],"ti":[-0.11,0.03,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":78,"s":[268.93,427.61,0],"to":[0.11,-0.03,0],"ti":[-0.1,0.05,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":80,"s":[269.25,427.49,0],"to":[0.1,-0.05,0],"ti":[-0.08,0.05,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.15},"t":82,"s":[269.52,427.33,0],"to":[0.08,-0.05,0],"ti":[-0.06,0.05,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.16},"t":84,"s":[269.74,427.18,0],"to":[0.06,-0.05,0],"ti":[-0.05,0.04,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.16},"t":86,"s":[269.91,427.06,0],"to":[0.05,-0.04,0],"ti":[-0.03,0.03,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.16},"t":88,"s":[270.02,426.97,0],"to":[0.03,-0.02,0],"ti":[-0.01,0.02,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":90,"s":[270.08,426.91,0],"to":[0.01,-0.01,0],"ti":[0.01,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[270.08,426.88,0],"to":[-0.01,-0.01,0],"ti":[0.03,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[270.04,426.87,0],"to":[-0.02,0,0],"ti":[0.04,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[269.94,426.89,0],"to":[-0.04,0.01,0],"ti":[0.06,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[269.79,426.93,0],"to":[-0.06,0.01,0],"ti":[0.07,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[269.6,426.98,0],"to":[-0.07,0.02,0],"ti":[0.08,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[269.37,427.04,0],"to":[-0.08,0.02,0],"ti":[0.09,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[269.1,427.11,0],"to":[-0.09,0.02,0],"ti":[0.1,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[268.82,427.18,0],"to":[-0.1,0.02,0],"ti":[0.1,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[268.51,427.24,0],"to":[-0.1,0.02,0],"ti":[0.11,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[268.19,427.29,0],"to":[-0.1,0.02,0],"ti":[0.1,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[267.88,427.33,0],"to":[-0.1,0.01,0],"ti":[0.1,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[267.57,427.34,0],"to":[-0.1,0,0],"ti":[0.09,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[267.29,427.32,0],"to":[-0.09,-0.01,0],"ti":[0.04,0.01,0]},{"t":118,"s":[267.04,427.26,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[1.16,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":2,"s":[88.71,125.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.01,0]},"t":4,"s":[101.05,65.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.05,0]},"t":6,"s":[64.82,119.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.19,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.21,0]},"t":8,"s":[95.37,85.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.06,0]},"t":10,"s":[130.23,63.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,-0.18,0]},"t":12,"s":[82.77,137.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,0.14,0]},"t":14,"s":[95.44,114.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.54,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.07,0]},"t":16,"s":[103.2,80.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.22,0]},"t":18,"s":[90.82,98.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.34,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.4,0]},"t":20,"s":[35.46,109.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.1,0]},"t":22,"s":[111.83,112.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.05,0]},"t":24,"s":[66.11,132.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.25,0]},"t":26,"s":[25.06,87.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.49,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.33,-0.83,0]},"t":28,"s":[108,65.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.34,1.28,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.3,0.07,0]},"t":30,"s":[91.21,67.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.06,0]},"t":32,"s":[84.7,52.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-2.06,-0.15,0]},"t":34,"s":[117.81,115.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.7,1.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.55,0]},"t":36,"s":[116.53,92.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.08,0]},"t":38,"s":[118.43,95.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.41,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.56,-0.96,0]},"t":40,"s":[77.76,57.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.14,0]},"t":42,"s":[70.59,60.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,0.11,0]},"t":44,"s":[112.83,65.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.05,0]},"t":46,"s":[139.96,82.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,0.04,0]},"t":48,"s":[89.04,39.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.32,0]},"t":50,"s":[61.11,115.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.02,0]},"t":52,"s":[41.52,141.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.09,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.67,0.21,0]},"t":54,"s":[68.26,107.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.15,0]},"t":56,"s":[65.32,84.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.22,0]},"t":58,"s":[106.65,57.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-3.29,0.05,0]},"t":60,"s":[66.01,65.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-1.72,0.57,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,-0.24,0]},"t":62,"s":[67.01,46.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.1,0]},"t":64,"s":[66.64,51.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.04,0]},"t":66,"s":[54.92,71.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,-1.44,0]},"t":68,"s":[65.43,35.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.12,0]},"t":70,"s":[82.89,37.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.04,0]},"t":72,"s":[50.53,41.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.06,1.34,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.75,0.16,0]},"t":74,"s":[35.56,32.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.07,0]},"t":76,"s":[33.69,23.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.33,0,0]},"t":78,"s":[59.52,70.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.61,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.9,0]},"t":80,"s":[68.23,22.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.22,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.07,0]},"t":82,"s":[53.75,26.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.51,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.16,0]},"t":84,"s":[62.5,-7.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.1,0]},"t":86,"s":[31.13,3.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.26,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.72,-0.05,0]},"t":88,"s":[-0.59,59.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.04,0]},"t":90,"s":[2.7,25.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.03,0]},"t":92,"s":[-10.89,49.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,-0.28,0]},"t":94,"s":[24.11,12.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.54,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,-0.07,0]},"t":96,"s":[15.15,21.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.23,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.05,0]},"t":98,"s":[8.06,16.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.06,0]},"t":100,"s":[61.17,27.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.28,-0.07,0]},"t":102,"s":[25.41,-14.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.67,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.46,0]},"t":104,"s":[10.11,8.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.6,0.07,0]},"t":106,"s":[32.24,5.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.32,0]},"t":108,"s":[29.53,36.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.42,0.13,0]},"t":110,"s":[26.02,30.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.25,0.06,0]},"t":112,"s":[25.15,18.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.72,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,-0.07,0]},"t":114,"s":[24.73,54.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.15,0]},"t":116,"s":[23.7,35.4,100]},{"t":118,"s":[33.6,11.39,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.313725501299,0.890196084976,0.760784327984,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":2,"op":120,"st":2,"bm":0},{"ddd":0,"ind":20,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":18,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":62,"s":[100]},{"t":94,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":8,"s":[267.9,308.22,0],"to":[-0.06,-0.38,0],"ti":[-0.41,2.01,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.03},"t":10,"s":[267.53,305.92,0],"to":[0.41,-2.01,0],"ti":[-2.23,4.28,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.07},"t":12,"s":[270.34,296.14,0],"to":[2.23,-4.28,0],"ti":[-4.06,5.37,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.1},"t":14,"s":[280.9,280.25,0],"to":[4.06,-5.36,0],"ti":[-4.39,5.02,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":16,"s":[294.68,263.96,0],"to":[4.39,-5.02,0],"ti":[-3.87,4.21,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":18,"s":[307.26,250.14,0],"to":[3.87,-4.21,0],"ti":[-3.26,3.54,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":20,"s":[317.88,238.67,0],"to":[3.26,-3.54,0],"ti":[-2.75,3.05,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":22,"s":[326.81,228.92,0],"to":[2.75,-3.05,0],"ti":[-2.35,2.69,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":24,"s":[334.39,220.39,0],"to":[2.35,-2.69,0],"ti":[-2.02,2.43,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.11},"t":26,"s":[340.9,212.77,0],"to":[2.02,-2.43,0],"ti":[-1.75,2.23,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.11},"t":28,"s":[346.53,205.83,0],"to":[1.75,-2.23,0],"ti":[-1.52,2.07,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.1},"t":30,"s":[351.42,199.39,0],"to":[1.52,-2.07,0],"ti":[-1.31,1.93,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.1},"t":32,"s":[355.64,193.4,0],"to":[1.31,-1.93,0],"ti":[-1.11,1.8,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":34,"s":[359.26,187.82,0],"to":[1.11,-1.8,0],"ti":[-0.91,1.68,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":36,"s":[362.28,182.62,0],"to":[0.91,-1.68,0],"ti":[-0.72,1.58,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":38,"s":[364.73,177.73,0],"to":[0.72,-1.58,0],"ti":[-0.52,1.48,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":40,"s":[366.6,173.14,0],"to":[0.52,-1.48,0],"ti":[-0.32,1.38,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":42,"s":[367.87,168.86,0],"to":[0.32,-1.38,0],"ti":[-0.11,1.26,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[368.53,164.88,0],"to":[0.12,-1.26,0],"ti":[0.08,1.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[368.56,161.27,0],"to":[-0.08,-1.13,0],"ti":[0.25,0.98,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[368.03,158.1,0],"to":[-0.25,-0.98,0],"ti":[0.38,0.82,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[367.04,155.4,0],"to":[-0.38,-0.82,0],"ti":[0.46,0.67,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[365.74,153.18,0],"to":[-0.46,-0.67,0],"ti":[0.51,0.54,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[364.25,151.38,0],"to":[-0.51,-0.54,0],"ti":[0.52,0.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[362.7,149.94,0],"to":[-0.52,-0.43,0],"ti":[0.52,0.34,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[361.14,148.79,0],"to":[-0.52,-0.34,0],"ti":[0.51,0.27,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[359.6,147.88,0],"to":[-0.5,-0.27,0],"ti":[0.49,0.22,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[358.11,147.16,0],"to":[-0.49,-0.22,0],"ti":[0.47,0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[356.68,146.59,0],"to":[-0.46,-0.17,0],"ti":[0.44,0.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[355.32,146.14,0],"to":[-0.44,-0.13,0],"ti":[0.42,0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[354.03,145.8,0],"to":[-0.41,-0.1,0],"ti":[0.39,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[352.83,145.54,0],"to":[-0.39,-0.08,0],"ti":[0.36,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[351.7,145.34,0],"to":[-0.36,-0.06,0],"ti":[0.33,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[350.67,145.2,0],"to":[-0.33,-0.04,0],"ti":[0.3,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[349.72,145.1,0],"to":[-0.3,-0.03,0],"ti":[0.26,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[348.88,145.04,0],"to":[-0.26,-0.02,0],"ti":[0.23,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[348.14,144.99,0],"to":[-0.23,-0.01,0],"ti":[0.19,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[347.52,144.96,0],"to":[-0.19,-0.01,0],"ti":[0.15,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[347.01,144.93,0],"to":[-0.15,-0.01,0],"ti":[0.1,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[346.64,144.89,0],"to":[-0.1,-0.01,0],"ti":[0.06,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[346.41,144.84,0],"to":[-0.06,-0.02,0],"ti":[0.03,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[346.3,144.76,0],"to":[-0.03,-0.03,0],"ti":[0.03,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[346.23,144.65,0],"to":[-0.03,-0.04,0],"ti":[0.05,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[346.12,144.53,0],"to":[-0.04,-0.04,0],"ti":[0.06,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[345.96,144.42,0],"to":[-0.06,-0.04,0],"ti":[0.07,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[345.76,144.31,0],"to":[-0.07,-0.04,0],"ti":[0.08,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[345.53,144.21,0],"to":[-0.08,-0.03,0],"ti":[0.09,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[345.26,144.11,0],"to":[-0.09,-0.03,0],"ti":[0.1,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[344.97,144.01,0],"to":[-0.1,-0.03,0],"ti":[0.11,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[344.65,143.92,0],"to":[-0.11,-0.03,0],"ti":[0.12,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[344.31,143.84,0],"to":[-0.12,-0.03,0],"ti":[0.12,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[343.95,143.76,0],"to":[-0.12,-0.02,0],"ti":[0.13,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[343.57,143.7,0],"to":[-0.13,-0.02,0],"ti":[0.13,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[343.19,143.63,0],"to":[-0.13,-0.02,0],"ti":[0.13,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[342.79,143.58,0],"to":[-0.13,-0.02,0],"ti":[0.07,0.01,0]},{"t":118,"s":[342.39,143.54,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":8,"s":[146.54,56.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.98,6.14,1]},"o":{"x":[0.17,0.17,0.17],"y":[7.11,6.42,0]},"t":10,"s":[102.65,113.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.08,0]},"t":12,"s":[102.13,114.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.77,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.02,0]},"t":14,"s":[115.05,67.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.27,0]},"t":16,"s":[89.46,104.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,-0.82,0]},"t":18,"s":[44.05,120.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,5.67,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,-0.05,0]},"t":20,"s":[77.82,118.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.08,0]},"t":22,"s":[107.75,119.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.05,0]},"t":24,"s":[53.48,67.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-1.06,0.52,1]},"o":{"x":[0.17,0.17,0.17],"y":[-2.06,-0.16,0]},"t":26,"s":[113.92,99.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.1,0]},"t":28,"s":[111.58,88.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.02,0]},"t":30,"s":[55.9,36.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,1.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.13,0.74,0]},"t":32,"s":[98.77,100.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.05,0]},"t":34,"s":[81.87,108.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.15,0]},"t":36,"s":[117.88,85.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,-0.02,0]},"t":38,"s":[94.85,58.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.21,0]},"t":40,"s":[77.18,81.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.17,0]},"t":42,"s":[102.13,95.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.06,0]},"t":44,"s":[142.65,110.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,-0.03,0]},"t":46,"s":[111.89,49.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.18,0]},"t":48,"s":[81.64,92.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.01,0]},"t":50,"s":[38.03,132.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.39,0]},"t":52,"s":[86.13,88.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.16,0]},"t":54,"s":[68.43,76.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,1.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.52,0]},"t":56,"s":[88.7,62.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.06,0]},"t":58,"s":[46.98,60,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.3,0.03,0]},"t":60,"s":[109.87,70.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.05,0]},"t":62,"s":[96.11,55.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.23,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.28,0.03,0]},"t":64,"s":[85.21,90.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.07,0]},"t":66,"s":[80.55,35.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.41,0]},"t":68,"s":[98.18,65.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.61,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.21,0.14,0]},"t":70,"s":[40.53,60,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.11,0]},"t":72,"s":[56.97,52.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.02,0]},"t":74,"s":[47.34,25.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.01,0]},"t":76,"s":[49.78,59.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.72,0]},"t":78,"s":[54.76,18.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.15,0]},"t":80,"s":[60.64,13.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.94,0.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.38,0.03,0]},"t":82,"s":[50.47,7.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.11,0]},"t":84,"s":[47.65,18.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.02,0]},"t":86,"s":[-15.43,58.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.52,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.6,0.28,0]},"t":88,"s":[27.16,27.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.36,0]},"t":90,"s":[22,13.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.59,1.14,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.54,0.54,0]},"t":92,"s":[59.35,9.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,1.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.05,0]},"t":94,"s":[54.35,8.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.08,0]},"t":96,"s":[34.64,10.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.16,0]},"t":98,"s":[67.47,-8.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.28,-0.04,0]},"t":100,"s":[34.99,-28.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[3.32,0.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.8,0.18,0]},"t":102,"s":[20.91,-15.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.11,0]},"t":104,"s":[21.53,-3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.33,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.39,0]},"t":106,"s":[3.56,37.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.14,0]},"t":108,"s":[-5.11,48.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.48,-0.16,0]},"t":110,"s":[37.96,65.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.16,0.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.16,0]},"t":112,"s":[40.53,59.68,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.09,0]},"t":114,"s":[42.97,53.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.57,0]},"t":116,"s":[65.11,-1.29,100]},{"t":118,"s":[21.1,5.72,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[1,0.89411765337,0.113725490868,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":8,"op":120,"st":8,"bm":0},{"ddd":0,"ind":21,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":10,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":64,"s":[100]},{"t":96,"s":[0]}]},"r":{"a":0,"k":92,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":10,"s":[274.62,306.24,0],"to":[-0.11,-0.59,0],"ti":[0.82,2.77,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":12,"s":[273.93,302.7,0],"to":[-0.82,-2.77,0],"ti":[2.18,6.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[269.67,289.62,0],"to":[-2.18,-6.09,0],"ti":[3.27,8.2,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[260.84,266.14,0],"to":[-3.27,-8.2,0],"ti":[3.49,7.96,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[250.07,240.45,0],"to":[-3.48,-7.96,0],"ti":[3.2,6.71,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[239.93,218.36,0],"to":[-3.2,-6.71,0],"ti":[2.85,5.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[230.89,200.21,0],"to":[-2.85,-5.53,0],"ti":[2.56,4.61,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[222.81,185.18,0],"to":[-2.56,-4.61,0],"ti":[2.33,3.91,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[215.51,172.54,0],"to":[-2.33,-3.91,0],"ti":[2.15,3.35,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[208.82,161.75,0],"to":[-2.15,-3.35,0],"ti":[1.99,2.9,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[202.64,152.44,0],"to":[-1.99,-2.9,0],"ti":[1.86,2.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[196.87,144.36,0],"to":[-1.86,-2.52,0],"ti":[1.75,2.21,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[191.46,137.29,0],"to":[-1.75,-2.21,0],"ti":[1.65,1.94,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[186.36,131.09,0],"to":[-1.65,-1.94,0],"ti":[1.56,1.71,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[181.54,125.65,0],"to":[-1.56,-1.71,0],"ti":[1.48,1.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[176.98,120.86,0],"to":[-1.48,-1.5,0],"ti":[1.4,1.32,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[172.66,116.64,0],"to":[-1.4,-1.32,0],"ti":[1.33,1.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[168.56,112.94,0],"to":[-1.33,-1.16,0],"ti":[1.25,1.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[164.69,109.69,0],"to":[-1.25,-1.01,0],"ti":[1.18,0.89,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[161.03,106.85,0],"to":[-1.18,-0.89,0],"ti":[1.11,0.77,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[157.59,104.37,0],"to":[-1.11,-0.77,0],"ti":[1.04,0.67,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[154.37,102.22,0],"to":[-1.04,-0.67,0],"ti":[0.96,0.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[151.36,100.36,0],"to":[-0.96,-0.58,0],"ti":[0.89,0.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[148.58,98.76,0],"to":[-0.89,-0.49,0],"ti":[0.81,0.42,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[146.04,97.39,0],"to":[-0.81,-0.42,0],"ti":[0.74,0.36,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[143.72,96.23,0],"to":[-0.74,-0.36,0],"ti":[0.69,0.3,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[141.59,95.24,0],"to":[-0.69,-0.3,0],"ti":[0.64,0.26,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[139.6,94.41,0],"to":[-0.64,-0.25,0],"ti":[0.59,0.21,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[137.76,93.72,0],"to":[-0.59,-0.21,0],"ti":[0.55,0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[136.05,93.13,0],"to":[-0.55,-0.18,0],"ti":[0.5,0.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[134.48,92.64,0],"to":[-0.5,-0.15,0],"ti":[0.46,0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[133.04,92.24,0],"to":[-0.46,-0.12,0],"ti":[0.42,0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[131.72,91.9,0],"to":[-0.42,-0.1,0],"ti":[0.38,0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[130.53,91.62,0],"to":[-0.38,-0.08,0],"ti":[0.34,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[129.46,91.39,0],"to":[-0.34,-0.07,0],"ti":[0.3,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[128.5,91.2,0],"to":[-0.3,-0.06,0],"ti":[0.26,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[127.65,91.04,0],"to":[-0.26,-0.05,0],"ti":[0.23,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[126.92,90.9,0],"to":[-0.23,-0.04,0],"ti":[0.19,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[126.29,90.79,0],"to":[-0.19,-0.03,0],"ti":[0.16,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[125.76,90.7,0],"to":[-0.16,-0.03,0],"ti":[0.13,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[125.34,90.62,0],"to":[-0.13,-0.02,0],"ti":[0.13,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[124.96,90.55,0],"to":[-0.13,-0.03,0],"ti":[0.13,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[124.58,90.46,0],"to":[-0.13,-0.03,0],"ti":[0.13,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[124.2,90.36,0],"to":[-0.13,-0.03,0],"ti":[0.13,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[123.82,90.26,0],"to":[-0.13,-0.04,0],"ti":[0.12,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[123.44,90.14,0],"to":[-0.12,-0.04,0],"ti":[0.12,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[123.07,90.02,0],"to":[-0.12,-0.04,0],"ti":[0.12,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[122.72,89.89,0],"to":[-0.12,-0.04,0],"ti":[0.11,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[122.38,89.75,0],"to":[-0.11,-0.05,0],"ti":[0.1,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[122.06,89.61,0],"to":[-0.1,-0.05,0],"ti":[0.1,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[121.76,89.47,0],"to":[-0.09,-0.05,0],"ti":[0.09,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[121.48,89.34,0],"to":[-0.09,-0.04,0],"ti":[0.08,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[121.24,89.2,0],"to":[-0.07,-0.04,0],"ti":[0.06,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[121.04,89.08,0],"to":[-0.06,-0.04,0],"ti":[0.03,0.02,0]},{"t":118,"s":[120.87,88.96,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[1.27,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":10,"s":[88.21,98.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.1,0]},"t":12,"s":[98.67,49.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.33,0.14,0]},"t":14,"s":[54.1,71.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.86,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,0.29,0]},"t":16,"s":[63.02,105.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.72,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0,0]},"t":18,"s":[59.19,119.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.12,0]},"t":20,"s":[102.36,105.21,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.02,0]},"t":22,"s":[79.07,71.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.89,-1.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.58,-1.65,0]},"t":24,"s":[101.99,115.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.09,0]},"t":26,"s":[105.84,113.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.7,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.25,0]},"t":28,"s":[60.69,44.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.12,0]},"t":30,"s":[90.74,61.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-2.02,0]},"t":32,"s":[48.64,106.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.87,0.09,0]},"t":34,"s":[110.8,104.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.31,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.02,0]},"t":36,"s":[105.35,91.07,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.14,0]},"t":38,"s":[112.73,102.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.3,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.22,0]},"t":40,"s":[78.02,118.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.49,0.07,0]},"t":42,"s":[123.5,128.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.68,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,-0.22,0]},"t":44,"s":[116.92,82.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.11,0]},"t":46,"s":[102.18,95.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.03,0]},"t":48,"s":[61.09,131.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.31,0.24,0]},"t":50,"s":[97.76,79.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.56,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.02,0]},"t":52,"s":[111.27,51.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.08,0]},"t":54,"s":[98.6,85.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.94,0]},"t":56,"s":[44.56,68.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.43,0.09,0]},"t":58,"s":[83.79,66.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.04,0]},"t":60,"s":[93.37,52.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.02,0]},"t":62,"s":[80.35,77.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.46,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,-0.05,0]},"t":64,"s":[105.74,46.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.16,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,1.15,0]},"t":66,"s":[119.23,66.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.34,0.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[-4.84,0.06,0]},"t":68,"s":[31.33,68.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.1,0]},"t":70,"s":[32.82,63.52,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.32,1.25,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.05,-0.19,0]},"t":72,"s":[55.23,35.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.06,0]},"t":74,"s":[53.58,43.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.1,0]},"t":76,"s":[41.68,9.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.21,0]},"t":78,"s":[65.34,25.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.14,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.02,0]},"t":80,"s":[39.29,35.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.05,0]},"t":82,"s":[71.91,22.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.75,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.19,0.56,0]},"t":84,"s":[-13.72,50.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.08,0]},"t":86,"s":[12.17,54.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.3,0]},"t":88,"s":[36.05,7.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.37,0.03,0]},"t":90,"s":[75.27,-11.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.19,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.25,0]},"t":92,"s":[68.05,17.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.14,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.06,0]},"t":94,"s":[73.65,32.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.55,0]},"t":96,"s":[69.64,-15.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,-0.28,1]},"o":{"x":[0.17,0.17,0.17],"y":[4.38,-0.36,0]},"t":98,"s":[32.39,-24.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[216.66,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[-3.24,0.09,0]},"t":100,"s":[31.66,-22.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.16,0]},"t":102,"s":[31.68,0.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.62,0.59,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,0.25,0]},"t":104,"s":[-15.24,26.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.1,0]},"t":106,"s":[-2.96,39.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.58,-0.02,0]},"t":108,"s":[41.4,91.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.75,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,0.24,0]},"t":110,"s":[48.83,48.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.2,0]},"t":112,"s":[46.18,24.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.52,0]},"t":114,"s":[72.83,8.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,0.1,0]},"t":116,"s":[23.42,10.49,100]},{"t":118,"s":[-3.77,24.3,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.313725501299,0.890196084976,0.760784327984,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":10,"op":120,"st":10,"bm":0},{"ddd":0,"ind":26,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":18,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":62,"s":[100]},{"t":94,"s":[0]}]},"r":{"a":0,"k":92},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.67},"o":{"x":0.17,"y":0.14},"t":8,"s":[269.49,306.01,0],"to":[0.37,0.26,0],"ti":[-1.76,-1.35,0]},{"i":{"x":0.83,"y":0.81},"o":{"x":0.17,"y":0.08},"t":10,"s":[271.69,307.58,0],"to":[1.76,1.36,0],"ti":[-4.05,-2.96,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.11},"t":12,"s":[280.07,314.14,0],"to":[4.06,2.96,0],"ti":[-5.76,-3.71,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.14},"t":14,"s":[296.02,325.34,0],"to":[5.76,3.71,0],"ti":[-5.91,-3.26,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":16,"s":[314.64,336.41,0],"to":[5.91,3.26,0],"ti":[-5.2,-2.46,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":18,"s":[331.48,344.9,0],"to":[5.2,2.46,0],"ti":[-4.43,-1.83,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":20,"s":[345.83,351.18,0],"to":[4.43,1.83,0],"ti":[-3.8,-1.4,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":22,"s":[358.08,355.91,0],"to":[3.8,1.4,0],"ti":[-3.29,-1.09,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":24,"s":[368.64,359.57,0],"to":[3.29,1.09,0],"ti":[-2.89,-0.87,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":26,"s":[377.84,362.47,0],"to":[2.89,0.87,0],"ti":[-2.57,-0.69,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":28,"s":[385.96,364.77,0],"to":[2.57,0.69,0],"ti":[-2.31,-0.54,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":30,"s":[393.23,366.59,0],"to":[2.31,0.54,0],"ti":[-2.08,-0.43,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":32,"s":[399.79,368.03,0],"to":[2.09,0.43,0],"ti":[-1.89,-0.34,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":34,"s":[405.74,369.17,0],"to":[1.9,0.34,0],"ti":[-1.73,-0.27,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":36,"s":[411.16,370.08,0],"to":[1.73,0.27,0],"ti":[-1.58,-0.22,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":38,"s":[416.12,370.81,0],"to":[1.58,0.22,0],"ti":[-1.45,-0.17,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":40,"s":[420.66,371.38,0],"to":[1.45,0.17,0],"ti":[-1.33,-0.14,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":42,"s":[424.83,371.84,0],"to":[1.34,0.14,0],"ti":[-1.23,-0.11,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":44,"s":[428.67,372.22,0],"to":[1.23,0.11,0],"ti":[-1.13,-0.09,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":46,"s":[432.2,372.53,0],"to":[1.13,0.09,0],"ti":[-1.04,-0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":48,"s":[435.45,372.78,0],"to":[1.04,0.08,0],"ti":[-0.96,-0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":50,"s":[438.45,373.01,0],"to":[0.96,0.07,0],"ti":[-0.88,-0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":52,"s":[441.2,373.21,0],"to":[0.88,0.07,0],"ti":[-0.81,-0.06,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":54,"s":[443.73,373.4,0],"to":[0.81,0.06,0],"ti":[-0.74,-0.06,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":56,"s":[446.04,373.59,0],"to":[0.74,0.06,0],"ti":[-0.67,-0.06,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":58,"s":[448.16,373.78,0],"to":[0.67,0.07,0],"ti":[-0.61,-0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":60,"s":[450.08,373.98,0],"to":[0.61,0.07,0],"ti":[-0.55,-0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":62,"s":[451.82,374.2,0],"to":[0.55,0.07,0],"ti":[-0.49,-0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":64,"s":[453.39,374.42,0],"to":[0.5,0.08,0],"ti":[-0.44,-0.08,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":66,"s":[454.79,374.66,0],"to":[0.44,0.08,0],"ti":[-0.39,-0.09,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":68,"s":[456.03,374.91,0],"to":[0.39,0.09,0],"ti":[-0.34,-0.09,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":70,"s":[457.12,375.18,0],"to":[0.34,0.09,0],"ti":[-0.29,-0.09,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":72,"s":[458.05,375.45,0],"to":[0.29,0.09,0],"ti":[-0.24,-0.09,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":74,"s":[458.83,375.73,0],"to":[0.24,0.09,0],"ti":[-0.19,-0.09,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.16},"t":76,"s":[459.47,376.01,0],"to":[0.19,0.09,0],"ti":[-0.14,-0.09,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.15},"t":78,"s":[459.97,376.29,0],"to":[0.14,0.09,0],"ti":[-0.1,-0.08,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.13},"t":80,"s":[460.33,376.55,0],"to":[0.1,0.09,0],"ti":[-0.05,-0.08,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.08},"t":82,"s":[460.55,376.8,0],"to":[0.05,0.08,0],"ti":[-0.01,-0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[460.64,377.01,0],"to":[0.01,0.07,0],"ti":[0.03,-0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[460.6,377.19,0],"to":[-0.03,0.06,0],"ti":[0.06,-0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[460.45,377.38,0],"to":[-0.06,0.07,0],"ti":[0.06,-0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[460.26,377.61,0],"to":[-0.06,0.08,0],"ti":[0.06,-0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[460.08,377.88,0],"to":[-0.05,0.1,0],"ti":[0.05,-0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[459.93,378.19,0],"to":[-0.05,0.11,0],"ti":[0.04,-0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[459.79,378.54,0],"to":[-0.04,0.12,0],"ti":[0.03,-0.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[459.67,378.92,0],"to":[-0.03,0.13,0],"ti":[0.03,-0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[459.59,379.32,0],"to":[-0.02,0.14,0],"ti":[0.02,-0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[459.53,379.75,0],"to":[-0.01,0.14,0],"ti":[0,-0.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[459.5,380.19,0],"to":[0,0.15,0],"ti":[-0.01,-0.15,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":106,"s":[459.5,380.65,0],"to":[0.01,0.15,0],"ti":[-0.02,-0.16,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":108,"s":[459.54,381.12,0],"to":[0.02,0.16,0],"ti":[-0.03,-0.16,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":110,"s":[459.6,381.59,0],"to":[0.03,0.16,0],"ti":[-0.04,-0.16,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":112,"s":[459.71,382.07,0],"to":[0.04,0.16,0],"ti":[-0.05,-0.16,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":114,"s":[459.84,382.54,0],"to":[0.05,0.16,0],"ti":[-0.06,-0.16,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":116,"s":[460,383.01,0],"to":[0.06,0.16,0],"ti":[-0.03,-0.08,0]},{"t":118,"s":[460.2,383.48,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":8,"s":[97.41,66.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,1.58,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,-0.19,0]},"t":10,"s":[44.57,76.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.07,0]},"t":12,"s":[63.61,73.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.01,0]},"t":14,"s":[100.95,97.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,1.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.49,0]},"t":16,"s":[61.81,70.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.07,0]},"t":18,"s":[87.31,64.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.68,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,-0.44,0]},"t":20,"s":[125.49,111.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,-3.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.94,0]},"t":22,"s":[109.82,104.07,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.12,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.29,0.09,0]},"t":24,"s":[65.32,104.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.01,0]},"t":26,"s":[47.25,134.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.45,0.02,0]},"t":28,"s":[91.92,108.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0,0]},"t":30,"s":[102.2,140.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.6,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.14,0]},"t":32,"s":[122.31,110.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.18,0]},"t":34,"s":[110.56,62.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,-0.02,0]},"t":36,"s":[65.66,77.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.15,0]},"t":38,"s":[85.87,65.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.39,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.06,0]},"t":40,"s":[67.71,49.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.34,0]},"t":42,"s":[78.11,97.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.04,0]},"t":44,"s":[143.97,113.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.01,0]},"t":46,"s":[91.21,80.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.01,0]},"t":48,"s":[128.53,117.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.04,0]},"t":50,"s":[81.83,74.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.7,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.26,0]},"t":52,"s":[130.6,103.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.04,0]},"t":54,"s":[118.24,117.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.3,0]},"t":56,"s":[86.19,91.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.24,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.86,0.04,0]},"t":58,"s":[59.81,81.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.04,0]},"t":60,"s":[62.14,101.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-1.45,0]},"t":62,"s":[25.05,61.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.61,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.64,0.04,0]},"t":64,"s":[88.84,64.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.11,0]},"t":66,"s":[98.39,60.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.37,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.27,-0.32,0]},"t":68,"s":[75.92,45.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.49,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.07,0]},"t":70,"s":[65.6,48.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,1.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.37,0]},"t":72,"s":[72.57,31.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.08,0]},"t":74,"s":[108.48,26.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0,0]},"t":76,"s":[64.07,74.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,0.3,0]},"t":78,"s":[22.79,25.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.05,0]},"t":80,"s":[33.92,6.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.02,0]},"t":82,"s":[48.54,53.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,-0.05,0]},"t":84,"s":[27.02,-9.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.42,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0,0]},"t":86,"s":[36.12,31.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.5,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.48,0]},"t":88,"s":[44.18,-10.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.1,0]},"t":90,"s":[-4.04,-4.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.25,0]},"t":92,"s":[68.26,26.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.16,0.3,0]},"t":94,"s":[13.77,42.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.17,-1.3,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,-0.07,0]},"t":96,"s":[32.12,48.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.09,0]},"t":98,"s":[43.94,45.17,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,-0.12,0]},"t":100,"s":[7.87,-41.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.76,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.77,0.16,0]},"t":102,"s":[17.23,-5.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.84,0]},"t":104,"s":[18.37,36.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.13,0]},"t":106,"s":[41.42,41.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.14,1.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.64,0]},"t":108,"s":[28.53,49.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.59,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.06,0]},"t":110,"s":[48.63,48.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.34,0.07,0]},"t":112,"s":[-5.74,52.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,-0.02,0]},"t":114,"s":[4.85,21.68,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.01,0]},"t":116,"s":[15.76,47.14,100]},{"t":118,"s":[10.26,18.2,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[10,10]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.0941176489,0.800000011921,0.721568644047,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":8,"op":120,"st":8,"bm":0},{"ddd":0,"ind":33,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":32,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":76,"s":[100]},{"t":108,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.52},"o":{"x":0.17,"y":0.16},"t":22,"s":[273.72,253.6,0],"to":[0.28,-0.03,0],"ti":[-1.66,-0.08,0]},{"i":{"x":0.83,"y":0.76},"o":{"x":0.17,"y":0.1},"t":24,"s":[275.4,253.43,0],"to":[1.66,0.08,0],"ti":[-3.92,-0.77,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.12},"t":26,"s":[283.7,254.09,0],"to":[3.92,0.77,0],"ti":[-5.16,-1.97,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.14},"t":28,"s":[298.93,258.03,0],"to":[5.16,1.98,0],"ti":[-4.6,-2.95,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.14},"t":30,"s":[314.65,265.94,0],"to":[4.6,2.95,0],"ti":[-3.33,-3.3,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.12},"t":32,"s":[326.53,275.71,0],"to":[3.33,3.3,0],"ti":[-2.23,-3.25,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.09},"t":34,"s":[334.62,285.71,0],"to":[2.23,3.25,0],"ti":[-1.45,-3.05,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":36,"s":[339.93,295.22,0],"to":[1.46,3.05,0],"ti":[-0.93,-2.79,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":38,"s":[343.35,303.99,0],"to":[0.93,2.79,0],"ti":[-0.58,-2.53,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":40,"s":[345.51,311.96,0],"to":[0.58,2.53,0],"ti":[-0.35,-2.29,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":42,"s":[346.84,319.19,0],"to":[0.35,2.29,0],"ti":[-0.2,-2.08,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":44,"s":[347.63,325.72,0],"to":[0.21,2.08,0],"ti":[-0.11,-1.89,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":46,"s":[348.08,331.65,0],"to":[0.12,1.89,0],"ti":[-0.06,-1.72,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0.01},"t":48,"s":[348.32,337.05,0],"to":[0.06,1.72,0],"ti":[-0.04,-1.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[348.46,341.97,0],"to":[0.04,1.57,0],"ti":[-0.03,-1.45,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[348.56,346.48,0],"to":[0.03,1.45,0],"ti":[-0.02,-1.35,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[348.63,350.68,0],"to":[0.02,1.35,0],"ti":[-0.02,-1.26,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[348.68,354.59,0],"to":[0.02,1.26,0],"ti":[-0.02,-1.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[348.72,358.22,0],"to":[0.02,1.17,0],"ti":[-0.02,-1.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[348.78,361.59,0],"to":[0.02,1.08,0],"ti":[-0.03,-1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0.01},"t":62,"s":[348.86,364.71,0],"to":[0.03,1,0],"ti":[-0.04,-0.92,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":64,"s":[348.96,367.59,0],"to":[0.04,0.92,0],"ti":[-0.04,-0.84,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":66,"s":[349.07,370.24,0],"to":[0.04,0.84,0],"ti":[-0.05,-0.77,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":68,"s":[349.21,372.65,0],"to":[0.05,0.77,0],"ti":[-0.06,-0.69,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.02},"t":70,"s":[349.37,374.85,0],"to":[0.06,0.69,0],"ti":[-0.06,-0.62,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":72,"s":[349.55,376.82,0],"to":[0.06,0.62,0],"ti":[-0.07,-0.55,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":74,"s":[349.74,378.58,0],"to":[0.07,0.55,0],"ti":[-0.07,-0.48,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":76,"s":[349.95,380.12,0],"to":[0.07,0.48,0],"ti":[-0.07,-0.41,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.04},"t":78,"s":[350.17,381.46,0],"to":[0.07,0.41,0],"ti":[-0.07,-0.35,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.04},"t":80,"s":[350.39,382.6,0],"to":[0.08,0.35,0],"ti":[-0.07,-0.28,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":82,"s":[350.61,383.55,0],"to":[0.08,0.28,0],"ti":[-0.07,-0.22,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.07},"t":84,"s":[350.84,384.31,0],"to":[0.08,0.22,0],"ti":[-0.07,-0.16,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.09},"t":86,"s":[351.06,384.88,0],"to":[0.07,0.16,0],"ti":[-0.07,-0.11,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.13},"t":88,"s":[351.28,385.29,0],"to":[0.07,0.11,0],"ti":[-0.07,-0.05,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.19},"t":90,"s":[351.49,385.52,0],"to":[0.07,0.05,0],"ti":[-0.06,0,0]},{"i":{"x":0.83,"y":0.82},"o":{"x":0.17,"y":0.16},"t":92,"s":[351.69,385.6,0],"to":[0.06,0,0],"ti":[-0.06,0.05,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.09},"t":94,"s":[351.87,385.54,0],"to":[0.06,-0.04,0],"ti":[-0.05,0.09,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.06},"t":96,"s":[352.04,385.33,0],"to":[0.05,-0.09,0],"ti":[-0.05,0.13,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.04},"t":98,"s":[352.2,385.01,0],"to":[0.05,-0.13,0],"ti":[-0.04,0.16,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.03},"t":100,"s":[352.33,384.57,0],"to":[0.04,-0.16,0],"ti":[-0.04,0.19,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":102,"s":[352.45,384.04,0],"to":[0.04,-0.18,0],"ti":[-0.02,0.19,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":104,"s":[352.54,383.46,0],"to":[0.02,-0.19,0],"ti":[-0.01,0.19,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":106,"s":[352.6,382.89,0],"to":[0.01,-0.19,0],"ti":[0,0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[352.62,382.33,0],"to":[0,-0.18,0],"ti":[0.01,0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[352.6,381.81,0],"to":[-0.01,-0.16,0],"ti":[0,0.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0.01},"t":112,"s":[352.57,381.35,0],"to":[0,-0.15,0],"ti":[-0.01,0.13,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":114,"s":[352.59,380.92,0],"to":[0.01,-0.13,0],"ti":[-0.02,0.12,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":116,"s":[352.64,380.55,0],"to":[0.02,-0.12,0],"ti":[-0.01,0.06,0]},{"t":118,"s":[352.72,380.22,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[2.45,-1.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":22,"s":[64.68,29.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.09,0]},"t":24,"s":[63.62,31.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.1,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,-0.11,0]},"t":26,"s":[83.08,94.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.19,0]},"t":28,"s":[98.43,68.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.03,0]},"t":30,"s":[65.33,46.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,0.14,0]},"t":32,"s":[115.98,81.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0,0]},"t":34,"s":[94.87,134.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.51,0]},"t":36,"s":[76.91,82.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.59,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.58,0.05,0]},"t":38,"s":[136.09,72.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.13,0]},"t":40,"s":[146.09,94.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.13,0.25,0]},"t":42,"s":[65,132.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.04,0]},"t":44,"s":[97.24,152.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.26,0]},"t":46,"s":[126.81,118.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.45,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.27,0.25,0]},"t":48,"s":[39.42,102.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.1,0]},"t":50,"s":[59.85,93.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,2.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,1.5,0]},"t":52,"s":[71.34,47.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.08,0]},"t":54,"s":[58.1,44.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,-0.12,0]},"t":56,"s":[82.14,88.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.37,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.14,0]},"t":58,"s":[95.45,70.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.04,0]},"t":60,"s":[106.4,41.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.16,0]},"t":62,"s":[46.84,95.07,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.42,0.14,0]},"t":64,"s":[100.24,76.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.2,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.01,0]},"t":66,"s":[91.35,46.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.02,0]},"t":68,"s":[86.08,72.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,-0.08,0]},"t":70,"s":[104.11,51.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.11,0]},"t":72,"s":[94.28,62.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,-0.01,0]},"t":74,"s":[126.94,93.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.19,0]},"t":76,"s":[108.33,65.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.49,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.32,0]},"t":78,"s":[63.72,44.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.1,0]},"t":80,"s":[102.92,48.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.46,0.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,0.6,0]},"t":82,"s":[78.27,71.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.09,0]},"t":84,"s":[87.18,75.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.23,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.55,0.04,0]},"t":86,"s":[28.71,110.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,1.44,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.9,0]},"t":88,"s":[18.36,46.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.07,0]},"t":90,"s":[57.76,39.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.02,0]},"t":92,"s":[91.49,81.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.14,0]},"t":94,"s":[20.88,48.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,-0.38,0]},"t":96,"s":[47.57,3.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.01,0]},"t":98,"s":[35.97,11.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.41,0.59,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.03,0]},"t":100,"s":[44.17,4.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.11,0]},"t":102,"s":[52.58,15.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.45,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.25,-0.03,0]},"t":104,"s":[2.56,60.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.62,0]},"t":106,"s":[14.9,27.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.07,0]},"t":108,"s":[83.45,31.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.04,0]},"t":110,"s":[48.8,8.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.32,0]},"t":112,"s":[20.81,49.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.12,0]},"t":114,"s":[64.32,40.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.17,0]},"t":116,"s":[39.92,18.86,100]},{"t":118,"s":[52.41,-3.55,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.192156866193,0.560784339905,1,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":22,"op":120,"st":22,"bm":0},{"ddd":0,"ind":34,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":34,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":78,"s":[100]},{"t":110,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[267.87,255.27,0],"to":[-0.16,-0.4,0],"ti":[1.03,2.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[266.9,252.86,0],"to":[-1.03,-2.14,0],"ti":[2.9,4.74,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[261.71,242.44,0],"to":[-2.9,-4.74,0],"ti":[4.94,5.8,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[249.51,224.43,0],"to":[-4.94,-5.8,0],"ti":[5.96,4.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[232.07,207.65,0],"to":[-5.96,-4.5,0],"ti":[5.89,2.37,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[213.73,197.43,0],"to":[-5.89,-2.37,0],"ti":[5.28,0.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[196.74,193.4,0],"to":[-5.28,-0.56,0],"ti":[4.45,-0.74,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[182.07,194.05,0],"to":[-4.45,0.74,0],"ti":[3.59,-1.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[170.03,197.85,0],"to":[-3.59,1.58,0],"ti":[2.79,-2.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[160.54,203.51,0],"to":[-2.79,2.04,0],"ti":[2.13,-2.23,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[153.26,210.07,0],"to":[-2.12,2.23,0],"ti":[1.6,-2.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[147.78,216.89,0],"to":[-1.59,2.25,0],"ti":[1.19,-2.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[143.69,223.59,0],"to":[-1.19,2.18,0],"ti":[0.88,-2.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[140.66,229.96,0],"to":[-0.88,2.06,0],"ti":[0.65,-1.91,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[138.41,235.92,0],"to":[-0.65,1.91,0],"ti":[0.48,-1.76,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[136.76,241.43,0],"to":[-0.48,1.76,0],"ti":[0.35,-1.61,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[135.55,246.48,0],"to":[-0.35,1.61,0],"ti":[0.25,-1.46,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[134.68,251.08,0],"to":[-0.25,1.46,0],"ti":[0.18,-1.32,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[134.05,255.23,0],"to":[-0.18,1.32,0],"ti":[0.13,-1.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[133.61,258.97,0],"to":[-0.12,1.18,0],"ti":[0.09,-1.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[133.3,262.32,0],"to":[-0.09,1.06,0],"ti":[0.06,-0.94,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[133.09,265.31,0],"to":[-0.06,0.94,0],"ti":[0.05,-0.83,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[132.93,267.97,0],"to":[-0.04,0.84,0],"ti":[0.04,-0.74,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[132.82,270.32,0],"to":[-0.04,0.74,0],"ti":[0.03,-0.65,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[132.72,272.39,0],"to":[-0.03,0.65,0],"ti":[0.03,-0.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[132.63,274.21,0],"to":[-0.03,0.57,0],"ti":[0.04,-0.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[132.53,275.8,0],"to":[-0.04,0.5,0],"ti":[0.04,-0.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[132.42,277.18,0],"to":[-0.04,0.43,0],"ti":[0.04,-0.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[132.29,278.39,0],"to":[-0.04,0.38,0],"ti":[0.04,-0.33,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[132.17,279.45,0],"to":[-0.04,0.33,0],"ti":[0.03,-0.28,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[132.07,280.36,0],"to":[-0.03,0.28,0],"ti":[0.02,-0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[132.01,281.14,0],"to":[-0.02,0.24,0],"ti":[0.01,-0.2,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[131.97,281.8,0],"to":[-0.01,0.2,0],"ti":[0,-0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[131.95,282.35,0],"to":[0,0.17,0],"ti":[0,-0.13,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":92,"s":[131.95,282.79,0],"to":[0,0.13,0],"ti":[-0.01,-0.1,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.02},"t":94,"s":[131.97,283.14,0],"to":[0.01,0.1,0],"ti":[-0.01,-0.07,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.04},"t":96,"s":[131.99,283.4,0],"to":[0.01,0.07,0],"ti":[-0.01,-0.05,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.1},"t":98,"s":[132.03,283.58,0],"to":[0.01,0.05,0],"ti":[-0.02,-0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.2},"t":100,"s":[132.08,283.68,0],"to":[0.02,0.02,0],"ti":[-0.02,0,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.12},"t":102,"s":[132.13,283.7,0],"to":[0.02,0,0],"ti":[-0.02,0.02,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.11},"t":104,"s":[132.19,283.65,0],"to":[0.02,-0.02,0],"ti":[-0.02,0.02,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":106,"s":[132.26,283.58,0],"to":[0.02,-0.02,0],"ti":[-0.02,0.01,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":108,"s":[132.33,283.54,0],"to":[0.03,-0.01,0],"ti":[-0.03,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.16},"t":110,"s":[132.41,283.53,0],"to":[0.03,0,0],"ti":[-0.03,-0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.15},"t":112,"s":[132.49,283.55,0],"to":[0.03,0.01,0],"ti":[-0.03,-0.01,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.14},"t":114,"s":[132.57,283.58,0],"to":[0.03,0.01,0],"ti":[-0.03,-0.02,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.13},"t":116,"s":[132.65,283.63,0],"to":[0.03,0.02,0],"ti":[-0.01,-0.01,0]},{"t":118,"s":[132.73,283.7,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[1.09,2.34,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":24,"s":[95.92,97.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.08,0]},"t":26,"s":[119.85,100.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.75,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,-0.08,0]},"t":28,"s":[71.61,47.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.13,0]},"t":30,"s":[95.91,74.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.01,0]},"t":32,"s":[116.53,126.21,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.77,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.27,0]},"t":34,"s":[69.28,82.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.04,0]},"t":36,"s":[99.8,62.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.16,0]},"t":38,"s":[155.46,101.2,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,-29.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.79,623.18,0]},"t":40,"s":[90.34,142.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,1.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.08,0]},"t":42,"s":[96.57,142.9,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.08,0]},"t":44,"s":[105.52,144.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.31,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.55,0]},"t":46,"s":[79.38,124.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.1,0]},"t":48,"s":[53.6,121.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.13,0]},"t":50,"s":[77.44,94.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.04,0]},"t":52,"s":[96.66,47.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.15,0]},"t":54,"s":[75.96,78.24,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.04,0]},"t":56,"s":[94.43,116.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.06,0]},"t":58,"s":[104.91,41.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-2.16,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-4.52,0.16,0]},"t":60,"s":[74.5,85.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.01,0]},"t":62,"s":[75.05,137.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,-0.09,0]},"t":64,"s":[95.39,78.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[3.56,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.25,0.03,0]},"t":66,"s":[85.99,106.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.14,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.13,0]},"t":68,"s":[86.58,59.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.13,0]},"t":70,"s":[67.89,77.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.05,1.7,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.95,0.69,0]},"t":72,"s":[117.56,112.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.07,0]},"t":74,"s":[115.52,117.51,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.36,0]},"t":76,"s":[94.32,71.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.23,0]},"t":78,"s":[107.41,58.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-1.31,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.23,-0.02,0]},"t":80,"s":[89.92,50.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.11,0]},"t":82,"s":[88.64,56.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.49,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.3,-0.06,0]},"t":84,"s":[54.49,73.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.1,0]},"t":86,"s":[41.54,63.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.02,0]},"t":88,"s":[58.89,12.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.28,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.46,0]},"t":90,"s":[81.87,81.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.54,0.06,0]},"t":92,"s":[44.5,97.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.66,0]},"t":94,"s":[49.48,29.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.42,-65.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,34.7,0]},"t":96,"s":[52.98,19.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,1.19,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.08,0]},"t":98,"s":[48.74,19.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.06,0]},"t":100,"s":[74.1,0.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,-0.23,0]},"t":102,"s":[10.27,62.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.14,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.02,0]},"t":104,"s":[27.32,46.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[3.59,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[2.21,0.05,0]},"t":106,"s":[53.61,68.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.07,0]},"t":108,"s":[54.64,8.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.43,-0.05,0]},"t":110,"s":[21.65,41.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.25,0]},"t":112,"s":[27.03,20.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.23,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.73,0]},"t":114,"s":[23.3,26.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.09,0]},"t":116,"s":[28.42,26.72,100]},{"t":118,"s":[22.61,32.22,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.192156866193,0.560784339905,1,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":24,"op":120,"st":24,"bm":0},{"ddd":0,"ind":35,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":16,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":70,"s":[100]},{"t":102,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.64},"o":{"x":0.17,"y":0.16},"t":16,"s":[275.45,259.56,0],"to":[0.55,0.16,0],"ti":[-2.49,-0.48,0]},{"i":{"x":0.83,"y":0.77},"o":{"x":0.17,"y":0.11},"t":18,"s":[278.72,260.51,0],"to":[2.49,0.48,0],"ti":[-5.49,-0.57,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.13},"t":20,"s":[290.41,262.45,0],"to":[5.49,0.57,0],"ti":[-7.45,0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":22,"s":[311.66,263.94,0],"to":[7.45,-0.06,0],"ti":[-7.17,1.29,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":24,"s":[335.13,262.08,0],"to":[7.17,-1.28,0],"ti":[-5.68,2.43,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.16},"t":26,"s":[354.7,256.23,0],"to":[5.68,-2.43,0],"ti":[-4.08,3.14,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.13},"t":28,"s":[369.23,247.5,0],"to":[4.08,-3.14,0],"ti":[-2.73,3.4,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.1},"t":30,"s":[379.2,237.37,0],"to":[2.73,-3.4,0],"ti":[-1.74,3.35,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":32,"s":[385.63,227.08,0],"to":[1.74,-3.34,0],"ti":[-1.06,3.13,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":34,"s":[389.62,217.3,0],"to":[1.06,-3.13,0],"ti":[-0.6,2.87,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":36,"s":[391.97,208.29,0],"to":[0.6,-2.87,0],"ti":[-0.3,2.61,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":38,"s":[393.24,200.09,0],"to":[0.31,-2.61,0],"ti":[-0.1,2.37,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[393.8,192.64,0],"to":[0.11,-2.37,0],"ti":[0.03,2.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[393.87,185.87,0],"to":[-0.03,-2.16,0],"ti":[0.12,1.97,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[393.61,179.69,0],"to":[-0.12,-1.97,0],"ti":[0.19,1.8,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[393.13,174.06,0],"to":[-0.19,-1.8,0],"ti":[0.23,1.64,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[392.5,168.91,0],"to":[-0.23,-1.64,0],"ti":[0.25,1.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[391.77,164.2,0],"to":[-0.25,-1.5,0],"ti":[0.26,1.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[390.99,159.88,0],"to":[-0.26,-1.38,0],"ti":[0.26,1.26,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[390.2,155.93,0],"to":[-0.26,-1.26,0],"ti":[0.26,1.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[389.42,152.31,0],"to":[-0.26,-1.15,0],"ti":[0.25,1.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[388.66,149,0],"to":[-0.25,-1.06,0],"ti":[0.23,0.97,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[387.94,145.97,0],"to":[-0.23,-0.97,0],"ti":[0.22,0.88,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[387.26,143.2,0],"to":[-0.22,-0.88,0],"ti":[0.2,0.8,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[386.64,140.68,0],"to":[-0.2,-0.8,0],"ti":[0.18,0.73,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[386.07,138.38,0],"to":[-0.18,-0.73,0],"ti":[0.16,0.66,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[385.56,136.3,0],"to":[-0.16,-0.66,0],"ti":[0.14,0.59,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[385.12,134.43,0],"to":[-0.14,-0.59,0],"ti":[0.12,0.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[384.73,132.74,0],"to":[-0.12,-0.53,0],"ti":[0.1,0.47,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[384.41,131.24,0],"to":[-0.1,-0.47,0],"ti":[0.08,0.42,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[384.15,129.91,0],"to":[-0.08,-0.42,0],"ti":[0.06,0.36,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[383.96,128.74,0],"to":[-0.05,-0.36,0],"ti":[0.04,0.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[383.82,127.72,0],"to":[-0.04,-0.31,0],"ti":[0.02,0.27,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[383.74,126.85,0],"to":[-0.02,-0.27,0],"ti":[0,0.22,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":84,"s":[383.72,126.12,0],"to":[0,-0.22,0],"ti":[-0.02,0.18,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":86,"s":[383.75,125.52,0],"to":[0.02,-0.18,0],"ti":[-0.03,0.14,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":88,"s":[383.82,125.05,0],"to":[0.03,-0.14,0],"ti":[-0.05,0.1,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.1},"t":90,"s":[383.94,124.69,0],"to":[0.05,-0.1,0],"ti":[-0.06,0.07,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":92,"s":[384.09,124.44,0],"to":[0.06,-0.07,0],"ti":[-0.07,0.03,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":94,"s":[384.28,124.3,0],"to":[0.07,-0.03,0],"ti":[-0.07,0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":96,"s":[384.5,124.25,0],"to":[0.07,-0.01,0],"ti":[-0.07,0,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":98,"s":[384.73,124.24,0],"to":[0.07,0,0],"ti":[-0.07,0,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":100,"s":[384.94,124.24,0],"to":[0.07,0,0],"ti":[-0.06,0.01,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":102,"s":[385.13,124.22,0],"to":[0.06,-0.01,0],"ti":[-0.05,0.01,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":104,"s":[385.3,124.2,0],"to":[0.05,-0.01,0],"ti":[-0.04,0.02,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.16},"t":106,"s":[385.44,124.16,0],"to":[0.04,-0.02,0],"ti":[-0.03,0.02,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.11},"t":108,"s":[385.55,124.1,0],"to":[0.03,-0.02,0],"ti":[-0.03,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.15},"t":110,"s":[385.61,124.02,0],"to":[0.03,-0.02,0],"ti":[-0.03,0.01,0]},{"i":{"x":0.83,"y":0.82},"o":{"x":0.17,"y":0.15},"t":112,"s":[385.7,123.97,0],"to":[0.03,-0.01,0],"ti":[-0.04,-0.01,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.14},"t":114,"s":[385.82,123.98,0],"to":[0.04,0.01,0],"ti":[-0.05,-0.02,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.13},"t":116,"s":[385.96,124.04,0],"to":[0.05,0.03,0],"ti":[-0.02,-0.02,0]},{"t":118,"s":[386.11,124.13,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.68,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":16,"s":[49.22,103.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.17,0.11,0]},"t":18,"s":[96.92,92.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,29.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,19.52,0]},"t":20,"s":[80.99,61.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.61,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.61,0.08,0]},"t":22,"s":[118.19,61.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0,0]},"t":24,"s":[124.1,107.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.06,0]},"t":26,"s":[75.18,59.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-66.49,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-62.92,0.41,0]},"t":28,"s":[117.68,86.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.5,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.05,0]},"t":30,"s":[117.62,94.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.65,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,0.1,0]},"t":32,"s":[72.15,89.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.07,0]},"t":34,"s":[88.11,68.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.11,0]},"t":36,"s":[139.44,79.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.25,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.68,-0.19,0]},"t":38,"s":[91.59,121.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0,0]},"t":40,"s":[96.81,109.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.04,0]},"t":42,"s":[76.17,121.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.27,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.03,-0.03,0]},"t":44,"s":[104.52,94.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-0.12,0]},"t":46,"s":[107,114.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,7.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-1.8,0]},"t":48,"s":[66.84,106.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-2.41,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[-4.99,0.08,0]},"t":50,"s":[111.46,106.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.03,0]},"t":52,"s":[110.73,78.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.03,0]},"t":54,"s":[81.46,118.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.22,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.29,-0.16,0]},"t":56,"s":[101.82,56.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.11,0]},"t":58,"s":[109.9,78.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,-0.06,0]},"t":60,"s":[80.94,137.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-6.83,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[12.82,-0.03,0]},"t":62,"s":[97.12,101.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.45,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.04,0]},"t":64,"s":[97.22,128.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.93,0]},"t":66,"s":[107.06,77.68,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.11,0]},"t":68,"s":[43.76,81.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,-1.18,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,-0.84,0]},"t":70,"s":[98.57,96.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.44,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[-2.31,0.09,0]},"t":72,"s":[78.36,95.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,2.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,-3.48,0]},"t":74,"s":[79.07,61.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.23,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.41,0.08,0]},"t":76,"s":[66.25,62.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,-2.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,1.73,0]},"t":78,"s":[68.43,44.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.09,0]},"t":80,"s":[86.48,43.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.54,0.02,0]},"t":82,"s":[48.57,9.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.03,0]},"t":84,"s":[41.67,51.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.01,0]},"t":86,"s":[30.24,-8.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,9.66,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,20.43,0]},"t":88,"s":[10.98,57.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.61,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.29,0.08,0]},"t":90,"s":[51.54,57.7,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.13,0]},"t":92,"s":[42.41,29.51,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-8.5,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-5.25,-0.01,0]},"t":94,"s":[8.4,-24.23,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.67,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.58,0]},"t":96,"s":[8.93,21.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.11,0]},"t":98,"s":[68.92,29.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.45,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,1.93,0]},"t":100,"s":[36.72,52.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.63,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.1,0]},"t":102,"s":[51.86,53.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.14,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.48,0.07,0]},"t":104,"s":[27.74,59.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.32,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.93,0]},"t":106,"s":[22.69,9.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.1,0]},"t":108,"s":[35.97,4.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.28,-0.03,0]},"t":110,"s":[12.83,-31.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.15,0]},"t":112,"s":[3.29,-4.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.24,0]},"t":114,"s":[16.07,27.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.06,0]},"t":116,"s":[26.83,45.05,100]},{"t":118,"s":[39.93,35.23,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3},"p":{"a":0,"k":[6,32]},"r":{"a":0,"k":0},"or":{"a":0,"k":6.6},"os":{"a":0,"k":0}},{"ty":"fl","c":{"a":0,"k":[0.192156866193,0.560784339905,1,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-7.38,-25.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":16,"op":120,"st":16,"bm":0},{"ddd":0,"ind":38,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":14,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":24,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":68,"s":[100]},{"t":100,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[276.87,250.83,0],"to":[-0.19,-0.22,0],"ti":[1.06,0.99,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[275.74,249.49,0],"to":[-1.06,-0.99,0],"ti":[2.74,1.78,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[270.53,244.92,0],"to":[-2.74,-1.78,0],"ti":[4.16,1.62,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[259.32,238.8,0],"to":[-4.16,-1.62,0],"ti":[4.35,0.76,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[245.6,235.21,0],"to":[-4.34,-0.76,0],"ti":[3.77,0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[233.25,234.25,0],"to":[-3.77,-0.09,0],"ti":[3.14,-0.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[222.98,234.67,0],"to":[-3.14,0.25,0],"ti":[2.63,-0.41,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[214.42,235.75,0],"to":[-2.63,0.41,0],"ti":[2.24,-0.49,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[207.18,237.15,0],"to":[-2.24,0.49,0],"ti":[1.93,-0.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[200.98,238.7,0],"to":[-1.93,0.53,0],"ti":[1.68,-0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[195.6,240.32,0],"to":[-1.68,0.55,0],"ti":[1.48,-0.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[190.88,241.98,0],"to":[-1.48,0.56,0],"ti":[1.31,-0.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[186.72,243.65,0],"to":[-1.31,0.56,0],"ti":[1.16,-0.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[183.03,245.33,0],"to":[-1.16,0.57,0],"ti":[1.02,-0.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[179.76,247.05,0],"to":[-1.02,0.58,0],"ti":[0.88,-0.62,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[176.88,248.82,0],"to":[-0.88,0.62,0],"ti":[0.68,-0.7,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[174.45,250.74,0],"to":[-0.68,0.7,0],"ti":[0.18,-0.75,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":48,"s":[172.81,253,0],"to":[-0.18,0.75,0],"ti":[-0.39,-0.54,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":50,"s":[173.36,255.22,0],"to":[0.4,0.54,0],"ti":[-0.6,-0.24,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":52,"s":[175.18,256.23,0],"to":[0.6,0.24,0],"ti":[-0.56,-0.11,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":54,"s":[176.96,256.67,0],"to":[0.56,0.11,0],"ti":[-0.5,-0.04,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":56,"s":[178.56,256.87,0],"to":[0.5,0.04,0],"ti":[-0.44,-0.01,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":58,"s":[179.98,256.93,0],"to":[0.44,0.01,0],"ti":[-0.38,0.01,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":60,"s":[181.2,256.91,0],"to":[0.38,-0.01,0],"ti":[-0.32,0.03,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":62,"s":[182.25,256.84,0],"to":[0.33,-0.03,0],"ti":[-0.28,0.04,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":64,"s":[183.15,256.74,0],"to":[0.28,-0.04,0],"ti":[-0.23,0.04,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":66,"s":[183.9,256.63,0],"to":[0.23,-0.04,0],"ti":[-0.19,0.04,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":68,"s":[184.53,256.5,0],"to":[0.19,-0.04,0],"ti":[-0.15,0.04,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.18},"t":70,"s":[185.04,256.38,0],"to":[0.16,-0.04,0],"ti":[-0.12,0.04,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.18},"t":72,"s":[185.46,256.26,0],"to":[0.13,-0.04,0],"ti":[-0.1,0.03,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.18},"t":74,"s":[185.79,256.16,0],"to":[0.1,-0.03,0],"ti":[-0.08,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":76,"s":[186.06,256.08,0],"to":[0.08,-0.02,0],"ti":[-0.07,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":78,"s":[186.28,256.03,0],"to":[0.07,0,0],"ti":[-0.07,-0.03,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.13},"t":80,"s":[186.5,256.07,0],"to":[0.07,0.03,0],"ti":[-0.07,-0.06,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.1},"t":82,"s":[186.7,256.21,0],"to":[0.07,0.06,0],"ti":[-0.06,-0.08,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.09},"t":84,"s":[186.9,256.42,0],"to":[0.07,0.08,0],"ti":[-0.06,-0.11,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.07},"t":86,"s":[187.09,256.71,0],"to":[0.06,0.11,0],"ti":[-0.06,-0.12,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.07},"t":88,"s":[187.28,257.06,0],"to":[0.06,0.13,0],"ti":[-0.06,-0.14,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":90,"s":[187.46,257.46,0],"to":[0.06,0.14,0],"ti":[-0.06,-0.15,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.05},"t":92,"s":[187.64,257.9,0],"to":[0.06,0.15,0],"ti":[-0.06,-0.16,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":94,"s":[187.8,258.38,0],"to":[0.06,0.16,0],"ti":[-0.07,-0.17,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.07},"t":96,"s":[187.99,258.88,0],"to":[0.07,0.17,0],"ti":[-0.08,-0.17,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.08},"t":98,"s":[188.22,259.39,0],"to":[0.08,0.17,0],"ti":[-0.1,-0.17,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.09},"t":100,"s":[188.49,259.91,0],"to":[0.1,0.17,0],"ti":[-0.11,-0.17,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.09},"t":102,"s":[188.8,260.42,0],"to":[0.11,0.17,0],"ti":[-0.12,-0.16,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.1},"t":104,"s":[189.14,260.92,0],"to":[0.12,0.17,0],"ti":[-0.12,-0.16,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.11},"t":106,"s":[189.5,261.41,0],"to":[0.13,0.16,0],"ti":[-0.13,-0.15,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.11},"t":108,"s":[189.89,261.88,0],"to":[0.13,0.15,0],"ti":[-0.13,-0.14,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.12},"t":110,"s":[190.28,262.32,0],"to":[0.13,0.14,0],"ti":[-0.13,-0.13,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.13},"t":112,"s":[190.69,262.72,0],"to":[0.14,0.13,0],"ti":[-0.13,-0.12,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.13},"t":114,"s":[191.1,263.09,0],"to":[0.14,0.12,0],"ti":[-0.13,-0.1,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.14},"t":116,"s":[191.5,263.42,0],"to":[0.13,0.1,0],"ti":[-0.06,-0.05,0]},{"t":118,"s":[191.89,263.71,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.54,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":14,"s":[98.65,70.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.52,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.1,0]},"t":16,"s":[52.41,72.58,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.1,0]},"t":18,"s":[83.76,80.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0,0]},"t":20,"s":[109.78,120.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.22,0]},"t":22,"s":[152.91,82.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.68,0.63,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,-0.12,0]},"t":24,"s":[120.66,59.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.11,0]},"t":26,"s":[105.21,68.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.55,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.14,-0.08,0]},"t":28,"s":[61.16,101.21,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.14,0]},"t":30,"s":[57.69,84.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.64,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.26,0,0]},"t":32,"s":[83.89,62.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.2,0]},"t":34,"s":[77.45,85.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.14,0]},"t":36,"s":[56.29,101.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.45,0]},"t":38,"s":[32.11,124.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.18,0.08,0]},"t":40,"s":[81.43,129.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.26,0]},"t":42,"s":[65.69,67.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.05,0]},"t":44,"s":[98.59,38.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.14,0]},"t":46,"s":[62.32,56.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.55,0]},"t":48,"s":[79.17,81.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.28,0.09,0]},"t":50,"s":[116.55,85.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.59,0.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.38,-0.24,0]},"t":52,"s":[107.89,120.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.12,0]},"t":54,"s":[109.46,111.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.13,0]},"t":56,"s":[96.75,92.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.16,0]},"t":58,"s":[122.11,58.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.11,0]},"t":60,"s":[97.3,70.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.12,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.22,0]},"t":62,"s":[109.62,102.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.05,0]},"t":64,"s":[68.94,121.68,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.51,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.43,-0.07,0]},"t":66,"s":[92.18,74.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.65,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.14,0]},"t":68,"s":[97.8,100.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.17,0.11,0]},"t":70,"s":[57.52,90.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.14,0]},"t":72,"s":[70.53,61.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.19,0]},"t":74,"s":[99.01,22.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.77,0.11,0]},"t":76,"s":[68.39,34.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.25,0]},"t":78,"s":[64.69,74.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[8.19,0.52,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.82,-0.05,0]},"t":80,"s":[70.39,95.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.1,0]},"t":82,"s":[71.03,82.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.65,0.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.17,-2.04,0]},"t":84,"s":[14.79,22.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.09,0]},"t":86,"s":[33.45,25.2,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.48,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.75,0]},"t":88,"s":[92.28,46.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.88,0.07,0]},"t":90,"s":[15.05,48.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.76,1.32,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,-0.12,0]},"t":92,"s":[7.01,31.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.07,0]},"t":94,"s":[13.25,38.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.24,0]},"t":96,"s":[24.89,3.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.6,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,0.03,0]},"t":98,"s":[5.74,12.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.01,0]},"t":100,"s":[14.96,-1.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,-0.28,0]},"t":102,"s":[50.02,13.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.19,1.32,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.46,0.11,0]},"t":104,"s":[33.27,10.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.07,0]},"t":106,"s":[35.84,-1.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,-0.05,0]},"t":108,"s":[-3.28,56.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.18,0]},"t":110,"s":[-25.86,19.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.04,0]},"t":112,"s":[41.27,-12.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.33,0.73,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,-0.25,0]},"t":114,"s":[16.06,44.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.12,0]},"t":116,"s":[26.47,30.06,100]},{"t":118,"s":[-24.56,-2.19,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":14,"op":120,"st":14,"bm":0},{"ddd":0,"ind":39,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":30,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":74,"s":[100]},{"t":106,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[278.35,255.95,0],"to":[-0.21,-0.23,0],"ti":[0.99,1.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[277.11,254.55,0],"to":[-0.99,-1.25,0],"ti":[0.53,2.82,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.02},"t":24,"s":[272.4,248.46,0],"to":[-0.53,-2.82,0],"ti":[-2.87,1.61,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.14},"t":26,"s":[273.91,237.61,0],"to":[2.87,-1.61,0],"ti":[-4.88,-0.66,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":28,"s":[289.64,238.82,0],"to":[4.88,0.66,0],"ti":[-4.12,-0.87,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":30,"s":[303.17,241.55,0],"to":[4.12,0.87,0],"ti":[-3.42,-0.76,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":32,"s":[314.35,244.03,0],"to":[3.42,0.76,0],"ti":[-2.89,-0.62,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":34,"s":[323.72,246.1,0],"to":[2.89,0.63,0],"ti":[-2.48,-0.51,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":36,"s":[331.69,247.78,0],"to":[2.48,0.51,0],"ti":[-2.15,-0.41,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":38,"s":[338.58,249.16,0],"to":[2.15,0.41,0],"ti":[-1.89,-0.33,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":40,"s":[344.61,250.27,0],"to":[1.89,0.33,0],"ti":[-1.67,-0.26,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":42,"s":[349.93,251.16,0],"to":[1.68,0.27,0],"ti":[-1.49,-0.21,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":44,"s":[354.66,251.86,0],"to":[1.49,0.21,0],"ti":[-1.34,-0.16,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":46,"s":[358.89,252.4,0],"to":[1.34,0.16,0],"ti":[-1.23,-0.14,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":48,"s":[362.72,252.83,0],"to":[1.23,0.14,0],"ti":[-1.13,-0.13,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":50,"s":[366.26,253.22,0],"to":[1.13,0.13,0],"ti":[-1.05,-0.12,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":52,"s":[369.52,253.59,0],"to":[1.05,0.12,0],"ti":[-0.98,-0.11,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":54,"s":[372.56,253.93,0],"to":[0.98,0.11,0],"ti":[-0.91,-0.1,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":56,"s":[375.39,254.24,0],"to":[0.91,0.1,0],"ti":[-0.85,-0.09,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":58,"s":[378.03,254.53,0],"to":[0.85,0.09,0],"ti":[-0.8,-0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":60,"s":[380.5,254.8,0],"to":[0.8,0.09,0],"ti":[-0.74,-0.08,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":62,"s":[382.81,255.04,0],"to":[0.75,0.08,0],"ti":[-0.7,-0.07,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":64,"s":[384.97,255.25,0],"to":[0.7,0.07,0],"ti":[-0.65,-0.06,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":66,"s":[386.99,255.44,0],"to":[0.65,0.06,0],"ti":[-0.61,-0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":68,"s":[388.88,255.61,0],"to":[0.61,0.05,0],"ti":[-0.57,-0.04,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":70,"s":[390.64,255.74,0],"to":[0.57,0.04,0],"ti":[-0.53,-0.03,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":72,"s":[392.28,255.85,0],"to":[0.53,0.03,0],"ti":[-0.49,-0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":74,"s":[393.8,255.92,0],"to":[0.49,0.02,0],"ti":[-0.45,-0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.17},"t":76,"s":[395.21,255.96,0],"to":[0.45,0.01,0],"ti":[-0.41,0,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":78,"s":[396.5,255.97,0],"to":[0.41,0,0],"ti":[-0.37,0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":80,"s":[397.68,255.95,0],"to":[0.38,-0.01,0],"ti":[-0.34,0.03,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.18},"t":82,"s":[398.75,255.89,0],"to":[0.34,-0.02,0],"ti":[-0.3,0.04,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.18},"t":84,"s":[399.71,255.8,0],"to":[0.3,-0.04,0],"ti":[-0.26,0.05,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":86,"s":[400.55,255.67,0],"to":[0.26,-0.05,0],"ti":[-0.23,0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":88,"s":[401.29,255.52,0],"to":[0.23,-0.06,0],"ti":[-0.19,0.07,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.17},"t":90,"s":[401.92,255.33,0],"to":[0.19,-0.07,0],"ti":[-0.15,0.08,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.16},"t":92,"s":[402.43,255.11,0],"to":[0.15,-0.08,0],"ti":[-0.11,0.09,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.13},"t":94,"s":[402.82,254.87,0],"to":[0.11,-0.09,0],"ti":[-0.07,0.09,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":96,"s":[403.1,254.6,0],"to":[0.07,-0.09,0],"ti":[-0.03,0.1,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":98,"s":[403.27,254.3,0],"to":[0.03,-0.1,0],"ti":[0,0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[403.31,253.99,0],"to":[0,-0.11,0],"ti":[0.03,0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[403.26,253.66,0],"to":[-0.03,-0.11,0],"ti":[0.05,0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[403.14,253.31,0],"to":[-0.05,-0.12,0],"ti":[0.07,0.12,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[402.95,252.95,0],"to":[-0.07,-0.12,0],"ti":[0.08,0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[402.72,252.6,0],"to":[-0.08,-0.1,0],"ti":[0.08,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[402.47,252.33,0],"to":[-0.08,-0.08,0],"ti":[0.09,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[402.21,252.12,0],"to":[-0.09,-0.06,0],"ti":[0.09,0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[401.95,251.97,0],"to":[-0.09,-0.04,0],"ti":[0.09,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[401.68,251.89,0],"to":[-0.09,-0.02,0],"ti":[0.05,0,0]},{"t":118,"s":[401.4,251.87,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":20,"s":[150.02,84.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.3,0,0]},"t":22,"s":[115.54,94.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.13,0]},"t":24,"s":[101.95,84.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1.29,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,0.47,0]},"t":26,"s":[69.48,67.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.07,0]},"t":28,"s":[52.56,63.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.15,0]},"t":30,"s":[76.67,80.31,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.17,0]},"t":32,"s":[55.7,101.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.15,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,-0.1,0]},"t":34,"s":[40.39,120.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.22,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.03,0]},"t":36,"s":[19.82,111.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.06,0]},"t":38,"s":[78,125.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.23,0]},"t":40,"s":[51.8,75.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.13,1.44,0]},"t":42,"s":[82.95,47.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,-0.22,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.1,0]},"t":44,"s":[71.04,46.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.3,0.09,0]},"t":46,"s":[91.76,46.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.1,0]},"t":48,"s":[99.66,57.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.13,-3,0]},"t":50,"s":[112.22,122.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[4.25,0.25,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.29,0.14,0]},"t":52,"s":[111.36,120.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.22,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.09,0]},"t":54,"s":[111.01,117.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.17,0]},"t":56,"s":[124.96,96.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.49,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.65,0,0]},"t":58,"s":[73.62,74.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.05,0]},"t":60,"s":[79.47,96.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.44,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.34,-0.09,0]},"t":62,"s":[39.36,83.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.16,0]},"t":64,"s":[47.32,90.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.1,0]},"t":66,"s":[92.85,97.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,-0.04,0]},"t":68,"s":[72.02,148.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.13,0]},"t":70,"s":[84.94,114.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.66,0]},"t":72,"s":[115.63,56.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-3.33,1.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[-14.6,0.03,0]},"t":74,"s":[71.73,63.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.07,0]},"t":76,"s":[71.98,53.5,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.3,1.26,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.44,0]},"t":78,"s":[84.68,111,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.06,0]},"t":80,"s":[96.03,124.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,0.22,0]},"t":82,"s":[44.36,68.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,1.94,0]},"t":84,"s":[16.99,33.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.08,0]},"t":86,"s":[71.31,31.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.13,0]},"t":88,"s":[30.56,51.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.03,0]},"t":90,"s":[-2.84,83.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,0.45,0]},"t":92,"s":[15.77,36.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,-0.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.25,0]},"t":94,"s":[6.52,25.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.31,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.82,0.09,0]},"t":96,"s":[36.61,28.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.02,0]},"t":98,"s":[33.84,58.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.22,0]},"t":100,"s":[46.82,19.64,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.67,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.08,0]},"t":102,"s":[56.15,-3.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.13,0]},"t":104,"s":[44.34,8.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,1.09,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.17,0]},"t":106,"s":[8.89,30.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.04,0]},"t":108,"s":[-11.63,50.88,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,-0.05,0]},"t":110,"s":[26.39,8.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.15,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.16,0]},"t":112,"s":[-18.97,35.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.05,0]},"t":114,"s":[33.05,65.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.36,0]},"t":116,"s":[19.79,-16.8,100]},{"t":118,"s":[53.47,-1.38,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":20,"op":120,"st":20,"bm":0},{"ddd":0,"ind":40,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":32,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":76,"s":[100]},{"t":108,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[278.89,263.11,0],"to":[-0.4,0.09,0],"ti":[2.05,0.3,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[276.51,263.67,0],"to":[-2.05,-0.29,0],"ti":[4.36,2.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[266.61,261.34,0],"to":[-4.36,-2.03,0],"ti":[5.49,3.81,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[250.37,251.5,0],"to":[-5.49,-3.81,0],"ti":[5.14,4.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[233.66,238.49,0],"to":[-5.14,-4.15,0],"ti":[4.3,3.65,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[219.52,226.6,0],"to":[-4.3,-3.64,0],"ti":[3.59,3.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[207.84,216.62,0],"to":[-3.59,-3.05,0],"ti":[3.06,2.56,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[197.98,208.28,0],"to":[-3.06,-2.56,0],"ti":[2.68,2.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[189.46,201.26,0],"to":[-2.67,-2.16,0],"ti":[2.38,1.84,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[181.93,195.3,0],"to":[-2.38,-1.84,0],"ti":[2.15,1.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[175.17,190.21,0],"to":[-2.15,-1.57,0],"ti":[1.97,1.34,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[169.01,185.85,0],"to":[-1.97,-1.34,0],"ti":[1.82,1.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[163.35,182.14,0],"to":[-1.82,-1.14,0],"ti":[1.7,0.95,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[158.07,179.01,0],"to":[-1.7,-0.95,0],"ti":[1.6,0.78,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[153.13,176.42,0],"to":[-1.6,-0.78,0],"ti":[1.51,0.61,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[148.46,174.34,0],"to":[-1.51,-0.6,0],"ti":[1.43,0.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[144.05,172.79,0],"to":[-1.43,-0.43,0],"ti":[1.34,0.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[139.9,171.76,0],"to":[-1.34,-0.25,0],"ti":[1.24,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[136.01,171.27,0],"to":[-1.24,-0.07,0],"ti":[1.12,-0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[132.44,171.33,0],"to":[-1.12,0.1,0],"ti":[0.99,-0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[129.27,171.87,0],"to":[-0.99,0.24,0],"ti":[0.84,-0.34,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[126.52,172.78,0],"to":[-0.84,0.34,0],"ti":[0.71,-0.4,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[124.2,173.92,0],"to":[-0.71,0.4,0],"ti":[0.59,-0.41,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[122.26,175.16,0],"to":[-0.59,0.42,0],"ti":[0.5,-0.41,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[120.64,176.41,0],"to":[-0.5,0.41,0],"ti":[0.42,-0.39,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[119.26,177.6,0],"to":[-0.42,0.39,0],"ti":[0.36,-0.36,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[118.09,178.72,0],"to":[-0.36,0.36,0],"ti":[0.31,-0.33,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[117.09,179.76,0],"to":[-0.31,0.33,0],"ti":[0.27,-0.3,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[116.22,180.7,0],"to":[-0.27,0.3,0],"ti":[0.24,-0.27,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[115.46,181.54,0],"to":[-0.24,0.27,0],"ti":[0.21,-0.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[114.8,182.3,0],"to":[-0.21,0.24,0],"ti":[0.18,-0.21,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[114.21,182.96,0],"to":[-0.18,0.21,0],"ti":[0.16,-0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[113.7,183.55,0],"to":[-0.16,0.18,0],"ti":[0.14,-0.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[113.24,184.05,0],"to":[-0.14,0.16,0],"ti":[0.12,-0.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[112.85,184.48,0],"to":[-0.12,0.13,0],"ti":[0.11,-0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[112.51,184.84,0],"to":[-0.1,0.11,0],"ti":[0.09,-0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[112.22,185.12,0],"to":[-0.09,0.09,0],"ti":[0.07,-0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[111.97,185.35,0],"to":[-0.07,0.07,0],"ti":[0.06,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[111.77,185.52,0],"to":[-0.06,0.05,0],"ti":[0.05,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[111.61,185.63,0],"to":[-0.05,0.03,0],"ti":[0.04,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[111.49,185.67,0],"to":[-0.04,0.01,0],"ti":[0.03,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[111.4,185.71,0],"to":[-0.03,0.02,0],"ti":[0.02,-0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[111.33,185.76,0],"to":[-0.02,0.02,0],"ti":[0.02,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[111.28,185.84,0],"to":[-0.01,0.03,0],"ti":[0.01,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[111.24,185.93,0],"to":[-0.01,0.03,0],"ti":[0.01,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[111.22,186.03,0],"to":[-0.01,0.04,0],"ti":[0,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[111.21,186.15,0],"to":[0,0.04,0],"ti":[0,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[111.2,186.27,0],"to":[0,0.04,0],"ti":[0,-0.02,0]},{"t":118,"s":[111.21,186.38,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":22,"s":[70.37,73.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.39,-0.09,0]},"t":24,"s":[81.45,49.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.54,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.13,0]},"t":26,"s":[84.49,60.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,1.16,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.11,0]},"t":28,"s":[81.07,81.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.05,0]},"t":30,"s":[65.39,72.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.01,0]},"t":32,"s":[46.08,98.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.07,0]},"t":34,"s":[23.24,67.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,0,0]},"t":36,"s":[90.07,84.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.17,1.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.81,1.29,0]},"t":38,"s":[57.21,68.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.08,0]},"t":40,"s":[60.29,67.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.02,0]},"t":42,"s":[100.48,79.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,1.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,0.13,0]},"t":44,"s":[77.17,62.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.23,0.05,0]},"t":46,"s":[97.38,34.24,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.12,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.64,0]},"t":48,"s":[108.61,101.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.02,0]},"t":50,"s":[121.2,111.54,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.17,0]},"t":52,"s":[90.04,98.1,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.02,0]},"t":54,"s":[112.77,84.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,1.24,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.26,0]},"t":56,"s":[94.61,103.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.06,0]},"t":58,"s":[76.78,111.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.55,-0.27,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.74,2.2,0]},"t":60,"s":[41.28,78.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.19,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.09,0]},"t":62,"s":[36.77,77.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.44,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[2.65,0.06,0]},"t":64,"s":[70.89,58.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.52,1.21,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.38,0]},"t":66,"s":[72,119.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.06,0]},"t":68,"s":[78.32,136.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.77,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,-0.11,0]},"t":70,"s":[108.47,75.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0,0]},"t":72,"s":[86.5,101.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.08,-0.06,0]},"t":74,"s":[46.78,74.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.16,0]},"t":76,"s":[67.19,89.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.7,3.53,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,1.02,0]},"t":78,"s":[85.9,106.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.08,0]},"t":80,"s":[71.73,108.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.93,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[2.98,0.4,0]},"t":82,"s":[34.69,61.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,1.3,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.17,0]},"t":84,"s":[33.63,48.72,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.07,0]},"t":86,"s":[59.33,36.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0,0]},"t":88,"s":[7.81,92.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.17,-0.54,0]},"t":90,"s":[59.94,37.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.33,1.33,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.34,-0.08,0]},"t":92,"s":[42.63,44.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.07,0]},"t":94,"s":[36.89,40.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.65,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,-0.01,0]},"t":96,"s":[65.36,59.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.37,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[3.35,0.11,0]},"t":98,"s":[46.07,42.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.28,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.02,0]},"t":100,"s":[45.58,-11.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,-5.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,7.46,0]},"t":102,"s":[42.32,31.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.08,0]},"t":104,"s":[17.58,31.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[4.78,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.17,-0.03,0]},"t":106,"s":[35.24,70.2,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.17,0]},"t":108,"s":[36.6,40.78,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.76,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,0.04,0]},"t":110,"s":[-26.21,12.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.02,0]},"t":112,"s":[-0.79,72.67,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.34,-0.21,0]},"t":114,"s":[46.47,-1.81,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,1.16,0]},"t":116,"s":[62.11,19.27,100]},{"t":118,"s":[83.28,20.9,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":22,"op":120,"st":22,"bm":0},{"ddd":0,"ind":41,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":10,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":64,"s":[100]},{"t":96,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":10,"s":[280.9,263.31,0],"to":[-0.57,0.18,0],"ti":[2.71,-0.99,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":12,"s":[277.49,264.36,0],"to":[-2.71,0.99,0],"ti":[6.01,-2.45,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[264.62,269.26,0],"to":[-6.01,2.45,0],"ti":[8.09,-3.59,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[241.45,279.05,0],"to":[-8.09,3.59,0],"ti":[7.87,-3.78,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[216.07,290.8,0],"to":[-7.87,3.78,0],"ti":[6.65,-3.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[194.21,301.75,0],"to":[-6.65,3.43,0],"ti":[5.5,-3.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[176.19,311.39,0],"to":[-5.5,3.03,0],"ti":[4.62,-2.68,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[161.19,319.9,0],"to":[-4.61,2.68,0],"ti":[3.94,-2.41,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[148.49,327.49,0],"to":[-3.93,2.41,0],"ti":[3.4,-2.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[137.58,334.34,0],"to":[-3.4,2.18,0],"ti":[2.97,-1.99,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[128.1,340.58,0],"to":[-2.97,1.99,0],"ti":[2.61,-1.83,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[119.79,346.29,0],"to":[-2.61,1.83,0],"ti":[2.3,-1.69,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[112.46,351.57,0],"to":[-2.3,1.69,0],"ti":[2.04,-1.57,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[105.97,356.45,0],"to":[-2.04,1.57,0],"ti":[1.8,-1.46,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[100.23,360.99,0],"to":[-1.8,1.46,0],"ti":[1.59,-1.36,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[95.16,365.22,0],"to":[-1.59,1.36,0],"ti":[1.4,-1.27,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[90.68,369.16,0],"to":[-1.4,1.27,0],"ti":[1.22,-1.19,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[86.75,372.84,0],"to":[-1.22,1.19,0],"ti":[1.07,-1.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[83.33,376.29,0],"to":[-1.07,1.11,0],"ti":[0.94,-1.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[80.33,379.49,0],"to":[-0.94,1.03,0],"ti":[0.82,-0.96,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[77.71,382.47,0],"to":[-0.82,0.96,0],"ti":[0.71,-0.89,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[75.43,385.24,0],"to":[-0.71,0.89,0],"ti":[0.61,-0.82,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[73.45,387.8,0],"to":[-0.61,0.82,0],"ti":[0.52,-0.76,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[71.75,390.17,0],"to":[-0.52,0.76,0],"ti":[0.44,-0.7,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[70.31,392.35,0],"to":[-0.44,0.7,0],"ti":[0.37,-0.64,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[69.1,394.35,0],"to":[-0.37,0.64,0],"ti":[0.3,-0.58,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[68.1,396.18,0],"to":[-0.3,0.58,0],"ti":[0.25,-0.52,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[67.28,397.83,0],"to":[-0.24,0.52,0],"ti":[0.19,-0.47,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[66.62,399.32,0],"to":[-0.19,0.47,0],"ti":[0.15,-0.42,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[66.12,400.66,0],"to":[-0.15,0.42,0],"ti":[0.11,-0.37,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[65.74,401.84,0],"to":[-0.1,0.37,0],"ti":[0.07,-0.32,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[65.49,402.88,0],"to":[-0.07,0.32,0],"ti":[0.04,-0.28,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[65.33,403.77,0],"to":[-0.04,0.28,0],"ti":[0.01,-0.23,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[65.27,404.53,0],"to":[-0.01,0.23,0],"ti":[-0.01,-0.19,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.03},"t":78,"s":[65.28,405.16,0],"to":[0.01,0.19,0],"ti":[-0.03,-0.15,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":80,"s":[65.35,405.66,0],"to":[0.03,0.15,0],"ti":[-0.05,-0.11,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.11},"t":82,"s":[65.48,406.04,0],"to":[0.05,0.11,0],"ti":[-0.06,-0.07,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":84,"s":[65.66,406.29,0],"to":[0.06,0.07,0],"ti":[-0.07,-0.03,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":86,"s":[65.86,406.43,0],"to":[0.07,0.03,0],"ti":[-0.08,0.01,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.15},"t":88,"s":[66.1,406.46,0],"to":[0.08,-0.01,0],"ti":[-0.08,0.04,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.14},"t":90,"s":[66.35,406.37,0],"to":[0.08,-0.04,0],"ti":[-0.08,0.05,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.14},"t":92,"s":[66.6,406.23,0],"to":[0.08,-0.05,0],"ti":[-0.07,0.05,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.14},"t":94,"s":[66.82,406.08,0],"to":[0.07,-0.05,0],"ti":[-0.06,0.05,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.12},"t":96,"s":[67.01,405.93,0],"to":[0.06,-0.05,0],"ti":[-0.04,0.06,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.08},"t":98,"s":[67.16,405.76,0],"to":[0.04,-0.06,0],"ti":[-0.02,0.06,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":100,"s":[67.26,405.58,0],"to":[0.02,-0.06,0],"ti":[0,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[67.3,405.38,0],"to":[0,-0.07,0],"ti":[0.02,0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[67.27,405.16,0],"to":[-0.02,-0.08,0],"ti":[0.05,0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[67.16,404.92,0],"to":[-0.05,-0.07,0],"ti":[0.06,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":108,"s":[66.99,404.72,0],"to":[-0.06,-0.06,0],"ti":[0.08,0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":110,"s":[66.78,404.56,0],"to":[-0.08,-0.05,0],"ti":[0.09,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":112,"s":[66.54,404.45,0],"to":[-0.09,-0.03,0],"ti":[0.09,0.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":114,"s":[66.27,404.38,0],"to":[-0.09,-0.02,0],"ti":[0.1,0,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":116,"s":[65.98,404.35,0],"to":[-0.1,0,0],"ti":[0.05,0,0]},{"t":118,"s":[65.69,404.38,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":10,"s":[49.45,148.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.25,0.45,0]},"t":12,"s":[96.23,59.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.01,0]},"t":14,"s":[84.39,38.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.66,0.54,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.39,-0.32,0]},"t":16,"s":[101.57,62.76,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.1,0]},"t":18,"s":[106.22,57.83,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.16,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.47,0,0]},"t":20,"s":[64.69,35.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.19,0]},"t":22,"s":[70.92,57.65,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.14,0]},"t":24,"s":[127.32,74.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.02,0]},"t":26,"s":[101.46,99.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.39,1.22,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.31,-0.2,0]},"t":28,"s":[73.69,68.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.06,0]},"t":30,"s":[79.52,77.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.41,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.68,0]},"t":32,"s":[46.67,43.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.36,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.54,0.07,0]},"t":34,"s":[104.84,38.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,1.25,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.2,0]},"t":36,"s":[97.1,66.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.06,0]},"t":38,"s":[45.16,58.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.3,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.42,0]},"t":40,"s":[100.99,91.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.1,0.07,0]},"t":42,"s":[80.36,100.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,-0.45,0]},"t":44,"s":[89.49,62.47,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.19,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.11,0]},"t":46,"s":[104.25,68.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.75,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.01,0]},"t":48,"s":[122.57,87.9,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.55,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.3,0.12,0]},"t":50,"s":[63.06,70.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0,0]},"t":52,"s":[66.63,34.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.78,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.23,0.25,0]},"t":54,"s":[129.4,72.01,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.14,0]},"t":56,"s":[112.86,90.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.02,0]},"t":58,"s":[86.23,114.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.51,0.15,0]},"t":60,"s":[50.89,82.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.25,0.39,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.25,0]},"t":62,"s":[55.82,44.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.1,0]},"t":64,"s":[49.63,53.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.4,-0.06,0]},"t":66,"s":[74.26,114.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.12,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,1.24,0]},"t":68,"s":[80.65,78.4,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,-0.4,0]},"t":70,"s":[74.86,75.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,1.72,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.18,0.09,0]},"t":72,"s":[19.7,76.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.04,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.08,0]},"t":74,"s":[37.39,80.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.51,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.03,0]},"t":76,"s":[61.71,41.55,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.85,0.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,-0.13,0]},"t":78,"s":[55.49,100.18,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.61,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.28,0]},"t":80,"s":[24.96,77.62,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.11,0]},"t":82,"s":[0.38,68.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,1.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.04,0]},"t":84,"s":[36.37,33.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.05,0]},"t":86,"s":[-12.52,56.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.05,0]},"t":88,"s":[42.47,-4.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.38,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.94,0]},"t":90,"s":[76.36,33.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,0.07,0]},"t":92,"s":[13.42,37.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,-0.01,0]},"t":94,"s":[40.84,16.71,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.18,0.04,0]},"t":96,"s":[20.38,34.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[3.32,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.37,0.01,0]},"t":98,"s":[26.95,1.69,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.18,0.44,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.76,0]},"t":100,"s":[27.38,36.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.1,0]},"t":102,"s":[15.07,41.28,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,1.43,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.23,0]},"t":104,"s":[53.35,66.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.21,0.07,0]},"t":106,"s":[22.23,81.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.15,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.24,-0.12,0]},"t":108,"s":[1.73,-9.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.04,0]},"t":110,"s":[-9.03,27.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.79,-3.35,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.25,-3.04,0]},"t":112,"s":[20.5,3.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.09,0]},"t":114,"s":[35.73,4.37,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.44,0]},"t":116,"s":[58.62,37.24,100]},{"t":118,"s":[30.02,32.05,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.313725501299,0.890196084976,0.760784327984,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":10,"op":120,"st":10,"bm":0},{"ddd":0,"ind":42,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":16,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":70,"s":[100]},{"t":102,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[272.11,255.07,0],"to":[-0.27,0.05,0],"ti":[1.22,-0.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[270.52,255.39,0],"to":[-1.22,0.38,0],"ti":[2.64,-1.02,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[264.82,257.36,0],"to":[-2.64,1.02,0],"ti":[3.5,-1.6,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[254.65,261.49,0],"to":[-3.5,1.61,0],"ti":[3.13,-2.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[243.81,266.99,0],"to":[-3.13,2.06,0],"ti":[0.93,-2.4,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":26,"s":[235.89,273.86,0],"to":[-0.93,2.4,0],"ti":[-1.49,-1.83,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.15},"t":28,"s":[238.24,281.39,0],"to":[1.49,1.83,0],"ti":[-2.11,-0.94,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":30,"s":[244.85,284.86,0],"to":[2.11,0.94,0],"ti":[-1.91,-0.64,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":32,"s":[250.92,287.05,0],"to":[1.91,0.64,0],"ti":[-1.7,-0.51,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":34,"s":[256.3,288.72,0],"to":[1.7,0.51,0],"ti":[-1.52,-0.44,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":36,"s":[261.1,290.11,0],"to":[1.52,0.44,0],"ti":[-1.36,-0.39,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":38,"s":[265.4,291.34,0],"to":[1.36,0.39,0],"ti":[-1.23,-0.36,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":40,"s":[269.27,292.47,0],"to":[1.23,0.36,0],"ti":[-1.11,-0.34,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":42,"s":[272.77,293.52,0],"to":[1.11,0.34,0],"ti":[-1.01,-0.33,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.17},"t":44,"s":[275.96,294.52,0],"to":[1.01,0.33,0],"ti":[-0.92,-0.31,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":46,"s":[278.85,295.47,0],"to":[0.92,0.31,0],"ti":[-0.84,-0.3,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":48,"s":[281.48,296.4,0],"to":[0.84,0.31,0],"ti":[-0.76,-0.3,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.16},"t":50,"s":[283.88,297.3,0],"to":[0.76,0.3,0],"ti":[-0.69,-0.29,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":52,"s":[286.05,298.19,0],"to":[0.69,0.29,0],"ti":[-0.62,-0.29,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.16},"t":54,"s":[288.02,299.06,0],"to":[0.62,0.29,0],"ti":[-0.55,-0.28,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.15},"t":56,"s":[289.78,299.92,0],"to":[0.55,0.28,0],"ti":[-0.49,-0.28,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.15},"t":58,"s":[291.34,300.76,0],"to":[0.49,0.28,0],"ti":[-0.42,-0.27,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.14},"t":60,"s":[292.7,301.59,0],"to":[0.42,0.27,0],"ti":[-0.35,-0.27,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.14},"t":62,"s":[293.85,302.4,0],"to":[0.35,0.27,0],"ti":[-0.28,-0.26,0]},{"i":{"x":0.83,"y":0.89},"o":{"x":0.17,"y":0.13},"t":64,"s":[294.8,303.19,0],"to":[0.28,0.26,0],"ti":[-0.21,-0.24,0]},{"i":{"x":0.83,"y":0.91},"o":{"x":0.17,"y":0.11},"t":66,"s":[295.55,303.95,0],"to":[0.22,0.25,0],"ti":[-0.15,-0.22,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.09},"t":68,"s":[296.09,304.66,0],"to":[0.15,0.23,0],"ti":[-0.08,-0.2,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":70,"s":[296.43,305.3,0],"to":[0.08,0.2,0],"ti":[-0.02,-0.16,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[296.58,305.85,0],"to":[0.02,0.16,0],"ti":[0.03,-0.13,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[296.57,306.29,0],"to":[-0.03,0.13,0],"ti":[0.07,-0.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[296.43,306.64,0],"to":[-0.07,0.11,0],"ti":[0.1,-0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[296.17,306.93,0],"to":[-0.1,0.09,0],"ti":[0.12,-0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[295.84,307.18,0],"to":[-0.12,0.08,0],"ti":[0.13,-0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[295.47,307.39,0],"to":[-0.13,0.07,0],"ti":[0.13,-0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[295.07,307.57,0],"to":[-0.13,0.06,0],"ti":[0.13,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[294.67,307.73,0],"to":[-0.13,0.05,0],"ti":[0.13,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[294.27,307.88,0],"to":[-0.13,0.05,0],"ti":[0.12,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[293.9,308.01,0],"to":[-0.12,0.04,0],"ti":[0.11,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":92,"s":[293.55,308.14,0],"to":[-0.11,0.04,0],"ti":[0.09,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":94,"s":[293.25,308.26,0],"to":[-0.09,0.04,0],"ti":[0.08,-0.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":96,"s":[292.99,308.39,0],"to":[-0.08,0.04,0],"ti":[0.07,-0.05,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":98,"s":[292.77,308.53,0],"to":[-0.07,0.06,0],"ti":[0.06,-0.07,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":100,"s":[292.58,308.71,0],"to":[-0.06,0.07,0],"ti":[0.04,-0.08,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":102,"s":[292.43,308.94,0],"to":[-0.04,0.08,0],"ti":[0.03,-0.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":104,"s":[292.32,309.21,0],"to":[-0.03,0.09,0],"ti":[0.02,-0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":106,"s":[292.25,309.5,0],"to":[-0.02,0.11,0],"ti":[0,-0.11,0]},{"i":{"x":0.83,"y":0.99},"o":{"x":0.17,"y":0.01},"t":108,"s":[292.22,309.83,0],"to":[0,0.11,0],"ti":[-0.01,-0.12,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":110,"s":[292.24,310.19,0],"to":[0.01,0.12,0],"ti":[-0.03,-0.13,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.04},"t":112,"s":[292.3,310.56,0],"to":[0.03,0.13,0],"ti":[-0.04,-0.13,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":114,"s":[292.41,310.96,0],"to":[0.04,0.13,0],"ti":[-0.05,-0.13,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.07},"t":116,"s":[292.55,311.35,0],"to":[0.06,0.13,0],"ti":[-0.03,-0.07,0]},{"t":118,"s":[292.74,311.75,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":16,"s":[127.44,90.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.12,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.01,0]},"t":18,"s":[90.1,28.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.3,0]},"t":20,"s":[67.31,81.38,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.75,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.05,0]},"t":22,"s":[122.54,69.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,-0.19,0]},"t":24,"s":[102.02,98.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.21,0.06,0]},"t":26,"s":[60.04,90.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.43,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,0.04,0]},"t":28,"s":[71.97,116.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.32,0]},"t":30,"s":[64.59,63.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.12,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.31,-0.02,0]},"t":32,"s":[109.99,44.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.18,0]},"t":34,"s":[126.94,59.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,1.74,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.32,-0.35,0]},"t":36,"s":[85.6,73.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.04,0.08,0]},"t":38,"s":[70.77,70.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.64,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,-0.16,0]},"t":40,"s":[80.39,96.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.18,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.79,0.11,0]},"t":42,"s":[90.29,87.92,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.59,1.2,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.67,0]},"t":44,"s":[90.77,58.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,1.11,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.06,0]},"t":46,"s":[95.05,54.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.33,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.05,0]},"t":48,"s":[60.54,68.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.15,0]},"t":50,"s":[44.44,36.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,4.17,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.53,-0.61,0]},"t":52,"s":[124.28,47.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-1.35,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.49,0.08,0]},"t":54,"s":[139.35,46.44,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,2.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,1.92,0]},"t":56,"s":[137.15,101.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.29,0.08,0]},"t":58,"s":[77.1,103.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.16,2.38,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,2.47,0]},"t":60,"s":[52.92,67.6,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.08,0]},"t":62,"s":[38.39,66.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.06,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.17,0]},"t":64,"s":[80.85,88.42,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,0.75,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.04,0]},"t":66,"s":[101.51,109.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.24,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.45,0.13,0]},"t":68,"s":[66.39,95.05,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.03,0]},"t":70,"s":[58.31,67.45,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.36,0.02,0]},"t":72,"s":[89.87,114.12,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.59,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.04,0]},"t":74,"s":[99.23,53.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.32,0]},"t":76,"s":[84.93,94.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.44,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.5,0.05,0]},"t":78,"s":[28.27,109.68,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.22,0]},"t":80,"s":[24.92,76.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,1.62,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.11,0]},"t":82,"s":[45.87,56.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.6,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.14,0.07,0]},"t":84,"s":[16.1,65.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,-0.02,0]},"t":86,"s":[27.31,-5.5,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,1.56,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,1.35,0]},"t":88,"s":[69.53,52.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.4,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.06,0.07,0]},"t":90,"s":[13.35,55.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.04,0]},"t":92,"s":[17.46,26.52,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.01,-0.08,0]},"t":94,"s":[-6.11,46.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,1.13,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.74,-0.01,0]},"t":96,"s":[14.94,35.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.23,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.05,0]},"t":98,"s":[17.61,44.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.15,-0.37,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,-0.61,0]},"t":100,"s":[12.4,22.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.09,0]},"t":102,"s":[31.66,24.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.11,-0.01,0]},"t":104,"s":[-22.38,66.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.27,0.22,0]},"t":106,"s":[0.27,30.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,-0.02,0]},"t":108,"s":[10.42,7.98,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.04,0]},"t":110,"s":[20.37,26.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.01,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.02,0]},"t":112,"s":[30.86,-6.9,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.01,0.5,0]},"t":114,"s":[43.45,19.52,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.03,0]},"t":116,"s":[29.04,24.82,100]},{"t":118,"s":[41.02,15.93,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":16,"op":120,"st":16,"bm":0},{"ddd":0,"ind":43,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":20,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":30,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":74,"s":[100]},{"t":106,"s":[0]}]},"r":{"a":0,"k":0,"x":"var $bm_rt;\nvar $bm_rt;\n$bm_rt = $bm_rt = mul(time, 300);"},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[279.86,255.27,0],"to":[-0.34,0.18,0],"ti":[1.69,-0.68,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[277.8,256.34,0],"to":[-1.69,0.68,0],"ti":[3.89,-1.09,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[269.72,259.35,0],"to":[-3.89,1.09,0],"ti":[3.91,1.15,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[254.48,262.88,0],"to":[-3.91,-1.15,0],"ti":[0.3,3.98,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":28,"s":[246.28,252.43,0],"to":[-0.3,-3.98,0],"ti":[-2.12,4.02,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":30,"s":[252.67,239,0],"to":[2.12,-4.02,0],"ti":[-1.97,3.26,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.1},"t":32,"s":[259.03,228.34,0],"to":[1.97,-3.26,0],"ti":[-1.67,2.77,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":34,"s":[264.47,219.41,0],"to":[1.67,-2.77,0],"ti":[-1.4,2.43,0]},{"i":{"x":0.83,"y":0.92},"o":{"x":0.17,"y":0.09},"t":36,"s":[269.04,211.69,0],"to":[1.4,-2.43,0],"ti":[-1.17,2.17,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":38,"s":[272.86,204.86,0],"to":[1.17,-2.17,0],"ti":[-0.97,1.97,0]},{"i":{"x":0.83,"y":0.93},"o":{"x":0.17,"y":0.08},"t":40,"s":[276.05,198.68,0],"to":[0.97,-1.97,0],"ti":[-0.81,1.82,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":42,"s":[278.71,193.02,0],"to":[0.81,-1.82,0],"ti":[-0.64,1.69,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":44,"s":[280.89,187.76,0],"to":[0.64,-1.68,0],"ti":[-0.48,1.56,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":46,"s":[282.57,182.91,0],"to":[0.48,-1.56,0],"ti":[-0.33,1.44,0]},{"i":{"x":0.83,"y":0.97},"o":{"x":0.17,"y":0.03},"t":48,"s":[283.78,178.41,0],"to":[0.33,-1.44,0],"ti":[-0.2,1.34,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.02},"t":50,"s":[284.57,174.25,0],"to":[0.2,-1.34,0],"ti":[-0.07,1.24,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[284.96,170.4,0],"to":[0.07,-1.24,0],"ti":[0.04,1.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[285.01,166.83,0],"to":[-0.04,-1.14,0],"ti":[0.14,1.04,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[284.74,163.56,0],"to":[-0.14,-1.04,0],"ti":[0.23,0.95,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[284.18,160.57,0],"to":[-0.23,-0.95,0],"ti":[0.3,0.85,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[283.37,157.87,0],"to":[-0.3,-0.85,0],"ti":[0.36,0.75,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[282.36,155.48,0],"to":[-0.36,-0.75,0],"ti":[0.41,0.65,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[281.19,153.39,0],"to":[-0.4,-0.65,0],"ti":[0.43,0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[279.93,151.58,0],"to":[-0.43,-0.55,0],"ti":[0.43,0.46,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[278.62,150.06,0],"to":[-0.43,-0.46,0],"ti":[0.42,0.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[277.33,148.8,0],"to":[-0.42,-0.38,0],"ti":[0.4,0.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[276.08,147.76,0],"to":[-0.4,-0.31,0],"ti":[0.37,0.25,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[274.91,146.94,0],"to":[-0.37,-0.24,0],"ti":[0.34,0.19,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[273.85,146.29,0],"to":[-0.33,-0.19,0],"ti":[0.29,0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[272.9,145.8,0],"to":[-0.29,-0.14,0],"ti":[0.25,0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[272.08,145.45,0],"to":[-0.25,-0.1,0],"ti":[0.21,0.06,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[271.4,145.2,0],"to":[-0.2,-0.06,0],"ti":[0.16,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[270.85,145.06,0],"to":[-0.16,-0.03,0],"ti":[0.12,0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[270.44,145,0],"to":[-0.11,-0.01,0],"ti":[0.07,-0.01,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[270.16,145.01,0],"to":[-0.07,0.01,0],"ti":[0.03,-0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":90,"s":[270.01,145.07,0],"to":[-0.03,0.03,0],"ti":[-0.01,-0.04,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.08},"t":92,"s":[269.98,145.17,0],"to":[0.01,0.04,0],"ti":[-0.05,-0.05,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.11},"t":94,"s":[270.07,145.3,0],"to":[0.05,0.05,0],"ti":[-0.08,-0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.13},"t":96,"s":[270.26,145.45,0],"to":[0.08,0.05,0],"ti":[-0.11,-0.05,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.14},"t":98,"s":[270.55,145.6,0],"to":[0.11,0.05,0],"ti":[-0.13,-0.04,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.16},"t":100,"s":[270.93,145.74,0],"to":[0.13,0.04,0],"ti":[-0.14,-0.03,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":102,"s":[271.35,145.85,0],"to":[0.14,0.03,0],"ti":[-0.14,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":104,"s":[271.77,145.9,0],"to":[0.14,0,0],"ti":[-0.14,0.02,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.16},"t":106,"s":[272.2,145.88,0],"to":[0.14,-0.02,0],"ti":[-0.14,0.04,0]},{"i":{"x":0.83,"y":0.84},"o":{"x":0.17,"y":0.15},"t":108,"s":[272.63,145.78,0],"to":[0.14,-0.04,0],"ti":[-0.14,0.06,0]},{"i":{"x":0.83,"y":0.85},"o":{"x":0.17,"y":0.15},"t":110,"s":[273.05,145.62,0],"to":[0.14,-0.06,0],"ti":[-0.13,0.08,0]},{"i":{"x":0.83,"y":0.86},"o":{"x":0.17,"y":0.14},"t":112,"s":[273.45,145.41,0],"to":[0.13,-0.08,0],"ti":[-0.12,0.09,0]},{"i":{"x":0.83,"y":0.87},"o":{"x":0.17,"y":0.13},"t":114,"s":[273.83,145.16,0],"to":[0.12,-0.09,0],"ti":[-0.11,0.1,0]},{"i":{"x":0.83,"y":0.88},"o":{"x":0.17,"y":0.12},"t":116,"s":[274.18,144.87,0],"to":[0.11,-0.1,0],"ti":[-0.05,0.05,0]},{"t":118,"s":[274.48,144.54,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.84,1.88,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":20,"s":[109.86,70.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.86,0.69,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.08,0]},"t":22,"s":[86.73,68.25,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.2,0.11,0]},"t":24,"s":[64.92,89.39,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.8,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.01,0]},"t":26,"s":[49.17,146.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.76,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.14,0.51,0]},"t":28,"s":[70.15,94.51,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.94,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.94,0.13,0]},"t":30,"s":[100.35,84.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.98,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0.04,0]},"t":32,"s":[99.1,64.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,-0.02,0]},"t":34,"s":[129.33,103.26,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,-0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,-21.26,0]},"t":36,"s":[98.18,73.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.09,0]},"t":38,"s":[70.52,73.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.4,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,-0.06,0]},"t":40,"s":[90.48,75.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,0.99,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.16,0.1,0]},"t":42,"s":[77.84,74.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.86,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.27,-0.01,0]},"t":44,"s":[63.07,64.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.7,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.2,0]},"t":46,"s":[56.42,73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.46,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,-0.05,0]},"t":48,"s":[68.74,79.13,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.1,0]},"t":50,"s":[101.08,75.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.7,0.66,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.26,-0.1,0]},"t":52,"s":[143.61,54.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.11,0]},"t":54,"s":[146.61,63.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.01,0]},"t":56,"s":[118.47,92.79,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.05,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.32,0.02,0]},"t":58,"s":[55.39,59.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.05,0]},"t":60,"s":[33.53,103.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.63,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.21,0]},"t":62,"s":[68.55,76.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.08,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0.11,0]},"t":64,"s":[89.97,83.95,100]},{"i":{"x":[0.83,0.83,0.83],"y":[2.01,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.5,0.04,0]},"t":66,"s":[61.4,110.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.08,0,0]},"t":68,"s":[55.64,56.94,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,-0.04,0]},"t":70,"s":[130.93,113.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.09,-0.08,0]},"t":72,"s":[86.44,76.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.6,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,-0.17,0]},"t":74,"s":[108.29,95.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.84,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,0.11,0]},"t":76,"s":[58.55,89.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,0.17,0]},"t":78,"s":[28.38,66.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.23,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,-0.08,0]},"t":80,"s":[72.98,43.99,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.13,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.34,0.06,0]},"t":82,"s":[56.94,55.36,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.2,0.91,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.02,0]},"t":84,"s":[51.71,12.91,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,1.37,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.77,0]},"t":86,"s":[64.95,65.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.25,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.24,0.07,0]},"t":88,"s":[20.13,72.33,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0,0]},"t":90,"s":[31.74,37.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.05,-0.13,0]},"t":92,"s":[-14.97,72.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,1.21,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.37,0.02,0]},"t":94,"s":[15.04,59.04,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.89,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.06,0]},"t":96,"s":[23.68,76.03,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.4,0]},"t":98,"s":[7.79,16.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.56,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.04,0]},"t":100,"s":[37.92,1.09,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.2,0.1,0]},"t":102,"s":[-17.73,11.66,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,1.01,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.09,0]},"t":104,"s":[-1.63,56.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.01,0]},"t":106,"s":[18.42,34.89,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.44,0.04,0]},"t":108,"s":[43.03,58.53,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.88,3.28,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-7.35,0]},"t":110,"s":[48.75,17.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.21,0.78,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.26,0.08,0]},"t":112,"s":[55.61,17.82,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.99,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.13,0]},"t":114,"s":[58.86,4.73,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.02,0.04,0]},"t":116,"s":[47.58,-17.42,100]},{"t":118,"s":[56.94,20.91,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,10.62],[-5.69,5.34],[-2.56,-7.38],[3.15,-2.1]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0.96862745285,0.72549021244,0.156862750649,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-3.42,4.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":20,"op":120,"st":20,"bm":0},{"ddd":0,"ind":49,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":14,"s":[0]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":24,"s":[100]},{"i":{"x":[0.67],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":68,"s":[100]},{"t":100,"s":[0]}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":14,"s":[272.38,258.09,0],"to":[-0.39,0.14,0],"ti":[2.14,-0.68,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":16,"s":[270.01,258.91,0],"to":[-2.14,0.68,0],"ti":[5.1,-1.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":18,"s":[259.54,262.17,0],"to":[-5.1,1.1,0],"ti":[7.13,-0.3,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":20,"s":[239.42,265.53,0],"to":[-7.13,0.3,0],"ti":[6.92,1.3,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":22,"s":[216.76,263.99,0],"to":[-6.92,-1.29,0],"ti":[5.55,2.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":24,"s":[197.92,257.76,0],"to":[-5.55,-2.38,0],"ti":[4.29,2.71,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":26,"s":[183.44,249.69,0],"to":[-4.29,-2.71,0],"ti":[3.41,2.64,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":28,"s":[172.15,241.5,0],"to":[-3.41,-2.64,0],"ti":[2.82,2.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":30,"s":[162.97,233.84,0],"to":[-2.82,-2.43,0],"ti":[2.43,2.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":32,"s":[155.2,226.94,0],"to":[-2.43,-2.17,0],"ti":[2.17,1.9,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":34,"s":[148.39,220.83,0],"to":[-2.17,-1.9,0],"ti":[1.99,1.64,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":36,"s":[142.21,215.52,0],"to":[-1.99,-1.64,0],"ti":[1.87,1.38,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":38,"s":[136.46,210.98,0],"to":[-1.87,-1.38,0],"ti":[1.77,1.11,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":40,"s":[131.01,207.21,0],"to":[-1.77,-1.11,0],"ti":[1.68,0.83,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":42,"s":[125.85,204.3,0],"to":[-1.68,-0.83,0],"ti":[1.59,0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":44,"s":[120.95,202.25,0],"to":[-1.59,-0.55,0],"ti":[1.49,0.28,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":46,"s":[116.32,201.02,0],"to":[-1.49,-0.28,0],"ti":[1.38,0.03,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":48,"s":[111.99,200.58,0],"to":[-1.38,-0.03,0],"ti":[1.25,-0.17,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":50,"s":[108.03,200.82,0],"to":[-1.25,0.17,0],"ti":[1.12,-0.32,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":52,"s":[104.47,201.59,0],"to":[-1.12,0.32,0],"ti":[0.99,-0.43,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":54,"s":[101.3,202.75,0],"to":[-0.99,0.43,0],"ti":[0.87,-0.5,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":56,"s":[98.52,204.16,0],"to":[-0.87,0.5,0],"ti":[0.76,-0.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":58,"s":[96.09,205.73,0],"to":[-0.76,0.53,0],"ti":[0.66,-0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":60,"s":[93.97,207.36,0],"to":[-0.66,0.55,0],"ti":[0.58,-0.55,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":62,"s":[92.11,209.01,0],"to":[-0.58,0.55,0],"ti":[0.5,-0.53,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":64,"s":[90.5,210.64,0],"to":[-0.5,0.54,0],"ti":[0.44,-0.51,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":66,"s":[89.1,212.22,0],"to":[-0.44,0.52,0],"ti":[0.38,-0.49,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":68,"s":[87.89,213.73,0],"to":[-0.38,0.49,0],"ti":[0.32,-0.46,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":70,"s":[86.84,215.15,0],"to":[-0.32,0.46,0],"ti":[0.28,-0.42,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":72,"s":[85.95,216.48,0],"to":[-0.28,0.42,0],"ti":[0.23,-0.39,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":74,"s":[85.18,217.69,0],"to":[-0.23,0.39,0],"ti":[0.2,-0.35,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":76,"s":[84.54,218.8,0],"to":[-0.19,0.35,0],"ti":[0.16,-0.31,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":78,"s":[84.01,219.79,0],"to":[-0.16,0.31,0],"ti":[0.13,-0.27,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":80,"s":[83.58,220.66,0],"to":[-0.13,0.27,0],"ti":[0.1,-0.23,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":82,"s":[83.24,221.4,0],"to":[-0.1,0.23,0],"ti":[0.07,-0.18,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":84,"s":[82.98,222.02,0],"to":[-0.07,0.18,0],"ti":[0.05,-0.14,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":86,"s":[82.81,222.5,0],"to":[-0.05,0.14,0],"ti":[0.03,-0.1,0]},{"i":{"x":0.83,"y":1},"o":{"x":0.17,"y":0},"t":88,"s":[82.7,222.86,0],"to":[-0.03,0.1,0],"ti":[0.01,-0.05,0]},{"i":{"x":0.83,"y":0.98},"o":{"x":0.17,"y":0.05},"t":90,"s":[82.65,223.08,0],"to":[0,0.05,0],"ti":[-0.01,-0.01,0]},{"i":{"x":0.83,"y":0.8},"o":{"x":0.17,"y":0.14},"t":92,"s":[82.67,223.17,0],"to":[0.01,0.01,0],"ti":[-0.03,0.03,0]},{"i":{"x":0.83,"y":0.9},"o":{"x":0.17,"y":0.06},"t":94,"s":[82.74,223.13,0],"to":[0.03,-0.03,0],"ti":[-0.03,0.06,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.05},"t":96,"s":[82.83,222.98,0],"to":[0.03,-0.06,0],"ti":[-0.02,0.09,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.03},"t":98,"s":[82.9,222.76,0],"to":[0.02,-0.08,0],"ti":[-0.02,0.1,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.04},"t":100,"s":[82.96,222.47,0],"to":[0.03,-0.1,0],"ti":[-0.03,0.1,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.05},"t":102,"s":[83.05,222.16,0],"to":[0.03,-0.1,0],"ti":[-0.04,0.1,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":104,"s":[83.16,221.86,0],"to":[0.04,-0.1,0],"ti":[-0.04,0.1,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.06},"t":106,"s":[83.27,221.56,0],"to":[0.04,-0.1,0],"ti":[-0.04,0.09,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":108,"s":[83.39,221.27,0],"to":[0.04,-0.09,0],"ti":[-0.04,0.09,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":110,"s":[83.5,221,0],"to":[0.04,-0.08,0],"ti":[-0.03,0.08,0]},{"i":{"x":0.83,"y":0.94},"o":{"x":0.17,"y":0.07},"t":112,"s":[83.6,220.76,0],"to":[0.03,-0.08,0],"ti":[-0.02,0.07,0]},{"i":{"x":0.83,"y":0.95},"o":{"x":0.17,"y":0.06},"t":114,"s":[83.68,220.55,0],"to":[0.02,-0.06,0],"ti":[-0.02,0.05,0]},{"i":{"x":0.83,"y":0.96},"o":{"x":0.17,"y":0.05},"t":116,"s":[83.75,220.37,0],"to":[0.02,-0.05,0],"ti":[-0.01,0.02,0]},{"t":118,"s":[83.78,220.23,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.83,0.83,0.83],"y":[0.85,3.79,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,0.17,0]},"t":14,"s":[121.49,88.74,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.19,0.08,0]},"t":16,"s":[91.08,88.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.43,-3.49,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.16,-1.41,0]},"t":18,"s":[67.41,108.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.1,0.09,0]},"t":20,"s":[65.58,106.96,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.81,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.11,0]},"t":22,"s":[54.87,48.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.73,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.18,0.15,0]},"t":24,"s":[69.88,74.19,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.03,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.25,0]},"t":26,"s":[83.43,108.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.98,0.87,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,0,0]},"t":28,"s":[113.24,125.51,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.73,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.03,0.23,0]},"t":30,"s":[72.08,108,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.63,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.26,0.12,0]},"t":32,"s":[102.38,97.85,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.92,0.82,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.18,0]},"t":34,"s":[95.05,74.75,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.76,1.1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-1.12,0.16,0]},"t":36,"s":[69.83,55.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-0.25,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.13,0.05,0]},"t":38,"s":[71.58,33.21,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,-0.34,0]},"t":40,"s":[74.92,83.41,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.18,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.18,0]},"t":42,"s":[121.78,73.43,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.41,0.06,0]},"t":44,"s":[96.06,64.84,100]},{"i":{"x":[0.83,0.83,0.83],"y":[-2.34,1.5,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.49,0.61,0]},"t":46,"s":[89.51,91.86,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.07,0]},"t":48,"s":[90.45,96.14,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.85,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0,0]},"t":50,"s":[127.53,66.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.2,1.02,1]},"o":{"x":[0.17,0.17,0.17],"y":[1.83,0.19,0]},"t":52,"s":[90.28,96.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.09,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0.02,0]},"t":54,"s":[88.5,122.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.72,1.07,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,-0.05,0]},"t":56,"s":[94.6,91.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.91,0.96,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.12,0.04,0]},"t":58,"s":[81.58,110.87,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.81,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.69,-0.08,0]},"t":60,"s":[51.16,75.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.82,1.4,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,-0.14,0]},"t":62,"s":[46.98,93.08,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.27,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.15,0.07,0]},"t":64,"s":[41.62,86.59,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.77,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.06,0,0]},"t":66,"s":[35.19,124.34,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.5,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.53,0.13,0]},"t":68,"s":[62.59,88.27,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,-0.15,0]},"t":70,"s":[58.88,26.32,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.07,1.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.12,-1.51,0]},"t":72,"s":[84.82,48.11,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.95,0.92,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.08,0]},"t":74,"s":[74.25,46.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.59,35.5,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.15,12.36,0]},"t":76,"s":[93.88,59.49,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.87,0.93,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.11,0.08,0]},"t":78,"s":[86.87,59.57,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.08,0.59,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.22,-0.64,0]},"t":80,"s":[59.76,24.3,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.02,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.04,0.11,0]},"t":82,"s":[43.65,28.35,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,1.06,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.02,-0.05,0]},"t":84,"s":[74.4,44.02,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.4,0.9,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.52,0.03,0]},"t":86,"s":[36.2,34.15,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.94,0.23,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.07,0.56,0]},"t":88,"s":[41.45,50.97,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.11,1.14,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.18,0.09,0]},"t":90,"s":[10.92,53.93,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.04,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0.05,0]},"t":92,"s":[20.47,78.16,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1,0.8,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.03,-0.12,0]},"t":94,"s":[-1.57,13.48,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.93,0.97,1]},"o":{"x":[0.17,0.17,0.17],"y":[0,0.14,0]},"t":96,"s":[31.47,39.63,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.2,0.66,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.57,-0.04,0]},"t":98,"s":[-2.83,75.8,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.89,0.95,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.11,0]},"t":100,"s":[1.56,50.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.97,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.3,-0.14,0]},"t":102,"s":[39.26,-25.56,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.11,1.03,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,0.16,0]},"t":104,"s":[53.6,3.46,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,1.05,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.09,0.02,0]},"t":106,"s":[45.06,33.61,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.96,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.07,0.03,0]},"t":108,"s":[-37.85,-8.29,100]},{"i":{"x":[0.83,0.83,0.83],"y":[1.12,1,1]},"o":{"x":[0.17,0.17,0.17],"y":[-0.06,-0.21,0]},"t":110,"s":[7.21,56.77,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.9,1.24,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.05,0,0]},"t":112,"s":[-18.53,38.06,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.84,0.94,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.42,0.06,0]},"t":114,"s":[43.17,56.22,100]},{"i":{"x":[0.83,0.83,0.83],"y":[0.83,0.83,1]},"o":{"x":[0.17,0.17,0.17],"y":[0.17,-0.3,0]},"t":116,"s":[58.63,-14.53,100]},{"t":118,"s":[73.77,0.99,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[10,10]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.313725501299,0.890196084976,0.760784327984,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":14,"op":120,"st":14,"bm":0}]}],"layers":[{"ddd":0,"ind":6,"ty":0,"refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,496,0]},"a":{"a":0,"k":[256,256,0]},"s":{"a":0,"k":[272,272,100]}},"ao":0,"w":512,"h":512,"ip":94,"op":214,"st":94,"bm":0}],"markers":[]}

]]> <hr> <p>Lottie 是一个让开发者“轻松搞定炫酷动画”的利器。设计师用 After Effects 做好动画后，只需导出一个 JSON 文件，开发者就可以直接用 Lottie 加到 App 或网页中，无需写复杂的动画代码。它体积小、效率高，还能交互控制，比如暂停、进度跳转、颜色变换，非常适合做 App 的加载动画、图标动效等。<br>但是在 iOS 上，如果你把开发者模式中的卡顿检测打开，你会发现在渲染一些复杂的 JSON 文件时，会出现明显的主线程卡顿。🤔<br> ⌈iOS⌋NSCollectionLayoutDecorationItem 如何排除自适应宽高的 NSCollectionLayoutBoundarySupplementaryItem https://zeroonet.com/2024/08/13/decoration-exclude-supplementary/ 2024-08-12T16:00:00.000Z 2024-08-15T09:41:36.585Z

显而易见，UICollectionViewCompositionalLayout 给我们带来易用性的同时也牺牲了 UICollectionViewLayout 的灵活性。当我们决定选择前者的时候，内心多少会祈祷着在需求范围之内不要有什么坑啊拜托！然而，Apple 不遂人意，问就是解决提出问题的人可解千愁～

玩笑终归是玩笑，该搬的🧱一块也少不了……

如“标题”的问题描述

默认情况下，当 NSCollectionLayoutDecorationItem 用作背景时，会包含 NSCollectionLayoutBoundarySupplementaryItem。如果要设置内容的偏移，只能通过 contentInsets 进行 Hard Code。对于固定高度的 Supplementary 自然无压力，但对于自适应宽高的情况就显得力有未逮了。

名为 Re-Layout 的小聪明

在 NSCollectionLayoutSection 中有一个叫做 visibleItemsInvalidationHandler 的回调会告知开发者当前可视 Item 被展示前的准确信息：

A closure called before each layout cycle to allow modification of the items in the section immediately before they’re displayed.

但是其允许修改的属性很有限，我们需要涉及到宽高就不在其中。不过借助其计算出来的 frame 等信息，我们可以在适当的时机进行重新布局，变相完成我们的需求。以下贴出核心代码逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
UICollectionViewCompositionalLayout { sectionIdx, env in
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(50))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(150))
    let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 3)
    let result = NSCollectionLayoutSection(group: group)
    result.contentInsets = .init(top: 14, leading: 34, bottom: 14, trailing: 34)
    let decorationItem = NSCollectionLayoutDecorationItem.background(elementKind: String(describing: Decoration.self))
    decorationItem.contentInsets = .init(top: self._headerHeight ?? 0, leading: 20, bottom: 0, trailing: 20)

    result.decorationItems = [decorationItem]
    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(20)), elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
    result.boundarySupplementaryItems = [header]
    result.visibleItemsInvalidationHandler = { items, offset, env in
        if let decorationItem = items.first(where: { $0.representedElementCategory == .decorationView }),
            let header = items.first(where: { $0.representedElementCategory == .supplementaryView }),
            decorationItem.frame.origin.y == header.frame.origin.y
        {
            self._headerHeight = header.frame.height
            DispatchQueue.main.async {
                self._collectionView.collectionViewLayout.invalidateLayout()
            }
        }
    }
    return result
}

总结

早在两年前，这里就提出了相关问题，只是一直没有被有效地解答。希望这个“小聪明”能够解决这个问题，更进一步则是期盼 Apple 早日对此做出 API 级别的支持，🙏

]]> <hr> <p>显而易见，UICollectionViewCompositionalLayout 给我们带来易用性的同时也牺牲了 UICollectionViewLayout 的灵活性。当我们决定选择前者的时候，内心多少会祈祷着在需求范围之内不要有什么坑啊拜托！然而，Apple 不遂人意，问就是解决提出问题的人可解千愁～</p> <p>玩笑终归是玩笑，该搬的🧱一块也少不了……<br> ⌈iOS⌋一次和 ChatGPT 的“结对编程”体验 https://zeroonet.com/2024/07/31/code-with-chatgpt/ 2024-07-30T16:00:00.000Z 2024-08-06T09:55:52.882Z

在 ChatGPT-4o 推出之后，白嫖党终于可以使用多模态相关功能了。对于 GUI Developer，最希望的莫过于将设计图稿喂给 AI，让其使用特定编程语言输出指定平台的相关代码。Bingo，程序员不生产代码，TA 们只是代码的搬运工。于是，有了下文～（忽略多余的解释和换行）

甲方的“快乐”，你“想象”不到

我：[图片]，请使用一个 UILabel 实现图中的文本效果，其中文本左右间隔 8 点，段落上下间隔 10 点。

1
2
3
4
5
6
7
8
// 图示效果如下：
释义 在我的空闲时间

用法 这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说
    in my spare time。
    
例句 I like to gossip with my friends in my free time.
    在空闲时间我喜欢和朋友聊八卦。
  • ChatGPT: 要在 UILabel 中实现类似图片中的文本效果，并且控制文本左右的间隔为 8 点，段落上下的间隔为 10 点，可以通过以下步骤进行设置。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

    import UIKit

    // 创建 UILabel
    let label = UILabel()
    // 设置多行显示
    label.numberOfLines = 0
    // 设置文本内容
    let text = """
    释义\n在我的空闲时间\n\n用法\n这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\nI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
    """
    // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
    let paragraphStyle = NSMutableParagraphStyle()
    // 设置制表符停靠点，8 点间隔
    let tabWidth: CGFloat = 8.0
    paragraphStyle.tabStops = [
    NSTextTab(textAlignment: .left, location: tabWidth)
    ]
    // 设置段落上下间距
    paragraphStyle.paragraphSpacing = 10.0
    // 创建属性字符串并应用段落样式
    let attributedString = NSMutableAttributedString(string: text)
    attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length)
    // 设置 UILabel 的富文本
    label.attributedText = attributedString
    // 设置文本左右内边距
    label.textAlignment = .left
    // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
    label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
    label.backgroundColor = .white
    // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
    view.addSubview(label)

我：我的原始文本是这样的：释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。

  • ChatGPT: 如果你的原始文本包含制表符 (\t) 和换行符 (\n)，你可以使用 NSTextTab 来控制制表符的停靠位置，并通过设置段落样式来调整间距。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    import UIKit

    // 创建 UILabel
    let label = UILabel()
    // 设置多行显示
    label.numberOfLines = 0
    // 原始文本，包含制表符和换行符
    let text = """
    释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
    """
    // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
    let paragraphStyle = NSMutableParagraphStyle()
    // 设置制表符停靠点，8 点间隔
    let tabWidth: CGFloat = 8.0
    paragraphStyle.tabStops = [
        NSTextTab(textAlignment: .left, location: tabWidth),
        NSTextTab(textAlignment: .left, location: tabWidth * 10) // 假设第二个制表符在更远的地方
    ]
    // 设置段落间距
    paragraphStyle.paragraphSpacing = 10.0
    // 创建属性字符串并应用段落样式
    let attributedString = NSMutableAttributedString(string: text)
    attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
    // 设置 UILabel 的富文本
    label.attributedText = attributedString
    // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
    label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
    label.backgroundColor = .white
    // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
    view.addSubview(label)

我：你的代码并没有让制表符右边的文本多行对齐。

  • ChatGPT: 要在 UILabel 中实现制表符右边的文本多行对齐，需要对 NSTextTab 的设置进行一些调整。默认情况下，制表符后面的内容不会自动换行对齐，因此我们需要手动处理。要实现制表符右边的文本多行对齐，我们需要确保文本在制表符后面的内容与第一行的起始位置对齐。这可以通过设置段落的首行缩进（firstLineHeadIndent）和悬挂缩进（headIndent）来实现。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    import UIKit

    // 创建 UILabel
    let label = UILabel()
    // 设置多行显示
    label.numberOfLines = 0
    // 原始文本，包含制表符和换行符
    let text = """
    释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
    """
    // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
    let paragraphStyle = NSMutableParagraphStyle()
    // 设置制表符停靠点，8 点间隔
    let tabWidth: CGFloat = 8.0
    let tabPosition: CGFloat = 100.0 // 设置制表符位置
    paragraphStyle.tabStops = [
        NSTextTab(textAlignment: .left, location: tabPosition)
    ]
    // 设置段落间距
    paragraphStyle.paragraphSpacing = 10.0
    // 设置首行缩进和悬挂缩进，使制表符后面的文本多行对齐
    paragraphStyle.headIndent = tabPosition + tabWidth
    paragraphStyle.firstLineHeadIndent = 0
    // 创建属性字符串并应用段落样式
    let attributedString = NSMutableAttributedString(string: text)
    attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
    // 设置 UILabel 的富文本
    label.attributedText = attributedString
    // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
    label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
    label.backgroundColor = .white

    // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
    view.addSubview(label)

我：你的代码中的 tabPosition 为什么是 100？

  • ChatGPT: tabPosition 设置为 100 是一个示例值，用来控制「释义」、「用法」、「例句」这几个标签后面文本的起始位置。这个值的选择是为了确保文本在标签之后有足够的空间，但它实际上应该根据你的具体需求进行调整。tabPosition 的值应该等于标签（如「释义」、「用法」、「例句」）的最大宽度，再加上你想要的额外间隔。你可以使用 NSString 的方法 size(withAttributes:) 来测量每个标签的宽度，然后选择最大值作为 tabPosition 的基准。

我：我如何计算 「释义」、「用法」、「例句」 的宽度，我的字体大小为 UIFont.systemFont(ofSize: 13)。

  • ChatGPT: 要计算「释义」、「用法」、「例句」这些标签的宽度，可以使用 NSString 或 NSAttributedString 的方法 size(withAttributes:) 来根据指定的字体计算文本的尺寸。下面是一个示例代码来计算这些文本的宽度： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import UIKit

    // 要计算宽度的标签数组
    let labels = ["释义", "用法", "例句"]
    // 指定字体
    let font = UIFont.systemFont(ofSize: 13)
    // 计算每个标签的宽度
    var maxWidth: CGFloat = 0.0
    for label in labels {
        let size = (label as NSString).size(withAttributes: [.font: font])
        maxWidth = max(maxWidth, size.width)
    }
    print("标签的最大宽度为: \(maxWidth) 点")

我：其中「在空闲时间我喜欢和朋友聊天八卦。」需要新起一行显示，但是需要和之前的文本对齐。

  • ChatGPT: $$%%^^^%$$$##（注：牛头不对马嘴～）。亲，您需要充值以解锁会话长度限制！（DIY，非官话！）

总结

从聊天过程可以看出，ChatGPT 目前几乎无法做到一步到位给出最终版本的代码，需要使用者不断明确需求的细节并完成纠错。对于最后一个需求，在免费版本的 Tokens 长度中没有被正确实现。但从答复来看，估计它也无法实现。

通常的做法是另起一个 NSAttributedString，它的 paragraphSpacing 为 0。使用两个空格进行左边文字的占位，加上制表符并拼接上最后的中文即为其 string。但此时会遇到两个问题：

  1. 之前的 paragraphSpacing = 10 生效导致中文段落出现多余的间距。
  2. 中文段落左右文本的间距与之前的间距不相等。

问题的解决方式：

  1. 使用 paragraphSpacingBefore 替代 paragraphSpacing。
  2. 使用透明色文字替代空格进行占位，因为空格的渲染宽度与文字并不相同。
]]> <hr> <p>在 ChatGPT-4o 推出之后，白嫖党终于可以使用多模态相关功能了。对于 GUI Developer，最希望的莫过于将设计图稿喂给 AI，让其使用特定编程语言输出指定平台的相关代码。Bingo，程序员不生产代码，TA 们只是代码的搬运工。于是，有了下文～（忽略多余的解释和换行）<br> ⌈iOS⌋Swifty YYText II —— 事务与异步绘制 https://zeroonet.com/2024/07/17/swifty-yytext-2-async-layer/ 2024-07-16T16:00:00.000Z 2024-07-24T10:38:54.344Z

作为 YYText 的核心组件，YYAsyncLayer 与 YYTextTransaction 通过非常精简的代码定义了整个异步渲染流程。前者负责处理绘制逻辑并进行渲染，后者则是在适当的时机提交界面刷新事务（类似于 CATransaction）。为了提升渲染的效率，这两者内部都使用了一些优化技巧。原理相关的文章不胜枚举，本文旨在记录 Swift 化中遇到的问题以及一些思考。

OSAtomicIncrement：怎么说，我被弃用了

在获取渲染队列或者取消重复渲染都会用到一个原子自增的数字，但在 Swift 环境中该接口已经被标记为弃用：

1
2
3
@available(iOS 7.1, *)
@available(iOS, deprecated: 10.0, message: "Use atomic_fetch_add_explicit(memory_order_relaxed) from <stdatomic.h> instead")
public func OSAtomicIncrement64(_ __theValue: UnsafeMutablePointer<OSAtomic_int64_aligned64_t>!) -> Int64

如果我们根据提示按部就班，会发现 atomic_fetch_add_explicit 没法直接在 Swift 中使用。此时，需要为 Swift 与 C 之间的函数调用建立中间层，套路如下：

  1. 创建 .h 和 .c 文件声明并实现函数
  2. 在 Swift 声明函数并通过 @_silgen_name 指定其包装的函数名称（函数签名需要对齐）
  3. 在混编头文件中导入步骤 1 中创建的 .h 文件
1
2
@_silgen_name("atomic_increment_one")
func atomicIncrementOne(_ value: UnsafeMutablePointer<UInt64>) -> UInt64
1
2
3
4
5
6
7
8
9
10
#include <stdatomic.h>

// c_bridge.h
atomic_uint_fast64_t atomic_increment(atomic_uint_fast64_t *value);

// c_bridge.c
atomic_uint_fast64_t atomic_increment_one(atomic_uint_fast64_t *value) {
    atomic_fetch_add_explicit(value, 1, memory_order_relaxed);
    return atomic_load(value);
}

如果与原始代码进行对比，会发现我们这里用的是无符号整数。这是因为在获取渲染队列时需要指定下标，而当渲染次数足够多的时候，符号整数一定会出现溢出（变成负数），最终导致发生数组越界的崩溃。由于 Swift 静态成员变量初始化天然具备 dispatch_once 的特性，队列管理代码编写如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private enum _QueueManager {
    static var display: DispatchQueue {
        let idx = Int(atomicIncrementOne(&_counter) % _queueCount)
        return _queues[idx]
    }

    private static var _counter = UInt64.zero

    // Static members of class or struct are thread-safe for initializing.
    private static let _queueCount: UInt64 = {
        let maxQueueCount: UInt64 = 16
        let apc = UInt64(ProcessInfo.processInfo.activeProcessorCount)
        return min(max(1, apc), maxQueueCount)
    }()

    private static let _queues: [DispatchQueue] = {
        var result: [DispatchQueue] = []
        for idx in 0..<_queueCount {
            result.append(.init(label: "com.swiftyyytext.display.\(idx)", qos: .userInitiated))
        }
        return result
    }()
}

基于闭包的事务去重可行性实验

YYTextTransaction 是基于 Target-Action 的方式进行事务管理，并根据这两者的哈希值完成无序列表的去重操作。但在 Swift 语境下，加上了 @objc 的函数为了能让 Objective-C 可用会被包装成一个 Thunk。为了能够提高执行的效率，会自然想到用闭包来代替：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

extension SYY.Transaction {
    static func commit(_ work: @escaping () -> Void) {
        __seeds.insert(.init(work))
    }
}

extension SYY.Transaction {
    private struct __Seed: Hashable {
        let closure: () -> Void
        private let _id: String
        init(closure: @escaping () -> Void) {
            self.closure = closure
            self._id = "XXX" // TODO:
        }

        static func == (lhs: Self, rhs: Self) -> Bool {
            lhs._id == rhs._id
        }

        func hash(into hasher: inout Hasher) {
            hasher.combine(_id)
        }
    }
}

其中的 _id 的实现很容易这样来实现：

1
2
3

self._id = "\(Int(bitPattern: ObjectIdentifier(closure as AnyObject)))"

而如果我们查看 ObjectIdentifier 的注释会发现这种方式是错误的，因为In Swift, only class instances and metatypes have unique identities. There is no notion of identity for structs, enums, functions, or tuples.

穷则思变，如果使用指针是否可行呢？emmmm，很遗憾地说，此法亦行不通。Swift 为了安全性考虑，指针的操作相比于 C/C++ 而言异常的繁琐。并且它只是一个可以被用来临时访问变量的指针，而非其真实的内存地址。在文档上有如下说明：

1
// The pointer argument to body is valid only during the execution of withUnsafeMutablePointer(to:_:)/其他 API. Do not store or return the pointer for later use.

踹一踹的例程如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

func add() {
    let blockA = {}
    let blockB = {}

    SYY.Transaction.commit(_renderA)
    SYY.Transaction.commit(_renderA)
    SYY.Transaction.commit(_renderB)
    SYY.Transaction.commit(_renderB)
}

private func _renderA() {}
private func _renderB() {}

总结

当我从头到尾阅读完 YYText 异步渲染流程相关代码之后，在某种程度上觉得自己行了。但在用 Swift 完成实际的编码时，会发现于胸的成竹变得慢慢变得模糊了。因为这其中涉及到不少的细节问题，处理是否得当将直接影响到 YYLabel/YYTextView 的实现复杂度。举个直观的🌰：YYAsyncLayerDelegate 从逻辑上肯定可以通过新的成员变量来指定，比如 yyDelegate。那么问题来了，UIView 的 layer 实际上是通过指定的 layerClass 隐式创建的，那么 yyDelegate 的赋值时机是什么呢？挨个在指定构造器里写上 (layer as? YYTextAsyncLayer).yyDelegate = self 这句代码吗？

]]> <hr> <p>作为 YYText 的核心组件，YYAsyncLayer 与 YYTextTransaction 通过非常精简的代码定义了整个异步渲染流程。前者负责处理绘制逻辑并进行渲染，后者则是在适当的时机提交界面刷新事务（类似于 CATransaction）。为了提升渲染的效率，这两者内部都使用了一些优化技巧。原理相关的文章不胜枚举，本文旨在记录 Swift 化中遇到的问题以及一些思考。<br> ⌈iOS⌋Swifty YYText I —— “宣言” https://zeroonet.com/2024/06/25/swifty-yytext-1-declaration/ 2024-06-24T16:00:00.000Z 2024-06-25T08:20:07.715Z

YYText 是一个非常强大的文本处理框架，不过遗憾的是原作者已经很久没有进行维护了。为了跟上时代（Swift 化）的进程，鄙人不才，期望能够接住前辈们的火炬，让开源精神能够一直传承下去！

SwiftyYYText 是 YYText 非官方的 Swift 版本，旨在将这一优秀的库迁移至 Swift，同时开始逐渐处理历史遗留问题，以便更好地服务于广大开发者和社区。由于个人的精力和能力受限，项目的推进进度会比较慢，故在此邀请对此有兴趣的伙伴加入。相信在这之后，我们对 Apple 的文本渲染相关流程会有进一步的领悟，🤝

未完待续

To be continued…

]]> <hr> <p><a href="https://github.com/ibireme/YYText">YYText</a> 是一个非常强大的文本处理框架，不过遗憾的是原作者已经很久没有进行维护了。为了跟上时代（Swift 化）的进程，鄙人不才，期望能够接住前辈们的火炬，让开源精神能够一直传承下去！</p> <p><a href="https://github.com/ZeroOnet/SwiftyYYText">SwiftyYYText</a> 是 YYText 非官方的 Swift 版本，旨在将这一优秀的库迁移至 Swift，同时开始逐渐处理历史遗留问题，以便更好地服务于广大开发者和社区。由于个人的精力和能力受限，项目的推进进度会比较慢，故在此邀请对此有兴趣的伙伴加入。相信在这之后，我们对 Apple 的文本渲染相关流程会有进一步的领悟，🤝<br> ⌈iOS⌋自定义 UIScrollView pageSize 的两种方案 https://zeroonet.com/2024/06/12/custom-page-size-scroll-view/ 2024-06-11T16:00:00.000Z 2024-06-20T08:36:47.278Z

当你把 UIScrollView 的 isPagingEnabled 属性设置为 true 时，你便得到了 Apple 精心准备好的分页动画过渡效果。即当你停止拖拽时，系统会根据滚动进度来决定回到上一页还是去往下一页。不过它的局限性在于分页的大小完全取决于 UIScrollView 本身的 frame.size，无法自定义 pageSize。在某个时间开始，占据整个容器大小的轮播或者滚动视图已经无法满足设计的审美以及产品的需求了。取而代之的是除了完全显示当前页之外，还需要露出前一页和后一页的部分内容。如果用“象形文字”描述的话，大致长这样：（请全屏查看，🤪）

1
2
3
4
5
/**
 |--| |-----------------| |--|
 | P| |        C        | | N|
 |--| |-----------------| |--|
*/

那么，接下来我们一起来讨论一下需求的实现方式～

论 iOS 13+ 后，如何躺着舒服

无他，在 iOS 13 及之后，Apple 贴心的为开发者准备了 UICollectionViewCompositionalLayout，拯救了那本已所剩无几的头发！它涉及到不少新的布局概念，除了接下来的代码相关使用，笔者不打算啰嗦太多。欲知更多精彩内容，请点击🔗。

总的来说，它使用 NSCollectionLayoutSection 作为与 IndexPath.Section 对应的布局单元，同时每个 NSCollectionLayoutSection 包含一个 NSCollectionLayoutGroup 用于描述其下最基本的布局元素 NSCollectionLayoutItem（对应于一个 UICollectionViewCell）。（其中 NSCollectionLayoutGroup 继承自 NSCollectionLayoutItem，从而可以实现 Group 之间的嵌套。）

1
2
3
4
5
6
7
8
9
10
11
12
/**
    NSCollectionLayoutSection
    |
    |--- NSCollectionLayoutGroup
        |
        |--- NSCollectionLayoutGroup
        |    |
        |    |--- NSCollectionLayoutItem
        |--- NSCollectionLayoutItem
        |--- NSCollectionLayoutItem
        |--- NSCollectionLayoutItem
*/

它们之间的大小关系通过 NSCollectionLayoutSize 来表示，包含绝对值、相对上一级的比例关系和预估值三种情况。活学活用，在这些知识背景下，我们的问题可以这样被解决：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
override func compositionSection(
    in env: any NSCollectionLayoutEnvironment,
    at section: Int
) -> NSCollectionLayoutSection? {
    // item 的 size 与 group 相等
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: .fractionalHeight(1)
    )
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    // trailing 用于设置水平方向上的 item 间距
    item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 14)
    // group 高度设定绝对值可用于撑起 section 的高度，group 的宽度为 section 的 0.83 倍。
    let groupSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(0.83),
        heightDimension: .absolute(134)
    )
    // 表示每个 group 只有一个 item，如果有多个 item 就会被自动生成多个 group。
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    let section = NSCollectionLayoutSection(group: group)
    // 核心代码
    section.orthogonalScrollingBehavior = .groupPaging
    // 假定上、左、右间距 16，因为 item 右边本身有 14 的间距，所以这里的 trailing 为 2。
    section.contentInsets = .init(top: 16, leading: 16, bottom: 0, trailing: 2)
    return section
}

自食其力，方得始终

什么？都 iOS 18 了，为什么还要支持 iOS 12 啊？做不了，根本做不了！开个玩笑～

本着“我很懒”的思想原则，我们自实现方案的目标是在充分利用默认行为的前提下打破 pageSize 的限制。在毫无头绪的时候，不妨从头开始梳理技术方案的硬性要求：

  1. 需要有一个自定义 pageSize 规格的 UIScrollView
  2. UIScrollView 它的实际内容 size 大于 pageSize
  3. 按照自定义 pageSize 实现分页动画效果

毫无疑问，用一个 UIScrollView 是不可能实现的。你都既要又要了，我用两个 UIScrollView 也是合情合理的。下面是方案的具体描述：

  1. 创建两个 UIScrollView 实例 A，B
  2. A 包含所有的视图内容，但是不接受手动滚动事件。
  3. B 是滚动行为视图，通过控制它的大小实现自定义 pageSize。
  4. A 通过 KVO 观察 B 的 contentOffset，并与之相等。B 观察 A 的 contentSize，宽度等于 itemsCount * B.frame.width，高度等于 A。（这里假定水平方向滚动）
  5. 在视图层级上，B 将覆盖 A。因为自定义 pageSize 通常更小，所以需要覆写响应链相关方法实现触摸事件的转移。

那么接下来，就将思路转换为代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

final class PageView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        _configureSubviews()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        // 确定事件响应的条件，如某个按钮被点击
        let point = convert(point, to: _button)
        return _button.point(inside: point, with: event)
    }

    private func _configureSubviews() {}
}

final class CustomPageSizeView: UIView {
    let itemWidth: CGFloat
    let itemMargin: CGFloat
    let padding: (left: CGFloat, right: CGFloat)
    init(itemWidth: CGFloat, itemMargin: CGFloat, padding: (left: CGFloat, right: CGFloat)) {
        self.itemWidth = itemWidth
        self.itemMargin = itemMargin
        self.padding = padding
        super.init(frame: .zero)
        _configureSubviews()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    var pageIdx: Int { Int(_actionScrollView.contentOffset.x / _actionScrollView.frame.width) }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        guard !isHidden else { return nil }

        var result: UIView?
        for _pageView in _pageViews {
            let point = convert(point, to: _pageView)
            result = _pageView.hitTest(point, with: event)
            if result != nil { break }
        }
        return result ?? _actionScrollView
    }

    func apply(models: [Any]) {}

    private func _configureSubviews() {
        addSubview(_actionScrollView)
        addSubview(_containerScrollView)

        _containerScrollView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
            make.height.equalTo(50) // ⚠️ 需要设定高度值，可在添加子视图时动态计算
        }
        _actionScrollView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.height.equalTo(_containerScrollView)
            make.width.equalTo(itemWidth + itemMargin)
        }
        _contentOffSetKVOToken = _actionScrollView.observe(
            \.contentOffset,
             options: .new
        ) { [weak self] scrollView, _ in
            guard let self else { return }
            self._containerScrollView.contentOffset.x = scrollView.contentOffset.x
        }
        _contentSizeKVOToken = _containerScrollView.observe(
            \.contentSize,
             options: .new
        ) { [weak self] scrollView, _ in
            guard let self else { return }
            let itemsCount = CGFloat(self._pageViews.count)
            let width = self._actionScrollView.frame.width * itemsCount
            self._actionScrollView.contentSize = CGSize(width: width, height: scrollView.contentSize.height)
        }
    }

    private lazy var _actionScrollView: UIScrollView = {
        let result = UIScrollView()
        result.isPagingEnabled = true
        result.showsHorizontalScrollIndicator = false
        return result
    }()

    private lazy var _containerScrollView: UIScrollView = {
        let result = UIScrollView()
        result.isScrollEnabled = false
        result.showsHorizontalScrollIndicator = false
        return result
    }()

    private var _pageViews: [PageView] { _containerScrollView.subviews.compactMap { $0 as? PageView } }

    private var _contentOffSetKVOToken: NSKeyValueObservation?
    private var _contentSizeKVOToken: NSKeyValueObservation?
}

秘技：抛砖引玉术

其他可行的方案……

总结

看得出来，Apple 一直都在致力于简化界面开发的复杂度，让开发者能够更加专注于业务本身。但是由于历史包袱的存在，我们几乎总是需要在好多年之后才能用上当时的新特性。而自然遗忘又是常态，当反应过来的时候已经走上了老路。所以笔者养成了一个习惯，每次当 App 兼容的系统版本实现跨越时，就会去温习一下 WWDC，看看是否有“新的玩具”可以把玩。毕竟大树底下好乘凉，能让 Apple 干的活绝对不碰一下，skr～

]]> <hr> <p>当你把 UIScrollView 的 isPagingEnabled 属性设置为 true 时，你便得到了 Apple 精心准备好的分页动画过渡效果。即当你停止拖拽时，系统会根据滚动进度来决定回到上一页还是去往下一页。不过它的局限性在于分页的大小完全取决于 UIScrollView 本身的 frame.size，无法自定义 pageSize。在某个时间开始，占据整个容器大小的轮播或者滚动视图已经无法满足设计的审美以及产品的需求了。取而代之的是除了完全显示当前页之外，还需要露出前一页和后一页的部分内容。如果用“象形文字”描述的话，大致长这样：（请全屏查看，🤪）</p> <figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> |--| |-----------------| |--|</span></span><br><span class="line"><span class="comment"> | P| | C | | N|</span></span><br><span class="line"><span class="comment"> |--| |-----------------| |--|</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure> <p>那么，接下来我们一起来讨论一下需求的实现方式～<br> ⌈Swift⌋数据结构在竞态条件下引发的崩溃问题 https://zeroonet.com/2024/05/05/race-condition-in-swift-data-structure/ 2024-05-04T16:00:00.000Z 2024-06-03T02:10:53.970Z

Dictionary、String 是 swift 标准库中的值类型数据结构，单从使用层面上而论，相信铁子们都可以不假思索、信手拈来。但如果在某种使用条件下，发生了运行时崩溃，阁下又将如何应对？

如果你看“题干”的话，就自然而然地想到这个情况就是多线程下数据一致性问题。至于如何保护临界区数据不在这篇文章的讨论范围，但我们不妨深入 Swift 源码，去揭开崩溃原因的神秘面纱～

Dictionry

倒数五个数，三、二、一，上 🌰：

1
2
3
4
5
6
7
8
9
10
11
func crashOfRaceConditionInDictionary() {
    var dict: [String: Double] = [:]
    let key = "ABCD"
    DispatchQueue.concurrentPerform(iterations: 2) { index in
        if index % 2 == 0 {
           print(dict[key] as Any)
        } else {
           dict[key] = Double(index)
        }
    }
}

目前已知例程中会出现下面两种崩溃的情况：

  1. EXC_BAD_ACCESS
  2. [XXXX objectForKey:] unrecognized selector sent to instance XXXXXX

无疑，它是在通过下标访问字典元素时发生的。为了进一步了解实现细节，我们可以在 swift 的源码 中去搜索关键字（💡如果你对崩溃堆栈进行了符号化，可以精准定位到相关代码的行数。），代码在 DictionaryVariant 的 subscript(key: Key) -> Value? 方法中，下面是关键伪代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
extension Dictionary._Variant {
    subscript(key: Key) -> Value? {
        get { return lookup(key) }

        // set
        _modify {
            let cocoa = asCocoa
            var native = _NativeDictionary<Key, Value>(
                cocoa, capacity: cocoa.count + 1)
            self = .init(native: native)
            yield &native[key, isUnique: true]
            return
        }
    }

    func lookup(_ key: Key) -> Value? {
        let cocoaKey: AnyObject = _bridgeAnythingToObjectiveC(key)
        guard let cocoaValue = asCocoa.lookup(cocoaKey) else { return nil }
        return _forceBridgeFromObjectiveC(cocoaValue, Value.self)
    }
}

事实上，Dictionary 底层通过 __Variant 中的 _BridgeStorage<__RawDictionaryStorage> 存储键值对。通过下标访问值时，在 iOS 运行环境下，会将 __Variant 中的存储对象通过值传递（__owned）转换为 __CocoaDictionary。然后将其通过 unsafeBitCast 强制转换为 NSDictionary，最后返回 object(forKey:) 值。当通过下标设置值时（当 Key 与 Value 非 Class 时，内部通过 canBeClass 来进行判断），其 __Variant 会被重新初始化。

当旧地址代表的内存被释放后，竞态条件访问时就会出现崩溃 1。而如果旧地址已经被重新分配且无法响应 object(forKey:) 消息时，则会导致崩溃 2。（此外要是其能够响应该消息，则会发生脏数据访问问题。）

String

字符串的问题发生在其拼接的时候，为了更容易复现，例子中加上了一个循环：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
func crashOfRaceConditionInString() {
    var string = ""

    for _ in 0..<50 {
        DispatchQueue.concurrentPerform(iterations: 4) { index in
            if index % 2 == 0 {
                string += "ABC"
            } else {
                string += "DEF"
            }
        }
    }
}

这次的崩溃 Xcode 给出了很友好的控制台输出：

Object 0xXXX of class __StringStorage deallocated with non-zero retain count 2. This object’s deinit, or something called from it, may have created a strong reference to self which outlived deinit, resulting in a dangling reference.

大致的意思是：String 的内部成员 __StringStorage 在被释放时，发现它的引用计数为 2。

其堆栈信息是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
#00x0000000105aa8a4c in __pthread_kill ()
#10x00000001060f71d0 in pthread_kill ()
#20x00000001801375ec in abort ()
#30x000000018cc27e08 in swift::fatalErrorv(unsigned int, char const*, char*) ()
#40x000000018cc27e24 in swift::fatalError(unsigned int, char const*, ...) ()
#50x000000018cc2ba2c in swift_deallocClassInstance ()
#60x000000018cc2b94c in _swift_release_dealloc ()
#70x000000018cc2c4b0 in bool swift::RefCounts<swift::RefCountBitsT<(swift::RefCountInlinedness)1>>::doDecrementSlow<(swift::PerformDeinit)1>(swift::RefCountBitsT<(swift::RefCountInlinedness)1>, unsigned int) ()
#80x000000018cae4510 in _StringGuts.prepareForAppendInPlace(totalCount:otherUTF8Count:) ()
#90x000000018cae4618 in _StringGuts.append(_:) ()
#100x000000018c97bdac in static String.+= infix(_:_:) ()
#110x000000010491361c in closure #1 in ViewController.crashOfRaceConditionInString() at /Users/liwenkang/Documents/Swift/CrashOfRaceCondition/CrashOfRaceCondition/ViewController.swift:23

关键调用栈帧源码精简后结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// Ensure unique native storage with sufficient capacity for the following
// append.
private mutating func prepareForAppendInPlace(
    totalCount: Int,
    otherUTF8Count otherCount: Int
) {
    // See if we can accommodate without growing or copying. If we have
    // sufficient capacity, we do not need to grow, and we can skip the copy if
    // unique. Otherwise, growth is required.

    //......

    // If we have to resize anyway, and we fit in smol, we should have made one
    //......

    // Non-unique storage: just make a copy of the appropriate size, otherwise
    // grow like an array.
    let growthTarget: Int
    if sufficientCapacity {
      growthTarget = totalCount
    } else {
      growthTarget = Swift.max(
        totalCount, _growArrayCapacity(nativeCapacity ?? 0))
    }
    self.grow(growthTarget) // NOTE: this already has exponential growth...
}

@usableFromInline
internal mutating func grow(_ n: Int) {
    // ......

    // TODO: Don't do this! Growth should only happen for append...
    let growthTarget = Swift.max(n, (self.uniqueNativeCapacity ?? 0) * 2)

    if _fastPath(isFastUTF8) {
      let isASCII = self.isASCII
      let storage = self.withFastUTF8 {
        __StringStorage.create(
          initializingFrom: $0,
          codeUnitCapacity: growthTarget,
          isASCII: isASCII)
      }

      self = _StringGuts(storage)
      return
    }

    _foreignGrow(growthTarget)
}

@inline(never) // slow-path
private mutating func _foreignGrow(_ n: Int) {
    let newString = String(_uninitializedCapacity: n) { buffer in
    guard let count = _foreignCopyUTF8(into: buffer) else {
     fatalError("String capacity was smaller than required")
    }
    return count
    }
    self = newString._guts
}

bool doDecrementSlow(RefCountBits oldbits, uint32_t dec) {
    RefCountBits newbits;

    // constant propagation will remove this in swift_release, it should only
    // be present in swift_release_n
    if (dec != 1 && oldbits.isImmortal(true)) {
      return false;
    }

    bool deinitNow;
    do {
      newbits = oldbits;

      bool fast =
        newbits.decrementStrongExtraRefCount(dec);
      if (fast) {
        // Decrement completed normally. New refcount is not zero.
        deinitNow = false;
      }
      else if (oldbits.isImmortal(false)) {
        return false;
      } else if (oldbits.hasSideTable()) {
        // Decrement failed because we're on some other slow path.
        return doDecrementSideTable<performDeinit>(oldbits, dec);
      }
      else {
        // Decrement underflowed. Begin deinit.
        // LIVE -> DEINITING
        deinitNow = true;
        assert(!oldbits.getIsDeiniting());  // FIXME: make this an error?
        newbits = oldbits;  // Undo failed decrement of newbits.
        newbits.setStrongExtraRefCount(0);
        newbits.setIsDeiniting(true);
      }
    } while (!refCounts.compare_exchange_weak(oldbits, newbits,
                                              std::memory_order_release,
                                              std::memory_order_relaxed));
    if (performDeinit && deinitNow) {
      std::atomic_thread_fence(std::memory_order_acquire);
      _swift_release_dealloc(getHeapObject());
    }

    return deinitNow;
}

由于 dealloc 的流程过长，这里就不再贴出后续代码。不难看出，当 String 的长度增长到一定程度时，__StringStorage 会被扩容。对照数组的相关行为理解，原有的内存空间一定会被回收，并开辟新的内存空间去存储扩容后的字符串。而由于多线程竞态访问的原因，在某个时刻 __StringStorage 需要被释放时其引用计数不满足条件最终导致崩溃：

1
2
3
4
5
6
7
bool canBeFreedNow() const {
    auto bits = refCounts.load(SWIFT_MEMORY_ORDER_CONSUME);
    return (!bits.hasSideTable() &&
            bits.getIsDeiniting() &&
            bits.getStrongExtraRefCount() == 0 &&
            bits.getUnownedRefCount() == 1);
}

总结

在日常的开发活动中，我们通常情况下会特别注意多线程的数据安全问题。但当使用某些第三方 SDK 时，可能会疏于防范（默认以为是主线程回调，实则不尽然），上述两个例子是笔者在工作过程中血淋淋地教训。或许我们都读过很多框架或者系统底层的相关源码，但单纯个人观点觉得，任何技术知识的学习如果能够落实到分析和解决问题上，相比漫无目的地为了阅读而阅读更能受益匪浅。知识如海洋，一个庞大的代码库足以让人迷失在其中，而明确的目的意识才能让我们在其中徜徉～

]]> <hr> <p>Dictionary、String 是 swift 标准库中的值类型数据结构，单从使用层面上而论，相信铁子们都可以不假思索、信手拈来。但如果在某种使用条件下，发生了运行时崩溃，阁下又将如何应对？</p> <p>如果你看“题干”的话，就自然而然地想到这个情况就是多线程下数据一致性问题。至于如何保护临界区数据不在这篇文章的讨论范围，但我们不妨深入 Swift 源码，去揭开崩溃原因的神秘面纱～<br> ⌈转⌋目前已知最具干货的离屏渲染文章 https://zeroonet.com/2024/04/18/offscreen-render-process/ 2024-04-17T16:00:00.000Z 2024-04-18T03:11:27.100Z

在这样一个信息时代里，有无数人不择手段利用信息差为自身获取利益。所幸，在技术领域里总有那么一帮人愿意无私奉献出自己的时间，免费向从业人员或者普罗大众分享专业技能与工作成果，成就了蓬勃发展的开源社区。🙇🏼

这个系列会通过🔗的形式（省去可能的版权纠纷）转载个人觉得非常具有价值的技术文章，也为后续自我地不断提高积累食粮～

Reference

从“离屏渲染”到UIKit界面渲染管线分析 - Lrdcq

]]> <hr> <p>在这样一个信息时代里，有无数人不择手段利用信息差为自身获取利益。所幸，在技术领域里总有那么一帮人愿意无私奉献出自己的时间，免费向从业人员或者普罗大众分享专业技能与工作成果，成就了蓬勃发展的开源社区。🙇🏼</p> <p>这个系列会通过🔗的形式（省去可能的版权纠纷）转载个人觉得非常具有价值的技术文章，也为后续自我地不断提高积累食粮～<br> ⌈Swift⌋这一次，搞懂 @objc 和 dynamic https://zeroonet.com/2024/04/15/objc-vs-dynamic/ 2024-04-14T16:00:00.000Z 2024-06-12T09:11:44.857Z

自 Swift 问世以来，于 iOS 中的运用在很长的一段时间内就注定离不开与 Objective-C 的混编问题。而如何让广大开发者更快地接受并逐步使用这个“亲儿子”，一定程度上会受到它的操作难度的影响。官方也给出了他们的解决方案：编译器标识符 + 混编头文件。即：

  • XXX-Swift.h（可在编译设置「Generated Header Name」中修改名称） 由编译器自动生成可供 Objective-C 使用的 Swift 接口（前提是为能够桥接到 Objective-C 的接口加上 public @objc）
  • XXX-Bridging-Header.h （可在编译设置「Objective-C Bridging Header」中修改路径）管理能被 Swift 访问的 Objective-C 接口

如果你经历过初期的阵痛，就一定会疯狂吐槽因 Xcode 的缓存导致 XXX-Swift.h 无法即使更新而出现的各种莫名其妙的编译错误，对于同一个模块里必须加 public 才能识别的限制使组件封装性被破坏的神奇操作亦让人叫苦不迭，🤣

那么在 @objc 背后发生了什么？dynamic 又有什么作用？调用环境的不同行为是否一致呢？让我们一探究竟！

从 🌰 出发

在开始之间，我们不妨先将测试例程“端上来”：

1
2
3
4
5
6
final class Task {
    func execute() {}
    @objc func executeWithObjC() {}
    dynamic func executeWithDynamic() {}
    @objc dynamic func executeWithObjCAndDynamic() {}
}

为了规避继承对函数调用形式的影响，我们加上了 final 让函数默认直接通过函数地址调用。加上断点，通过汇编很容易得到验证：

1
2
let task = Task()
task.execute() // 断点处

1
2
3
4
5
6
7
8
9
10
11
12
@objcvsdynamic`main:
    0x100003bf0 <+0>:  stp    x20, x19, [sp, #-0x20]!
    0x100003bf4 <+4>:  stp    x29, x30, [sp, #0x10]
    0x100003bf8 <+8>:  add    x29, sp, #0x10
    0x100003bfc <+12>: mov    x0, #0x0
    0x100003c00 <+16>: bl     0x100003c2c               ; type metadata accessor for _objcvsdynamic.Task at <compiler-generated>
    0x100003c04 <+20>: mov    x20, x0
    0x100003c08 <+24>: bl     0x100003c50               ; _objcvsdynamic.Task.__allocating_init() -> _objcvsdynamic.Task at main.swift:10
    0x100003c0c <+28>: adrp   x8, 5
    0x100003c10 <+32>: str    x0, [x8, #0x148]
->  0x100003c14 <+36>: ldr    x20, [x8, #0x148]
    0x100003c18 <+40>: bl     0x100003c88               ; _objcvsdynamic.Task.execute() -> () at main.swift:11

在汇编语言中，bl 指令是 “Branch with Link” 的缩写，这是一种用于函数调用的指令。后面的注释也告诉了我们答案，这个地址就是 Task 中 execute 的函数地址。有了这个基本依据，后续的过程就是照葫芦画瓢了～

在 Swift 中调用

在 main.swift 中依次调用剩下的三个函数并加上断点：

1
2
3
task.executeWithObjC() // 断点处
task.executeWithDynamic() // 断点处
task.executeWithObjCAndDynamic() // 断点处

关键汇编代码如下：
1
2
3
4
5
6
7
8
9
0x100003bd8 <+48>:  bl     0x100003c6c               ; _objcvsdynamic.Task.executeWithObjC() -> () at main.swift:12
0x100003bdc <+52>:  ldr    x8, [sp, #0x8]
0x100003be0 <+56>:  ldr    x20, [x8, #0x148]
0x100003be4 <+60>:  bl     0x100003c80               ; _objcvsdynamic.Task.executeWithDynamic() -> () at main.swift:13
0x100003be8 <+64>:  ldr    x8, [sp, #0x8]
0x100003bec <+68>:  ldr    x0, [x8, #0x148]
0x100003bf0 <+72>:  adrp   x8, 5
0x100003bf4 <+76>:  ldr    x1, [x8, #0x90]
0x100003bf8 <+80>:  bl     0x100003e14               ; symbol stub for: objc_msgSend

前两个函数的调用形式和 execute 如出一辙，第三个函数我们看到了熟悉的老朋友：objc_msgSend。它的函数签名是这样的：
1
2
OBJC_EXPORT id _Nullable
objc_msgSend(id _Nullable self, SEL _Nonnull op, ...)

在 arm64 的架构中，函数调用的参数会通过通用寄存器 x0 到 x7 存储。根据我们对 executeWithObjCAndDynamic 的定义，可以得知它只会有两个默认参数 self、SEL。而通过 LLDB 指令 register read 可以读取寄存器中的值，如下：
1
2
3
4
5
6
7
8
po task
-> <Task: 0x600002af0080>

register read x0
-> x0 = 0x0000600002af0080

register read x1
-> x1 = 0x0000000100003e88  "executeWithObjCAndDynamic"

据此可得出结论：当函数被 @objc 和 dynamic 同时标记时，会通过 Objective-C 运行时消息发送机制完成调用。此外，dynamic 的另一个作用是让函数的实现可以被动态替换，类似于 Method Swizzling：

1
2
3
4
5
6
7
extension Task {
    @_dynamicReplacement(for: executeWithDynamic)
    func executeWithDynamicReplacement() {
        // do something
        executeWithDynamic()
    }
}

在外界调用 executeWithDynamic 时，在汇编层面会通过名为 swift_getFunctionReplacement 的函数调用跳转到 executeWithDynamicReplacement。

在 Objective-C 中调用

在实际测试之前，我们需要改造下演示代码以供 Objective-C 调用：

1
2
3
4
5
6
7
8
@objc
public final class Task: NSObject {
    @objc public func executeWithObjC() {}
    @objc dynamic public func executeWithObjCAndDynamic() {}
    // 不支持的调用形式
    // func execute() {}
    // dynamic func executeWithDynamic() {}
}

紧接着：
1
2
3
4
5
- (void)test {
    Task *task = [[Task alloc] init];
    [task executeWithObjC]; // 断点处
    [task executeWithObjCAndDynamic]; // 断点处
}

汇编结果：
1
2
3
4
5
6
7
8
9
10
    0x1000039ec <+28>: bl     0x100003d7c               ; symbol stub for: objc_alloc_init
    0x1000039f0 <+32>: ldr    x1, [sp, #0x8]
    0x1000039f4 <+36>: add    x8, sp, #0x18
    0x1000039f8 <+40>: str    x8, [sp, #0x10]
    0x1000039fc <+44>: str    x0, [sp, #0x18]
->  0x100003a00 <+48>: ldr    x0, [sp, #0x18]
    0x100003a04 <+52>: bl     0x100003de8               ; objc_msgSend$executeWithObjC
    0x100003a08 <+56>: ldr    x1, [sp, #0x8]
    0x100003a0c <+60>: ldr    x0, [sp, #0x18]
    0x100003a10 <+64>: bl     0x100003e08               ; objc_msgSend$executeWithObjCAndDynamic

结合注释来看，第一行是非常典型的动态库函数调用，而“正主”的说明却让我们觉得陌生。先瞅瞅 x0、x1 放的是什么：
1
2
3
4
5
6
7
8
po task
-> <_objcvsdynamic.Task: 0x600001b68000>

register read x0
-> x0 = 0x0000600001b68000

register read x1
-> x1 = 0x00000000000000b0

看起来 x0 依旧是对象本身，x1 并无什么有意义的表示，但我们至少能肯定这绝不是消息发送的函数调用。事实上 objc_msgSend$executeWithObjC 是一个由编译器生成的 Thunk 函数，内部包装了实际的 Swift 函数调用。结合 x0，或许它长成这样：
1
2
3
4
// 伪代码
void objc_msgSend$executeWithObjC(Task *task) {
    task.executeWithObjC()
}

简而言之，Swift 提供给 Objective-C 的接口本质上是一个 Thunk 函数，其内部调用真正的 Swift 函数。

在扩展中的一些特性

默认情况，在扩展中定义的函数是无法被子类重载的，但是 @objc 标记会打破这一限制：

1
2
3
4
5
6
7
8
9
10
class Animal {}
extension Animal {
    func eat() {}
    @objc func run() {}
}

class Dog: Animal {
    override func eat() {} // ❌ Non-@objc instance method 'eat()' is declared in extension of 'Animal' and cannot be overridden
    override func run() {}
}

总结

一个普通函数就像游戏中的角色通过点亮天赋树获得新的技能一般，@objc 赋予它能被 Objective-C 调用的能力，dynamic 让它支持 Swift 式的 Method Swizzling，双管齐下那便“究极进化”为 Objective-C Runtime Message Forwarding。此时，Objective-C 并不会向运行时注册该类（通过 objc_getClass 获取结果为 nil），而是在 objc_msgSend 中做了对 Swift 类型的适配工作。上述验证流程亦可通过 SIL 来完成，如果你感兴趣，详见参考文章，👋～

补充（2024-06-12）

@objc 绝大多数情况下是用于 Target-Action 式的命令模式下接收运行时调用的函数的标记，例如：

1
2
3
4
5
6
7
8
9
10
11
class Tester {
    func example() {
        let tapGR = UITapGestureRecognizer(target: self, action: #selector(action))
    }

    // 以下两者不能共存
    @objc
    func action() {}
    @objc
    func action(sender: UITapGestureRecognizer) {}
}

action（命名任意，这里只是例子中的名字）函数可以不带任何参数或者声明一个使用“该命令”的类型参数 sender（习惯上这么命名），并且在指定 selector 时可以不用带上参数，运行时会有一套规则去查找函数地址。但这并不是一个好的编码方式，因为这样即使你增加了参数列表，编译器也无法静态检查出问题。最糟糕的结果就是在 action 的执行过程中出现野指针崩溃，因为此时访问了未分配函数参数的寄存器（如 x0 - x7）或者栈帧内存结构。

1
2
3
4
5
6
7
8
9
10
class Tester {
    func example() {
        let tapGR = UITapGestureRecognizer(target: self, action: #selector(actionOfCrash))
    }
    @objc
    func actionOfCrash(sender: UITapGestureRecognizer, block: @escaping () -> Void) {
        // 函数参数从右往左开始存储
        print(block) // ❌ Crash: EXC_BAD_ACCESS
    }
}

那么考虑到实际情况（除 sender 外，Target-Action 无法传递额外参数），此时所谓的最佳实践就是：

  1. 不带参数
  2. 只声明 sender 参数

Reference

@objc and dynamic

]]> <hr> <p>自 Swift 问世以来，于 iOS 中的运用在很长的一段时间内就注定离不开与 Objective-C 的混编问题。而如何让广大开发者更快地接受并逐步使用这个“亲儿子”，一定程度上会受到它的操作难度的影响。官方也给出了他们的解决方案：编译器标识符 + 混编头文件。即：</p> <ul> <li><code>XXX-Swift.h</code>（可在编译设置「Generated Header Name」中修改名称） 由编译器自动生成可供 Objective-C 使用的 Swift 接口（前提是为能够桥接到 Objective-C 的接口加上 <code>public @objc</code>）</li> <li><code>XXX-Bridging-Header.h</code> （可在编译设置「Objective-C Bridging Header」中修改路径）管理能被 Swift 访问的 Objective-C 接口</li> </ul> <p>如果你经历过初期的阵痛，就一定会疯狂吐槽因 Xcode 的缓存导致 <code>XXX-Swift.h</code> 无法即使更新而出现的各种莫名其妙的编译错误，对于同一个模块里必须加 public 才能识别的限制使组件封装性被破坏的神奇操作亦让人叫苦不迭，🤣</p> <p>那么在 <code>@objc</code> 背后发生了什么？<code>dynamic</code> 又有什么作用？调用环境的不同行为是否一致呢？让我们一探究竟！<br> ⌈iOS⌋记一次遇到的优先级反转问题 https://zeroonet.com/2024/04/10/a-thread-priority-inversion/ 2024-04-09T16:00:00.000Z 2024-04-15T02:02:11.040Z

优先级反转是一个出乎意料的多线程任务调度状态，往往出现于高优先级任务等待低优先级释放临界资源。同时，该次优先级任务被次高优先级任务抢占打断执行，导致次高优先级任务先于高优先级任务执行。优先级反转带来的程序问题可大可小，因为任务的延迟执行很难被察觉（火星探测器上的那次绝对是最值钱的一次，🤣），如下文中提到的这个🌰。

时灵时不灵的 Thread Performance Checker

Xcode 在 Debug 环境下提供了一个「Thread Performance Checker」，可以帮助开发者诊断多线程性能问题。不过如果以遇到的这个问题来看的话，它可能需要调试机的系统提供一些服务支持。示例代码如下：

1
2
3
DispatchQueue(label: "X", qos: .userInitiated).async {
    let data = try Data(contentsOf: url)
}

在具体说明问题之前，先补充说明一下。Data 的 contentsOf 初始化方法除了可以直接读取本地文件 URL 的数据以外，还可以请求 URL 的数据。如果你直接在主线程中使用后者，你会收到下面这个日志提示：

Synchronous URL loading of {url} should not occur on this application’s main thread as it may lead to UI unresponsiveness. Please switch to an asynchronous networking API such as URLSession.

结合优先级反转问题本身的提示，我们可以得知 Data(contentsOf: remoteURL) 发生了什么：

Thread Performance Checker: Thread running at User-initiated quality-of-service class waiting on a lower QoS thread running at Default quality-of-service class. Investigate ways to avoid priority inversions.

即开启一个 qos 为 default 的队列同步执行 remoteURL 的数据请求，这也是导致优先级反转的根本原因。奇怪的地方在于 iOS 16.7.7 上 Xcode 并没能诊断出此问题，而在 iOS 17.3 上将它暴露了出来。问题的解决方式也很容易，当 url 不是 fileURL 时，自行开启异步下载任务。

总结

老实说，从一开始并没有留意到 contentsOf 会自动请求 URL 数据的特性。如果从业务角度“狡辩”，在写下这段代码时并不会存在 remoteURL 的这一可能性。而随着业务本身的迭代，在某个版本后支持了这个选项，从功能验收来看也没问题就一直忽略了这个 API 的使用陷阱。但是从逻辑的完整性来看，remoteURL 的处理本就应该是不可或缺的一步。任重道远，继续修炼～

]]> <hr> <p>优先级反转是一个出乎意料的多线程任务调度状态，往往出现于高优先级任务等待低优先级释放临界资源。同时，该次优先级任务被次高优先级任务抢占打断执行，导致次高优先级任务先于高优先级任务执行。优先级反转带来的程序问题可大可小，因为任务的延迟执行很难被察觉（火星探测器上的那次绝对是最值钱的一次，🤣），如下文中提到的这个🌰。<br> ⌈iOS⌋为你的 UIView 加上 TouchUpInside 事件和高亮效果 https://zeroonet.com/2024/03/27/view-highlighted-touch-up-inside/ 2024-03-26T16:00:00.000Z 2024-04-09T02:06:08.963Z

在 Apple 提供的 UI 开发套件中，UIButton 是一个比较特殊的存在。在系统默认样式下，当用户点击时会有一个文本或者图片透明度变化的高亮效果。这个简单的交互行为能够一定程度上提升用户的使用体验，因为它含蓄地提醒了某个功能区的响应范围。不过遗憾的是这个特性并没有推广开来，UIButton 自身也是缺胳膊少腿的。而隔壁 Google 在自家 App 上已经把它玩出花儿来了，君不见那 Gmail 按钮按下时水波已经荡漾在了用户心头，而自家“孩子”却依旧像是事不关己油盐不进？

好好好！既如此，那就不妨让我们花点时间完成设计师想要的点点交互效果。

接口设计

按照之前的规划，我们打算让所有的 UIView 都具备这个接口，因此把它做为扩展方法再适合不过了。这里有提到目前主流的添加扩展方法的套路，此处就不再赘述了，于是就有了下面的这样一段接口声明：

1
2
3
extension Zonable where Base: UIView {
    func onTouchUpInside(_ action: @escaping () -> Void) {}
}

调用者只需要将事件的处理行为通过闭包参数传入即可。更近一步，UIButton 的 Target-Action 模式在使用过程中是支持移除的。虽然在实际的开发中很少用到相关 API，但从完备性上来看应当支持，于是我们的接口则可以变为这样：

1
2
3
4
5
6
7
8
9
10
11
12

protocol Removable {
    var isRemoved: Bool { get }

    func remove()
}

extension Zonable where Base: UIView {
    @discardableResult
    func onTouchUpInside(_ action: @escaping () -> Void) -> some Removable {}
}

注意，此处使用 some 显式告知编译器使用 Opaque Return Type 而非 Existential Type，这能让我们在 Swift 6 到来时省却处理编译错误的工作。当接口使用者需要移除事件时，只需调用返回值的 remove 方法即可。

至此，它已经能够胜任绝大多数的运用场景了。不过，再细想一下，TouchUpInside 的语义是按下并且在视图范围内抬手时触发的事件，那么在界面滚动场景下就很容易被误触了。所以，我们还需要一个角色去协调事件的取消逻辑，并且提供超出视图边界则视为取消的默认实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
protocol MovingCancellable {
    func shouldCancel(in view: UIView, began: CGPoint, moved: CGPoint) -> Bool
}

struct OutOfBoundsCanceller: MovingCancellable {
    func shouldCancel(in view: UIView, began: CGPoint, moved: CGPoint) -> Bool {
        !view.bounds.contains(moved)
    }
}

@discardableResult
func onTouchUpInside(
    canceller: some MovingCancellable = OutOfBoundsCanceller(),
    _ action: (() -> Void)?
) -> some Removable {}

而对于界面滚动的场景，我们提供一个滑动阈值取消器即可：

1
2
3
4
5
6
7
struct OutOfValueCanceller: MovingCancellable {
    let value: CGFloat

    func shouldCancel(in view: UIView, began: CGPoint, moved: CGPoint) -> Bool {
        abs(moved.x - began.x) > value || abs(moved.y - began.y) > value
    }
}

功能实现

在不改变视图层级的前提下，事件触发的载体我们自然而然地会想到 UIGestureRecognizer。它可以让我们知道手势触发的各个阶段，并且天然绑定了响应的视图，这也为后续做高亮效果提供了便捷。不过，系统内置的手势识别器无法满足需求，需要我们自定义。为了提供效率，没有必要每一个 action 都添加一个手势，这就要求自定义手势支持触发多个 action 并且支持移除某个 action。以上林林总总，归结于如下这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// MARK: - TouchUpInside Action
extension Zonable where Base: UIView {
    /// Add touchUpInside event action like UIButton with highlighted status.
    ///
    /// - Parameters:
    ///   - canceller: cancel touch up inside event when touches moved. New value will override old value.
    ///   - action: touchUpInside event handler.
    /// - Returns: A removable token to remove event handler.
    @discardableResult
    func onTouchUpInside(
        canceller: some MovingCancellable = OutOfBoundsCanceller(),
        _ action: (() -> Void)?
    ) -> some Removable {
        var modified: Bool = false
        if !base.isUserInteractionEnabled {
            base.isUserInteractionEnabled = true
            modified = true
        }

        let gesture = base.gestureRecognizers?.first(
            where: { $0 is __Z_TouchUpInsideGR }
        ) as? __Z_TouchUpInsideGR ?? {
            let value = __Z_TouchUpInsideGR(canceller: canceller)
            value.onBegan = {
                guard let view = $0.view else { return }
                view.alpha *= 0.5
            }
            value.onCancelled = {
                guard let view = $0.view else { return }
                view.alpha *= 2
            }

            // Add default highlighted status.
            let highlightAction = _Action(handler: value.onCancelled)
            value.append(action: highlightAction)
            base.addGestureRecognizer(value)
            return value
        }()
        gesture.canceller = canceller
        let action = _Action { _ in action?() }
        gesture.append(action: action)
        return _Remover { [weak base, weak gesture] in
            gesture?.remove(action: action)

            // Destory gesture if user added actions removed.
            if let gesture, gesture.actions.count == 1 {
                base?.isUserInteractionEnabled = !modified
                base?.removeGestureRecognizer(gesture)
            }
        }
    }

    private final class _Remover: Removable {
        let handler: () -> Void
        init(handler: @escaping () -> Void) {
            self.handler = handler
        }

        var isRemoved = false

        func remove() {
            guard !isRemoved else { return }
            isRemoved = true
            handler()
        }
    }

    private typealias _Handler = (__Z_TouchUpInsideGR) -> Void

    private struct _Action: Equatable {
        static func == (lhs: _Action, rhs: _Action) -> Bool { lhs.id == rhs.id }

        let id = UUID().uuidString
        let handler: _Handler?
    }

    private final class __Z_TouchUpInsideGR: UIGestureRecognizer, UIGestureRecognizerDelegate {
        var onBegan: _Handler?
        var onCancelled: _Handler?
        var canceller: MovingCancellable
        private(set) var actions: [_Action] = []
        init(canceller: some MovingCancellable) {
            self.canceller = canceller
            super.init(target: nil, action: nil)
            delegate = self
            cancelsTouchesInView = false
            addTarget(self, action: #selector(_action))
        }

        override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) {
            super.touchesBegan(touches, with: event)
            _start = touches.first?.location(in: view) ?? .zero
            state = .began
        }

        override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent) {
            super.touchesMoved(touches, with: event)
            guard let view = view, let point = touches.first?.location(in: view) else { return }
            if canceller.shouldCancel(
                in: view,
                began: _start,
                moved: point
            ) { state = .cancelled }
        }

        override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent) {
            super.touchesCancelled(touches, with: event)
            state = .cancelled
        }

        override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent) {
            super.touchesEnded(touches, with: event)
            state = .ended
        }

        func gestureRecognizer(
            _ gestureRecognizer: UIGestureRecognizer,
            shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer
        ) -> Bool { true }

        func append(action: _Action) {
            actions.append(action)
        }

        func remove(action: _Action) {
            guard let idx = actions.firstIndex(where: { $0 == action }) else { return }
            actions.remove(at: idx)
        }

        @objc
        private func _action(sender: UIGestureRecognizer) {
            switch sender.state {
            case .began: onBegan?(self)
            case .possible, .changed: break
            case .cancelled, .failed: onCancelled?(self)
            case .ended: actions.forEach { $0.handler?(self) }
            @unknown default: break
            }
        }

        private var _start: CGPoint = .zero
    }
}

总结

这个功能点很简单，但我们依旧经历了需求分析、接口设计与实现三个阶段。理清思路之后，每个步骤都显得游刃有余。而在实际的工作当中，我们常常忽略掉这样的一个过程，就会在编码完成之后的测试阶段发现这样或者那样的接口设计与实现上的问题。或许这就是 TDD 的魅力，让我们在动手之前仔细斟酌方案的全面性，极大程度上避免了实施过程中的沉没成本。话说回来，这个接口还存在一个问题，那就是高亮效果是内部定死无法自定义的。如果我们谨遵 POP 思想去扩展接口的话，无非就是一个 Highlighted 协议的事，聪明如你一定可以信手拈来，🤪

]]> <hr> <p>在 Apple 提供的 UI 开发套件中，UIButton 是一个比较特殊的存在。在系统默认样式下，当用户点击时会有一个文本或者图片透明度变化的高亮效果。这个简单的交互行为能够一定程度上提升用户的使用体验，因为它含蓄地提醒了某个功能区的响应范围。不过遗憾的是这个特性并没有推广开来，UIButton 自身也是缺胳膊少腿的。而隔壁 Google 在自家 App 上已经把它玩出花儿来了，君不见那 Gmail 按钮按下时水波已经荡漾在了用户心头，而自家“孩子”却依旧像是事不关己油盐不进？</p> <p>好好好！既如此，那就不妨让我们花点时间完成设计师想要的点点交互效果。<br> ⌈iOS⌋对 WKWebView 截图并生成视频的一种姿势 https://zeroonet.com/2024/01/23/webview-snapshot-to-video/ 2024-01-22T16:00:00.000Z 2024-01-23T07:31:49.584Z

或许你有过这样的使用体验：当你看完某 App 的年度报告之后，会有一个交互按钮支持你生成视频并保存到相册。当你点击并经过一定的等待时间之后，你会发现相册里多了一段内容为自动翻页的年度报告视频。

谓之何解？照 WKWebView 且使动之为之一途。

WKWebView 截图

毫无疑问，经历过 WKWebView 截长图需求的开发者都会觉得这是个不简单的话题。好消息是我们这里只探讨对当前显示区域的截图，借助其特有的相关 API，很容易办到：

1
2
3
4
5
// iOS 11+
let config = WKSnapshotConfiguration
// 设置截图的最终宽度，如果显示区域与之有出入，将会等比例缩放。
config.snapshotWidth = width
webView.takeSnapshot(with: config) { image, _ in }

现在，我们不妨将时序和截图逻辑封装起来，向使用方不断输出帧序列，并告知当前的帧索引：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
class FrameSampler: NSObject {
    let url: URL
    /// 容器大小
    let size: CGSize
    let timeInterval: DispatchTimeInterval
    /// 主线程回调
    let completion: Completion
    init(
        url: URL,
        size: CGSize,
        timeInterval: DispatchTimeInterval,
        completion: @escaping Completion
    ) {
        self.url = url
        self.size = size
        self.timeInterval = timeInterval
        self.completion = completion
        super.init()
    }

    func sample(ticker: @escaping (UIImage, Int) -> Void) {
        _ticker = ticker
        _index = 0

        // 加载 WKWebView
    }

    private var _ticker: ((UIImage, Int) -> Void)?
    private var _index = 0
    private lazy var _timer: DispatchSourceTimer = {
        let width = size.width
        let result = DispatchSource.makeTimerSource(queue: .main)
        result.schedule(deadline: .now(), repeating: timeInterval)
        result.setEventHandler { [weak self] in
            let config = WKSnapshotConfiguration()
            config.snapshotWidth = width
            self?._webView.takeSnapshot(with: config) { image, _ in
                guard let self else { return }
                self._ticker?(image, self._index)
                self._index += 1
            }
        }
        return result
    }
}

extension FrameSampler: WKNavigationDelegate {
    func webView(
        _ webView: WKWebView,
        decidePolicyFor navigationAction: WKNavigationAction,
        decisionHandler: @escaping (WKNavigationActionPolicy) -> Void
    ) {
        let url = navigationAction.request.url?.absoluteString ?? ""

        // 根据 url 决定什么时候开始，什么时候结束，什么时候取消
        guard let action = _Action(rawValue: url) else {
            decisionHandler(.allow); return
        }

        switch action {
        case .start:
            _timer.activate()
        case .stop:
            _reset()
            completion(.success(()))
        case .cancel:
            _reset()
            completion(.failure(.frontendCancelled))
        }

        decisionHandler(.cancel)
    }

    private func _reset() {
        _timer.cancel()
        _ticker = nil
        _webView.removeFromSuperview()
    }

    private enum _Action: String {
        case start = "YourStartURL"
        case stop = "YourStopURL"
        case cancel = "YourCancelURL"
    }
}

视频合成

在上一步中，我们得到了想要帧序列，现在只需要将其按时间顺序导出为动画并合成音频即可大功告成。对于音频需要注意的是，其长度和视频本身不一定对等。故在例程中当音频长度小于视频时，就循环插入音轨。

这里，我们先拆分整个视频合成流程中涉及到的角色：

  • CIContext：它将通过 Metal 将 UIImage 转换为 CVPixelBuffer
  • AVAssetWriterInput、AVAssetWriterInputPixelBufferAdaptor 和 AVAssetWriter：按照时序将帧序列合成动画
  • AVMutableComposition：将动画和音频合成为视频
  • AVAssetExportSession：当视频文件导出到指定路径

UIImage to CVPixelBuffer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class VideoComposer {
    // 如果为 nil，可让 VideoComposer 初始化失败
    private var context = MTLCreateSystemDefaultDevice().map { CIContext(mtlDevice: $0) }

    private func _compose(image: UIImage, index: Int64) {
        guard
            videoInput.isReadyForMoreMediaData,
            let pool = videoAdaptor.pixelBufferPool,
            let cgImage = image.cgImage
        else { return }
        let bitmap = CIImage(cgImage: cgImage)
        let present = CMTimeMake(value: index, timescale: frameRate)
        guard let buffer = bitmap.toPixelBuffer(context: context, pool: pool) else { return }
        videoAdaptor.append(buffer, withPresentationTime: present)
    }
}

extension CIImage {
    func toPixelBuffer(
        context: CIContext,
        pool: CVPixelBufferPool
    ) -> CVPixelBuffer? {
        var buffer: CVPixelBuffer?
        CVPixelBufferPoolCreatePixelBuffer(kCFAllocatorDefault, pool, &buffer)
        guard let buffer = buffer else { return nil }
        context.render(self, to: buffer)
        return buffer
    }
}

Init AVAssetWriterInput、AVAssetWriterInputPixelBufferAdaptor、AVAssetWriter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

init?(many parameters) {
    guard
        let preset = AVOutputSettingsAssistant.availableOutputSettingsPresets().first,
        var videoSettings = AVOutputSettingsAssistant(preset: preset)?.videoSettings
    else { return nil }
    videoSettings[AVVideoWidthKey] = width as NSNumber
    videoSettings[AVVideoHeightKey] = height as NSNumber

    videoInput = AVAssetWriterInput(
        mediaType: .video,
        outputSettings: videoSettings
    )
    // ⚠️ Important
    // To ensure optimal behavior,
    // don’t set the value of this property and performsMultiPassEncodingIfSupported to true at the same time.
    // videoInput.performsMultiPassEncodingIfSupported = true
    videoInput.expectsMediaDataInRealTime = true
    videoAdaptor = AVAssetWriterInputPixelBufferAdaptor(
        assetWriterInput: videoInput,
        sourcePixelBufferAttributes: [
            kCVPixelBufferWidthKey as String: width as NSNumber,
            kCVPixelBufferHeightKey as String: height as NSNumber,
            kCVPixelBufferPixelFormatTypeKey as String: kCVPixelFormatType_32ARGB as NSNumber,
        ]
    )

    let writer = try? AVAssetWriter(outputURL: tmpVideoURL, fileType: .mp4)
    guard let writer = writer, writer.canAdd(videoInput) else { return nil }
    writer.add(videoInput)

    guard writer.startWriting() else { return nil }
    writer.startSession(atSourceTime: .zero)
}

Merge audio track and export

在帧序列处理完成之后，进行音轨的合成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
private func _finish(index: Int64, completion: @escaping Completion) {
    videoInput.markAsFinished()
    writer.endSession(atSourceTime: CMTimeMake(value: index, timescale: frameRate))
    writer.finishWriting { [weak self] in
        self?._merge(completion: completion)
    }
}

private func _merge(completion: @escaping Completion) {
    guard let audioURL = audioURL else {
        try? FileManager.default.copyItem(at: tmpVideoURL, to: outputURL)
        completion(.success(()))
        return
    }

    let videoAsset = AVAsset(url: tmpVideoURL)
    let audioAsset = AVAsset(url: audioURL)
    let composition = AVMutableComposition()

    guard
        let cVideoTrack = composition.addMutableTrack(
            withMediaType: .video,
            preferredTrackID: kCMPersistentTrackID_Invalid
        ),
        let cAudioTrack = composition.addMutableTrack(
            withMediaType: .audio,
            preferredTrackID: kCMPersistentTrackID_Invalid
        ),
        let aVideoTrack = videoAsset.tracks(withMediaType: .video).first,
        let aAudioTrack = audioAsset.tracks(withMediaType: .audio).first
    else {
        completion(.failure(.exportFailed("音视频通道读取失败")))
        return
    }

    cVideoTrack.preferredTransform = videoAsset.preferredTransform

    let videoDuration = videoAsset.duration
    let audioDuration = audioAsset.duration

    do {
        try cVideoTrack.insertTimeRange(
            CMTimeRange(start: .zero, duration: videoDuration),
            of: aVideoTrack,
            at: .zero
        )
    } catch {
        completion(.failure(.exportFailed("视频通道合成失败：\(error.localizedDescription)")))
        return
    }

    let audioTimeScale = aAudioTrack.naturalTimeScale
    var timestamps: [(CMTimeRange, CMTime)] = []
    // 如果视频比音频长，则循环插入音轨。
    if videoDuration.seconds > audioDuration.seconds {
        let cycleCount = videoDuration.seconds / audioDuration.seconds
        let cycleCountInt = Int(cycleCount)
        for index in 0..<cycleCountInt {
            let startTime = CMTime(
                seconds: audioDuration.seconds * Double(index),
                preferredTimescale: audioTimeScale
            )
            timestamps.append((CMTimeRange(start: .zero, duration: audioDuration), startTime))
        }

        let reseted = (cycleCount - Double(cycleCountInt)) * audioDuration.seconds
        let timeRange = CMTimeRange(
            start: .zero,
            duration: CMTime(seconds: reseted, preferredTimescale: audioTimeScale)
        )
        let startTime = CMTime(
            seconds: audioDuration.seconds * Double(cycleCountInt),
            preferredTimescale: audioTimeScale
        )
        timestamps.append((timeRange, startTime))
    } else {
        timestamps.append((CMTimeRange(start: .zero, duration: videoDuration), .zero))
    }

    for timestamp in timestamps {
        do {
            try cAudioTrack.insertTimeRange(timestamp.0, of: aAudioTrack, at: timestamp.1)
        } catch {
            completion(.failure(.exportFailed("音频通道合成失败：\(error.localizedDescription)")))
            return
        }
    }

    guard
        let exportSession = AVAssetExportSession(asset: composition, presetName: AVAssetExportPresetHighestQuality)
    else {
        completion(.failure(.exportFailed("视频导出会话创建失败")))
        return
    }
    exportSession.outputFileType = outputType
    exportSession.outputURL = outputURL
    exportSession.shouldOptimizeForNetworkUse = true
    exportSession.exportAsynchronously { [weak exportSession] in
        guard exportSession?.status == .completed else {
            completion(.failure(.exportFailed(exportSession?.error?.localizedDescription ?? "未知错误")))
            return
        }
        completion(.success(()))
    }
}

局限性

由于帧序列的处理是耗时操作，所以需要放在后台线程中进行。但是帧序列会不断的产生，一定存在消耗不及时的情况。为了避免这种情况，需要在异步串行队列中调用 _compose 和 _finish：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private lazy var operationQueue: OperationQueue = {
    let result = OperationQueue()
    // ⚠️ 需要指定 qos，避免在主线程中执行，导致和主线程 WKWebView 死锁。
    result.qualityOfService = .userInitiated
    // ⚠️ 不能开启并发，AVAssetWriterInput 和 AVAssetWriterInputPixelBufferAdaptor 非线程安全。
    result.maxConcurrentOperationCount = 1
    return result
}()

func compose(image: UIImage, index: Int64) {
    operationQueue.addOperation { [weak self] in
        self?._compose(image: image, index: index)
    }
}

/// 主线程回调
func finish(index: Int64, completion: @escaping Completion) {
    operationQueue.addOperation { [weak self] in
        let completion = { result in DispatchQueue.main.async { completion(result) } }
        self?._finish(index: index, completion: completion)
    }
}

如果帧率和分辨率要求过高，当前设备吞吐速度无法满足，就会不断有任务被 pending，最终导致 App 因 Out of Memory 被系统终止运行。

总结

相比于需要对视频标记进行加工的第三方框架方案，对网页进行截图并合成音轨生成视频无疑是更为简单和通用的方案。不过在你接受它之前，需要先考虑它的“创作”时间和在不同时代设备上的兼容问题。如果你要求过高，它随时可能撂挑子～

]]> <hr> <p>或许你有过这样的使用体验：当你看完某 App 的年度报告之后，会有一个交互按钮支持你生成视频并保存到相册。当你点击并经过一定的等待时间之后，你会发现相册里多了一段内容为自动翻页的年度报告视频。</p> <p>谓之何解？照 WKWebView 且使动之为之一途。<br> ⌈iOS⌋IAP 价格国际化与优惠问题 https://zeroonet.com/2024/01/15/iap-price-and-discount/ 2024-01-15T02:48:28.087Z 2024-01-15T06:14:35.765Z

对于商品落地页而言，价格无疑是最重要的信息。而 IAP 商品却是在 App Store Connect 后台进行管理的，Server 是无法拿到相关信息的。一种最简单的方式是：在商品创建的同时，将商品的价格信息注册到 Server，然后 Frontend 与 Server 通信获取落地页信息。但这显然存在问题，因为它无法处理实时价格、价格国际化和折扣优惠。目前唯一的解决方式是 Native 通过 StoreKit 获取商品信息，并将其告知 Frontend。

价格国际化

如果你的 App 只在某一个地区或者国家上架且不会进行商品价格的调整，那么向 Server 注册价格让 Frontend 去获取的方式是最简单的展示价格的方式。但如果前提条件不成立的话，那么这就不是一个好的方式，而是应当让 Native 通过以下方式去获取并以 Javascript 回调同步给 Frontend：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

// 建议与 Frontend 通信的插件机制，通过正则匹配 url 路由
// 插件本身是以 ObjC 运行时的方式在 WebView 创建时动态注入
class IAPProductPlugin: WebViewPlugin, WebViewURLHandler {
    let urlPattern = "^native.app://webview/iap_product"

    override var urlHandler: WebViewURLHandler? { self }

    func handle(_ url: URL) {
        guard let idString = url.bay.getQuery(by: "product_ids") else { return }
        ProductRequest.start(idString.toArray) {
            // Javascript callback with specified data model.
        }
    }
}

private class ProductRequest: NSObject, SKProductsRequestDelegate {
    private static var current: ProductRequest?

    static func start(_ identifiers: [String], completion: @escaping FetchCompletion) {
        current?.request?.cancel()

        let request = ProductRequest(identifiers: identifiers)
        self.current = request

        request.start { result in
            self.current = nil
            completion(result)
        }
    }

    private let identifiers: Set<String>
    private var completion: FetchCompletion?
    private var request: SKProductsRequest?
    private var pendingProducts: [SKProduct] = []

    private init(identifiers: [String]) {
        self.identifiers = Set(identifiers)
    }

    private func start(_ completion: @escaping FetchCompletion) {
        self.completion = { [weak self] in
            self?.pendingProducts = []
            completion($0)
        }
        let request = SKProductsRequest(productIdentifiers: identifiers)
        self.request = request

        request.delegate = self
        request.start()
    }

    // MARK: - SKProductsRequestDelegate

    fileprivate func productsRequest(_ request: SKProductsRequest, didReceive response: SKProductsResponse) {
        pendingProducts.append(contentsOf: response.products)
    }

    fileprivate func requestDidFinish(_ request: SKRequest) {
        let identifiers = Set(pendingProducts.map { $0.productIdentifier })
        guard identifiers == self.identifiers else {
            // handle failure
            return
        }

        // handle success
    }

    fileprivate func request(_ request: SKRequest, didFailWithError error: Error) {
        // handle failure
    }
}

其中 SKProduct 中包含了价格信息、货币单位和符号：

1
2
3
4
class SKProduct: NSObject {
    var price: NSDecimalNumber { get } // price.doubleValue
    var priceLocale: Locale { get } // priceLocale.currencySymbol(¥) / priceLocale.currencyCode(CNY/JPY)
}

注意，这里的价格地区与 AppleID 分区相关。StoreKit 本身存在缓存，首次获取相对较慢。如果数据没有刷新，可以重新登录 AppleID 进行重试。

优惠

通常出于运营获客的目的，商品在特定时间段内购买可以享受折扣或者优惠。在 App Store Connect 后台，我们可以为订阅型商品创建「推介促销优惠（Introductory Offers）」和「促销优惠（Promotional Offers）」。前者每个 Apple ID 只能享受一次，后者由开发者的 Server 管理享受资格。因为官方的数据分析会有一定延迟，所以产品会希望 Server 能够准确打点用户的实际购买支付价格（需要考虑优惠）用以分析产品运营活动。很遗憾地是 Server 无法知道用户的实际支付价格，只能通过解析收据从 is_trial_period 和 is_in_intro_offer_period 判断用户是否享受了「推介促销优惠」，即需要 Native 将「推介促销优惠」后的价格上报给 Server。大体流程如下：

  1. 在验证收据时，通过 SKPaymentTransaction.payment.productIdentifier 获取到商品 ID。
  2. 使用 SKProductsRequest 通过商品 ID 获取到商品现存的优惠或者折扣信息。
  3. 如果存在「推介促销优惠」，则在验证收据时带上优惠后的价格信息，Server 通过分析收据，判断用户的实付价格并上报打点。

SKProduct 中的优惠信息如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class SKProduct: NSObject {
    // iOS 11.2+
    var introductoryPrice: SKProductDiscount? { get } // 推介促销优惠，同一地区同一时间短只会存在一个。
    // iOS 12.2+
    var discounts: [SKProductDiscount] { get } // 促销优惠
}

// iOS 11.2+
class SKProductDiscount : NSObject {
    var price: NSDecimalNumber { get }
    var priceLocale: Locale { get }
    // iOS 12.2+，推介促销优惠为 nil
    var identifier: String? { get }
    // 优惠周期
    var subscriptionPeriod: SKProductSubscriptionPeriod { get }
    var numberOfPeriods: Int { get }
    // 支付方式：免费试用/先用后付/随用随付
    var paymentMode: SKProductDiscount.PaymentMode { get }
    // iOS 12.2+，优惠类型：推介促销优惠/促销优惠
    var type: SKProductDiscount.`Type` { get }
}

促销优惠的使用相对更为复杂，这里是官方文档，流程描述如下：

  1. 在 App Store Connect 后台创建订阅密钥，下载该密钥并交给 Server。
  2. 在用户购买商品时，Server 判断用户可以享受的优惠信息。
  3. Native 通过商品 ID 获取所有的促销优惠信息，如果该用户可以使用其中某个优惠，则将其 ID 信息发送给 Server 让其通过订阅密钥进行签名。
  4. Native 通过签名信息生成 SKPaymentDiscount 实例对象，在将购买加入到 IAP 队列之前，赋值给 payment.paymentDiscount。
  5. 在验证收据时，Native 自然就可以通过 SKPaymentTransaction.payment.paymentDiscount.identifier 匹配到具体的促销优惠信息。（如果是「推介促销优惠」，paymentDiscount 为 nil。）

总结

其实从流程上来看，整个价格和优惠的适配过程并不复杂，关键在于可回归测试版本让人莫名其妙。最开始在购买过程中，Debug、AdHoc 和 TestFlight 版本上均无法正确展示「推介促销优惠」，在已经上线的 App Store 版本上可以使用优惠。在这个用于测试的版本上线后，TestFlight 版本就可以正常展示「推介促销优惠」了！WTF！相关论坛有不少人提出了如何测试优惠的相关问题（TestFlight 不可用），保不准是因为延迟或者其他乱七八糟的缓存问题导致的，或许我们都已经习惯了 IAP 带来的各种“惊喜”，🤣

]]> <hr> <p>对于商品落地页而言，价格无疑是最重要的信息。而 IAP 商品却是在 App Store Connect 后台进行管理的，Server 是无法拿到相关信息的。一种最简单的方式是：在商品创建的同时，将商品的价格信息注册到 Server，然后 Frontend 与 Server 通信获取落地页信息。但这显然存在问题，因为它无法处理实时价格、价格国际化和折扣优惠。目前唯一的解决方式是 Native 通过 StoreKit 获取商品信息，并将其告知 Frontend。<br> ⌈iOS⌋列表视图的局部刷新实践 https://zeroonet.com/2023/12/28/partly-refresh/ 2023-12-28T05:44:22.868Z 2023-12-28T07:44:21.965Z

iOS 中的列表视图：UICollectionView 和 UITableView 可以在兼顾性能的同时让开发者比较容易地搭建复杂的 App UI 界面，并且用户的交互行为也变得顺畅。如果要百尺竿头更进一步的话，我们需要按需刷新列表而不是一股脑儿地调用 reloadData。在 iOS 13 之前，我们可以通过 IndexPath 或者 IndexSection 来进行局部刷新，但却几乎总是会遇到这个崩溃：

Terminating app due to uncaught exception’NSInternalInconsistencyException’,reason: ‘Invalid update: invalid number of sections. The number of sections contained in the tableView view after the update (1) must be equal to the number of sections contained in the tableView view before the update (1), plus or minus the number of sections inserted or deleted (0 inserted, 1 deleted).

而造成崩溃本质上的原因是模型层和渲染层的数据不一致。考虑到了开发者的“民间疾苦“，在 iOS 13 之后，Apple 提供了一套新的 API 用于 Diff 数据源，还附送优雅的刷新动画，You deserve it!

不能协议化的 Section 和 Item

现在，我们可以不用实现数据源协议，而是通过组合的理念使用 UICollectionViewDiffableDataSource 和 UITableViewDiffableDataSource 关联的 SectionIdentifierType 和 ItemIdentifierType 来进行管理。它的初始化过程神似 Rxcocoa，如下以 UICollectionViewDiffableDataSource（后续代码均以 UICollectionView 进行说明）举例：

1
2
3
4
5
UICollectionViewDiffableDataSource<Section, Item>(
    collectionView: collectionView
) { collectionView, indexPath, item in
    // return an instance of UICollectionViewCell.
}

因为需要做 Diff 运算，SectionIdentifierType 和 ItemIdentifierType 的范型均被要求遵循 Hashable 协议。这导致 Section 和 Item 必须是具体的类型，而不能使用协议进行声明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
protocol Section: Hashable {}
protocol Item: Hashable {}

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())

/*
  ❌ build error：
  Cannot infer type of closure parameter 'collectionView' without a type annotation
  Cannot infer type of closure parameter 'indexPath' without a type annotation
  Cannot infer type of closure parameter 'itemIdentifier' without a type annotation
  Type 'any Section' cannot conform to 'Hashable'
  Only concrete types such as structs, enums and classes can conform to protocols
*/
let source = UICollectionViewDiffableDataSource<PartlyRefreshSection, PartlyRefreshItem>(
    collectionView: collectionView
) { collectionView, indexPath, itemIdentifier in UICollectionViewCell() }

使用基类封装局部刷新行为

首先，我们定义协议 CVPartlyRefreshable 来表示某个支持局部刷新的界面：

1
2
3
4
5
6
7
8
9
10
11
12
13
protocol CVPartlyRefreshable: AnyObject {
    var collectionView: UICollectionView { get }
    var dataSource: UICollectionViewDiffableDataSource<CVPartlyRefreshSection, CVPartlyRefreshItem> { get }
    var operationQueue: OperationQueue { get }

    var sections: [CVPartlyRefreshSection] { get set }
}

// ❗️刷新操作默认执行队列为主队列，实质上支持后台线程，但在实践过程中，发现某些动画效果与在主线程中进行表现不一致。
// ❗️且如果在后台线程中进行，需要时刻注意访问 UI 元素的问题。
extension CVPartlyRefreshable {
    var operationQueue: OperationQueue { .main }
}

然后由于没有协议化 SectionIdentifierType 和 ItemIdentifierType 这条路，UICollectionView 和 UITableView 只能通过两种不同的基类来定义。它们主要用来表示模型层和公共方法的定义，对于具体的 Cell 实例由子类提供。Section 和 Item 的定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class CVPartlyRefreshItem {
    weak var refresh: CVPartlyRefreshable?

    var onRemove: ((CVPartlyRefreshItem) -> Void)?

    func cell(in collectionView: UICollectionView, at indexPath: IndexPath) -> UICollectionViewCell {
        fatalError()
    }

    func didSelect() {}
}

class CVPartlyRefreshSection: NSObject {
    weak var refresh: CVPartlyRefreshable？

    var onRemove: ((CVPartlyRefreshSection) -> Void)?

    var items: [CVPartlyRefreshItem] = [] {
        didSet {
            items.forEach {
                $0.refresh = refresh
                $0.onRemove = { [weak self] itm in
                    self?.items.removeAll { $0 == itm }
                }
            }
        }
    }
}

Section 和 Item 中 onRemove 和 refresh 是为公共方法提供功能支持的前提条件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
extension CVPartlyRefreshable {
    func append(section: CVPartlyRefreshSection) {
        section.refresh = self
        section.items.forEach { $0.refresh = self }
        section.onRemove = { [weak self] stn in
            self?.sections.removeAll { $0 == stn }
        }
        sections.append(section)
        section.apply()
    }
}

//❗️先操作模型层，然后更新渲染层
//❗️需要异步在主队列里面执行，如果上一个刷新操作未完成，新操作执行时也会导致此前的崩溃。
extension CVPartlyRefreshSection {
    func apply() {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            var snapshot = dataSource.snapshot()
            snapshot.appendSections([self])
            snapshot.appendItems(self.items)
            dataSource.apply(snapshot, animatingDifferences: true)
        }
    }

    func reload() {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            var snapshot = dataSource.snapshot()
            guard let sectionIdx = snapshot.indexOfSection(self) else { return }
            let section = snapshot.sectionIdentifiers[sectionIdx]
            snapshot.reloadItems(snapshot.itemIdentifiers(inSection: section))
            dataSource.apply(snapshot)
        }
    }

    func reload(items: [CVPartlyRefreshItem], completion: (() -> Void)? = nil) {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            // 1. 更新模型层
            self.items = items
            var snapshot = dataSource.snapshot()
            // 2. 找到当前 Section 的索引
            // ⚠️ UITableViewDiffableDataSource 内部会对 Section 和 Item 进行拷贝
            guard
                let sectionIdx = snapshot.indexOfSection(self),
                sectionIdx < snapshot.numberOfSections
            else { return }
            // 3. 获取当前的 Section
            let section = snapshot.sectionIdentifiers[sectionIdx]
            // 4. 删除当前 Section 的所有 Item
            snapshot.deleteItems(snapshot.itemIdentifiers(inSection: section))
            // 5. 添加新的 Item 到 Section
            snapshot.appendItems(items, toSection: section)
            // 7. 应用快照
            dataSource.apply(snapshot, completion: completion)
        }
    }

    func append(
        items: [CVPartlyRefreshItem],
        reloadItem: CVPartlyRefreshItem? = nil,
        removed: [CVPartlyRefreshItem] = [],
        completion: (() -> Void)? = nil
    ) {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            self.items.removeAll { removed.contains($0) }
            self.items.append(contentsOf: items)
            var snapshot = dataSource.snapshot()
            guard
                let sectionIdx = snapshot.indexOfSection(self),
                sectionIdx < snapshot.numberOfSections
            else { return }
            let section = snapshot.sectionIdentifiers[sectionIdx]
            if !removed.isEmpty {
                let deletedItems = removed
                    .compactMap { snapshot.indexOfItem($0) }
                    .map { snapshot.itemIdentifiers[$0] }
                snapshot.deleteItems(deletedItems)
            }
            snapshot.appendItems(items, toSection: section)
            if let reloadItem = reloadItem {
                snapshot.reloadItems([reloadItem])
            }
            dataSource.apply(snapshot, completion: completion)
        }
    }

    func insert(
        item: CVPartlyRefreshItem,
        after: CVPartlyRefreshItem,
        reload: CVPartlyRefreshItem? = nil,
        removed: CVPartlyRefreshItem? = nil,
        completion: (() -> Void)? = nil
    ) {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            guard let afterIndexPath = dataSource.indexPath(for: after) else { return }
            var snapshot = dataSource.snapshot()
            guard
                let sectionIdx = snapshot.indexOfSection(self),
                sectionIdx < snapshot.numberOfSections
            else { return }
            self.items.insert(item, at: afterIndexPath.row + 1)
            self.items.removeAll { $0 == removed }
            if let removed = removed, let removedIdx = snapshot.indexOfItem(removed) {
                snapshot.deleteItems([snapshot.itemIdentifiers[removedIdx]])
            }
            snapshot.insertItems([item], afterItem: after)
            if let reload = reload, let idx = snapshot.indexOfItem(reload) {
                snapshot.reloadItems([snapshot.itemIdentifiers[idx]])
            }
            dataSource.apply(snapshot, completion: completion)
        }
    }

    func remove(items: [CVPartlyRefreshItem], completion: (() -> Void)? = nil) {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            self.items.removeAll(where: { items.contains($0) })
            var snapshot = dataSource.snapshot()
            guard
                let sectionIdx = snapshot.indexOfSection(self),
                sectionIdx < snapshot.numberOfSections
            else { return }
            let allItems = snapshot.itemIdentifiers
            let deletedItems = items.compactMap { snapshot.indexOfItem($0) }.map { allItems[$0] }
            snapshot.deleteItems(deletedItems)
            dataSource.apply(snapshot, completion: completion)
        }
    }

    func remove() {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            var snapshot = dataSource.snapshot()
            guard
                let sectionIdx = snapshot.indexOfSection(self),
                sectionIdx < snapshot.numberOfSections
            else { return }
            onRemove?(self)
            snapshot.deleteSections([snapshot.sectionIdentifiers[sectionIdx]])
            dataSource.apply(snapshot)
        }
    }
}

extension CVPartlyRefreshItem {
    func reload(animated: Bool = true, completion: (() -> Void)? = nil) {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            var snapshot = dataSource.snapshot()
            guard let itemIdx = snapshot.indexOfItem(self), itemIdx < snapshot.numberOfItems else { return }
            snapshot.reloadItems([snapshot.itemIdentifiers[itemIdx]])
            dataSource.apply(
                snapshot,
                animatingDifferences: animated,
                completion: completion
            )
        }
    }

    func remove() {
        refresh?.operationQueue.addOperation { [weak self] in
            guard let self, let dataSource = self.refresh?.dataSource else { return }
            var snapshot = dataSource.snapshot()
            guard let itemIdx = snapshot.indexOfItem(self) else { return }
            onRemove?(self)
            snapshot.deleteItems([snapshot.itemIdentifiers[itemIdx]])
            dataSource.apply(snapshot)
        }
    }
}

总结

回到使用侧，上文的 UICollectionViewCell() 就可以替换为 itemIdentifier.cell(in: collectionView, at: indexPath)。因为 Section 和 Item 与 UICollectionView 和 UITableView 的视图概念划分一一对应，所以如果有相关需求可在基类里面进行扩展，比如 Section 需要 header、footer 和装饰视图。理想情况下，在子线程中进行 dataSource.apply(snapshot) 是更好的选择，但随之带来的问题目前来说暂时没有想到很好的解决方式。👀 插个眼，后面脑筋通畅了再来弥补缺憾！

]]> <hr> <p>iOS 中的列表视图：UICollectionView 和 UITableView 可以在兼顾性能的同时让开发者比较容易地搭建复杂的 App UI 界面，并且用户的交互行为也变得顺畅。如果要百尺竿头更进一步的话，我们需要按需刷新列表而不是一股脑儿地调用 reloadData。在 iOS 13 之前，我们可以通过 IndexPath 或者 IndexSection 来进行局部刷新，但却几乎总是会遇到这个崩溃：</p> <blockquote> <p>Terminating app due to uncaught exception’NSInternalInconsistencyException’,reason: ‘Invalid update: invalid number of sections. The number of sections contained in the tableView view after the update (1) must be equal to the number of sections contained in the tableView view before the update (1), plus or minus the number of sections inserted or deleted (0 inserted, 1 deleted).</p> </blockquote> <p>而造成崩溃本质上的原因是模型层和渲染层的数据不一致。考虑到了开发者的“民间疾苦“，在 iOS 13 之后，Apple 提供了一套新的 API 用于 Diff 数据源，还附送优雅的刷新动画，You deserve it!<br> ⌈iOS⌋从头撸一个播放器 IV(终) —— Github Action 与组件发布 https://zeroonet.com/2023/12/05/zonplayer-part-4/ 2023-12-05T08:03:12.375Z 2023-12-06T10:04:52.917Z

在组件的编码工作完成之后，就需要将代码进行公开托管以供其他开发者使用。作为全球最大的“码农交流”平台，Github 无疑是最好的选择。借助于它的 action，可以自动化地帮助我们完成很多重复性工作，在保证代码质量的同时减轻维护工作的压力。

定义 github 工作流

首先，在仓库根目录下，创建一个名为 .github 的文件夹。然后在 .github 下创建子目录 workflow，其中包含配置文件 build.yaml，用于定义所有的 action。一个典型的例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
name: build

on: [push, pull_request] # 在什么时机下触发 action

jobs:
  run-test:
    runs-on: macos-12
    strategy:
      matrix:
        destination: ["iOS Simulator,name=iPhone 14"]
        swift-version: [5.0]
    steps: # action 列表，依次执行
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.1.2
          bundler-cache: true

接下来就是完善 action 描述，声明 action 名称和需要运行的命令：

  • 添加 SwiftLint 检查：

    1
    2
    - name: Swift Lint
      run: brew install swiftlint && swiftlint lint --strict

  • 清除 Xcode 缓存：

    1
    2
    3
    - name: Clean Xcode DerivedData
      run: |
        rm -rf ~/Library/Developer/Xcode/DerivedData/

  • 安装工程依赖：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # ZonPlayer 工程是基于 pod 组件模版创建，同时通常情况下 Pods 会被 gitignore，因此需要进行 pod install。
    # 但是，Github Runner 默认是没有 cocoapods specs 缓存的，就会导致 pod install 非常耗时，所以需要自定义缓存。
    # ZonPlayer 最终没有添加这两个 action，后续会说明缘由。
    - name: Check Cache
      uses: actions/cache@v2
      id: cocoapods-cache
      with:
        path: Pods
        key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
        restore-keys: |
          ${{ runner.os }}-pods-
    - name: Pod Install
      if: steps.cocoapods-cache.outputs.cache-hit != 'true'
      run: bundle exec pod install

  • 进行单元测试：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # 如果 Pods 被 gitignore 且未进行 pod install，在运行 xcodebuild 相关指令时会报错：
    #** BUILD FAILED **
    # Testing failed:
    # unable to open configuration settings file
    # unable to open configuration settings file
    # Testing cancelled because the build failed.
    # ** TEST FAILED **

    # 笔者最开始未注意这个点，导致 Github Action 有很多此类的失败记录，😅
    - name: Run Unit Tests
      env:
        DESTINATION: platform=${{ matrix.destination }}
        SWIFT_VERSION: ${{ matrix.swift-version }}
      # 命令1：借助 fastlane 进行单元测试
      # 命令2：Xcode 生成的单元测试覆盖率结果无法被 CodeCov 解析，需要借助命令工具 slather 将其解析为 XML 格式。需要在根目录添加一个 .slather.yml 配置文件，其中需要忽略 Example 相关代码。
      run: |
        bundle exec fastlane test_ci
        bundle exec slather

  • 上传单元测试覆盖率到 CodeCov

    1
    2
    3
    4
    - name: Upload coverage reports to Codecov
      uses: codecov/codecov-action@v3
      env:
        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

这些行为还可以用来装饰我们的 README，看着那一个个漂亮的 Badge 就觉得专业和放心。而作为门户的 Logo 肯定是最需要上心的，所以我们选择将它交给 AI 来完成，这可得花费我们巨量的时间：1min 👀。

组件发布

Cocoapods

  • pod spec lint：校验你的 podspec，避免出现组件同名等问题。
  • pod trunk register mailAddress userName –verbose：注册你的邮箱通知。
  • pod trunk me：测试邮件收取
  • pod trunk push XXX.podspec：发布你的组件，完成后，会收到邮件通知。

Carthage

它不需要任何配置文件，而是采用默认规则：在工程中查找同名可见的 Shared Framework Scheme。在 Podfile 中加上以下代码即可：

1
2
3
use_frameworks!

install! 'cocoapods', :share_schemes_for_development_pods => ['ZonPlayer']

在 Xcode 15 (15A240d) 可能会运行报错 error while build iOS app in Xcode : Sandbox: rsync.samba (13105) deny(1) file-write-create，此时关闭 「Build Settings」-「User Script Sandboxing」 即可修复。当你提交完代码之后，执行 carthage update 时会发现始终报错未找到 shared scheme，而在本地运行时又没有什么问题。原因在于上述脚本是作用于 Pods.xcodeproj，而它是被 gitignore。最简单的方式就是让它被 git 跟踪，这样也省去了一开始提到的那两个 github action。

Swift Package Manager

在工程根目录添加名为 Package.swift 的配置文件即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// swift-tools-version: 5.9
import PackageDescription

let package = Package(
    name: "ZonPlayer",
    platforms: [.iOS(.v12)],
    products: [
        .library(name: "ZonPlayer", targets: ["ZonPlayer"]),
    ],
    targets: [
        .target(
            name: "ZonPlayer",
            path: "Sources"
        )
    ]
)

总结

千淘万漉虽辛苦，吹尽狂沙始到金。前后几近两周里的闲暇时间，我们从头撸了一个就目前来看还算能用的播放器：ZonPlayer。工作是吃饭的把式，而终身学习让自己能为社会创造出或多或少的价值或许才是人生的最值得的追求。结果虽难言善美，但这一段经历却是职业生涯颇有意义的印记。旅途还在继续，不能停下脚步，得一直向前，我们下一站再见！

]]> <hr> <p>在组件的编码工作完成之后，就需要将代码进行公开托管以供其他开发者使用。作为全球最大的“码农交流”平台，Github 无疑是最好的选择。借助于它的 action，可以自动化地帮助我们完成很多重复性工作，在保证代码质量的同时减轻维护工作的压力。<br> ⌈iOS⌋从头撸一个播放器 III —— 缓存 https://zeroonet.com/2023/12/01/zonplayer-part-3/ 2023-12-01T07:06:53.997Z 2023-12-05T07:57:00.009Z

对于音视频资源来说，缓存行为分为两种：先下后播和边下边播。前者对于资源本身没有特殊要求，能够通过一个下载任务将数据转换为可播放的媒体文件即可。后者则需要其支持指定范围获取数据，这反应在 URL 响应表现为响应头中键为 accept-ranges 的值是 bytes。为了能描述这两种缓存行为，我们在 Part 1 中定义了 ZPCacheable：它要求遵循者需要实现将 URL 异步转换为 AVURLAsset 的方法。如果过程中发生了错误，则通过 ZonPlayer.Error 这个类型去描述。这得益于 AVURLAsset 天然支持本地文件路径，并且对于流媒体来说如果有缓存需要，只需设置它的 AVAssetResourceLoaderDelegate 就可以接管数据的请求与响应。

先做饭，再吃饭

按照面向协议的套路，我们先给作为厨子的下载器定义协议：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public protocol ZPFileDownloadable {
    var timeout: TimeInterval { get set }

    @discardableResult
    func download(
        with url: URL,
        destination: URL,
        completion: @escaping (Result<Void, ZonPlayer.Error>) -> Void
    ) -> ZPCCancellable
}

public protocol ZPCCancellable {
    var isCancelled: Bool { get }

    /// Cancel an in-process operation.
    func cancel()
}

因为存在当媒体资源还在下载过程中播放器就已经被销毁的情况，所以下载器是可以被取消的。接着，作为盛饭容器的仓库，按照对数据的操作方式描述如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public typealias FileURL = URL
public typealias RemoteURL = URL

public struct File {
    public let location: FileURL
    public init(location: FileURL) {
        self.location = location
    }
}

public protocol ZPFileStorable {
    func create(file: File, with url: RemoteURL, completion: @escaping (Result<File, ZonPlayer.Error>) -> Void)
    func read(with url: RemoteURL) -> Result<File?, ZonPlayer.Error>
    func fileURL(url: RemoteURL) -> Result<FileURL, ZonPlayer.Error>
    func delete(with url: RemoteURL, completion: (() -> Void)?)
    func deleteAll(completion: (() -> Void)?)
}

extension ZPFileStorable {
    public func delete(with url: RemoteURL) {
        delete(with: url, completion: nil)
    }

    public func deleteAll() {
        deleteAll(completion: nil)
    }
}

可以看到，一个 URL 最终肯定会对应仓库的一个文件路径，因此我们还需要提供一种将 URL 转换为文件名的映射规则。这里需要注意的是，文件后缀一定是 AVPlayer 支持的格式，否则将无法进行播放：

1
2
3
4
5
6
7
public protocol ZPCFileNameConvertible {
    /// Convert url to file name.
    ///
    /// - Important: File name must contain valid extension to help player playback, eg: .mp3, .mp4.
    /// ZPC.Config treated url path extension as file extension by default.
    func map(url: URL) -> String
}

一般而言，将 URL 完整路径的 MD5 结果作为文件名即可满足绝大多数情况。但从业务角度来看，总有作妖的时候，将它单独拎出来是很有必要的。ZonPlayer 中提供了默认的厨子和餐具，不过前者或许大多数情况下不满足使用条件，比如需要修改请求头或者 CDN 切换等网络服务。不过得益于面向协议编程的好处，ZPC.DownloadThenPlay 只需要一个遵循 ZPFileDownloadable 的厨子，相信能够很容易地通过你的网络库来实现它。

懒得做饭，下馆子哦，边上边吃

不同于将 URL 修改为本地文件 URL 路径的先下后播，AVPlayer 的流式缓存的数据响应单位是 Data。且仅当 AVPlayer 无法解析 AVURLAsset 的 URL Scheme 时，才会将它的数据响应任务委托给 AVAssetResourceLoaderDelegate。所以，第一步就是将 URL 魔改为无法解析的，直接修改或者增加 Scheme 均可以达到这一目的。ZonPlayer 选择了后者，省去记录原始 Scheme 这一个步骤：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
extension ZPC {
    /// Download during playback base on AVAssetResourceLoader.
    public final class Streaming: NSObject {
        private let _addedSchemePrefix = "ZonPlayer:"
    }
}

extension ZPC.Streaming: ZPCacheable {
    public func prepare(url: URL, completion: @escaping (Result<AVURLAsset, ZonPlayer.Error>) -> Void) {
        if url.isFileURL { completion(.success(AVURLAsset(url: url))); return }
        let modifiedURL = URL(string: _addedSchemePrefix + url.absoluteString) ?? url
        let result = AVURLAsset(url: modifiedURL)
        result.resourceLoader.setDelegate(self, queue: _delegateQueue)
        completion(.success(result))
    }
}

在执行数据请求时，则需要将 URL 还原：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
extension ZPC.Streaming: AVAssetResourceLoaderDelegate {
    public func resourceLoader(
        _ resourceLoader: AVAssetResourceLoader,
        shouldWaitForLoadingOfRequestedResource loadingRequest: AVAssetResourceLoadingRequest
    ) -> Bool {
        guard
            let url = loadingRequest.request.url,
            url.absoluteString.hasPrefix(_addedSchemePrefix) == true
        else { return false }

        // recover url and request
        return true
    }

    public func resourceLoader(
        _ resourceLoader: AVAssetResourceLoader,
        didCancel loadingRequest: AVAssetResourceLoadingRequest
    ) {
        // Cancel
    }
}

AVAssetResourceLoadingRequest 说明了当前 AVPlayer 需要的所有数据，它包含了媒体资源的元数据请求 AVAssetResourceLoadingContentInformationRequest 和播放数据请求 AVAssetResourceLoadingDataRequest。需要注意的是，它们是不能自主初始化的类型，如果我们直接把它作为协议接口依赖的数据类型，对于单元测试来说就是灾难级的设计。为此，我们需要给用到的相关 API 分别定义协议类型以满足依赖注入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/**
 AVAssetResourceLoadingRequest,
 AVAssetResourceLoadingDataRequest,
 AVAssetResourceLoadingContentInformationRequest
 cannot create a instance, so define a protocol to make unit test available.
 */
public protocol ZPCLoadingRequestable: NSObject {
    var isFinished: Bool { get }
    var theDataRequest: ZPCLoadingDataRequestable? { get }
    var theMetaDataRequest: ZPCLoadingMetaDataRequestable? { get }

    func finishLoading(with error: Error?)
    func finishLoading()
}

extension AVAssetResourceLoadingRequest: ZPCLoadingRequestable {
    // Avoid naming conflicts
    public var theDataRequest: ZPCLoadingDataRequestable? { dataRequest }
    public var theMetaDataRequest: ZPCLoadingMetaDataRequestable? { contentInformationRequest }
}

public protocol ZPCLoadingDataRequestable: NSObject {
    var requestedOffset: Int64 { get }
    var requestedLength: Int { get }
    var currentOffset: Int64 { get }
    var requestsAllDataToEndOfResource: Bool { get }

    func respond(with data: Data)
}

extension AVAssetResourceLoadingDataRequest: ZPCLoadingDataRequestable {}

public protocol ZPCLoadingMetaDataRequestable: NSObject {
    var contentType: String? { get set }
    var contentLength: Int64 { get set }
    var isByteRangeAccessSupported: Bool { get set }
}

extension AVAssetResourceLoadingContentInformationRequest: ZPCLoadingMetaDataRequestable {}

有了上述的铺垫，根据范围请求的厨子就可以按照如下方式声明：
1
2
3
4
5
6
7
8
9
10
11
12
public protocol ZPCDataTaskable {
    var range: NSRange { get }
    var loadingRequest: ZPCLoadingRequestable { get }

    func requestData(completion: @escaping (Result<Void, ZonPlayer.Error>) -> Void)
}

public protocol ZPCDataRequestable {
    var url: URL { get }

    func dataTask(forRange range: NSRange, withLoadingRequest loadingRequest: ZPCLoadingRequestable) -> ZPCDataTaskable
}

在这种场景下，数据的来源是服务器请求响应和本地仓库。为了模糊类型概念，这里额外定义了 ZPCDataTaskable 协议。它本身持有一个 loadingRequest，其内部就可以自行处理数据的回调，因此它的成功回调不再接收参数，只是作为继续获取下一个范围数据的时机。与此同时，对于仓库的声明也就呼之欲出了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public protocol ZPCDataStorable {
    var url: URL { get }
    var onError: ZPDelegate<ZonPlayer.Error, Void> { get }

    func getCacheFragments(completion: @escaping ([NSRange]) -> Void)
    func setMetaData(_ metaData: ZPC.MetaData)
    func getMetaData(completion: @escaping (ZPC.MetaData?) -> Void)
    func writeData(_ data: Data, to range: NSRange)
    func readData(from range: NSRange, completion: @escaping (Data?) -> Void)
    func clean(completion: (() -> Void)?)
}

extension ZPCDataStorable {
    public func clean() { clean(completion: nil) }
}

其中的 ZPC.MetaData 是记录媒体资源的元数据信息，用来响应 ZPCLoadingMetaDataRequestable。当 ZPCLoadingDataRequestable 的 requestsAllDataToEndOfResource 为 true 时，contentLength 就会派上用场：根据当前的数据偏移位置，生成一个请求剩余全部数据的范围。

为了给使用侧增加一些自定义操作，我们可以让 ZPCDataRequestable 支持插件，ZonPlayer 内部的日志和请求数据持久化便是通过插件来实现的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public protocol ZPCDataRequestable {
    // ......

    var plugins: [ZPCStreamingPluggable] { get }

    // ......
}

public protocol ZPCStreamingPluggable {
    func prepare(_ request: URLRequest, forRange range: NSRange) -> URLRequest
    func willSend(_ request: URLRequest, forRange range: NSRange)
    func didReceive(_ data: Data, forURL url: URL, withRange range: NSRange, fromRemote remoteFlag: Bool)
    func didReceive(_ metaData: ZPC.MetaData, forURL url: URL, fromRemote remoteFlag: Bool)
    func didComplete(
        _ result: Result<Void,
        ZonPlayer.Error>,
        forURL url: URL,
        withRange range: NSRange,
        fromRemote remoteFlag: Bool
    )
    func anErrorOccurred(in storage: ZPCDataStorable, _ error: ZonPlayer.Error)
}

到目前为止，准备工作已经完成。现在，我们从头开始并结合接口声明梳理整个功能流程：

  1. ZPC.Streaming 遵循了 ZPCacheable，并作为返回的 AVURLAsset 实例 resourceLoader 的代理。
  2. 当 AVPlayer 开始播放时，就会不断向 ZPC.Streaming 请求指定范围（Rt）的数据。
  3. ZPCStreamingSourceable 用于管理所有可供使用侧自定义的功能对象，ZPCStreamingDataProvidable 负责对接代理方法回调：添加或者移除 ZPCLoadingRequestable，每一个 URL 对应一个实例，由ZPC.Streaming 持有由 URL 查找 ZPCStreamingDataProvidable 的键值对。
  4. ZonPlayer 内部实现为 DataPrivdier，它本身由 DataFetcher 完成数据获取。
  5. DataFetcher 会根据范围分析那些片段数据由 ZPCDataStorable 提供，那些片段由 ZPCDataRequestable 请求响应，后者由内部的 DataRequester 来完成。当请求结束后，通过 _SaveToDiskPlugin 来执行数据持久化的操作，请求与响应的全过程日志会被 _LogPlugin 输出到控制台。

在实际的播放过程中，用户可能存在各种各样拖动进度的操作，所以数据持久化的范围合并是最核心的代码逻辑。借鉴（CV）VIMediaCache，ZonPlayer 轻松敲出了相关代码，😅。有个特别需要注意的是，当 AVAssetResourceLoaderDelegate 取消数据请求时，不能同时取消实际的下载请求，而应只响应取消错误给数据请求，否则在自然播放过程中，该分片范围的数据请求不会再次被触发。🌰：在 ZonPlayer Demo 中 URL 用例中，范围为 [2, 58425215) 的数据请求在响应过程中触发了取消（此时将实际下载请求也取消），然后就再也没有接受到此范围的数据请求，最终导致缓存文件数据缺失，无法被正常播放。

总结

对于很短的音频来说（如播放一个单词发音），先下后播是最优的策略。边下边播通常适用于短视频场景，在使用过程中需要额外注意缓存大小的问题。因为 ZonPlayer 默认通过 FileHandle 直接操作文件，对缓存的资源没有加上过期自动清除等控制。这或许会成为后续迭代的一个方向，如果你有需求可以自行实现相关协议接管数据的缓存行为。下一篇文章将是这一系列文章的终篇，会涉及到组件发布和捣鼓 Github Action 等方面的内容，遇到并解决问题可是一个“有趣”的过程，👋～

]]> <hr> <p>对于音视频资源来说，缓存行为分为两种：先下后播和边下边播。前者对于资源本身没有特殊要求，能够通过一个下载任务将数据转换为可播放的媒体文件即可。后者则需要其支持指定范围获取数据，这反应在 URL 响应表现为响应头中键为 accept-ranges 的值是 bytes。为了能描述这两种缓存行为，我们在 <a href="https://zeroonet.com/2023/11/22/zonplayer-part-1/">Part 1</a> 中定义了 <code>ZPCacheable</code>：它要求遵循者需要实现将 URL 异步转换为 AVURLAsset 的方法。如果过程中发生了错误，则通过 <code>ZonPlayer.Error</code> 这个类型去描述。这得益于 AVURLAsset 天然支持本地文件路径，并且对于流媒体来说如果有缓存需要，只需设置它的 AVAssetResourceLoaderDelegate 就可以接管数据的请求与响应。<br> ⌈iOS⌋从头撸一个播放器 II —— 音频会话、远程控制和播放器实现 https://zeroonet.com/2023/11/24/zonplayer-part-2/ 2023-11-24T10:44:35.779Z 2023-11-27T09:33:25.599Z

在上文中，我们完成了 ZonPlayer 的需求分析和接口设计，后者的核心思想是面向协议编程。使用者不用关心播放器具体是什么类型，而是通过 ZPSettable 完成播放器的初始化设置，并且通过遵循 ZonPlayable 的返回值进行播放器行为的控制和状态的读取。如果从权责分明的设计原则来看，ZPSettable 中包含的音频会话和远程控制设置（可选）似乎有违规范。事实上，为了简化播放器上下文的环境的构建，特别是解决官方 SDK 挖下的坑，如此设计是目前能想到的无奈之举。欲知细节如何，且看下文分解！

导致卡顿的音频会话

因为硬件资源是所有 App 共享的，所以为了确保按照预期的会话策略播放音频，我们需要在这之前完成相关的设置。相关代码其实很简单，大体如下：

1
2
try AVAudioSession.sharedInstance().setCategory(.soloAmbient)
try AVAudioSession.sharedInstance().setActive(true)

如果你拥抱了 MetricKit或者有其他的监控卡顿的手段，不出意外的话你会发现在 setActive 和更改策略的时候（如果是 active 的话，会立即生效）出现了主线程卡顿。有意思的是在 Objective-C 关于 setActive 的文档中，Apple 早已经说明了会存在此问题：

Note that activating an audio session is a synchronous (blocking) operation.
Therefore, we recommend that applications not activate their session from a thread where a long
blocking operation will be problematic.

于是，关于设置音频会话的“最佳实践”得变为如下这种形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
aBackgroundQueue.async {
    do {
        try AVAudioSession.sharedInstance().setCategory(.soloAmbient)
        try AVAudioSession.sharedInstance().setActive(true)

        mainQueue.async {
            // init player

            // Handle player error
        }
    } catch {
        // Handle audio session error
    }
}

如此这般，对于使用者来说体验是很糟糕的。为此，我们将 ZPSettable 的描述范围向外进行了扩展，包括了播放器依赖的上下文环境，而非只是其本身的设置。

挖坑的远程控制

参看 Apple 的架构设计，远程控制和 AVPlayer 隶属于两个不同的框架：MediaPlayer 和 AVFoundation。开发者使用 MPNowPlayingInfoCenter 展示正在播放的媒体信息，通过 MPRemoteCommandCenter 进行播放器的远程控制（控制中心和锁屏界面等）：

1
2
3
4
5
6
7
8
9
10
11
let info: [String: Any] = [
    MPNowPlayingInfoPropertyPlaybackRate: 1.0,
    MPMediaItemPropertyPlaybackDuration: 10,
    // ......
]
MPNowPlayingInfoCenter.default().nowPlayingInfo = info
let playTarget = MPRemoteCommandCenter.shared().playCommand.addTarget { _ in
    // Play
    return .success
}
// ......

从自身的开发经历来看，当播放内容快速来回切换时，就可能大概率出现 MPNowPlayingInfoCenter 不更新的情况。（测试工程师反馈的问题，😅）最初百思不得其解，直到看到一篇 stack overflow 上的帖子才意识到 MPNowPlayingInfoCenter 本身不是线程安全的。如果想要规避多线程竞争问题，App 本身最好持有一个单例 info 字典，任何对远程控制中心信息的修改都映射到这上面，当完成修改后再进行 对 MPNowPlayingInfoCenter 的赋值。此外在 Swift 中，对字典的读写本身也是非线程安全，并且还会有崩溃的风险。考虑下面这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
var dict: [String: Double] = [:]
let key = "ABCD"//A(name: "Key")
DispatchQueue.concurrentPerform(iterations: 2) { index in
    if index % 2 == 0 {
        print(dict[key] as Any)
        print("get\(index)")
    } else {
        dict[key] = Double(index)
        print("set\(index)")
    }
}

在 iOS 环境下进行测试，上述代码出现了两种崩溃问题：

  • EXC_BAD_ACCESS
  • [XXXX objectForKey:] unrecognized selector sent to instance XXXXXX

翻看 Swift 源码，不难对其进行归因：Dictionary 底层通过 Variant 中的 _BridgeStorage<RawDictionaryStorage> 存储键值对，通过下标访问值时，在 iOS 运行环境下，会将 Variant 中的存储对象通过值传递（owned）转换为 CocoaDictionary，然后将其通过 unsafeBitCast 强制转换为 NSDictionary，然后返回 object(forKey:) 值。当通过下标设置值时（如果 Key 与 Value 非 Class），其 Variant 会被重新初始化，当存在多线程数据竞争时，其中某个线程就可能访问错误的地址。如果旧地址已经释放，则因为 EXC_BAD_ACCESS 崩溃。如果旧地址被重新分配，且无法响应 objectForKey 消息，则因为 [XXXX objectForKey:] unrecognized selector sent to instance XXXXXX。

再说控制命令，在 iOS 15.x.x 上（或许是某些特定设备，无法完全验证，🙇），使用 MPRemoteCommandCenter 所管理的命令且 App 处于后台播放时，调用 command.removeTarget 会导致媒体播放自动暂停即无法连续播放，而再次点击播放可以恢复。一个解决办法就是再次封装 command，由其内部通过 Target-Action 管理 command 行为。当不再需要 command 时，将其 isEnabled 设置为 false。

鉴于上述两个已知的关于远程控制的坑，ZonPlayer 将相关设置纳入到 ZPSettable，即其中的 ZPRemoteControllable（可选使用），以期能为使用者减少填坑的焦虑。

那些年我们一起撸过的 AVPlayer

按照既定框架，很容易实现一个遵循 ZonPlayable 的内部播放器：

1
2
3
4
final class Player: NSObject {}

extension Player: ZPGettable {}
extension Player: ZPControllable {}

从前序的设置来看，会存在一系列的异步行为，那么在播放器初始化完成之前如何响应 ZPGettable 和 ZPControllable 是需要优先考虑的问题。考虑到易用性和简化系统的复杂度，前者直接返回当前内部的 AVPlayer 的实际状态即可，后者则需要将行为暂时存储起来。当播放器状态变为 readyToPlay 时依次调用（其中 play 和 pause 是互斥行为，根据时序总是保留新值。），并且将 AVPlayer 赋值给视频图层容器视图，以避免出现在某些设备上出现不从头开始播放的诡异问题。

如果播放器的状态变为 failed，则表明当前的 AVPlayer 已经无法进行播放了，需要重新创建 AVPlayer。ZPSettable 中的 maxRetryCount 就是为这种情况服务的，不过需要额外处理的是：当 AVPlayer 的 error code 为 -11819 时，意味着系统媒体服务被重置，在 App 回到前台并且收到 AVAudioSession.mediaServicesWereResetNotification 之前，AVPlayer 会一直处于无法播放的状态，即重试逻辑需要放在通知回调之后。

剩下的诸如播放控制、状态之类的就是 KVO 和通知监听等老套路了，这里就不再过多赘述。

总结

适配永远是大前端绕不开的话题，得益于开源社区的活跃，我们几乎总是有各种奇技淫巧去解决这些问题。到目前为止，除开缓存逻辑，ZonPlayer 已经具备我们所规划的功能。下篇文章我们将完成这最后一块拼图，而其中的 AVAssetResourceLoader 绝对是唯一的“主角”，👋～

]]> <hr> <p>在<a href="https://zeroonet.com/2023/11/22/zonplayer-part-1/">上文</a>中，我们完成了 <code>ZonPlayer</code> 的需求分析和接口设计，后者的核心思想是面向协议编程。使用者不用关心播放器具体是什么类型，而是通过 <code>ZPSettable</code> 完成播放器的初始化设置，并且通过遵循 <code>ZonPlayable</code> 的返回值进行播放器行为的控制和状态的读取。如果从权责分明的设计原则来看，<code>ZPSettable</code> 中包含的音频会话和远程控制设置（可选）似乎有违规范。事实上，为了简化播放器上下文的环境的构建，特别是解决官方 SDK 挖下的坑，如此设计是目前能想到的无奈之举。欲知细节如何，且看下文分解！<br> ⌈iOS⌋从头撸一个播放器 I —— ZonPlayer 需求分析及接口设计 https://zeroonet.com/2023/11/22/zonplayer-part-1/ 2023-11-22T10:11:02.863Z 2023-11-27T07:55:31.765Z

说起播放器，在 iOS 平台上就离不开 AVPlayer。什么？你说还有 AVAudioPlayer！用不了，根本用不了一点！在流媒体横行的时代，一个“只”能播放本地音频文件的播放器已经被后浪拍死在沙滩上了。撇开跨平台和一些不常见的视频格式不谈，使用 AVPlayer 作为音视频播放器应该是优先考虑的选择。开箱 AVPlayer，你会发现基于 KVO 那一套接口使用起来真的是难受和折磨，要是还想要先下后播或者边下边播这样的缓存功能，唯有带上痛苦面具一边撸代码一边累牛满面了。好在“万能”的 github 上有不少的开源项目可供研究，但未找到一个兼具易用、支持缓存（先下后播/边下边播）、音频会话管理和后台播放控制的轮子。即然无法做伸手党了，遂决定自个儿动手从头撸一个，期望能够对开源界做一点微不足道的贡献。搞砸了还望大伙轻喷，手动狗头保命～

需求分析

回顾用过的绝大多数媒体类 App，对于一个播放器来说，通常需要包含如下功能：

  1. 能够播放本地或者流媒体的音频或者视频 URL。
  2. 对于流媒体 URL 来说，有先下后播和边下边播两种缓存行为。
  3. 播放器支持播放、暂停、截图、进度拖动、倍速、后台播放控制和媒体信息展示等功能。
  4. 管理音频会话策略。（因为硬件资源是唯一的，为了能够正常的进行播放，建议每次播放前都设置一遍。）

接口设计

从功能集合上来讲，播放器提供的接口数量是一定的。如果它们只是简单的堆叠排列，对于刚接触它的用户来说使用体验就会变得糟糕，因为用户只能从文档注释来区分各个接口的作用。比如：哪些接口负责初始化，哪些接口可以用来控制播放器，哪些接口能获取播放器的状态等。遵循一切架构问题都可以加中间层这一教条，我们可以把这些接口根据特性划分成不同的协议，让用户面向协议来使用播放器。

用工厂方法接收必要构造条件

既然选择以面向协议的方式来定义接口，那么播放器就应该是不透明实例。用工厂方法来接收构造一个播放器的必须参数是不错的选择：

1
2
3
4
5
6
7
8
9

public protocol URLConvertible {
    func asURL() throws -> URL
}

public enum ZonPlayer {
    public static func player(_ url: URLConvertible) -> ZPSettable {}
}

无疑，url 是播放器唯一的必要参数。考虑到对 String、URLRequest 等可以转换为 URL 的支持，url 类型约束为 URLConvertible 协议而非 URL 类型。当转换失败时，通过错误回调告知使用方，在一些知名开源组件中我们会经常看到它的身影。

功能协议拆解

ZPSettable 是用于描述播放器所有可供设置的接口集合，它主要是对其他一系列协议共同约束的别名：

1
2
3
4
5
6
7
8
9
10

public protocol ZPSettable: ZPObservable,
                            ZPSessionSettable,
                            ZPRemoteControlSettable,
                            ZPCacheSettable {
    var url: URLConvertible { get } // 主要为初始化工程内部使用
    var maxRetryCount: Int { get nonmutating set }
    var progressInterval: TimeInterval { get nonmutating set }
}

为了能在使用侧支持链式调用，还需要对协议进行一些扩展：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

extension ZPSettable {
    /// Maximum retry time when an error occurred. The default value is 1.
    public func maxRetryCount(_ maxRetryCount: Int) -> Self {
        self.maxRetryCount = maxRetryCount
        return self
    }

    /// The time interval for playback progress callback. The default value is 1.
    public func progressInterval(_ progressInterval: TimeInterval) -> Self {
        self.progressInterval = progressInterval
        return self
    }
}

这里的 ZPObservable 是播放器状态监听协议，借用 Kingfisher 中 Delegate 做法，将闭包捕获参数进行弱引用转换，定义为如下形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

public protocol ZPObservable {
    var callbackQueue: DispatchQueue { get nonmutating set }

    var waitToPlay: ZPDelegate<(ZonPlayable, ZPWaitingReason), Void>? { get nonmutating set }
    var play: ZPDelegate<(ZonPlayable, Float), Void>? { get nonmutating set }
    var pause: ZPDelegate<ZonPlayable, Void>? { get nonmutating set }
    var finish: ZPDelegate<(ZonPlayable, URL), Void>? { get nonmutating set }
    var error: ZPDelegate<(ZonPlayable, ZonPlayer.Error), Void>? { get nonmutating set }
    var progress: ZPDelegate<(ZonPlayable, TimeInterval, TimeInterval), Void>? { get nonmutating set }
    var duration: ZPDelegate<(ZonPlayable, TimeInterval), Void>? { get nonmutating set }
    var background: ZPDelegate<(ZonPlayable, Bool), Void>? { get nonmutating set }
    var rate: ZPDelegate<(ZonPlayable, Float, Float), Void>? { get nonmutating set }
}

// 链式调用扩展
extension ZPObservable {
    /// Which dispatch queue to callback, the default value is main queue.
    public func callbackQueue(_ queue: DispatchQueue) -> Self {
        self.callbackQueue = queue
        return self
    }
    // ......
}

剩余的 ZPSessionSettable、ZPRemoteControlSettable 和 ZPCacheSettable 则分别描述音频会话、远程控制和缓存行为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

public protocol ZPSessionable {
    func apply() throws
}

public protocol ZPSessionSettable {
    var session: ZPSessionable? { get nonmutating set }
}

/// The command of remote control.
public protocol ZPRemoteCommandable {
    func enable()
    func disable()
}

/// The remote control for player in lock screen or control center.
///
/// - Important: The time for playback is rounded.
public protocol ZPRemoteControllable {
    var commands: [ZPRemoteCommandable] { get nonmutating set }

    var title: String? { get nonmutating set }
    var artist: String? { get nonmutating set }
    var artwork: UIImage? { get nonmutating set }

    var extraInfo: [String: Any]? { get nonmutating set }
}

public protocol ZPCacheable {
    func prepare(url: URL, completion: @escaping (Result<AVURLAsset, ZonPlayer.Error>) -> Void)
}

public protocol ZPCacheSettable {
    var cache: ZPCacheable? { get nonmutating set }
}

至于为什么播放器要主动管理音频会话与后台控制，后续在接口的实现章节会进一步说明。最后，为了确认使用侧已经完成播放器需要的所有设置，我们还得定义一个结束调用并返回一个播放器抽象实例：

1
2
3
4
5
6
7

extension ZPSettable {
    public func activate() -> ZonPlayable {}

    public func activate(in view: ZonPlayerView) -> ZonPlayable {}
}

其中 ZonPlayerView 是一个 UIView 的子类，用于展示视频图层。如果是播放音频，就调用 activate() 完成初始化即可。ZonPlayable 则是播放器支持的所有功能集合，就目前而言，它是 ZPControllable & ZPGettable 的别名，分别表示播放器的控制行为和可供读取的状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public protocol ZPControllable {
    func play()
    func pause()
    func seek(to time: TimeInterval, completion: ((Bool) -> Void)?)
    func setRate(_ value: Float)

    /// Take snapshot for video frame.
    /// - Parameters:
    ///   - time: Specified time interval for video, will replace current time instead of nil.
    ///   - completion: Callback with optional image in main queue.
    func takeSnapshot(at time: TimeInterval?, completion: @escaping (UIImage?) -> Void)

    /// Let player can playback in background.
    /// - Important: You should set supported audio session at first.
    func enableBackgroundPlayback()
    func disableBackgroundPlayback()
    func suspendPlayingInfo()
    func resumePlayingInfo()
}

public protocol ZPGettable {
    var isPlaying: Bool { get }

    /// The volume for player is greater than or equal to 0 and less than or equal to 1.
    var volume: Float { get }
    var rate: Float { get }
    var currentTime: TimeInterval { get }
    var duration: TimeInterval { get }
    var url: URL { get }
}

总结

在面向协议编程的大前提下，我们先后定义了 ZonPlayer 一系列的接口协议。虽然 Swift Module 天生自带模块名为命名空间，但保险起见我们还是在协议面前加上了前缀，Apple 的风格亦是如此。虽然我个人更喜欢类型嵌套（后面会看到不少这样的使用），但无奈它不支持协议的定义。下篇文章我们将详细说明部分协议定义的用意，以及播放器实现过程中遇到的一些坑点，👋～

]]> <hr> <p>说起播放器，在 iOS 平台上就离不开 AVPlayer。什么？你说还有 AVAudioPlayer！用不了，根本用不了一点！在流媒体横行的时代，一个“只”能播放本地音频文件的播放器已经被后浪拍死在沙滩上了。撇开跨平台和一些不常见的视频格式不谈，使用 AVPlayer 作为音视频播放器应该是优先考虑的选择。开箱 AVPlayer，你会发现基于 KVO 那一套接口使用起来真的是难受和折磨，要是还想要先下后播或者边下边播这样的缓存功能，唯有带上痛苦面具一边撸代码一边累牛满面了。好在“万能”的 github 上有不少的开源项目可供研究，但未找到一个兼具易用、支持缓存（先下后播/边下边播）、音频会话管理和后台播放控制的轮子。即然无法做伸手党了，遂决定自个儿动手从头撸一个，期望能够对开源界做一点微不足道的贡献。搞砸了还望大伙轻喷，手动狗头保命～<br> ⌈iOS⌋WKWebView Cookie 同步的一种方式 https://zeroonet.com/2023/10/25/wkwebview-cookie-sync/ 2023-10-25T06:41:12.818Z 2023-11-01T08:41:46.417Z

屈服于 Apple 的“淫威”，开发者不得不将 App 的网页容器从 UIWebView 迁移到 WKWebView。我们在享受后者带来的性能和功能提升的同时，也被诸如 Cookie 同步、截图、白屏等问题弄得抓耳挠腮、狼狈不堪。无疑，上述问题会随着系统更新被逐渐修复，而开发者在产品系统适配的硬性要求下只得各凭本身缝缝补补，以期望减少在用户侧出现的问题。如题，下文我们对 Cookie 同步的情况进行一些说明，并总结出一种可行的方案。

问题回顾

简言之，WKWebView 的网络模块进程独立于 App 进程，App 进程通过 HTTPCookieStorage 管理的 Cookie 系统会自动使用 IPC 通信同步到 WKWebView。同 App 侧的 HTTPCookieStorage，WKWebView 的存储结构在代码层面表现为 WKWebsiteDataStore(iOS 9+) 和 WKHTTPCookieStore(iOS 11+)，前者拥有后者。上述过程咋一看并不会有什么问题，但正因为是 IPC 来完成进程通信，它必然是异步执行的，即感官上的同步延迟。如果在这之前就进行需要验证 Cookie 的 WebView 请求，就是发现因缺少 Cookie 导致的鉴权失败。

一个典型的 🌰 是：用户通过通知等方式启动 App 打开一个和用户态关联的 Web URL，在用户登录完成之后（登录接口会进行 Set-Cookie 操作，写入用户的 auth_token 等数据）立即打开网页。此时会发现网页要求用户重新登录，如果通过 Charles 抓包进行观察的话，会发现此时 Cookies 中并没有上述 auth_token 等与用户态关联的鉴权信息。

换汤不换药的 WKHTTPCookieStore

从 iOS 11 开始，我们可以开始用官方的补救措施：WKHTTPCookieStore。它与 HTTPCookieStorage 接口很相似，我们或许很自然地想到用下面这样一段代码来同步 Cookie：

1
2
3
4
5
6
7
8
9
10
11
12

let group = DispatchGroup()
HTTPCookieStorage.shared.cookies?.forEach {
    group.enter()
    webView.configuration.websiteDataStore.httpCookieStore.setCookie($0) {
        group.leave()
    }
}
group.notify(queue: .main) {
    webView.load(urlRequest)
}

在实践过程的测试初期，并没有发现什么异常。而在内测阶段，App 中存在很多的网页场景且每次加载之前都会进行上述的同步操作，就会几率性出现 setCookie 的 completionHandler 不执行的情况，从而导致当前网页且后续所有网页都无法正常加载，从 WKHTTPCookieStore 设置 Cookie 的接口不难看出，它本质上还是通过 IPC 异步与 Web 进程通信。当同步的 Cookie 操作频繁执行时，会导致 App 与 Web 进程间通信出现异常，而这个度很难去把控，所以放弃这种方式。

这里有提到监听 NSHTTPCookieManagerCookiesChangedNotification 来修改 WKHTTPCookieStore 的方式，诸君可自行尝试。

从一而终：JS 注入

通过 Javascript 注入 Cookie 算是一种老生常谈的同步手段了，它分为以下两个个步骤：

  1. 所有的 WKWebView 公用一个 WKProcessPool（不透明类型）和 WKWebsiteDataStore，后者使用 WKWebsiteDataStore.default() 返回的实例。
  2. 使用 WKUserScript 向 WKWebView 的 WKUserContentController 中注入 Javascript：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

private func _syncCookies() {
    // https://stackoverflow.com/a/32845148
    var scripts: [String] = ["var cookieNames = document.cookie.split('; ').map(function(cookie) { return cookie.split('=')[0] } )"]
    // Cookie 过期处理由系统进行管理，不进行手动删除操作
    HTTPCookieStorage.shared.cookies?.forEach {
        // 假设系统的 Cookie 同步行为没有完成，如果过滤具有 httpOnly 标示的 cookie，就会在后续网络请求中 cookie 丢失的问题。
        // 即使在首次 loadRequest 中直接设置请求头的 cookie 字段注入该 cookie。
        // guard $0.isHTTPOnly == false else { return }

        // 当不存在此 cookie 时，才进行设置，避免注入同名 cookie
        scripts.append("if (cookieNames.indexOf('\($0.name)') == -1) { document.cookie='\($0.javaScriptString)'; }")
    }

    let source = scripts.joined(separator: ";\n")
    userContentController.addUserScript(
        WKUserScript(
            source: source,
            injectionTime: .atDocumentStart,
            forMainFrameOnly: false
        )
    )
}

  1. 在用户退出登录时，清除 WKWebView 数据：
1
2
3
4
5
6
7
8
9
10
11

WKWebsiteDataStore.default().removeData(
    ofTypes: WKWebsiteDataStore.allWebsiteDataTypes(),
    modifiedSince: Date(timeIntervalSince1970: 0.0),
    completionHandler: completion
)

pool = nil

// Important: 销毁所有的 WKWebView，如果有常驻 WKWebView 则重建。在实践工程中发现几率性出现 Cookie 残留，即使已经执行了清除所有数据的操作。

按部就班之后，你会发现这个方式和完全靠系统来处理存在同样的问题：存在延迟，具体表现为第一次打开网页 Cookie 没有，第二次打开又有了。WTF！！！事实上，这算是 WKUserScript 注入的一个坑了。注意看，我们注入 Javascript 的时机是 atDocumentStart，文档对它的解释是这样的：A constant to inject the script after the creation of the webpage’s document element, but before loading any other content.从字面理解来看，在 HTML DOM 加载过程中，WKWebView 的网络请求就会带上这些 Cookie，但实际上并没有。

从本质上来看，App 侧注入的 document.cookie 是给 Web 侧增加 Cookie 环境。而从上面的操作结果来看，并不代表它在注入完成之后就会立刻生效。在此，我们可以在后台预先加载一个 URL（指向一个空白的能正常加载成功的页面即可，如 xxxx://xxxx/ios/cookie/sync）来完成 Cookie 环境的同步，然后再请求实际的 Web URL 来解决这个问题。

总结

从 UIWebView 时期与 App 公用 HTTPCookieStorage 到现在 WKWebView 的泾渭分明，最可靠的 Cookie 同步方式始终都是系统默认方案。无奈后者的技术架构迫使我们做一些“骚操作”去促使系统自动完成，全文单从 App 侧同步到 Web 侧的一些实践过程进行了阐述，最终总结出 Preload + Javascript + Clean 的一种基本可行的方式。而从 Web 侧到 App 侧，没有做任何额外的操作，而是完全依赖于系统行为，这或许埋下了一些隐患，但到目前来说我们没有遇到相关问题。其实，针对于服务器渲染的前端页面，在充分考虑安全性的前提下，将 Cookie 直接塞到 URL 的 query 中是一种更为直接简单的方式。

]]> <hr> <p>屈服于 Apple 的“淫威”，开发者不得不将 App 的网页容器从 UIWebView 迁移到 WKWebView。我们在享受后者带来的性能和功能提升的同时，也被诸如 Cookie 同步、截图、白屏等问题弄得抓耳挠腮、狼狈不堪。无疑，上述问题会随着系统更新被逐渐修复，而开发者在产品系统适配的硬性要求下只得各凭本身缝缝补补，以期望减少在用户侧出现的问题。如题，下文我们对 Cookie 同步的情况进行一些说明，并总结出一种可行的方案。<br> ⌈iOS⌋拥抱 MetricKit https://zeroonet.com/2023/10/16/ios-metric-kit/ 2023-10-16T06:29:13.006Z 2023-10-17T05:33:33.330Z

自 iOS 问世以来，官方从来没有提供工具让第三方开发者监控线上 App 的运行情况。特别地，如果开发者想要统计分析崩溃和卡顿，那就只能“自食其力”。而这一切从 iOS 14 开始有了转机，因为 Apple 推出的性能诊断框架 MetricKit 终于囊括异常情况的分析数据：卡顿、崩溃等的堆栈信息。“得益”于 Apple 对用户隐私的保护，它只能作为常规手段的一个补充，而非主力选手。此外，MetricKit 能捕捉到诸如 Watchdog timeout 之类的漏网之鱼，让它不至于全然如鸡肋一般，食之无味，弃之可惜。

餐前白开水：数据测量

事实上，我们可以不做任何事情就可以看到 MetricKit 生成的数据报告，它在「Xcode」-「Window」-「Orginizer」-「Metrics」一栏中，包含如下几个维度的信息：

  • Battery Usage
  • Disk Writes
  • Hang Rate
  • Launch Time
  • Memory
  • Scrolling
  • Terminations

它本身是以 App 版本来划分的，并且与 App 上线时间与使用量强相关，因此如果你看到是“白板”也不要感到奇怪。所以为了能够更高效的使用这些数据，你还是得自建数据平台并解析下面这样的 JSON 数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 采样时间
timeStampBegin = "2022-05-19 11:55:04";
timeStampEnd = "2022-05-19 11:55:04";

// iOS 14+
animationMetrics = {
  // scrollHitchRate，统计标准不明（平均值？还是中位数？）
  scrollHitchTimeRatio = "1000 ms per s";
};

// iOS 14+
applicationExitMetrics = {
  // App 前台退出次数及原因
  backgroundExitData = {
      // 正常退出
      cumulativeNormalAppExitCount = 1;

      // 异常退出
      cumulativeAbnormalExitCount = 1;

      // 看门狗退出
      cumulativeAppWatchdogExitCount = 1;

      // 后台任务超时退出
      cumulativeBackgroundFetchCompletionTimeoutExitCount = 1;
      cumulativeBackgroundTaskAssertionTimeoutExitCount = 1;
      cumulativeBackgroundURLSessionCompletionTimeoutExitCount = 1;

      // 野指针
      cumulativeBadAccessExitCount = 1;

      cumulativeCPUResourceLimitExitCount = 1;
      cumulativeIllegalInstructionExitCount = 1;

      // 内存问题退出
      cumulativeMemoryPressureExitCount = 1;
      // OOM
      cumulativeMemoryResourceLimitExitCount = 1;

      cumulativeSuspendedWithLockedFileExitCount = 1;
  };

  // App 后台退出
  foregroundExitData = {
      cumulativeAbnormalExitCount = 1;
      cumulativeAppWatchdogExitCount = 1;
      cumulativeBadAccessExitCount = 1;
      cumulativeCPUResourceLimitExitCount = 1;
      cumulativeIllegalInstructionExitCount = 1;
      cumulativeMemoryResourceLimitExitCount = 1;
      cumulativeNormalAppExitCount = 1;
  };
};

// 太多了，省略省略。如果你想试试，连接真机，点击「Xcode」-「Debug」-「Simulate MetricKit Payloads」即可。

如果我们将用户共享数据给开发者视为天然采样机制的话，对于业务至上的小团队而言，MetricKit 无疑是最好的从多个维度评判 App 运行情况的解决方案。像是 OOM、卡顿之类的数据统计，如果是自己造轮子的话，决计不是这么简单的事情。

正餐：堆栈信息（iOS 14+）

对于开发者而言，肯定都希望所有的线上问题都能定位到函数调用堆栈。但单从上文中说到的 MetricKit，貌似只告诉了你：“您家 App 有问题，具体问题暂时没法告诉您，反正就是有问题。”。好在 Apple 的工程师“意识”到了 MetricKit 这种尴尬的境地，在第二个版本中增加了问题诊断：

  • CPU Exception：采样时间内 CPU 使用时间超过 50% 就会触发，诊断负载中包含了 totalSampledTime、totalCPUTime。
  • Disk Write Exception: 24 小时内写入磁盘的数据量超过 1GB 就会触发，诊断负载中包含了该堆栈写入的数据量。
  • Hang：卡顿，主线程超过 250ms 无响应就会触发，诊断负载中包含了卡顿时间 hangTime。
  • App Launch: iOS 16+，启动就会触发，诊断负载中包含了启动时间 launchDuration。
  • Crash: 崩溃就会触发，诊断负载中包含了 signal、exceptionType 等数据。特别地，对于 Watchdog timeout 问题，terminationReason 格式为：code:0x8BADF00D explanation:scene-update watchdog transgression:xxxxx。

及其堆栈信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{
 "callStackTree" : {
  "callStackPerThread" : true,
  "callStacks" : [
    {
      "threadAttributed" : false,
      "callStackRootFrames" : [
        {
          "binaryUUID" : "70B89F27-1634-3580-A695-57CDB41D7743",
          "offsetIntoBinaryTextSegment" : 165304,
          "sampleCount" : 1,
          "binaryName" : "MetricKitTestApp",
          "address" : 7170766264
          "subFrames" : [
            {
              "binaryUUID" : "77A62F2E-8212-30F3-84C1-E8497440ACF8",
              "offsetIntoBinaryTextSegment" : 6948,
              "sampleCount" : 1,
              "binaryName" : "libdyld.dylib",
              "address" : 7170808612
             }
          ]
        }
      ]
    },
    {
      "threadAttributed" : true,
      "callStackRootFrames" : [
 ...

无疑，在符号化堆栈信息之前，需要将其格式化为我们所喜闻乐见的样子：

1
2
3
4
5
6
7
8
9
10
/* 一条典型的堆栈信息表示为：
0(A)UIKitCore(B)0x00000002(C) 0x00000001(D) + 16(E)

A：栈帧序号
B：BinaryImage，可理解为可执行文件名称。
C：instruction address：当前函数执行完成后下一条指令地址
D：symbol address：函数地址/函数名
E：C = D + Hex(E)
*/

结合手动符号化堆栈的指令 atos -arch <ARCH> -o <PATH TO DYSM> -l <hex symbolAddress> <hex instruction address> 来看，我们还需要知道符号表路径。而对于线上 App 来说，我们只需要拿到 ImageAddress 和 UUID 就可以从整个符号表中找到我们所需要的那一部分。如果将 MetricKit 的堆栈模型化，能得到下面这样的数据结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

struct CallStackTree: Decodable {
    let callStacks: [CallStack]
}

struct CallStack: Decodable {
    /// 崩溃或者异常是否发生在这个调用堆栈上
    let threadAttributed: Bool?
    let rootFrames: [AFrame]

    private enum CodingKeys: String, CodingKey {
        case threadAttributed
        case rootFrames = "callStackRootFrames"
    }
}

struct Frame: Decodable {
    /// 栈帧关联的 binary/Image/镜像 名称，如 UIKitCore、CoreFoundation
    let name: String?
    /// 符号化栈帧的唯一标识
    let uuid: String?
    /// Instruction Address（十进制）
    let instructionAddress: UInt
    /// The offset of the symbol in the text segment of the binary of a stack frame.
    let offset: UInt
    let subFrames: [Frame]?

    private enum CodingKeys: String, CodingKey {
        case name = "binaryName"
        case uuid = "binaryUUID"
        case instructionAddress = "address"
        case offset = "offsetIntoBinaryTextSegment"
        case subFrames
    }

    /// 是否是 App 自身的调用堆栈。
    var isInApp: Bool {
        let appImageName = (Bundle.main.infoDictionary?["CFBundleName"] as? String) ?? ""
        return appImageName == name
    }
}

一眼望去，我们貌似找不到 ImageAddress，这实际上是 Apple 挖的坑。通过大量的数据分析，ImageAddress 有两种情况：

  1. ImageAddress = offset
  2. ImageAddress = address - offset

故而，为了能够适配这两种情况，我们得根据相同的 BinaryImage 的两条栈帧信息去动态计算，因为同一个 BinaryImage 的 ImageAddress 肯定是相同的。同时，栈帧顺序是不固定的（有时是从早到晚，有时是从晚到早），而非一定是我们所习惯的越晚调用的函数栈帧序号越小。下面给出 Sentry 自定义事件堆栈映射示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

protocol ImageAddressProvidable {
    func imageAddress(offset: UInt, instructionAddress: UInt) -> UInt
}

struct DefaultImageAddressProvider: ImageAddressProvidable {
    func imageAddress(offset: UInt, instructionAddress: UInt) -> UInt {
        instructionAddress - offset
    }
}

struct OffsetAsImageAddressProvider: ImageAddressProvidable {
    func imageAddress(offset: UInt, instructionAddress: UInt) -> UInt { offset }
}

extension UInt { public var toHex: String { String(format: "0x%016llx", self) } }

func upload() {
    // ......
    var _provider: ImageAddressProvidable?
    let transaction = "MetricKit Diagnostic"
    let transaction = "MetricKit Diagnostic"
    let event = Event(level: $0.isCrash ? .fatal : .error)
    event.message = SentryMessage(formatted: $0.name)
    event.transaction = transaction

    var uniqueBinaryImageFrames: [CallStackTree.CallStack.Frame] = []
    $0.callStackTree.callStacks.flatMap { $0.frames }.forEach { frame in
        if let contained = uniqueBinaryImageFrames.first(where: { $0.name == frame.name }) {
            guard _provider == nil else { return }

            let defaultProvider = DefaultImageAddressProvider()
            let offsetProvider = OffsetAsImageAddressProvider()
            if defaultProvider.imageAddress(offset: contained.offset, address: contained.address)
                == defaultProvider.imageAddress(offset: frame.offset, address: frame.address)
            {
                _provider = defaultProvider
            } else if offsetProvider.imageAddress(offset: contained.offset, address: contained.address)
                == offsetProvider.imageAddress(offset: frame.offset, address: frame.address)
            {
                _provider = offsetProvider
            }
            return
        }

        uniqueBinaryImageFrames.append(frame)
    }

    let isEnabledImageAddressProvider = _provider != nil
    let provider = _provider ?? DefaultImageAddressProvider()

    event.debugMeta = uniqueBinaryImageFrames.map {
        let result = DebugMeta()
        result.type = "apple"
        result.uuid = $0.uuid
        result.name = $0.name
        result.imageAddress = provider.imageAddress(offset: $0.offset, address: $0.address).toHex

        return result
    }
    event.threads = $0.callStackTree.callStacks.enumerated().map {
        let result = Thread(threadId: $0.offset as NSNumber)
        result.crashed = ($0.element.threadAttributed ?? false) as NSNumber
        result.stacktrace = Stacktrace(
            frames: $0.element.frames.reversed().map {
                let result = Frame()
                result.inApp = $0.isInApp as NSNumber
                result.package = $0.name
                result.instructionAddress = $0.instructionAddress.toHex
                result.imageAddress = provider.imageAddress(offset: $0.offset, address: $0.address).toHex

                return result
            },
            registers: [:]
        )
        return result
    }

    // ......
}

MetricKit 在诊断总负载中包含了诊断生成的开始和结束时间，同时问题负载中也有 App 的版本信息，这让我们能够更方便追踪和回归问题，也算是为不实时上报问题做出的一点弥补。

关于 OOM

当 App 自身使用的内存资源超过限制（不同设备不同系统版本阈值不同）时，它会被系统强制终止运行，即 App 因 OOM(out of memory) 触发了崩溃。此类问题无法被崩溃监控工具（Bugly 等），原因此处不再赘述。在 Debug 环境下，我们可以通过如下代码触发 OOM：

1
2
3
4
5
6
7
8
9
10
11
12
// 在 Xcode 14.2(14C18) 中
// Edit Scheme -> Launch -> 勾选 Wait for the executable to be launched 才能触发断点信息提示
// 否则 App 直接闪退，然后 Xcode 弹窗提示 App 因为内存原因被终止。
- (void)makeOutOfMemeory {
    while (true) {
        // 1MB
        p[allocatedMB] = malloc(1024 * 1024);
        memset(p[allocatedMB], 0, 1024 * 1024); // Crash: EXC_RESOURCE RESOURCE_TYPE_MEMORY（limit=xxx MB, unused=0x0）
        allocatedMB += 1;
    }
}

翻看mach/exception_types.h可以发现：

1
2
3
4

#define EXC_RESOURCE            11      /* Hit resource consumption limit */
/* Exact resource is in code field. */

即当 App 因 OOM 发生崩溃时，理论上 MetricKit 会生成对应的崩溃诊断报告，其对应的 exceptionType 为 11（EXC_RESOURCE）。但分析实际数据发现，当测量数据中 App 存在因为 OOM 发生的退出时，没有收集到上述类型的崩溃诊断。换言之，到目前为止，MetricKit 无法监控 OOM 引起的 App 崩溃。

写在最后

不难看出，想要更好地使用 MetricKit 核心点在于用于分析数据的平台。而如果只是使用 Xcode 的数据看板，由于众所周知的原因在国内经常会下载失败🤣。对于白嫖怪， Sentry 或许是个很不错的选择，因为它可以 Self—Hosting：买台服务器，将服务（开源）部署上去即可。回到诊断本身，相比自建轮子，MetricKit 显然更可靠、成本更低、性能更好。只要走通了前序流程，后面新特性便可以即开即用了。躺在大树下好乘凉，不外如是，嘿嘿～

Reference

Apple Documentation: MetricKit-MXCallStackTree

]]> <hr> <p>自 iOS 问世以来，官方从来没有提供工具让第三方开发者监控线上 App 的运行情况。特别地，如果开发者想要统计分析崩溃和卡顿，那就只能“自食其力”。而这一切从 iOS 14 开始有了转机，因为 Apple 推出的性能诊断框架 MetricKit 终于囊括异常情况的分析数据：卡顿、崩溃等的堆栈信息。“得益”于 Apple 对用户隐私的保护，它只能作为常规手段的一个补充，而非主力选手。此外，MetricKit 能捕捉到诸如 Watchdog timeout 之类的漏网之鱼，让它不至于全然如鸡肋一般，食之无味，弃之可惜。<br> ⌈iOS⌋统一屏幕旋转控制方式 https://zeroonet.com/2020/05/17/universal-device-orentation/ 2020-05-17T10:42:46.890Z 2020-07-15T08:54:49.289Z

对于 iPhone 来说，我们都常有一个使用习惯，即将屏幕自动旋转锁定，毕竟 iOS 的这个陀螺仪的方向检测有时候会出现蜜汁现象。不过这样做的话，就错过了验证各大厂 App LaunchScreen 对屏幕方向的支持情况。举个 🌰：众所周知，天猫和淘宝在 iPhone 上的实际使用中只支持横屏。但如果你把屏幕自动旋转锁定关闭，然后将你的 iPhone 横屏，会发现淘宝的 LaunchScreen 也“躺”下了，而天猫没有…… emmmmmmmm

这篇文章会梳理官方提供的几种屏幕旋转控制的方式以及它们的优先级，当然上面提到的这个问题自然就迎刃而解了。

LaunchScreen 时期

显然(👀)，在这个时间，我们在 UIViewController 和 UIApplicationDelegate 里面的相关设置代码是肯定没有生效的！那么，相关的控制就只能寄希望于工程的配置文件了，也就是 info.plist：UISupportedInterfaceOrientations~ipad 和 UISupportedInterfaceOrientations。当 App 运行起来之后，这两个值也将会作为 App 是否支持屏幕方向变化后的值的一个判定条件。但大多数情况下，这个值并不能满足你的需求，比如在视频播放的情况下需要支持横屏。

UIApplicationDelegate 的相关配置

在 UIApplicationDelegate 的方法中，有如下方法进行屏幕方向设置：

1
2
3
func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask { 
    return xxx
}

在进行代码编写之前，不妨先看看官方文档如何解释这个方法作用的：

This method returns the total set of interface orientations supported by the app. When determining whether to rotate a particular view controller, the orientations returned by this method are intersected with the orientations supported by the root view controller or topmost presented view controller. The app and view controller must agree before the rotation is allowed.
If you do not implement this method, the app uses the values in the UIInterfaceOrientation key of the app’s Info.plist as the default interface orientations.

我们除了能从中得出此方法的默认实现就是返回 info.plist 的值外，还引出了另外一个屏幕方向判定条件：视图根控制器和顶层视图控制器的 presentedViewController，这也就解释了为什么当我们使用容器视图控制器的时候需要将屏幕方向配置的相关方法的调用传递给对应的子控制器，就像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
open class BaseNavigationController: UINavigationController {
    open override var shouldAutorotate: Bool {
        return topViewController?.shouldAutorotate ?? true
    }
    
    /// 当屏幕方向改变时，系统首先调用 shouldAutorotate
    /// 其结果为 true 时，才会调用 supportedInterfaceOrientations
    open override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return topViewController?.supportedInterfaceOrientations ?? .all
    }
    
    open override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
        return topViewController?.preferredInterfaceOrientationForPresentation ?? .portrait
    }
}

open class BaseTabBarController: UITabBarController {    
    open override var shouldAutorotate: Bool {
        return selectedViewController?.shouldAutorotate ?? true
    }
    
    open override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return selectedViewController?.supportedInterfaceOrientations ?? .all
    }
    
    open override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
        return selectedViewController?.preferredInterfaceOrientationForPresentation
    }
}


当屏幕发生旋转时，改变后的屏幕方向值在这两个判定条件的交集范围内，UI 的方向才会发生旋转。这里还需要提到一个问题，preferredInterfaceOrientationForPresentation 的值如果没有包含在 UIViewController 的 supportedInterfaceOrientations 范围内的话，Modal 此视图控制器的话，就将发生崩溃！！！

总结

总得来说，屏幕旋转有两个判定条件：

  1. info.plist/UIApplicationDelegate(前者可控制 LaunchScreen 时期，后者的默认实现为前者。当后者对应方法覆写之后，前者的控制作用只在 LaunchScreen 时期。)
  2. UIViewController

当且仅当两者的交集包含了新屏幕方向的值时，UI 方向才会发生变化。

补充

当工程配置 General -> Deployment Info -> Requires full screen 取消 ☑️ 后，即 App 允许 iPad 分屏，上述屏幕方向的限制在 iPad 上将不再生效，此时 App 会支持所有方向的屏幕旋转！

]]> <hr> <p>对于 iPhone 来说，我们都常有一个使用习惯，即将屏幕自动旋转锁定，毕竟 iOS 的这个陀螺仪的方向检测有时候会出现蜜汁现象。不过这样做的话，就错过了验证各大厂 App LaunchScreen 对屏幕方向的支持情况。举个 🌰：众所周知，天猫和淘宝在 iPhone 上的实际使用中只支持横屏。但如果你把屏幕自动旋转锁定关闭，然后将你的 iPhone 横屏，会发现淘宝的 LaunchScreen 也“躺”下了，而天猫没有…… emmmmmmmm</p> <p>这篇文章会梳理官方提供的几种屏幕旋转控制的方式以及它们的优先级，当然上面提到的这个问题自然就迎刃而解了。<br> ⌈OC⌋简而繁的BlocksKit https://zeroonet.com/2020/04/16/blocks-kit/ 2020-04-16T08:22:54.342Z 2020-04-16T08:22:54.343Z

意如分类标题(这个博客主题貌似没有，😂)那样，笔者打算开始探究框架与源码。毫无疑问，这其中会遇到各种各样的挑战，但是我觉得我们应尽早走出这一步，不然就错过了很多的精彩。也许这精彩是更加开阔的程序视野，亦或是逻辑思维与编程能力的提升，这其中对耐心与意志的磨炼绝对会让人十分“酸爽”。

而这简而繁BlocksKit就成为了第一道菜，为什么呢？因为之前对它的认知就是对系统API的block方式调用的高度封装，这是它简单的使用特性。然而它的灵魂——动态代理让我深切感受到了框架的设计哲学：把简洁留给别人，把复杂留给自己。不信？那就接着往下看！

简单的API使用与探究

你或许诟病过Target-Action响应模式代码的编写，又或者对代理模式爱的深沉。BlocksKit给你带来了福音，给按钮添加监听方法是这么写的：(原谅我这里把Objective-C代码标记为C，因为这个博客主题竟然识别不了Objective-C，💔)

1
2
3
[button bk_addEventHandler:^(id sender) {
        NSLog(@"点了我");
} forControlEvents:UIControlEventTouchUpInside];

这是UIControl添加的分类BlocksKit中的一个方法，以下是它的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- (void)bk_addEventHandler:(void (^)(id sender))handler forControlEvents:(UIControlEvents)controlEvents {
//首先判断是否有事件的响应
NSParameterAssert(handler);

//动态获取对象绑定到的事件，对于只有一个事件的实例，此处的event自然是nil
NSMutableDictionary *events = objc_getAssociatedObject(self, BKControlHandlersKey);
if (!events) {
events = [NSMutableDictionary dictionary];
//如果当前当前为首次给对象添加事件，则新建一个事件字典，并动态关联到对象
objc_setAssociatedObject(self, BKControlHandlersKey, events, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

//使用事件在枚举中的值作为键，取出该事件的处理者
NSNumber *key = @(controlEvents);
NSMutableSet *handlers = events[key];
if (!handlers) {
handlers = [NSMutableSet set];
events[key] = handlers;
}

//真正的目标对象，它有两个属性：handler和controlEvent，初始化方法就是对这两者赋值
BKControlWrapper *target = [[BKControlWrapper alloc] initWithHandler:handler forControlEvents:controlEvents];
//添加对应时间的响应者
[handlers addObject:target];

//target的invoke:方法就是调用自身的handler，并将本身作为参数传入
[self addTarget:target action:@selector(invoke:) forControlEvents:controlEvents];
}

这里之所以采用字典的形式来存储事件与响应者，是为了后面能够一次性移除某个事件的响应者和判断某个事件是否有响应者。具体可以看看bk_removeEventHandlersForControlEvents:和bk_hasEventHandlersForControlEvents:这两个方法，这里就不再赘述。

代理模式的实现，用到了本框架的核心模块：动态代理。后面会用相当篇幅解读，这里先看看其他有趣的东西，比方说延时手势。关于构造实际响应目标和按钮大同小异，这里主要看看如何让手势延时响应。手势响应时都会触发一个位于UIGestureRecognizer分类中的bk_handleAction:方法，以下仅贴出关于延时的实现：

1
2
3
4
5
6
7
- (void)bk_handleAction:(UIGestureRecognizer *)recognizer {
//部分省略
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delay * NSEC_PER_SEC));

    //在指定时间后，将任务加入到主队列中等待执行，而非是任务在主队列中等待指定时间长度后执行
dispatch_after(popTime, dispatch_get_main_queue(), block);
}

特色菜味道就是好

weak对象关联

如果你使用过分类（Category）的话，你肯定知道它不能为对象直接新增属性。因为对象的本质是结构体，在编译时它的内存空间大小就已经确定了。它有一个成员变量是methodLists，它是这样的一个类型：struct objc_method_list **，即指向objc_method_list类型的结构体二级指针。如果是系统固有的方法列表，那么它的大小就是固定的。当我们使用分类增加方法时，本质上就是通过修改*methodLists值来指定新的内存地址以容下新增的方法（方法本身也是一个结构体）。

而Runtime的对象关联（AssociateObject）解决了使用分类不能新增属性的问题，其实就涉及到了两个函数，因此极易上手：

1
2
3
void objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy)

id objc_getAssociatedObject(id object, const void *key)

系统提供的关联策略有如下几种：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
typedef OBJC_ENUM(uintptr_t, objc_AssociationPolicy) {
// 属性名key直接指向所关联的对象，不增加其引用计数，相当于__unsafe_unretained，相当于修饰属性的assign, atomic
    OBJC_ASSOCIATION_ASSIGN = 0, 
    
    // 相当于用nonatomic、retain修饰属性      
    OBJC_ASSOCIATION_RETAIN_NONATOMIC = 1, 

// 相当于copy、nonatomic
    OBJC_ASSOCIATION_COPY_NONATOMIC = 3, 

// 相当于retain, atomic
    OBJC_ASSOCIATION_RETAIN = 01401,   

// 相当于copy, atomic
    OBJC_ASSOCIATION_COPY = 01403    
};

不难看出，没有weak这一关联策略。那么我们来看看BlocksKit是如何实现的：

1
2
3
4
5
6
7
8
- (void)bk_weaklyAssociateValue:(__autoreleasing id)value withKey:(const void *)key {
_BKWeakAssociatedObject *assoc = objc_getAssociatedObject(self, key);
if (!assoc) {
assoc = [_BKWeakAssociatedObject new];
[self bk_associateValue:assoc withKey:key];
}
assoc.value = value;
}
1
2
3
4
5
6
7
8
9
- (id)bk_associatedValueForKey:(const void *)key
{
id value = objc_getAssociatedObject(self, key);
if (value && [value isKindOfClass:[_BKWeakAssociatedObject class]]) {
return [(_BKWeakAssociatedObject *)value value];
}
return value;
}

1
2
3
4
5
@interface _BKWeakAssociatedObject : NSObject

@property (nonatomic, weak) id value;

@end

不难看出，作者使用了一个中间对象，它持有一个weak类型的属性value来存储实际所赋的值。在获取关联对象时就判断其是否为_BKWeakAssociatedObject类型的对象，如果是就返回该对象value的属性值。

取消block执行

有时我们需要在指定时间后追加一个block到队列中，而且它只在条件满足时才会执行，也就是说这个block的执行可以在未开始前取消。如果GCD支持的话，用dispatch_block_cancel(dispatch_block_t block)这个函数取消即可。但是它的使用声明是__OSX_AVAILABLE_STARTING(__MAC_10_10, __IPHONE_8_0)，而BlocksKit出现是几年前的事了，所以作者完全应当考虑到GCD不支持的情况，所以就有了这段条件编译的指令：

1
2
3
4
5
6
#if (defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 80000) || (defined(__MAC_OS_X_VERSION_MAX_ALLOWED) && __MAC_OS_X_VERSION_MAX_ALLOWED >= 1010)
// 两种情况下的宏值一样是一个奇怪的问题，在github这个框架的issue上也有人提出了这个疑问，但没人回复。
#define DISPATCH_CANCELLATION_SUPPORTED 1
#else
#define DISPATCH_CANCELLATION_SUPPORTED 1
#endif

不过这都是细枝末节，权当是作者手误，在这里姑且认为这个宏是有正确意义的。那么就来看看怎么使用一个可以取消的block：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
NSLog(@"start");

BKCancellationToken token = [self bk_performAfterDelay:10.0f usingBlock:^(id  _Nonnull obj) {
NSLog(@"haha");
}];
    
//[UIViewController bk_cancelBlock:token];

//未取消注释的打印信息：
//2017-08-16 11:06:44.058 BlocksKit的block中途取消测试[1536:50956] start

//取消注释的打印信息：
//2017-08-16 11:07:54.038 BlocksKit的block中途取消测试[1565:51979] start
//2017-08-16 11:08:04.040 BlocksKit的block中途取消测试[1565:51979] haha

可以看到block确实是可以被取消执行的。我们注意到这里有一个token，嗯？进入方法内部一探究竟。第一个方法有这样的调用层级关系：

bk_performAfterDelay:usingBlock: |__bk_performOnQueue:afterDelay:usingBlock: ...|__BKDispatchCancellableBlock()

最后这个BKCancellationToken类型的token，是这样返回的：

1
2
3
4
5
6
7
8
9
10
11
static id <NSObject, NSCopying> BKDispatchCancellableBlock(dispatch_queue_t queue, NSTimeInterval delay, void(^block)(void)) {
    dispatch_time_t time = BKTimeDelay(delay);
    
#if DISPATCH_CANCELLATION_SUPPORTED
    if (BKSupportsDispatchCancellation()) {
        dispatch_block_t ret = dispatch_block_create(0, block);
        // 在指定时间后将任务追加到队列中
        dispatch_after(time, queue, ret);
        return ret;
    }
// 另一个分支后面贴出

这里就可以知道BKCancellationToken实际上就是id <NSObject, NSCopying>，在NSObject+BKBlockExecution.h文件中可以印证这一说法，它本质上就是接下来需要执行的block。作者使用了双重保险来验证GCD是否支持取消block执行，函数BKSupportsDispatchCancellation()的实现是这样的：

1
2
3
4
5
6
7
8
// NS_INLINE表示函数为内联函数，在编译时，函数的实现代码就会被拷贝到调用处，然后编译在同一个可执行文件中。这样可以提高函数的调用效率，但仅适用于体积小且逻辑简单的函数，否则可执行文件就可能变得很大。
NS_INLINE BOOL BKSupportsDispatchCancellation(void) {
#if DISPATCH_CANCELLATION_SUPPORTED
    return (&dispatch_block_cancel != NULL);
#else
    return NO;
#endif
}

第二次验证实际上就是寻找函数dispatch_block_cancel的入口地址，如果是空值NULL（相当于OC中的nil），则表示不支持。

接着看看BlocksKit如何自实现可取消执行的block：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#endif  
    __block BOOL cancelled = NO;
    void (^wrapper)(BOOL) = ^(BOOL cancel) {
        if (cancel) {
            cancelled = YES;
            return;
        }
        if (!cancelled) block();
    };
    
    dispatch_after(time, queue, ^{
        wrapper(NO);
    });
    
    return wrapper;
}

作者巧妙的用了一个__block的cacelled标记，标记无效时才执行block。默认情况下就传入NO，使其能正常工作。将要取消时传入YES即可，以下就是bk_cancelBlock的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
+ (void)bk_cancelBlock:(id <NSObject, NSCopying>)block {
    NSParameterAssert(block != nil);
    
#if DISPATCH_CANCELLATION_SUPPORTED
    if (BKSupportsDispatchCancellation()) {
        dispatch_block_cancel((dispatch_block_t)block);
        return;
    }
#endif
    
    void (^wrapper)(BOOL) = (void(^)(BOOL))block;
    wrapper(YES);
}

食髓知味，神奇的动态代理

看到这里相信你已经了解了BlocksKit的一些基本使用的原理了，也肯定它们难不倒聪明的你。那么接下来的两个模块KVO和动态代理请你保持足够耐心（尤其是后者），期望你在阅读完之后依然能够轻松地呼出一口气，证明你确实理解了和笔者我真正的讲解到位了。

嗯，立个FLAG：前方高能预警！

包装KVO

导入了这个框架，你就可以这么使用KVO，十分简洁：

1
2
3
[self.view bk_addObserverForKeyPath:@"backgroundColor" options:NSKeyValueObservingOptionNew task:^(id obj, NSDictionary *change) {
NSLog(@"target:%@ change:%@", obj, change);
}];

以下是NSObject+BKBlockObservation.h中提供的所有关于KVO的接口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@interface NSObject (BlockObservation)

// 不指定标识符添加观察者，方法会返回一个标识符用作取消观察者的参数，默认是进程的标识信息。
- (NSString *)bk_addObserverForKeyPath:(NSString *)keyPath task:(void (^)(id target))task;
- (NSString *)bk_addObserverForKeyPaths:(NSArray *)keyPaths task:(void (^)(id obj, NSString *keyPath))task;
- (NSString *)bk_addObserverForKeyPath:(NSString *)keyPath options:(NSKeyValueObservingOptions)options task:(void (^)(id obj, NSDictionary *change))task;
- (NSString *)bk_addObserverForKeyPaths:(NSArray *)keyPaths options:(NSKeyValueObservingOptions)options task:(void (^)(id obj, NSString *keyPath, NSDictionary *change))task;

- (void)bk_addObserverForKeyPath:(NSString *)keyPath identifier:(NSString *)token options:(NSKeyValueObservingOptions)options task:(void (^)(id obj, NSDictionary *change))task;

// 添加指定键路径数组、标识和监听选项的观察者
- (void)bk_addObserverForKeyPaths:(NSArray *)keyPaths identifier:(NSString *)token options:(NSKeyValueObservingOptions)options task:(void (^)(id obj, NSString *keyPath, NSDictionary *change))task;

// 移除指定标识和键路径的观察者
- (void)bk_removeObserverForKeyPath:(NSString *)keyPath identifier:(NSString *)token;

- (void)bk_removeObserversWithIdentifier:(NSString *)token;

// 移除所有的观察者
- (void)bk_removeAllBlockObservers;

@end
大多框架都采用提供多个参数个数不一接口，而实质上接口的实现都是调用自身的一个参数最为完备的方法来克服objc不支持默认参数的问题和满足类自身的封装性。在这里添加监听者的方法最终就进入了这样的一段代码：

1
2
3
4
5
6
7
- (void)bk_addObserverForKeyPaths:(NSArray *)keyPaths identifier:(NSString *)identifier options:(NSKeyValueObservingOptions)options context:(BKObserverContext)context task:(id)task {
// 保证参数的完整性
NSParameterAssert(keyPaths.count);
NSParameterAssert(identifier.length);
    // task就是block
NSParameterAssert(task);
// 这个方法实现较长，为了能够更加细致地分析，后面会慢慢贴出逻辑结构


1
2
3
4
5
6
7
8
9
Class classToSwizzle = self.class;

// 使用一个单例的集合来存放已经Swizzling过的类，具体就是拌和dealloc的实现。对于一个类来说，dealloc方法拌和一次就可以了。这里不关心集合中元素的顺序，故用NSMutableSet就可以了。
NSMutableSet *classes = self.class.bk_observedClassesHash;

// 使用互斥锁保证线程安全，防止同时对classes操作造成不可预期的结果
@synchronized (classes) {
NSString *className = NSStringFromClass(classToSwizzle);
if (![classes containsObject:className]) {

下面进入Method Swizzling关键部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
SEL deallocSelector = sel_registerName("dealloc");
           
__block void (*originalDealloc)(__unsafe_unretained id, SEL) = NULL;
           
id newDealloc = ^(__unsafe_unretained id objSelf) {
// 拌和dealloc方法的核心目的就是希望在dealloc之前移除所有的观察者
        [objSelf bk_removeAllBlockObservers];
               
               // 如果当前类中没有实现dealloc方法，就动态发送消息给父类。对于那些自定义的类，方法能够添加成功，originalDealloc就一直是NULL
            if (originalDealloc == NULL) {
            struct objc_super superInfo = {
                .receiver = objSelf,
                .super_class = class_getSuperclass(classToSwizzle)
            };
                   
            void (*msgSend)(struct objc_super *, SEL) = (__typeof__(msgSend))objc_msgSendSuper;
           
            msgSend(&superInfo, deallocSelector);
            } else {
            // 如果有，直接调用
            originalDealloc(objSelf, deallocSelector);
            }
        };
           
           // 感觉这里的命名有点晕，上面定义的newDealloc实际上是用来构造IMP的block，这里就是定义新的dealloc实现
        IMP newDeallocIMP = imp_implementationWithBlock(newDealloc);
           
           // 对于系统类来说，肯定不能添加成功。因为NSObject已经有dealloc方法，默认实现就是调用父类。ARC中不允许出现[super dealloc]，因为运行时会自动完成。
          // 自定义类可以添加成功，因为自定义类中可以覆盖父类方法实现。从这个角度来看，这个操作是可以成功的。
          // 由这个方法官方解释可知给类添加的方法必须接收两个参数，也就是self和_cmd两个隐式参数，故需要指定类型为v@:
          //v@: 表示方法类型为无返回值接收两个参数：一个对象和一个selector。
if (!class_addMethod(classToSwizzle, deallocSelector, newDeallocIMP, "v@:")) {
               // 添加不成功，说明之前已经有方法的实现了，就把之前的方法取出来。
Method deallocMethod = class_getInstanceMethod(classToSwizzle, deallocSelector);
               
               // We need to store original implementation before setting new implementation
               // in case method is called at the time of setting.
               // 将之前的实现存储起来，防止在设置过程中方法被调用。
originalDealloc = (void(*)(__unsafe_unretained id, SEL))method_getImplementation(deallocMethod);
               
               // We need to store original implementation again, in case it just changed.
               // 设置新的方法实现时，会返回之前的实现。这里再次赋值是为了防止它已经被其他调用者改变了（比如用拌和添加了其他逻辑），也就是保证originalDealloc是设置之前的最新的实现
originalDealloc = (void(*)(__unsafe_unretained id, SEL))method_setImplementation(deallocMethod, newDeallocIMP);
}
           
           //添加成功后，就把这个类标记为已经拌合了dealloc方法
[classes addObject:className];   
}
}

实例化实际的观察者：

1
2
3
4
5
6
7
8
9
10
11
12
_BKObserver *observer = [[_BKObserver alloc] initWithObservee:self keyPaths:keyPaths context:context task:task];

//实现如下：
- (id)initWithObservee:(id)observee keyPaths:(NSArray *)keyPaths context:(BKObserverContext)context task:(id)task {
 if ((self = [super init])) {
 _observee = observee;
 _keyPaths = [keyPaths mutableCopy];
 _context = context;
 _task = [task copy];
 }
 return self;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[observer startObservingWithOptions:options];

// 实现如下：
- (void)startObservingWithOptions:(NSKeyValueObservingOptions)options {
@synchronized(self) {
// 防止同一个对象添加多个相同的观察者
if (_isObserving) return;

[self.keyPaths bk_each:^(NSString *keyPath) {
// 调用系统的KVO
[self.observee addObserver:self forKeyPath:keyPath options:options context:BKBlockObservationContext];
}];

_isObserving = YES;
}
}



1
2
3
4
5
6
7
8
9
10
11
12
NSMutableDictionary *dict;
@synchronized (self) {
dict = [self bk_observerBlocks];

if (dict == nil) {
dict = [NSMutableDictionary dictionary];
[self bk_setObserverBlocks:dict];
}
}
// 以标识符为键，存储观察者信息。这样移除指定标识符的观察者，把该键对应的值移除就可以了。
dict[identifier] = observer;
}

在观察的键值改变后，就根据监听选项来回调block：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

// 保证只回调使用`startObservingWithOptions`方法的添加观察者，如此才能有正确的监听选项匹配，task的参数能够对应起来。
if (context != BKBlockObservationContext) return;

@synchronized(self) {
switch (self.context) {
case BKObserverContextKey: {
void (^task)(id) = self.task;
task(object);
break;
}
case BKObserverContextKeyWithChange: {
void (^task)(id, NSDictionary *) = self.task;
task(object, change);
break;
}
case BKObserverContextManyKeys: {
void (^task)(id, NSString *) = self.task;
task(object, keyPath);
break;
}
case BKObserverContextManyKeysWithChange: {
void (^task)(id, NSString *, NSDictionary *) = self.task;
task(object, keyPath, change);
break;
}
}
}
}

// 移除观察者的代码相对简单，限于篇幅，这里就不过多唠叨了。


动态代理

作为BlocksKit的灵魂所在，逻辑结构和代码的嵌套层次并不是三下五除二就能明白和理清的。既然你已经看到了这里，那么请相信你是一个很有耐心的人，为你鼓掌！那么我们开始本文的最后一个模块，也是干货最多的一个部分！

我们先思考静态的代理是如何实现的，无论是delegate还是dataSource！其实总共分三步，注意不是将大象装冰箱的那三步，而是：

  1. 指定代理对象；
  2. 代理对象遵守协议；
  3. 代理对象实现协议。

当然第一步和第二步的顺序不是那么界限分明，不过这无关紧要，重要的是系统会在对象需要执行代理方法时做出怎样的响应。其实过程很简单：

  1. 查看该对象的代理对象，如果没有，则忽略这一系列的消息。如果有，就进入下一步；
  2. 查看代理对象是否遵守协议，对于有必选方法的协议，如果代理对象没有遵守协议，则程序运行直接崩溃；（如UITableView）
  3. 查看代理对象是否实现协议中的必选方法，没有程序也会在运行时崩溃。（如UITableView）

在文章开篇的时候，我们就已经知道了在BlocksKit的强力驱动下，我们只需要做什么就可以实现代理模式，这里以及后面的分析都以UIWebView为例：

1
2
3
4
5
6
7
8
9
10
11
12
//调用属性的setter方法
[webView bk_setDidStartLoadBlock:^(UIWebView *web) {
//..        
}];
    
[webView bk_setDidFinishLoadBlock:^(UIWebView *web) {
//..        
}];
    
[webView bk_setDidFinishWithErrorBlock:^(UIWebView *web, NSError *error) {
NSLog(@"error: %@", error.localizedDescription);
}];

几乎可以说是零成本！然而这只是表面的简单而已，它的背后实则隐藏着各种复杂各种蒙圈各种……而文章到这里的目的就是希望将它们抽丝剥茧，化整为零，化繁为简，那么就来看看作者是怎样在背后完成动态代理的吧！（注：以下内容用UIWebView作为分析实例，余者（系统对象）除了代理方法不同之外，实现过程是完全一样的。）

- - 找对象，找动态代理对象，上BlocksKit - -

如果你注意看了框架的源文件，就会发现UIWebView、UITextField和UIActionSheet等原生视图对象都有BlocksKit的分类，并且这里面还添加的是一系列属性。这是你可能就会想到属性的本质 = getter + setter + iVar，然后进入实现文件中看看有木有熟悉的动态关联代码。于是你就发现了作者的目的是动态生成属性的存取方法，然后就是喜闻乐见的+ load：

1
2
3
4
5
6
7
+ (void)load {
    // 以下是公用的注册动态代理和链接代理方法，自动释放池会让一个文件中调用它们产生的中间对象提前释放，防止对其他文件造成影响。
@autoreleasepool {
[self bk_registerDynamicDelegate];
// 链接代理方法的调用省去，节约篇幅
}
}

众所周知，这里是进行Method Swizzling最适合的地方。故作者自然顺遂了我们的心意，在这里面完成delegate的getter和setter的拌合：

1
2
3
4
5
+ (void)bk_registerDynamicDelegate {
    // 根据某一协议注册delegate
    // 第二个参数就是获取当前对象的代理协议对象，代码不多，可自行查看
[self bk_registerDynamicDelegateNamed:@"delegate" forProtocol:a2_delegateProtocol(self)];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
+ (void)bk_registerDynamicDelegateNamed:(NSString *)delegateName forProtocol:(Protocol *)protocol {
    //self = UIWebView类对象 protocol = UIWebViewDelegate delegateName = @"delegate"
    
    // 取得当前协议的代理信息映射表（可将其看作字典），传入YES表示没有则创建，并绑定在self上，用来记录setter和getter的拌合状态，避免多次拌合。
NSMapTable *propertyMap = [self bk_delegateInfoByProtocol:YES];

    //结构体：存储getter、setter、a2_setter
A2BlockDelegateInfo *infoAsPtr = (__bridge void *)[propertyMap objectForKey:protocol];

//正常情况下，一个类只会调用一次注册动态代理的方法。
if (infoAsPtr != NULL) { return; }

const char *name = delegateName.UTF8String;
objc_property_t property = class_getProperty(self, name);
    //setter: setDelegate:
SEL setter = setterForProperty(property, name);
    
    //a2_setter: a2_SetDelegate:
SEL a2_setter = prefixedSelector(setter);
    
    //getter: delegate
SEL getter = getterForProperty(property, name);

    //初始化block代理信息
A2BlockDelegateInfo info = {
setter, a2_setter, getter
};

    //将`delegate`的setter、getter、a2_Setter保存在对应的协议名下面，用mapTable存储
[propertyMap setObject:(__bridge id)&info forKey:protocol];
    
    //将协议下的代理信息取出来
infoAsPtr = (__bridge void *)[propertyMap objectForKey:protocol];

    // 以下的核心目的是拌合对象本身delegate属性的getter、setter
    
    //构建新的setter的实现，block接收一个NSObject被代理对象和id类型的代理对象
    // 当指定代理对象时，才会调用这个block，也就是你自己设置对象的delegate。
IMP setterImplementation = imp_implementationWithBlock(^(NSObject *delegatingObject, id delegate) {
        // realDelegate是让用户可以设置代理对象
A2DynamicDelegate *dynamicDelegate = getDynamicDelegate(delegatingObject, protocol, infoAsPtr, YES);
if ([delegate isEqual:dynamicDelegate]) {
            // 如果设置realDelegate就是动态代理对象本身，就将realDelegate设置为nil，即依旧使用动态代理自身响应消息
delegate = nil;
}
dynamicDelegate.realDelegate = delegate;
});

// **重要**：将原有的setDelegate:实现替换成上面构建的新实现，而a2_setter即a2_SetDelegate：实现就变成了系统实现：xxx.delegate = xxx。正常情况下，能够交换成功。
if (!swizzleWithIMP(self, setter, a2_setter, setterImplementation, "v@:@", YES)) {
        //bzero，置字节字符串s的前n个字节为零，即清除该协议下的代理信息
bzero(infoAsPtr, sizeof(A2BlockDelegateInfo));
return;
}

    //对于UIWebView来说，是能够响应getter：delegate。以下情况是为了适配自定义代理模式。
if (![self instancesRespondToSelector:getter]) {
IMP getterImplementation = imp_implementationWithBlock(^(NSObject *delegatingObject) {
return [delegatingObject bk_dynamicDelegateForProtocol:a2_protocolForDelegatingObject(delegatingObject, protocol)];
});

addMethodWithIMP(self, getter, NULL, getterImplementation, "@@:", NO);
}
}

到此，系统依然不知道代理对象是谁，这里的一系列操作是后续流程的大前提。

- - 不只牵线搭桥，还包装配到家 - -

贴上+load中省略的那部分：

1
2
3
4
5
6
[self bk_linkDelegateMethods:@{
@"bk_shouldStartLoadBlock": @"webView:shouldStartLoadWithRequest:navigationType:",
@"bk_didStartLoadBlock": @"webViewDidStartLoad:",
@"bk_didFinishLoadBlock": @"webViewDidFinishLoad:",
@"bk_didFinishWithErrorBlock": @"webView:didFailLoadWithError:"
}];

在经过一步代理协议的获取后，进入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
+ (void)bk_linkProtocol:(Protocol *)protocol methods:(NSDictionary *)dictionary
{
    //propertyName为新增的属性block名，selectorName对应于原有的delegate方法名
    //目的是为所有属性生成getter和setter
[dictionary enumerateKeysAndObjectsUsingBlock:^(NSString *propertyName, NSString *selectorName, BOOL *stop) {
// 省略参数检查

        // property_copyAttributeValue()第二个参数表示属性的类型
        // D: @dynamic N: nonatomic
        // 以下就是验证属性的存储方式是否符合要求，即动态生成存取方法和Copy赋值对象。详见参考资料Declared Properties。省略实现代码
        
SEL selector = NSSelectorFromString(selectorName);
SEL getter = getterForProperty(property, name);
SEL setter = setterForProperty(property, name);
        
        //使用分类添加的属性自然不能响应getter和setter
if (class_respondsToSelector(self, setter) || class_respondsToSelector(self, getter)) {
            return;
        }

        //获取上一步注册的代理信息，对于UIWebView来说这里能够获取info
const A2BlockDelegateInfo *info = [self bk_delegateInfoForProtocol:protocol];

        // 定义属性getter的实现，当在使用时显示访问才会调用。此处省略代码实现。

        // **重要**：调用setter赋值时，进入实现体内部。在这里实现了动态代理的赋值。
IMP setterImplementation = imp_implementationWithBlock(^(NSObject *delegatingObject, id block) {
A2DynamicDelegate *delegate = getDynamicDelegate(delegatingObject, protocol, info, YES);
            // 生成对应selector的执行block
[delegate implementMethod:selector withBlock:block];
});

        // 关于添加setter是否成功的判断，正常情况下均能成功。省略...
}

上面这段代码省略了很多是为了突出核心部分，也就是为属性setter的实现，第一句代码内部是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 内联函数，static表明是内部函数，不允许外部调用
static inline A2DynamicDelegate *getDynamicDelegate(NSObject *delegatingObject, Protocol *protocol, const A2BlockDelegateInfo *info, BOOL ensuring) {
    // 对于protocol：UIWebViewDelegate， info有效
A2DynamicDelegate *dynamicDelegate = [delegatingObject bk_dynamicDelegateForProtocol:a2_protocolForDelegatingObject(delegatingObject, protocol)];
  // 后面贴出 
}
// 调用方法实现依次贴出，方便阅读
- (id)bk_dynamicDelegateForProtocol:(Protocol *)protocol {
    // self是将要被代理的对象
Class class = [A2DynamicDelegate class];
NSString *protocolName = NSStringFromProtocol(protocol);
if ([protocolName hasSuffix:@"Delegate"]) {
// 根据协议名，生成动态代理对象所属类。对于UIWebView实例，它的类就是A2DynamicUIWebViewDelegate。实现细节，可自行查看。
class = a2_dynamicDelegateClass([self class], @"Delegate");
} else if ([protocolName hasSuffix:@"DataSource"]) {
class = a2_dynamicDelegateClass([self class], @"DataSource");
}

// 返回一个动态代理实例
return [self bk_dynamicDelegateWithClass:class forProtocol:protocol];
}

// 懒加载
- (id)bk_dynamicDelegateWithClass:(Class)cls forProtocol:(Protocol *)protocol {
__block A2DynamicDelegate *dynamicDelegate;

dispatch_sync(a2_backgroundQueue(), ^{
dynamicDelegate = objc_getAssociatedObject(self, (__bridge const void *)protocol);

if (!dynamicDelegate)
{
            // 动态代理绑定协议信息，例如cls = A2DynamicUIWebViewDelegate
dynamicDelegate = [[cls alloc] initWithProtocol:protocol];
            // 给代理对象指定协议绑定动态代理对象
objc_setAssociatedObject(self, (__bridge const void *)protocol, dynamicDelegate, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
});

return dynamicDelegate;
}

以上就获取到了动态代理对象，下面就是将其关联：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 续内联静态方法

    // 以下两个判断的意义是保证info各项参数的完整，防止接下来的消息分发出错。（防御式编程）
if (!info || !info->setter || !info->getter) {
return dynamicDelegate;
}

if (!info->a2_setter && !info->setter) { return dynamicDelegate; }

    // 两个参数是方法的隐式参数
id (*getterDispatch)(id, SEL) = (id (*)(id, SEL)) objc_msgSend;
   
    // 获取原始的代理对象，第一次进入自然为空
id originalDelegate = getterDispatch(delegatingObject, info->getter);

    // 第一次自然条件不会满足，而后就直接返回取得的动态代理对象
if (bk_object_isKindOfClass(originalDelegate, A2DynamicDelegate.class)) { return dynamicDelegate; }

    // 以下只在第一次设置动态代理对象时调用
void (*setterDispatch)(id, SEL, id) = (void (*)(id, SEL, id)) objc_msgSend;
    
    // **重要**
    
    // info->a2_setter ?:info->setter 是info->a2_setter ? info->a2_setter : info->setter偷懒的写法。前者条件成立是相当于是空操作，结果就为三目表达式的结果就为条件判断的结果。于是就调用a2_setter，设置真正的代理。
    // 动态调用setter，在注册动态代理是已将系统的setter实现与a2_setter实现交换了。这里的逻辑就是delegatingObject.delegate = dynamicDelegate
setterDispatch(delegatingObject, info->a2_setter ?: info->setter, dynamicDelegate);

return dynamicDelegate;
}

终于在这步之后，系统能够获取到实际的代理对象了： A2DynamicUIWebViewDelegate类型的实例。

属性的setter实现的第二句就是链接block实现与协议代理方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- (void)implementMethod:(SEL)selector withBlock:(id)block
{
    // 将代理方法的用block实现，self就是现在的那个动态代理对象
   BOOL isClassMethod = self.isClassProxy;

if (!block) {
[self.invocationsBySelectors bk_removeObjectForSelector:selector];
return;
}

    // 获取方法的描述：名字及类型。第三个参数指明该方法是否是协议中的必须方法
    // 在必须方法中没找到就在可选方法中找
struct objc_method_description methodDescription = protocol_getMethodDescription(self.protocol, selector, YES, !isClassMethod);
if (!methodDescription.name) methodDescription = protocol_getMethodDescription(self.protocol, selector, NO, !isClassMethod);

A2BlockInvocation *inv = nil;
if (methodDescription.name) {
NSMethodSignature *protoSig = [NSMethodSignature signatureWithObjCTypes:methodDescription.types];
        // 使用自定义的block和协议方法签名初始化block调用者。这个构造其中还将验证函数签名和block签名是否一致，不一致将抛出异常，保证block能够正常接收参数并完成回调。详细验证过程请查看源码。
inv = [[A2BlockInvocation alloc] initWithBlock:block methodSignature:protoSig];
} else {
        // 协议中没有这个方法，就用block的签名生成函数签名，然后实例化调用对象并返回。
inv = [[A2BlockInvocation alloc] initWithBlock:block];
}

    // 以selector为键存储实际调用对象到动态代理的映射表中。
[self.invocationsBySelectors bk_setObject:inv forSelector:selector];
}

1
2
3
4
5
- (instancetype)initWithBlock:(id)block {
NSParameterAssert(block);
NSMethodSignature *blockSignature = [[self class] typeSignatureForBlock:block];
// 后面贴出
}

这里需要获取到block的签名，它与方法不同的是没有self和_cmd这两个默认参数。作者定义了一个BKBlockRef结构体指针来反映其在内存中的数据结构，这里面各个分量可在运行时源码中找到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
typedef struct _BKBlock {
__unused Class isa;
BKBlockFlags flags;
__unused int reserved;
void (__unused *invoke)(struct _BKBlock *block, ...);
struct {
unsigned long int reserved;
unsigned long int size;
// requires BKBlockFlagsHasCopyDisposeHelpers
void (*copy)(void *dst, const void *src);
void (*dispose)(const void *);
// requires BKBlockFlagsHasSignature
const char *signature;
const char *layout;
} *descriptor;
// imported variables
} *BKBlockRef;

然后使用指针偏移，获取signature：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
+ (NSMethodSignature *)typeSignatureForBlock:(id)block __attribute__((pure, nonnull(1))) {
    BKBlockRef layout = (__bridge void *)block;
// 验证block的标识：签名和Copy赋值的block对象
if (!(layout->flags & BKBlockFlagsHasSignature))
return nil;

void *desc = layout->descriptor;
desc += 2 * sizeof(unsigned long int);

if (layout->flags & BKBlockFlagsHasCopyDisposeHelpers)
desc += 2 * sizeof(void *);

if (!desc)
return nil;
   
const char *signature = (*(const char **)desc);

return [NSMethodSignature signatureWithObjCTypes:signature];
}
1
2
3
4
5
6
7
// 接initWithBlock:
// 将block签名转换成方法签名
NSMethodSignature *methodSignature = [[self class] methodSignatureForBlockSignature:blockSignature];
NSAssert(methodSignature, @"Incompatible block: %@", block);
// 实例化调用对象
return (self = [self initWithBlock:block methodSignature:methodSignature blockSignature:blockSignature]);
}

现在动态代理对象就完成了自定义block与代理方法的链接，当代理对象响应代理方法时，就会回调block。

在UIWebView的分类源文件中，可以看到关于它的代理所属类的定义：

1
2
3
4
5
6
7
8
@interface A2DynamicUIWebViewDelegate : A2DynamicDelegate <UIWebViewDelegate>
@end

@implementation A2DynamicUIWebViewDelegate

// UIWebViewDelegate协议方法的实现

@end

那么现在我们可以总结下整个动态代理流程了：

  1. 拌合delegate的setter方法；
  2. 动态生成属性的存取方法，在delegate的setter中设置动态代理对象，并将代理方法映射为指定的block实现；
  3. 系统获取对象的代理是实际上取得的是动态代理对象（不手动设置代理对象），这个对象遵循了相关协议并实现了协议方法；
  4. 在协议方法实现体中，回调block以及readDelegate的代理方法（如果有这个对象且其能够响应代理方法）。

例如webView:shouldStartLoadWithRequest:navigationType:方法实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
BOOL ret = YES;

// 如果你指定了代理，代理实现的协议方法和block都将会被调用
id realDelegate = self.realDelegate;
if (realDelegate && [realDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)])
ret = [realDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];

// 这个方法返回的就是以selector为键的调用者对象的需要回调的block
BOOL (^block)(UIWebView *, NSURLRequest *, UIWebViewNavigationType) = [self blockImplementationForMethod:_cmd];
if (block)
// 判断block与方法签名是否相同的原因
ret &= block(webView, request, navigationType);

return ret;
}
- - 这伙计还能个性化定制 - -

目前就UIWebView的动态代理的整个流程大体上走了一遍了，你可以跟着以上的分析，结合实例，运用断点，try again!然而这还不是终点，你自定义的代理协议也能完美的工作。这里你有两种选择：一是自定义对应的代理对象的实现类，命名方式为：A2Dynamic类名Delegate，并动态注册代理和链接代理方法，也就是完全走上面的这条路。相信你不会这么做，于是乎，作者给了我们另外一条路：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 以下是测试类的接口和实现
#import <Foundation/Foundation.h>

@protocol CustomeDelegate <NSObject>

- (void)scanMe;

- (void)giveMe:(id)any;

@end

@interface CustomeDelegate : NSObject

@property (weak, nonatomic) id<CustomeDelegate> delegate;

- (void)delegateTrigger;

@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import "CustomeDelegate.h"

@implementation CustomeDelegate

- (void)delegateTrigger {
    if ([self.delegate respondsToSelector:@selector(scanMe)]) {
        [self.delegate scanMe];
    }
    
    if ([self.delegate respondsToSelector:@selector(giveMe:)]) {
        [self.delegate giveMe:@"给你"];
    }
}

@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 测试实现代码
_del = [[CustomeDelegate alloc] init];
    
// 声明该对象已经实现了代理协议，去掉警告
A2DynamicDelegate<CustomeDelegate> *dd = [_del bk_dynamicDelegateForProtocol:@protocol(CustomeDelegate)];
    
[dd implementMethod:@selector(scanMe) withBlock:^ {
NSLog(@"scan me");
}];
    
[dd implementMethod:@selector(giveMe:) withBlock:^(id obj) {
NSLog(@"obj:%@", obj);
}];

// 可见，系统能够知道代理对象是谁，剩下的工作就是如何在接收到代理消息时做出正确的响应。
_del.delegate = dd;

[_del delegateTrigger];

如果你注意到A2DynamicDelegate是继承自NSProxy，而且它本身就是根类。正如它的名字代理，它的本质工作就是消息的转发：Normal forwarding。为此它必须实现两个父类方法：

1
2
- (void)forwardInvocation:(NSInvocation *)invocation;
- (nullable NSMethodSignature *)methodSignatureForSelector:(SEL)sel

到这里你可能就有些明悟了，当接收到代理消息时，就把消息转发给动态代理对象，然后它再根据具体的消息回调不同的block。而事实上就是这样的过程，请继续往下看！

最开始我们需要通过代理协议对象创建一个动态代理对象，因为我们没有自定义实现类，最终它就是一个A2DynamicDelegate实例。然后用指定block实现指定的代理方法，这些实现前面已经贴出，下面重点内容是消息转发：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 返回方法的签名，并生成一个调用实例进入下面的方法
- (NSMethodSignature *)methodSignatureForSelector:(SEL)aSelector {
A2BlockInvocation *invocation = nil;
if ((invocation = [self.invocationsBySelectors bk_objectForSelector:aSelector]))
return invocation.methodSignature;
else if ([self.realDelegate methodSignatureForSelector:aSelector])
return [self.realDelegate methodSignatureForSelector:aSelector];
else if (class_respondsToSelector(object_getClass(self), aSelector))
return [object_getClass(self) methodSignatureForSelector:aSelector];
return [[NSObject class] methodSignatureForSelector:aSelector];
}

- (void)forwardInvocation:(NSInvocation *)outerInv
{
SEL selector = outerInv.selector;
A2BlockInvocation *innerInv = nil;
if ((innerInv = [self.invocationsBySelectors bk_objectForSelector:selector])) {
// 通过调用信息发起调用，调用细节可查看源码。大致分为方法签名验证、调用参数设置。
[innerInv invokeWithInvocation:outerInv];
} else if ([self.realDelegate respondsToSelector:selector]) {
// 如果有指定代理，就把调用信息转发给它
[outerInv invokeWithTarget:self.realDelegate];
}
}

总结

花了近一周的时间，磕磕绊绊算是把这篇文章写完了。最初写这篇文章的动力来自看别人分析这个框架没怎么看懂的郁闷，抱着发挥主观能动性的理念，来自我理解框架的架构思想。不过这个框架大致有哪些功能，还是在那篇文章中知道的，因为之前没用过这个框架，文章链接会在参考资料中给出。

解读这个框架所花时间不可谓长也不可谓短，个人感觉在那茅塞顿开的一瞬间会有所感触：一切都值了。一个成熟的框架涉及到一些底层知识是必不可少的，像是这里面的block内存中的数据结构之类的。早就听人言，阅读框架的代码不是要你每行每句都能够吃透，是希望你在这过程中开阔你的编程思想，提供你分析和理解能力。所以文章中一些省略的地方，希望各位能够按照自己的需求去阅读它，毕竟只有自己亲眼看到的才是最为真实的。

最后，发表一点关于这个框架的想法：它本质上是为了让我们能够更为简单的使用API，即用主观上更少的代码完成某项功能，但是背后就要付出更多的代价来支撑省下来的体力活。而我们应当在性能上投注更多的目光，而编写代码过程繁琐与否编程语言本身就已经决定了，要相信所有存在的东西都是有它的道理的。所以这个BlocksKit不太推荐使用，但是学习它是完全有必要和有意义的！

参考资料

Draveness/analyze: 神奇的BlocksKit一、二

Apple Documents: Declared Properties

勘误

框架作者在+load方法中链接的代理方法被@autoreleasepool包裹着的目的更切确来说是为了防止内存泄漏，因为这个方法是发生在main()函数之前，所以自然这其中产生的对象没有被主函数里面的自动释放池管理到。而通过对源码的分析来看，其实在+load方法的执行过程中前后是加了 objc_autoreleasePoolPush() 和objc_autoreleasePoolPop() 的！ 源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
void call_load_methods(void) {
    static bool loading = NO;
    bool more_categories;

    loadMethodLock.assertLocked();

    // Re-entrant calls do nothing; the outermost call will finish the job.
    if (loading) return;
    loading = YES;

    void *pool = objc_autoreleasePoolPush();

    do {
        // 1. Repeatedly call class +loads until there aren't any more
        while (loadable_classes_used > 0) {
            call_class_loads();
        }

        // 2. Call category +loads ONCE
        more_categories = call_category_loads();

        // 3. Run more +loads if there are classes OR more untried categories
    } while (loadable_classes_used > 0  ||  more_categories);

    objc_autoreleasePoolPop(pool);

    loading = NO;
}

以上在sunnyxx的iOS程序main函数之前发生了什么一文中得到印证。

]]> <hr> <p>意如分类标题(这个博客主题貌似没有，😂)那样，笔者打算开始探究框架与源码。毫无疑问，这其中会遇到各种各样的挑战，但是我觉得我们应尽早走出这一步，不然就错过了很多的精彩。也许这精彩是更加开阔的程序视野，亦或是逻辑思维与编程能力的提升，这其中对耐心与意志的磨炼绝对会让人十分“酸爽”。</p> <p>而这简而繁<code>BlocksKit</code>就成为了第一道<code>菜</code>，为什么呢？因为之前对它的认知就是对系统<code>API</code>的<code>block</code>方式调用的高度封装，这是它简单的使用特性。然而它的灵魂——动态代理让我深切感受到了框架的设计哲学：<code>把简洁留给别人，把复杂留给自己</code>。不信？那就接着往下看！<br> ⌈iOS⌋Bold Text 的坑 https://zeroonet.com/2019/03/30/bold-text/ 2019-03-30T07:13:40.595Z 2020-04-16T08:30:18.940Z

相信大家都清楚，iOS 设备上我们可以设置系统字体显示效果，比如字体变大或者加粗之类的。但如果使用的是自定义字体的话，则不在以上开关打开之后的调整范围之内。如果你的 App 想要适配这种情况的话，可能有一些周折，因为这里的 Bold Text 有一个坑点。这也致使我们的“上帝”向我们提出了批评：你们的前端该换人了，虽然这实际上是移动端的事，或者说是 iOS 的问题，😂

iOS：我怎么坑你了？

首先我们得创建一个 UIButton，这个按钮需要设置一张图片，即调用 setImage(#imageLiteral(resourceName: "imageName"), for: .normal)。然后在 Simulator 上跑起来，在 Bold Text 生效之前，在 Reveal 中，按钮显示效果是这样的：(iOS 12.2)

图片与文本的界限是很清楚，在默认的 imageEdgeInsets 和 titleEdgeInsets 情况下，图片与文本之间是没有重叠部分的。但是这种“距离美”在 Bold Text 生效之后就变成这样了：

当你测量过前后按钮的宽度后你会发现，Bold Text 生效后按钮会更宽，这是合乎清理的。因为字体都加粗了，肯定需要更大的空间去渲染它，但它却是向两边延伸的。注意，这和 titleLabel 的 textAlignment 是没有关系的，因为我们这里用的是它的固有尺寸。

适配 Bold Text

一个简单的思路就是调整 imageEdgeInsets 和 titleEdgeInsets，如果标题与图片之间不需要 spacing 的话，那么就设置为 0。但是事情不是这么简单，因为 Bold Text 生效之后，出现标题和图片之间重叠的时候，系统依然会认为它们的 spacing 就是 0，因为你事先并没有通过代码去调整 imageEdgeInsets 和 titleEdgeInsets。所以你还需要累加上一个值：图片与标题重叠区域的某个分量，具体是宽还是高，取决于图片与标题的相对位置，这可以借助博主之前写过的一个简单UIExtensions来完成，😄

祝玩得开心！

与 2020-04-16 补

如果你在 iOS 13.x.x 的设备上编写一个小 Demo 来测试 Bold Text 的问题是否有被修复，那么我得很遗憾地说，变得更坑了！之前还只是图片与文字的重叠，但至少都能完整“看出来”，而现在按钮的标题直接被缩略！官方论坛的这篇文章里面有对应描述，而这里有个临时解决问题的方案，但是这会出现标题超出按钮本身显示区域的问题。目前没有找到更好且有效的解决方案，待续～

]]> <hr> <p>相信大家都清楚，iOS 设备上我们可以设置系统字体显示效果，比如字体变大或者加粗之类的。但如果使用的是自定义字体的话，则不在以上开关打开之后的调整范围之内。如果你的 App 想要适配这种情况的话，可能有一些周折，因为这里的 Bold Text 有一个坑点。这也致使我们的“上帝”向我们提出了批评：<code>你们的前端该换人了</code>，虽然这实际上是移动端的事，或者说是 iOS 的问题，😂<br> ⌈OC⌋字母`U`引发的“血案” https://zeroonet.com/2019/02/20/enum-crash/ 2019-02-20T07:27:52.293Z 2019-03-07T10:38:49.002Z

不得不承认，这回标题党了一把！那博主为什么要这么厚颜无耻，究竟是道德的沦丧，还是人性的扭曲…… 高僧：施主，苦海无边，回头是岸，南无阿弥陀佛。

非也，非也，之所以如此这般，只能说博主实在太想表达粗心大意害死人(太想吸引眼球、太想博客有人看、太想出名、太想上电…… 啪啪)这句话了。历史上这样的大事件想必各位历历在目，比如…… loading…… loading…… 服务器忙～

好吧，想不起来了，那就进入这篇文章的主题，看看博主这次维护老代码遇到的坑长成啥样！(前言总算凑够字数，😄)

一个简简单单的枚举

二话不说，直接上代码：

1
2
3
4
5
6
7
8
9
typedef NS_ENUM(NSUInteger, NetworkError) {
    // local error (such as invalid parameters)
    NetworkErrorRequestData = -1000,
    // status code != 0
    NetworkErrorInvalidStatusCode,
    // response data can not be comformed to {msg: xx, status_code: xx, data: xx}
    NetworkErrorInvalidResponse,
    NetworkErrorModelSerializerError,
};

大家来找茬时间，倒计时 1 分钟，开始……

仔细认真是程序员很重要的修养

可以明确看到，枚举的 rawValue 的实际值的类型为整型，但是其声明类型却为无符号整型，那么枚举变量的实际 rawValue 就会出现向上转型。按照公式，-1000 => 2 ^ 64 - 1000，这个值为 18446744073709550616。这个值已经远远超过了 NSInteger.max 了，在 Objective-C 中，如果此时使用 NSInteger 强制将其转型，这个时候能够得到正确的 -1000。但是在 Swift 中，如果使用 Int(error.rawValue) 对其进行同样的操作，那不好意思，直接崩溃给你看：Not enough bits to represent the passed value。这样就让你的程序埋下了隐患的手雷，在 iOS 的工程环境下，如果你有混编的需求，那么很大可能上会引爆它。而问题的根本原因在于你编码时的不细致，或者 Code Reviewer 的不仔细。

博主想这种问题是很多人都会犯的，尤其是新手(博主也是)，但我们应该足够重视这种情况。之前看到了一篇文章说正因为犯错的代价太小，或者是被告知可以错了再来，致使每个人对自己犯的错误的重视程度不够，尤其是那种粗心大意导致的，然后错误就一而再再而三地出现。

]]> <hr> <p>不得不承认，这回标题党了一把！那博主为什么要这么厚颜无耻，究竟是道德的沦丧，还是人性的扭曲…… 高僧：施主，苦海无边，回头是岸，南无阿弥陀佛。</p> <p>非也，非也，之所以如此这般，只能说博主实在太想表达粗心大意害死人(太想吸引眼球、太想博客有人看、太想出名、太想上电…… 啪啪)这句话了。历史上这样的大事件想必各位历历在目，比如…… loading…… loading…… 服务器忙～</p> <p>好吧，想不起来了，那就进入这篇文章的主题，看看博主这次维护老代码遇到的坑长成啥样！(前言总算凑够字数，😄)<br> ⌈iOS⌋Safe Area 的适配 https://zeroonet.com/2018/11/23/safe-area-adapt/ 2018-11-23T06:03:06.209Z 2018-12-15T14:19:24.800Z

早在 iPhone X 发布的时候，即 iOS 11 的时候，就加入了一个新的关于布局的概念：Safe Area，它可以帮助我们让 UI 不被 UINavigationBar、UITabBar 和 UIStatusBar 遮挡。而苹果为了让开发者更好适配刘海屏搞出来的这一套东西，对于老项目的 UI 适配可能不是一个好消息，如果你是基于 UINavigationBar 或 UITabBar 来布局的，系统可以很好地帮助你完成。但是对于一些静态界面，可能你得慢慢理理，然后让涉及到的代码适配 Safe Area。也因此你会看到几乎所有 App 在 iPhone X 出来之后，都会有一次更新，其中的更新信息中就有适配 iPhone X。但是在 iPhone XS/XR 上使用的 App，你可能还是会发现有些 UI 布局还是有点问题，而在 iPhone X 上却又是正常的(就像扇贝的 App，自黑一波～)，原因在于当初适配 iPhone X 时只是简单的用了一个判断 isIPhoneX 来决定 UI 的样子。

isIPhoneXSeries?

一句话概括当时使用 isIPhoneX 的原因：省时，省力，更省心。

相信 iOS 的各位同行对于 iOS 原生的 AutoLayout 的写法之神奇早就深有体会，而目前普遍使用的封装 AutoLayout 的知名好用的开源库大多为 SnapKit(only Swift) 和 Masonry(Objective-C 编写，但 Swift 也可用，只要你看那一堆 ? 不觉得糟心，👀)。而在 iPhone X 发布后，我们需要快速地完成适配，并且同时手里还有各种事情要忙，上述的两个库又暂时没有 Safe Area 的支持，又要考虑到最小改动原则来降低 UI 错乱的风险，于是采用了这个下下之策，先自扇一耳光表示认错，🤦‍♂️

然后，新的刘海屏 iPhone 出来了，然后又得适配一波了！使用 isIPhoneXSeries? 问问观众答应不答应～

Safe Area 改变了啥?

  • UIView 加入了 safeAreaInsets 属性和 safeAreaLayoutGuide 属性，后者用于取代 UIViewController 的 topLayoutGuide 和 bottomGuide。safeAreaInsetsDidChange 方法可以监听 safeAreaInsets 的改变。
  • UIScrollView 加入了 contentInsetAdjustmentBehavior 属性，取代 UIViewController 的 automaticallyAdjustsScrollViewInsets。
  • UIViewController 加入了 addtionalSafeAreaInset 属性，用于扩展 Safe Area。viewSafeAreaInsetsDidChange 方法可以监听根视图和子视图 safeAreaInsets 的改变。

safeAreaInsets 反映的是视图与 Safe Area 的距离，即视图超出 Safe Area 的区域上下左右的值。

automaticallyAdjustsScrollViewInsets 是用来调整 UIScrollView 的视图内容，避免其被 UINavigationBar 和 UITabBar 遮挡，通过 adjustContentInset 属性我们可以得知其内容视图相对于 UIScrollView 的 frame 的偏移量。它有如下几个值：

  • never: adjustedContentInset = scrollView.contentInset。
  • always: adjustedContentInset = scrollView.contentInset + safeAreaInset。
  • scrollableAxes: 在可滚动方向上 adjustedContentInset = safeAreaInset + contentInset，在不可滚动方向上 adjustedContentInset = contentInset。
  • automatic: 如果 scrollview 在一个 automaticallyAdjustsScrollViewContentInset = YES 的控制器上，并且它被包含在一个 navigation controller 中，这种情况下会在 top & bottom 上设置 adjustedContentInset = safeAreaInset + contentInset 不管是否滚动。其他情况下与UIScrollViewContentInsetAdjustmentScrollableAxes相同，用一张图概括：

insetBehavior

如何使用 Safe Area?

如果你用的是 IB 搭建的界面，那么你很幸福，将 Use Safe Area Layout Guides 打开就可以解决绝大多数问题了。但是，如果你用的是 xib，那么不好意思，你可能还需要忙活一阵！我们都知道 safeAreaLayoutGuide 是 top/bottomLayoutGuide 的替代品，在 iOS 11 一下，IB 会自动将 safeAreaLayoutGuide 回退到 top/bottomLayoutGuide，但这只对于 storyboard scene 有效，我们可以手动测试，将 Use Safe Area Layout Guides选项关掉，top/bottomLayoutGuide就会出现在控制器对应的 scene 下面， 而xib描述的是控制器的视图，top/bottomLayoutGuide` 这个控制器本身的属性自然而然在 iOS 11 之下无法起作用，那么带来的问题是什么呢？我们不妨先来看看，它们是做什么的：

top/bottom LayoutGuide

经过实际项目中辛酸泪发现，如果根视图的子视图顶部约束依赖的是 safeArea.top，那么在 iOS 11 一下，xib 的这个子视图的顶部约束实际上是相对于屏幕顶部，而非 UIStatusBar 的底部，这就导致子视图与 UIStatusBar 重叠。 而 storyboard scene 中由于 top/bottom LayoutGuide 的存在，不会存在此问题，🤷‍♂️ 解决方法就是将这个顶部约束添加 Outlet，然后在 iOS 11 一下的设备上手动加上 UIStatusBar 的高度 20。也亏的这高度是固定的，不然要整死人，可见这又是一个使用 storyboard 而非 xib 的理由。

有了以上分析，对于用代码搭建的界面，需要考虑 Safe Area 的布局使用像如下形式的编码就可以了：

1
2
3
4
5
6
7
// SnapKit
if #available(iOS 11.0, *) {
    make.top.bottom.equalTo(view.safeAreaLayoutGuide)
} else {
    make.top.equalTo(topLayoutGuide.snp.bottom)
    make.bottom.equalTo(bottomLayoutGuide.snp.top)
}
1
2
3
4
5
6
7
8
// Masonry
if (#available(iOS 11.0, *)) {
    make.top.equalTo(self.view.mas_topMargin);
    make.bottom.equalTo(self.view.mas_bottomMargin);
} else {
    make.top.equalTo(self.mas_topLayoutGuideBottom);
    make.bottom.equalTo(self.mas_bottomLayoutGuideTop);
}

可见这种代码写起来并不简洁，起初想过对其进行封装，但考虑到 safeAreaLayoutGuide 和 top/bottom LayoutGuide 这两种属性的拥有者不属于统一类型，实在没有想到可行的且简洁的方式，就只能暂时这么做了。如果各位有什么好的意见，欢迎评论留言，🙏

参考资料

腾讯 Bugly iOS 11 安全区域适配总结

]]> <hr> <p>早在 iPhone X 发布的时候，即 iOS 11 的时候，就加入了一个新的关于布局的概念：Safe Area，它可以帮助我们让 UI 不被 <code>UINavigationBar</code>、<code>UITabBar</code> 和 <code>UIStatusBar</code> 遮挡。而苹果为了让开发者更好适配刘海屏搞出来的这一套东西，对于老项目的 UI 适配可能不是一个好消息，如果你是基于 <code>UINavigationBar</code> 或 <code>UITabBar</code> 来布局的，系统可以很好地帮助你完成。但是对于一些静态界面，可能你得慢慢理理，然后让涉及到的代码适配 Safe Area。也因此你会看到几乎所有 App 在 iPhone X 出来之后，都会有一次更新，其中的更新信息中就有适配 iPhone X。但是在 iPhone XS/XR 上使用的 App，你可能还是会发现有些 UI 布局还是有点问题，而在 iPhone X 上却又是正常的(就像扇贝的 App，自黑一波～)，原因在于当初适配 iPhone X 时只是简单的用了一个判断 isIPhoneX 来决定 UI 的样子。<br> ⌈iOS⌋给你的`Extensions`加层防护 https://zeroonet.com/2018/10/21/extension/ 2018-10-21T10:30:07.678Z 2018-11-18T08:00:09.945Z

笼统来说，我们在编写代码时候，通常会有两种方式来组织。一个是继承语言本身的数据类型然后派生出新的，这种方式的使用通常是你需要对此类型大改造以满足你的需求。典型的例子就是UIViewController，我们在构造视图控制器时，这个基类只是给我们提供了一个模版，其中包括了一些管理生命周期方法的默认实现。而关于UI方面，则只提供了一个父视图，我们的交互细节则需要在此基础上自行构建。而另外一种就是以扩展的方式，为基本的数据类型增加新的函数或者方法来达成我们的使用目的。后者的一个好处就是使用者不需要特意去用派生类型，只需要基本类型本身调用对应的扩展方法即可。但是它的坏处就是可能会再语言本身的版本迭代过程中与其所新增的函数或者方法名冲突，导致在运行出现二义性，引起程序崩溃。因此我们需要为这些Extensions做出一些命名和使用上的规范，以规避此风险。(文章主要以iOS开发用到的Objective-C和Swift两门语言举出🌰)

Objective-C的前缀心法

命名空间在一定程度上可以处理以上问题，但不能做到百分之百(稍后会在Swift中说明)，就更不用说不支持命名空间的Objective-C了。在考虑Objective-C在这方面存在不足后，我们的选择其实就只剩下改变方法名，避免冲突的可能性这一条路了。同时我们还要考虑第三方库，因为在构建App的时候，或多或少都会用到它们。(哪些把别人代码抄写一遍，然后当成自己的库的就另当别论了)所以现在的解决方案通常都是在方法前面加上作者或者库名之类的前缀以做区分，如下：

1
2
// 接口方法
- (void)xx_xxxxxx;

有时扩展实现的逻辑较为复杂或者有方法的重用，我们可能还需要将其拆分成几个私有的实现方法，以规整代码结构。有些时候我们的做法可能只是在其前面简单加一个_，但实际上Apple早就声明了他们对_或者__保留使用权，这在我们跟踪一些API的调用堆栈时可以看出来。借鉴接口方法对声明，私有实现方法我们也可以做类似对处理：

1
2
// 私有实现方法
- (void)__xxx_xxxxxx;

Swift的范型语法糖

如果你的项目使用的是Swift构建的话，我想你应该使用过自动布局库SnapKit和网络图片缓存库Kingfisher，它们在使用的时候都有一个共同的特点：

1
2
3
4
5
imageView.snp.makeConstraints {
    // do something
}

imageView.kf.setImage(with: ImageResource(downloadURL: url, cacheKey: key))

即在方法的调用之前都会访问一个用于标示库的属性，为什么要做这样的一个操作呢？Swift不是支持命名空间吗？是的，Swift确实是支持命名空间，但是如果导入的两个库中有对基本类型命名相同的扩展方法又该如何处理呢？当你在调用方法的时候，编译器就直接报二义性的问题，但关键是你还无法解决这个问题。因为这两个库本身没有做区分，你能做的仅仅是由于业务功能需要引入了它们，然后调用对应的方法。遇到了这种问题之后，你心里估计有一句mmp要吐槽，毕竟你引入了这库后，竟还得自己写相关代码。

不过好在我们使用的第三方开源库的作者在编写自己的代码时都是有经过仔细思考的，下面就让我们来看看这里面究竟是怎么实现的：(经过整理)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public protocol XxxCompatible {
    associatedtype CompatibleType
    static var xxx: Xxxable<CompatibleType>.Type { get }
    var xxx: Xxxable<CompatibleType> { get }
}

public extension XXXCompatible {
    public static var xxx: Xxxable<Self>.Type {
        get {
            return Xxxable<Self>.self
        }
    }
    
    public var xxx: Xxxable<Self> {
        get {
            return Xxxable(self)
        }
    }
}

public struct Xxxable<Base> {
    let base: Base
    init(_ base: Base) {
        self.base = base
    }
}

import Foundation.NSObject

extension NSObject: BayCompatible { }

extension Xxxable where Base: UIDevice { }

首先会通过XxxCompatible协议来决定库的标识符，如RxSwift的rx，Kingfisher的kf等，并让这个协议完成默认实现。这中间涉及到一个其桥接作用的类型Xxxable结构体，通过范型绑定一个Base类型的常量。在协议的默认实现中，如果是类型本身的扩展，那么Base代表等就是这个类型本身，如果是类型实例的扩展，那么Base就是这个实例本身。最后在声明扩展的接口时，通过where来限定约束关系，从而实现对指定类型的方法扩展，但本质是当Base为某种类型时，Xxxable就扩展出了某个接口方法，只不过方法的承受者是其绑定的Base类型的常量。

总结

随着公司自身产品的不断发展，所堆积的代码会越来越多，写过的扩展方法也就会因之不断增加，如果没有一个统一的命名规范，那么在使用时有很大的查阅成本，而且在某种程度上也增加了写重复代码的可能性，因为你并不是总能理解或者找到之前的已经有过的扩展方法。但如果按照上面的这两种方式规范之后，在Objective-C中你可以使用xxx_来找出当前类型已有过的所有扩展，而不用再在系统方法与扩展方法中滚来滚去傻傻分不清。而在Swift中，也就不用担心多个模块导入后，会出现不能解决的二义性问题。

此方法的缺点就是你得确保你的命名不会出现冲突，不过通常用公司的名称缩写或者产品名称缩写就不会存在问题，祝你好运！

]]> <hr> <p>笼统来说，我们在编写代码时候，通常会有两种方式来组织。一个是继承语言本身的数据类型然后派生出新的，这种方式的使用通常是你需要对此类型大改造以满足你的需求。典型的例子就是<code>UIViewController</code>，我们在构造视图控制器时，这个基类只是给我们提供了一个模版，其中包括了一些管理生命周期方法的默认实现。而关于<code>UI</code>方面，则只提供了一个父视图，我们的交互细节则需要在此基础上自行构建。而另外一种就是以扩展的方式，为基本的数据类型增加新的函数或者方法来达成我们的使用目的。后者的一个好处就是使用者不需要特意去用派生类型，只需要基本类型本身调用对应的扩展方法即可。但是它的坏处就是可能会再语言本身的版本迭代过程中与其所新增的函数或者方法名冲突，导致在运行出现二义性，引起程序崩溃。<strong>因此我们需要为这些<code>Extensions</code>做出一些命名和使用上的规范，以规避此风险。</strong>(文章主要以<code>iOS</code>开发用到的<code>Objective-C</code>和<code>Swift</code>两门语言举出🌰)<br> ⌈iOS⌋那让人印象深刻的坑点和`Bug` https://zeroonet.com/2018/09/29/bugs/ 2018-09-29T09:09:52.643Z 2018-10-01T13:53:04.503Z

转眼间又来到了九月末，只是这个九月与自读书以来的不太一样，因为开学是TA们的，我只有代码，😂。

不过，我想这不是什么感伤的情绪，而是对学生时期的青春岁月的缅怀，尽管早已逝去，但又怎么不叫人留念呢？👌，祭出代码表示表示吧，:)

你dismiss，我也dismiss

测试小姐姐：xxx，我是来报一个Bug来着，就是在网页中访问相册的时候，弹出的选项dismiss的时候，整个视频播放界面也跟着dismiss了，你看看这是什么问题呢？

我：这么神奇？我看看呢？是必现的问题吗？

测试小姐姐：是的……

我：👌，我看看，估计又是一个神奇的系统坑，因为在网页中访问相册是前端的操作逻辑，我们这边没有做额外的处理。

测试小姐姐：好的，辛苦了！

接下来的行为就是一阵疯狂的输出：断点调试 -> UI 的行为分析 -> …… -> 搜索引擎大法。

最终在UINavigationController的dismiss(animated flag: Bool, completion: (() -> Void)? = nil)方法中，看出了端倪！在dismiss了UIDocumentMenuViewController这个控制器之后，就紧接着dismiss了我可怜的视频播放控制器(我招谁惹谁了？)，这是什么情况？原谅我经验不足，容我搜索一波！结果表明：在UIWebView中，访问相册的时候，会首先弹出UIDocumentMenuViewController实例，让你选择访问方式，即拍照还是本地图库，在你选择之后，UIDocumentMenuViewController实例就会被系统dismiss，但是它在被dismiss的过程中，会沿着它的presentingViewController一直发送dismiss消息。

此问题的一个(看似)简单的解决方法是在UINavigationController实例present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Void)? = nil)方法被调用的时候对UIDocumentMenuViewController做好标记位，然后当dismiss的时候访问UINavigationController实例的presentingViewController属性时，直接返回nil，从而避免dismiss消息的向上传递。但是dismiss(animated flag: Bool, completion: (() -> Void)? = nil)并没有携带当前被dismiss的控制器的类型信息，所以就可能误伤需要正常dismiss的控制器，比如UIImagePickerController。

所以就有了另外一个更安全的解决方式：用自定义的UINavigationController的转场动画来模拟present的动画效果，以此来避免被莫名dismiss的问题

自己挖的坑把自己埋了

这是一段发生在扇贝阅读的故事，恰逢负责此项目的同事在忙于UI大改版的工作，在之前的基础库重构了之后出现了一个问题，但这个用户反馈的问题我们一直没能复现。本着对之前的工作负责的态度(其实就是现在手上没啥高优先级的事做，无聊的慌)，我接下了这个问题的复现、问题的排查和修复的工作。

起初，始终不能复现用户反馈的问题，最后留意到用户反馈的UA中设备的标识符总是iPad Pro 9.7 inch 和 iPad Pro 10.5 inch，并在这两款设备的模拟器上成功复现了此问题。嗯，万事开头难，后面的事情应该不会太难。(天真地如此想着)

在经历了一天的排查之后，发现WebviewJavascriptBridge的JS注入的相关初始代码在这两款设备上始终没有被正常执行到。由于这一个操作是在WKWebView渲染完成之前就已经被调用了，所以在与Safari联调到过程中也没能够捕捉到初始化的时机。鉴于越来越多用户反馈，深知问题有点严重，从时间成本上来考虑决定将此问题反馈给兵哥，让他帮忙处理。

尴尬的事是他在问题接收之后，很快就找出了问题的所在：在执行JS脚本注入的初始化操作之前，有一步是判断当前设备是否是iOS设备，而判断方法中其中的一个评判标准涉及到UA中是否有iOS/iPhone/iPad/iPod之类的标识符，这个条件判断在上述问题设备中返回的均是fasle。而通过在Safari中打印当前的UA，发现其中关于设备标识符的相关内容为unknown。(由于历史原因，目前部分代码用的UA并不统一。)

不得不感慨一句，做为刚毕业的小白，工作经验确实有待提高！！！起初我在排查问题的第一步也注意到了设备类型的判断语句，但看着那一句stackoverflow的参考链接，我本能的心安，觉得不会有什么问题。事实上也确实没有什么问题，而是我在基础库中对设备类型判断的代码重构上出现了一些问题：遗漏了对上述两款设备的描述。在设备类型的列举上面我本身也参考了一些资料，但还是出现了纰漏。

这件事给我自己的教训就是在这种资料的收集上一定要有足够权威的参考，比如维基百科，对于国内的技术博客已经有些怕了。同时，对于一些被大众认可的代码也要自己实际运行起来看看，即使它本身没有什么问题，也需要保证自己的代码对其的正常工作没有坏的影响。

]]> <hr> <p>转眼间又来到了九月末，只是这个九月与自读书以来的不太一样，因为开学是TA们的，我只有代码，😂。</p> <p>不过，我想这不是什么感伤的情绪，而是对学生时期的青春岁月的缅怀，尽管早已逝去，但又怎么不叫人留念呢？👌，祭出代码表示表示吧，:)<br> ⌈iOS⌋还能好好地对网页截图了吗？ https://zeroonet.com/2018/08/05/webview-screen-shot/ 2018-08-05T09:20:09.534Z 2018-08-10T12:18:24.598Z

嘿，web page，你为何如此的淘气？让我不知道你什么时候才加载完毕！
嘿，UIWebview，你为何如此的坑人？你的delegate表示对你webViewDidFinishLoad方法的调用时机感到怀疑！
嘿，WKWebview，你为何如此的害羞？对你的第一次“拍照”结果总是白屏！

哟哟，切克闹，Apple你还能让我愉快地工作了吗？
Apple: 小蚱蜢，你还没悟到吗？想对网页完整截图你首先得知道网页的内嵌资源什么时候加载完毕，或者用我提供的方法，当然这得要你配合，让你的应用只支持iOS 11，🤷‍♂️……

被抛弃的UIWebView

首先通过指定的URL，使用UIWebView加载网页，然后在webViewDidFinishLoad的代理回调方法里处理截图相关的逻辑，最后将截图的结果返回。So easy！(UIWebView的独白：感谢老大哥对我一直以来的支持与关注，因为你没有在比我更厉害的小弟(WKWebView)出来之后就将我雪藏了。但是我要给你说声抱歉，这样做是达不到你的预期的。不是我的能力不够，而是我不够开放，能做到你想要的那种效果是我的私有API。我的爹妈(Apple)注意到了这个问题，但因为我的可塑性问题，不再喂养我了，而是生了一个二胎！(WKWebView)😢，sorry……)

老大哥风轻云淡地自测了起来，因为这个网页是静默加载的，所以他还不知道带来啥问题。不过在他将截图分享出去的时候，发现这个图片为什么不够完整呢？我的网页明明高度有1500 pixel，截出来的图片怎么就只有500 pixel了呢？老大哥不信邪，他决定再来一次。诶，怎么又行了？经过一段时间的测试，他发现网页首次加载的时候截的图不完整，以后每次截图都是没问题的。(是指相同的URL，考虑网页缓存的问题)

老大哥百思不解，“我是在网页加载完毕之后截的图啊，为什么还不完整？”。带着这问题，他打开了Google搜索了起来，第一篇文章他就找到了他想要的答案。随着一声法克，他好像明白了！虽然心里已经把Apple问候了一下，但他还是在代码的位置写下了详细的注释：webViewDidFinishLoad这个代理方法并不是网页将其所有资源加载完毕的时机，而顶多算是将网页解析完毕。这就导致在首次截图的时候会出现截取不完整的情况出现，而后续的截图操作因为缓存的问题，截图时网页已经是完全加载状态了，所以截图是没有什么问题的。而如果想要对UIWebView所加载网页真正完成的时机，需要访问到其私用API，具体参见这里。

使用WKWebView

UIWebView中只能通过stringByEvaluatingJavaScriptFromString方法执行JS。而如果想要在注入JS中，在特定条件下调用原生的方法，那么就需要访问documentView.webView.mainFrame.javaScriptContext这个私有属性，也就意味着有悲剧(被拒)的风险。但WKWebView不是这样，它通过WKUserScript类来动态注入JS，并且能够在注入的代码中以指定对形式来回调原生的代码，这一特性就为我们获取网页完全加载完成时机的监听带来了可能。代码如下：(这里面的循环引用问题不再文章的讨论范围，有需要的朋友可自行检索相关资料)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public lazy var captureWebview: WKWebView = {
    // 这里替换当网页所有内联资源(如图片)加载完成后回调的 onload 方法
    // 旨在注入调用原生的 JS
    let readyStateObserveJS = """
            window.onload = function() {
                window.webkit.messageHandlers.loadCompletely.postMessage(null)
            };
            """
    let userScript = WKUserScript(source: readyStateObserveJS, injectionTime: .atDocumentStart, forMainFrameOnly: true)
        
    let config = WKWebViewConfiguration()
    config.userContentController.addUserScript(userScript)
    config.userContentController.add(self, name: "loadCompletely")
        
    let result = WKWebView(frame: UIScreen.main.bounds)
    result.navigationDelegate = self
    return result
}()

extension BayWebviewCapture: WKScriptMessageHandler {
    public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "loadCompletely" {
            // do something
            debugPrint("load completely......")
        }
    }
}

如果此时你显式打开一个网页，你会发现打印日志一定是出现在你看到界面加载完成之后，这也就意味着我们已经监听到那个我们一直想要知道的截图时机。不过在截图之前，我们先稍等一下，WKWebView的navigationDelegate中还有一个代理方法值得探究一下：webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)，看看这个方法的调用时机是什么！

测试ing……
测试ing……
结果观察ing……

打印结果如下：load completely...... did finish navigation......。事实证明我们的细心是有必要的，因为这个代理方法就真正是那个网页加载完成的时机了，那，我要JS代码监听有何用？查阅文档，包括之前UIWebView的代理方法，它们都没有详细的方法描述，真的是该清楚的地方不写清楚，可以简略的地方不简略，这很Apple!

截图来看一看啦瞧一瞧

1
2
3
4
5
6
7
8
9
10
func startCaptureWebview() -> UIImage? {
    captureWebview.frame.size = captureWebview.scrollView.contentSize
    captureWebview.scrollView.setContentOffset(CGPoint.zero, animated: false)  
        
    let rect = CGRect(x: 0, y: 0, width: captureWebview.scrollView.contentSize.width, height: captureWebview.scrollView.contentSize.height)
    UIGraphicsBeginImageContextWithOptions(rect.size, true, UIScreen.main.scale)
    captureWebview.drawHierarchy(in: rect, afterScreenUpdates: true)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

Nice！很标准的官方代码，那我们看看执行截图的结果吧！……Oh no…… 黑屏、黑屏、黑屏、黑屏、黑屏……我经历了什么？我不就是想要对网页进行截图吗？为什么还是不行？心态有点小崩溃，但是少安毋躁，作为coder，就要敢于面对惨淡的人生，敢于正视淋漓的鲜血……咳咳，在各种官方坑的淫威下不屈服！

削微思考下，黑屏的结果不外乎是网页的内存绘图没有获取到任何界面元素，而造成这种现象的原因可能是网页的渲染还没完成。那么我们试着做一下延时处理，结果有所改善，网页的内容能够正确捕捉到。但是带来了一个新的问题，第一次截屏出现莫名的白屏问题，而这个问题在模拟器上没有出现(考虑Mac性能优于iPhone)。这就很令人捉急了，阅读一些开源框架的实现吧，看看能不能带来一些启发！在github上发现两个与之相关的开源库：SwViewCapture和DDGScreenShot，有点戏剧性的是这两个库的实现几乎完全一样，甚至是代码在排布上都是一致的，这很有意思！不过究其实现原理，不外乎是对WKWebView以屏幕大小分块截图并绘制到内存中，然后截取整个的内容截图，即是最终的网页截图。但是通过测试之后，发现这个分段截图的实现会有很大概率导致截图失败，因此放弃了这个分段截图的策略。细想这开源库的处理过程，本质上是对网页进行两次截图，那如果我们对网页进行两次截图，结果会不会有所不同呢？先看看最终的实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 不同于 UIWebview，WKWebview 的 didFinish 代理方法是在所有资源加载完毕的情况下调用
// 通过注入 JS 对象，监听 window.onload 方法，发现 didFinish 方法的调用在其之后，故得此结论
public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
        // WKWebView 截屏的坑点：第一次截屏截取不到网页的任何内容，因此需要二次截屏
        self.startCaptureWebview { [weak self] _ in
            self?.startCaptureWebview(completion: { [weak self] (image) in
                self?.finishLoadingHandler?(image)
            })
        }
    }
}

/// 对 webview 全部内容进行截屏
func startCaptureWebview(completion: @escaping (UIImage?) -> Void) {
//        let originalSize = captureWebview.frame.size
//        let originalOffset = captureWebview.scrollView.contentOffset
    
    captureWebview.frame.size = captureWebview.scrollView.contentSize
    captureWebview.scrollView.setContentOffset(CGPoint.zero, animated: false)
    
    // 目前对 WKWebView 没有很好的实践，除了 iOS 11 后官方的 API
    // 从官方 API 中得知截图的过程是异步的，并联想到对 frame 等布局属性的设置后，界面会在下一个渲染时机刷新
    // 因此这里做出延时的操作，等到内容渲染完成，否则对于很长的 webview 来说，截图的中间一段会出现白屏
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
        let rect = CGRect(x: 0, y: 0, width: self.captureWebview.scrollView.contentSize.width, height: self.captureWebview.scrollView.contentSize.height)
        UIGraphicsBeginImageContextWithOptions(rect.size, true, UIScreen.main.scale)
        self.captureWebview.drawHierarchy(in: rect, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        completion(image)
    }
    
    // 因为截屏操作做了延时，如果 webview 立即恢复原来的 size，将导致截图只是 webview 的第一屏
    // 所以恢复原有的 size 依旧需要延时，并保证其在截屏完成后进行
    // 由于此处加载的 webview 对用户是不可见的，因此这里的恢复 size 的操作可以省略
//        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
//            self.captureWebview.frame.size = originalSize
//            self.captureWebview.scrollView.setContentOffset(originalOffset, animated: false)
//        }
}

结果证明这一猜测是正确的，至少在测试的几十次截图过程中没有发生失败的问题，但是这个代码从实现过程上难有优雅可言，所以仅供参考。如果你有更好的方法，欢迎留言，👏

后续：更优雅的方式，UIWebView？ 于 2018.8.10 补

WKWebView截图的坑以致于Apple官方在iOS 11推出了专门的API，而且还是直接返回的UIImage对象，🤣。话不多说，先看下完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/// 对 webview 进行截屏的工具类
public class WebviewCapture: NSObject {
    
    fileprivate static let kWebViewRenderFinishedLocationUrlStr = "xxxxxxx"
    
    public static let shared: WebviewCapture = WebviewCapture()
    
    /// 对 url 所代表的网页链接进行完整截屏
    ///
    /// - Parameters:
    ///   - url: 需要截屏的网页链接
    ///   - startLoadingHandler: 网页开始加载的回调
    ///   - failToLoadHandler: 网页加载失败的回调，它将收到一个具体的 NSError 错误信息
    ///   - finishLoadingHandler: 网页截屏成功的回调，它将收到截屏的结果 UIImage
    public func captureWebview(url: URL,
                               startLoadingHandler: @escaping () -> Void,
                               failToLoadHandler: @escaping (Error) -> Void,
                               finishLoadingHandler: @escaping (UIImage?) -> Void) {
        self.startLoadingHandler = startLoadingHandler
        self.failToLoadHandler = failToLoadHandler
        self.finishLoadingHandler = finishLoadingHandler
        
        captureWebview.loadRequest(URLRequest(url: url))
    }
    
    fileprivate var startLoadingHandler:(() -> Void)?
    fileprivate var failToLoadHandler: ((Error) -> Void)?
    fileprivate var finishLoadingHandler: ((UIImage?) -> Void)?
    
    /// 用于隐式加载网页并截屏的 webview 实例
    public lazy var captureWebview: UIWebView = {
        let result = UIWebView(frame: UIScreen.main.bounds)
        result.delegate = self
        return result
    }()
}

extension WebviewCapture: UIWebViewDelegate {
    public func webViewDidStartLoad(_ webView: UIWebView) {
        startLoadingHandler?()
    }
    
    public func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {
        failToLoadHandler?(error)
    }
    
    public func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        if request.url?.absoluteString == BayWebviewCapture.kWebViewRenderFinishedLocationUrlStr {
            if let scrollHeightStr = webView.stringByEvaluatingJavaScript(from: "document.body.scrollHeight"), let scrollHeight = Int(scrollHeightStr) {
                webView.scrollView.contentSize.height = CGFloat(scrollHeight)
                webView.frame.size = webView.scrollView.contentSize
            }
            self.finishLoadingHandler?(self.startCaptureWebView())
            return false
        } else {
            return true
        }
    }
}

private extension WebviewCapture {
    
    /// 开始对 webview 截屏
    ///
    /// - Returns: 截屏的图片结果
    func startCaptureWebView() -> UIImage? {
        var result: UIImage?
        let scrollView = captureWebview.scrollView
        
        UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, scrollView.isOpaque, UIScreen.main.scale)
        scrollView.contentOffset = .zero
        scrollView.frame = CGRect(origin: .zero, size: scrollView.contentSize)
        if let context = UIGraphicsGetCurrentContext() {
            captureWebview.layer.render(in: context)
        }
        result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return result
    }
}

既然我们这边不知道网页加载完毕的时机，那我们就让前端来告诉我们，这样我们就可以去掉恶心的延时代码了。那如果你们的前端不配合的话，可以参考以下延时的Y技：(在 webViewDidFinishLoad 方法操作)
1
2
3
4
5
6
7
8
9
10
11
DispatchQueue.main.async {
    if let scrollHeightStr = webView.stringByEvaluatingJavaScript(from: "document.body.scrollHeight"),
        let scrollHeight = Int(scrollHeightStr) {
        webView.scrollView.contentSize.height = CGFloat(scrollHeight)
            webView.frame.size = webView.scrollView.contentSize
    }
}
        
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
    // startCaptureWebView()
}

]]> <hr> <p>嘿，<code>web page</code>，你为何如此的淘气？让我不知道你什么时候才加载完毕！<br>嘿，<code>UIWebview</code>，你为何如此的坑人？你的<code>delegate</code>表示对你<code>webViewDidFinishLoad</code>方法的调用时机感到怀疑！<br>嘿，<code>WKWebview</code>，你为何如此的害羞？对你的第一次“拍照”结果总是白屏！</p> <p>哟哟，切克闹，<code>Apple</code>你还能让我愉快地工作了吗？<br><code>Apple</code>: 小蚱蜢，你还没悟到吗？想对网页完整截图你首先得知道网页的内嵌资源什么时候加载完毕，或者用我提供的方法，当然这得要你配合，让你的应用只支持<code>iOS 11</code>，🤷‍♂️……<br> ⌈iOS⌋UIView? UIWindow? UIScreen? 分层设计哲学？ https://zeroonet.com/2018/07/10/view-window-screen/ 2018-07-10T08:51:12.683Z 2018-07-21T15:01:09.261Z

UIView是iOS可视化图形界面开发所使用的基类，并负责响应用户的交互行为；

UIWindow是包含图形界面的窗口，它是一切可视化界面的容器(使用Reveal可以得到验证)，并且它还将持续跟踪App当前的firstResponder(第一响应者)，并负责处理由Application对象传递过来的消息(依据其 sendEvent实例方法的文档注释可以得出，亦即response chain(响应链)的开端)；

UIScreen是硬件设备屏幕的抽象，因此它会包含所有的UIWindow实例，通常会用mainScreen的 bounds属性来初始化一个适合屏幕大小的key window(主窗口)，因为官方文档明确说明UIWindow是无法响应在其bounds之外的触摸事件的，对用户而言就是其触屏事件将得不到响应。

以上是关于它们三兄弟我们认知的比较清楚的一些知识点，但前两者在使用上的区别我们有必要做进一步深究。而对于UIScreen的其他使用，比如mirrored，我想它也是蛮有意思的。这一切的思考源自我对项目中关于截屏触发的反馈界面是应该使用UIWindow还是UIView，系统状态栏和键盘为什么是*Window而不是*View。

从文档入手

虽然我们曾多次吐槽Apple文档的啰嗦，但也不可否认它们将开发的流程描述得足够清楚。不过我想，真正能够将官方所有的开发文档阅读完的朋友少之又少。因为文档的体量还是有点大，同时我们平常负责开发的App只会用到其中的一部分知识。如果出现了“书到用时方恨少”这种窘境(当然也有可能是属于自然遗忘)，我们不妨现炒现卖。

You use windows only when you need to do the following:

Provide a main window to display your app’s content.

Create additional windows (as needed) to display additional content.

一句mmp不知当讲不当讲！这和没说有什么分别！然后再把这里逛完一周，发现依然只是对它们的使用更加了解罢了(这个文档其实非常值得一看，😅，里面有对App多屏联动的实现较为具体的阐述，相信你看完之后就能自己写一个Time Out了。)。看来只有靠自己了，为了减少以后被下属或者上司，甚至是面试官问到为什么有时候要用UIWindow而不用UIView的原因时脸上的茫然，YY吧！

主观臆测

举一个我们都曾遇到过的🌰：键盘管理。暂且抛开IQKeyboardManager，实现一个简单的功能，也就是键盘挡住输入框多少，我就把输入框上移多少。无疑，我们会先注册一个通知：UIKeyboardDidShowNotification，然后在此通知响应方法里面获取键盘视图的frame(notification.userInfo[@"UIKeyboardFrameEndUserInfoKey"])，最后判断它与输入框的frame是否有交集，并通过调整输入框frame中的origin.y来达到目的。但别忘了，键盘的frame是相当于它的容器窗口来计算的，所以你还需要将输入框的frame变换到UIWindow上，这样它与键盘才有可比性。这里也就引出了UIWindow的另外一个用处：相对于全屏幕的坐标变换，那么这里会自然思考键盘视图为什么是由另一个*Window来管理，而不直接追加到最上层的视图呢？相信通过我这样的表述(YY)，你会有此一问。

如果键盘视图是以subview的方式添加到当前应用最上层的视图，那么在弹出键盘之前，系统还得通过key window的root view controller不断地顺藤摸瓜(例如使用类似响应链的方式)。归根结底，这太麻烦了，浪费时间啊！特别是对于这种一定要响应及时的UI操作，任何一点时间的消耗都可能影响用户体验。而使用*Window则根本不需要关心这些，我只需要调整下window level(实质上是z轴的坐标)就行了。而对于status bar来说就更是如此了，在系统界面需要出现，在App的界面也需要出现。如果你用subview的方式，那你得做多少次添加或删除或移动的操作啊！它和键盘本身是一个典型的单例，谁要用我就展示出来好了，大不了再根据App的界面配置更改下外观不就行了。相比于Android，这还带来了沉浸式的阅读体验，因为它们并没有那么明显的分块区隔，而是通过分层合成的(现在每每看到Android手机那独立出来的状态栏就糟心)。类比来说，你要让人在一张纸上堆叠出绚丽的特效，相信没人敢接手！为什么？因为一个差错就全部都不能用了啊，而用分层的思想，我就可以分开来单独渲染。一个环节只会影响到当前这一层，而对全局没有毒副作用。

嗯，道理是相通的，分而治之，😅

]]> <hr> <p><code>UIView</code>是<code>iOS</code>可视化图形界面开发所使用的基类，并负责响应用户的交互行为；</p> <p><code>UIWindow</code>是包含图形界面的窗口，它是一切可视化界面的容器(使用<code>Reveal</code>可以得到验证)，并且它还将持续跟踪<code>App</code>当前的<code>firstResponder(第一响应者)</code>，并负责处理由<code>Application</code>对象传递过来的消息(依据其 <code>sendEvent</code>实例方法的文档注释可以得出，亦即<code>response chain(响应链)</code>的开端)；</p> <p><code>UIScreen</code>是硬件设备屏幕的抽象，因此它会包含所有的<code>UIWindow</code>实例，通常会用<code>mainScreen</code>的 <code>bounds</code>属性来初始化一个适合屏幕大小的<code>key window(主窗口)</code>，因为官方文档明确说明<code>UIWindow</code>是无法响应在其<code>bounds</code>之外的触摸事件的，对用户而言就是其触屏事件将得不到响应。</p> <p>以上是关于它们三兄弟我们认知的比较清楚的一些知识点，但前两者在使用上的区别我们有必要做进一步深究。而对于<code>UIScreen</code>的其他使用，比如<code>mirrored</code>，我想它也是蛮有意思的。这一切的思考源自我对项目中关于截屏触发的反馈界面是应该使用<code>UIWindow</code>还是<code>UIView</code>，系统状态栏和键盘为什么是<code>*Window</code>而不是<code>*View</code>。</p> ⌈随想⌋男儿至死是少年 https://zeroonet.com/2018/07/06/graduation/ 2018-07-06T08:45:30.617Z 2018-07-07T09:17:53.428Z

2001.6 自童年步入学校(幼儿园，🤣)
2018.6.28 由成年拥抱社会(被学校赶出来，然后卷铺盖走人了……)
在学校17年的求学之路至此已经落下了帷幕，没有半点拖泥带水，甚至来不及感慨，或者说我们根本不能感慨，因为：披坚执锐陷阵营，男儿至死是少年！

大任于斯？

不得不承认，大学期间是整个读书生涯过得最有意义的一段时间。或许是得益于从那漫无边际的应试教育中暂时抽身出来，在这段时间里我们终于可以真正开始做点我们想要做的事。而这其中就有两种情况需要加以区分：学习和放纵。对，不是放松或休息之类的词语，而是这个带有贬义的“放纵”。依然记得高中老师的谆谆教诲，其中印象最为深刻的一句就是“革命仍未成功，同志尚需努力，到了大学随便你们怎么玩”。不难得知，这只是老师们给高三党的一个美好憧憬，并以此来让他们的战斗意志不灭。可终究会有人信以为真，然后在大学校园内，恣意的享受这只求及格的学习态度。诚然，每个人都有自己的人生目标和生活态度，并且没有什么可以衡量不同选择的对错。但是如果这种习惯波及到了原本那些想要学有所成的同学，那么自己就应该好好反省一下才行。

或许是因为时运不济，我的寝室室友大多都是那些“城门防火”之人，后面因为某些原因需要将原有寝室分散重组，新入的寝室只能说是变本加厉了。随之也带来了问题，因为作为一个“插室生”，对他人的劝阻得到的只是毫无反应或者怒目而视。既然改变不了别人，就只有改变自己了！于是有了后来一系列值得一生铭记的就寝“经验”：睡天台、睡走廊、睡自习室、睡实验室，凡此总总，其目的很单纯：想睡得早些罢了，上课更有精神罢了，有余神学其他的东西罢了……

一直向前

以上，纯粹记录下自己大学最有意义的事情，权当是聊以慰藉如今独处异乡的自己。趁着年轻，确实应当出来见识见识世面，了解了解不同的人文风情。或许在某个不久以后，倦了，累了，故乡的味道将足以抚慰我这一颗漂泊的心。虽然自己已经不再是学校里的学生了，但刚刚踏入社会的你就可以被称为“社会人”了吗？我想不是的，不管是心境上，还是阅历上，我都还只是一只初生牛犊，因为目前尚未遇到虎，关于怕不怕它的问题，就留到日后再议。

之前的我，现在的我，以后的我，希望眼中和心中都能保有一份童真，对这个世界的一切都抱以自己的真性情。痛的时候哭出来，高兴的时候笑出来，直到……

]]> <hr> <p>2001.6 自童年步入学校(幼儿园，🤣)<br>2018.6.28 由成年拥抱社会(被学校赶出来，然后卷铺盖走人了……)<br>在学校17年的求学之路至此已经落下了帷幕，没有半点拖泥带水，甚至来不及感慨，或者说我们根本不能感慨，因为：<b><code>披坚执锐陷阵营，男儿至死是少年</code></b>！<br> Swift中!和?的区别 https://zeroonet.com/2018/06/01/optional/ 2018-06-01T06:33:58.000Z 2018-09-29T08:56:42.004Z

毋庸置疑，这是学习Swift最基本的知识点，但在实际的使用中我们往往容易忽略它们做为类型本身的差异，即使我们之前都曾了然过，因为我们在可选这个方面用得最多的是解包方面的操作符：!和？？。这篇博文主要就上面这个类型差异以及Swift与Objective-C在混编时需要注意的事项展开，后者主要涉及两个编译器标识符：_Nonnull和_Nullable。

从IBOutlet中一窥究竟

细心的朋友们会发现，在Swift中，Storyboard／Xib中控件的Outlet的类型全部都是以!结尾的，就像这样：

1
@IBOutlet weak var resultIconView: UIImageView!

这里不难理解控件的输出口都是可选类型，因为控件是属于Storyboard/Xib的，而在建立与placeholder的连接的时候，该控件可能会因为某种原因而已经被移除了或者暂时没有这个连接(本质上是通过KVC来完成关联的)。而我们在使用该输出口的时候，却并不需要进行解包。想必说到这里你已经回想起如何来回答像文章题目这样的问题：使用!声明的可选类型，表明其一定有值，相当于?声明的可选类型在使用时进行!强制解包。如果此时它的为nil然后又参与了额外的计算，那么程序就会崩溃！考虑如下代码：
1
2
3
4
5
6
var str: String = "a"
var a: Int! = Int(str)
// 如果有值的话，打印的结果还是optional(值)，因为强制解包可选是可选的一种类型
print(a)

let b: Int = a + 1

通常情况下，控件的IBOutlet是一定可以和控件本身关联成功的，所以这里使用!可以帮助我们去掉在使用时的解包操作。而对于暂时没有连接的情况，使用!就会大问题了，即unexpectedly found nil while unwrapping an Optional value。那么这种使用场景什么时候会出现？

这里举一个典型的🌰，在完成扇贝的大耳狐英语中关联家长的界面时，要求如果在iPhone上，需要有一个将二维码保存到手机相册的按钮，而在iPad中则没有这个按钮。在这个项目启动时，开发进度比较赶，我们就选择使用Storyboard来快速完成静态界面的搭建。而为了区分iPhone和iPad，我们在init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?)中，通过判断当前设备的类型，从而加载不同的Xib文件。然后为了使用同一个Swift文件，我们就把这种不存在的输出口的类型声明为?，也就是把原来的!改为?，如下：

1
@IBOutlet weak var saveQRButton: UIButton?

去掉不安全且烦人的感叹号!

特别地，在Swift中混编Objective-C，当遇到调用的API有返回值时，如果没有在API中明确说明，返回值的类型都将会被标记为可选强制解析类型。显然这会留下安全隐患，因为Objective-C可能返回nil。为了防患于未然，我们可以给其加上编译器标识符，就像这样：

1
- (NSString * _Nullable)userName;

当然，这只是在编译器层面规避了问题，但是由于Objective-C弱类型的特点，在_Nonnull的修饰下，即便你返回一个nil，你最多也只能得到一个⚠️，而如果返回的结果是要经过计算的，那么这个Warning也会被隐藏掉。所以，要是你不能百分百保证其是_Nonnull，那么建议你都使用_Nullable。这样在Swift中使用时，虽然你会多一步解包，但会更加安全。

]]> <hr> <p>毋庸置疑，这是学习<code>Swift</code>最基本的知识点，但在实际的使用中我们往往容易忽略它们做为类型本身的差异，即使我们之前都曾了然过，因为我们在可选这个方面用得最多的是解包方面的操作符：!和？？。这篇博文主要就上面这个类型差异以及<code>Swift</code>与<code>Objective-C</code>在混编时需要注意的事项展开，后者主要涉及两个编译器标识符：<code>_Nonnull</code>和<code>_Nullable</code>。<br> 新的开始，新的起点 https://zeroonet.com/2018/06/01/hello-world/ 2018-06-01T02:40:36.000Z 2018-06-01T02:40:36.000Z

欢迎来到 ZeroOnet 的个人小站！
你之前可能在CSDN看到过我，鉴于以下原因，博主开始下决心搭建自己的个人博客：

  • CSDN 上的博客读者必须登录之后才能查看全文；
  • CSDN 的博客主题相比 Hexo 来说，差距有点远，而且这会影响到读者的阅读体验和笔者本人的创作热情；
  • CSDN 时不时弹出一两个广告，让人实在心烦；
  • CSDN 在线编辑功能有时很坑，即可能导致保存的记录丢失，博主个人就遇到过几次；
  • 个人博客的创作环境更加自由，不需要受第三方平台账户系统的限制，但相应的博文推广途径会受限，这就更考验笔者的功力，能够促使博主写出更优质的文章。

对于个人而言，也算是新的起点吧！毕竟临近毕业，近20年的读书生涯即将落下帷幕，一个崭新完整的世界等待我去探索。而这之前，作出一些个人习惯的调整与改变，相信不会是什么坏事……

To be continue, the fighting boy！

关于博客迁移

为了让自己的劳动成果更好的发(自)光(以)发(为)热(是)，博主会将CSDN上花费心力较多的博文Copy过来，但同时也会保留CSDN上的源。毕竟，我在这上面开始了自己的写博客的习惯，而这是值得纪念与回味的，因为这一年多的时间里收获了很多也学会了很多，感谢CSDN，🙏

下面就迁移过来的博客做一个清单，方便朋友们区分：

  • iOS版QQ的黏性下拉刷新效果简易实现;
  • 简而繁的BlocksKit;
  • iOS平台上aa（见缝插针）游戏的简易实现;
  • 九宫格解锁的完全实现;
  • 一个简易的下拉刷新松耦合实践。

关于分类

目前这个hexo博客主题，不支持博文的分类功能，博主暂时先通过标题来做一个简单的描述，后面再研究下这个博客主题的源码(现在还不咋懂前端，请谅解！)，看看怎么加上分类这个功能。

]]> <hr> <p>欢迎来到 ZeroOnet 的个人小站！<br>你之前可能在<a href="https://blog.csdn.net/zeroonet?viewmode=contents">CSDN</a>看到过我，鉴于以下原因，博主开始下决心搭建自己的个人博客：<br> ⌈iOS⌋打造一个通用的UIViewController返回按钮 https://zeroonet.com/2018/06/01/universal-back-action/ 2018-06-01T02:38:07.000Z 2018-06-01T02:38:07.000Z

在iOS中，UIViewController有三种展现方式：present、push和addChildViewController。前面两种方式通常涉及到界面的返回，即dismiss和pop。如果只是单纯地根据不同展现方式来确定返回操作，两个简单的API调用就可以完成了。而如果想要将它们的处理逻辑收束到一个方法里面，就需要多花一些功夫。当然，凡事皆有利弊，想要集中控制就需要在返回行为触发的时候做更多的逻辑判断，保证完成的返回操作是正确的。

presentingViewController和presentedViewController

我们在做自定义过渡动画的时候遇到过这两个属性，它们的命名让人觉得有些困惑，不过好在它们的文档注释总算是表述清晰。如下：

var presentingViewController: UIViewController? { get }

The view controller that presented this view controller.
When you present a view controller modally (either explicitly or implicitly) using the present(_:animated:completion:) method, the view controller that was presented has this property set to the view controller that presented it. If the view controller was not presented modally, but one of its ancestors was, this property contains the view controller that presented the ancestor. If neither the current view controller or any of its ancestors were presented modally, the value in this property is nil.

var presentedViewController: UIViewController? { get }

The view controller that is presented by this view controller, or one of its ancestors in the view controller hierarchy.
When you present a view controller modally (either explicitly or implicitly) using the present(_:animated:completion:) method, the view controller that called the method has this property set to the view controller that it presented. If the current view controller did not present another view controller modally, the value in this property is nil.

这么冗长的解释(这很Apple)归根结底就一句话：控制器Apresent控制器B，那么A的presentedViewController就是B，而B的presentingViewController就是A。

方法的实现

这里不妨给UIViewController加一个Extension，添加一个方法backAction，根据上面的分析不难写出第一个逻辑分支：

1
2
3
4
5
6
@objc func backAction() {
if presentingViewController != nil && presentingViewController?.presentedViewController == self {
        dismiss(animated: true, completion: nil)
    }
//......
}

此时有一种情况需要考虑，即present的UIViewController是被UINavigationController包裹的，判断条件就需要有所改变：
1
2
3
if navigationController?.presentingViewController != nil && navigationController?.presentingViewController?.presentedViewController == navigationController {
// ......
}

查阅popViewController的文档注释，我们知道，当navigationController管理的控制器栈中的控制器数量不大于2的时候，调用popViewController是没有任何效果的。换句话说，navigationController的rootViewController不会被pop掉，所以我们在处理pop的时候不需要判断当前的navigationController的childViewControllers的个数是否大于1。但是如果是present出来的navigationController中，为了区别pop和dismiss的临界条件，则需要加上。以下为该方法的完整实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
@objc func backAction() {
    if presentingViewController != nil && presentingViewController?.presentedViewController == self {
        dismiss(animated: true, completion: nil)
    } else if navigationController?.presentingViewController != nil && navigationController?.presentingViewController?.presentedViewController == navigationController {
        if navigationController?.childViewControllers.count ?? 0 > 1 {
            navigationController?.popViewController(animated: true)
        } else {
            navigationController?.dismiss(animated: true, completion: nil)
        }
    } else {
        navigationController?.popViewController(animated: true)
    }
}

]]> <hr> <p>在<code>iOS</code>中，<code>UIViewController</code>有三种展现方式：<code>present</code>、<code>push</code>和<code>addChildViewController</code>。前面两种方式通常涉及到界面的返回，即<code>dismiss</code>和<code>pop</code>。如果只是单纯地根据不同展现方式来确定返回操作，两个简单的<code>API</code>调用就可以完成了。而如果想要将它们的处理逻辑收束到一个方法里面，就需要多花一些功夫。当然，凡事皆有利弊，想要集中控制就需要在返回行为触发的时候做更多的逻辑判断，保证完成的返回操作是正确的。<br> ⌈iOS⌋另一种保留视图动画后效果的姿势 https://zeroonet.com/2018/06/01/animation-remove/ 2018-06-01T02:36:14.000Z 2018-06-01T02:36:14.000Z

我们都清楚作用于UIView的layer属性的显式动画CoreAnimation，实际上是通过layer的presentationLayer(表现层)来展示的。而代表视图原始数据的modelLayer(模型层)并没有发生改变，因为展示层实质上是模型层的一份拷贝。(在CoreAnimation内部实际上还存在一个renderLayer(渲染层)，它表示真正需要渲染到屏幕上的内容，不过它对开发者来说是不可见的，所以我们不需要关心这一层。)

当动画执行完成之后，展示层就会消失，用户这时看到的就是视图的模型层。但是这个切换的过程不是以动画的形式来完成的，所以这时就会遇到视图的Jump back(闪回)，即当动画结束后，视图的外观会跳变到最初的模样。这显然不是一个很好的用户体验，所以这也成为了关于显式动画必须要处理的问题。

关于这个问题，我们最开始学习到的方法可能就是下面这样：

1
2
ani.isRemovedOnCompletion = false
ani.fillMode = kCAFillModeForwards

这种解决方法本质是让动画一直运行下去，如果之后对属性运用隐式动画，它将不会工作，因为CoreAnimation一直处于运行的状态，这样也自然而然会造成内存的浪费。其实在上面分析闪回出现的原因的时候，另一种姿势的关键其实已经包括在其中了，也就是设置模型层，并在设置之前禁掉隐式动画。这里通过简单的opacity动画来举例，代码如下：
1
2
3
4
5
CATransaction.begin()
CATransaction.setDisableActions(true)
testView.layer.opacity = 0
testView.layer.add(alphaAni, forKey: "alpha")
CATransaction.commit()

让人有点懵圈的fillMode

不妨先来看看官方文档的解释：

Determines if the receiver’s presentation is frozen or removed once its active duration has completed.

嗯，如果你对自己的英语水平不那么自信的话，欢迎使用扇贝来全方位提升英语👂说读写的能力。🐶 不皮了！因为皮一下可以，皮几万就不行了！😂

其实这段解释让人觉得疑惑的点就是frozen这个词，它的意思是冻结、结冰之类的。这样整句话的意思就成了当动画完成之后，动画的接收者外观是冻结还是移除，呵呵！很直白的翻译，有点图样了。而如果我们结合实际的场景来联想的话，这句话不难翻译为动画的接收者是保持动画后的样子还是保持原来的样子，也就是模型层是否要根据执行动画的表现层来更新。

这个属性是字符串变量，有四个不同的值，分别如下：

1
2
3
4
public let kCAFillModeForwards: String
public let kCAFillModeBackwards: String
public let kCAFillModeBoth: String
public let kCAFillModeRemoved: String  //default value

这里让人有点在意的是fillMode的值并不是枚举值，而如果从实际的使用上来看，使用枚举类型更符合直觉。与之类似的还有CAShapeLayer的lineCap和lineJoin属性，这样设计的具体原因无从得知，不过这也不是我们关心的重点。如果有知道的朋友，欢迎留言！👏

结合上面我们对这个属性的官方文档的解读，可以得出它们分别代表的含义，并通过opacity简单举例：

kCAFillModeForwards: 模型层保持动画后的效果，如果模型层最开始的opacity值为1，动画的toValue是0.5，那么在动画后，模型层的opacity值会更新为0.5。(需要同时结合isRemovedOnCompletion = false才能生效)

kCAFillModeBackwards: 模型层在动画开始之前就处于动画的fromValue状态，比如此时模型层的opacity值为1，动画的fromValue是0.8，那么在layer添加了动画之后，模型层的opacity值就会突变为0.8，然后完成动画。(为了在代码中更好的体会这个值的不同，可以将动画的开始时间中加一个延时)

kCAFillModeBoth: kCAFillModeBackwards和kCAFillModeForwards效果的结合。

kCAFillModeRemoved: kCAFillModeBoth的反面。

参考资料

iOS 7 Programming Pushing the Limits

]]> <hr> <p>我们都清楚作用于<code>UIView</code>的<code>layer</code>属性的显式动画<code>CoreAnimation</code>，实际上是通过<code>layer</code>的<code>presentationLayer(表现层)</code>来展示的。而代表视图原始数据的<code>modelLayer(模型层)</code>并没有发生改变，因为展示层实质上是模型层的一份拷贝。(在<code>CoreAnimation</code>内部实际上还存在一个<code>renderLayer(渲染层)</code>，它表示真正需要渲染到屏幕上的内容，不过它对开发者来说是不可见的，所以我们不需要关心这一层。)<br> ⌈iOS⌋九宫格解锁的完全实现 https://zeroonet.com/2018/06/01/nine-grids-unlock/ 2018-05-31T16:00:00.000Z 2023-12-28T05:45:17.737Z

不记得在使用诺基亚的那些日子，为了一个九宫格解锁，在应用商城里下了多少流氓软件。最后无功而返的时候，那种郁闷的心情恨不得把手机给砸了！不得不承认，九宫格解锁的一时风靡，以致于Android阵营的很多手机都内置了这一解锁选项，比如华为。然，Apple官方却没有提供这方面的选择。唉！谁叫人家肌肉壮硕呢？有钱任性呢？（ps：有了指纹解锁还要这个？No kidding！）在网上Search了N久，没有找到一个完整实现了九宫格解锁的Demo或kit，或许是使用的搜索引擎的手段太过low了。不过这并不妨碍想自己写一个这样的例子出来，于是便有了以下的内容！

提纲挈领

笔者用一个枚举来表述九宫格解锁视图的所可能对外呈现的状态，如下：

1
2
3
4
5
6
7
8
9
10
11
12
typedef NS_ENUM(NSUInteger, ZNUnlockStatus) {
    ZNUnlockStatusSettingPWD = 1,//1
    ZNUnlockStatusSettingPWDFailed,
    ZNUnlockStatusSettingPWDSuccessed,
    ZNUnlockStatusEnsurePWD,
    ZNUnlockStatusInputPWD,//5
    ZNUnlockStatusFailed,
    ZNUnlockStatusSuccessed,
    ZNUnlockStatusResetPWD,//8
    ZNUnlockStatusResetPWDFailed,
    ZNUnlockStatusErrorWaiting //waiting for 20s after five errors
};

其中只有1、5、8对应的状态是对外有效的访问状态，其他的只是在整个使用过程中可能会出现的用做提示的状态信息，将通过代理回调的方式来进行数据传递，这些只能由解锁视图根据用户的实际操作动态改变而不能通过对外接口预置。这里笔者心恨了一点，如果你不“乖乖”听话，程序就崩给你看：

1
2
3
4
5
6
7
8
9
- (void)setUnlockStatus:(ZNUnlockStatus)unlockStatus {
    if (unlockStatus == 1 || unlockStatus == 5 || unlockStatus == 8) {
        if (_unlockStatus != unlockStatus) {
            _unlockStatus = unlockStatus;
        }
    } else {
        NSAssert(NO, @"only three status of ZNUnlockStatus can be setted:ZNUnlockStatusSettingPWD、ZNUnlockStatusInputPWD、ZNUnlockStatusResetPWD, others just be used to show ZNUnlockStatus information");
    }
}

Demo中默认的图片（来自Iconfont）是简单的样式，所以当你将解锁图案设置为可见时，线条的颜色也是与默认图片向匹配的。如果你错误绘制，线条颜色就只能是红色的。当然每个宫格的图片你可以自定义，包括普通状态、选中状态、错误状态，不过在这里建议错误状态的图片底色最好与线条相同。如果解锁完成，你想要让视图消失，通过dismissUnlockView就可以完成后续的步骤。

抽丝剥茧

这个名为ZNNineGridsUnlockView的类将一切逻辑都封装起来了，整个Demo的核心功能是通过touchesBegan:withEvent:、touchesMoved:withEvent:、touchesEnded:withEvent:、drawRect:这几个方法的串接调用完成的。（ps：绘图过程必须在drawRect:里完成）

在跟随用户交互来画线的实践中，笔者的思路是通过在触摸视图的过程中确定起点和终点（诚然，在确定画线时这两点必须是九宫格其中之一的终点）。如果画线过程是可见的，那么在触摸移动的过程中就需要不断地重绘视图，为了保持连贯性，就需要不断更新终点（此时的终点只是一个过渡点）。画线结束后，需要将终点更新为新的起点，不断迭代，最终完成图案的绘制。

最开始的时候，笔者将过渡线条以不断创建UIBezierPath实例并画线来实现，然后通过持有一个最终确定画线的实例来确认画线，却发现了这样的问题：线条会有一瞬间的出现（嗯，闪现），然后就消失了。下一次确定时，本次线条和上次线条均会闪现，说明实际的绘制过程是成功的，猜测原因可能是两个路径实例相互冲突。（ps：由于清空了废纸篓，之前录屏的bug的gif图片就886，所以没有给出一个直观的描述图，真是抱歉！）

后面在千辛万苦找到一个实例之后，发现真正的效果是通过取巧的方式完成。原来实际的解锁页面下面还有一个UIImageView，在确定绘制的过程中，获取内存的绘图，并更新UIImageView即可看到最终流畅的线条效果。

在笔者使用九宫格解锁之后，就一直觉得有一点不爽，也就是起点和终点之间如果有有效的绘制点（之前没有被选中），那么这个点也会被自动选中，用户不能禁止这种行为。这个小例子中，笔者自己弥补了这个小缺憾，同时也是为了增加解锁图案的多样性。

总结

自我感觉这个Demo没多少技术含量，所以在写这篇文章时有点不知道怎么写的感觉，总觉得有点废话的感觉。不过，这些都不是很重要，重要的是下面有完整的代码和效果图。鉴于CSDN的图片大小限制，这里笔者就只能录小部分功能的演示：

额！刚刚试了一下，发现录了5秒就用了5.9MB，所以就只能降低画质和PPI来减少大小了。这里是代码地址，你可以去看看！谢谢！

]]> <hr> <p>不记得在使用诺基亚的那些日子，为了一个九宫格解锁，在应用商城里下了多少流氓软件。最后无功而返的时候，那种郁闷的心情恨不得把手机给砸了！不得不承认，九宫格解锁的一时风靡，以致于Android阵营的很多手机都内置了这一解锁选项，比如华为。然，Apple官方却没有提供这方面的选择。唉！谁叫人家肌肉壮硕呢？有钱任性呢？（ps：有了指纹解锁还要这个？No kidding！）在网上Search了N久，没有找到一个完整实现了九宫格解锁的Demo或kit，或许是使用的搜索引擎的手段太过low了。不过这并不妨碍想自己写一个这样的例子出来，于是便有了以下的内容！<br> ⌈iOS⌋一个简易的下拉刷新松耦合实践 https://zeroonet.com/2018/05/22/drop-down-refresh/ 2018-05-22T12:13:23.000Z 2018-09-15T10:25:33.426Z

在iOS平台，许多App的下拉刷新都是使用的MJRefresh这个开源库，笔者所接触开发过的几个App就是这样。当然还有很多效果酷炫的下拉刷新，真是不得不佩服开源界大神们的创意！这里是一些厉害框架的集合，你可以看看！

笔者是一个Android粉（ps：蒙谁呢，不就是舍不得肾嘛！），在使用起点读书这一App时，发现它所使用的下拉刷新十分简约，而且也能一定程度上吸引用户的注意，减少用户的心里等待时间。于是心血来潮，就想在iOS平台上实现这一效果。这次实践“捡起”了之前“丢掉”的东西，也学到了一些新东西，只是觉得遗憾的是在一些视觉设计上并没有达到模板的效果，文章后面会提到。这里先贴出一张效果图，如果你用过这个App，你应该就知道笔者简略了哪些地方：

我只是会转一圈而已

毫无疑问，这个刷新效果非常简洁，功能实现也相对简单。但是笔者在实现的过程中还是遇到了一些困境，比如原作中在下拉过程中strokeEnd逐渐增加的同时，笔画的头部有一个小箭头逐渐显现，最后完全显现，提醒用户此时结束滑动将能够触发刷新动作。这个很有意思的设计到笔者最终大致完成这个Demo的时候依旧没有什么头绪在iOS上实现，系统提供的lineCap并不能满足需求。还有就是原作中正在进行动画时，strokeEnd、strokeStart是以上次的结束点为起点，笔者进行了多番尝试，始终未果，所以在此虚心请教各位：如果有知道的朋友，请在评论区留下你的答案，谢谢！

为我所想要的而努力

正如标题中所说的那样（ps：笔者坚决不做标题党），本次实践的最终目的是实现一个简易的松耦合下拉刷新。何为松耦合？减少功能块之间的依赖程度，使其具有可移植性。比如说：你想让navigationBar的透明度随着视图的滚动而逐渐变化，于是乎你就在相关的滚动代理方法里实现了这样的目的。后面你慢慢发现随着项目的迭代，需要这样效果的界面越来越多，如果你有程序员的基本素养的话（DRY），你就会质疑自己的做法，因为做了太多的重复的体力工作了，而这就是代码之间高度耦合的表现。而解决这一问题可以使用的方法有很多，比如Method Swizzling。它的作用就是交换两个方法的实现体，是Objective-C实现AOP至关重要的黑魔法，Aspects就是为用户方便使用这一语法糖而诞生的框架。但就像念茜在这篇文章里的总结所表现的那样：使用有风险，拌合需谨慎！

笔者在使用这一语法糖来完成本次实践的时候，踩了不少坑，大大增加了工作时间。具体是那些，后面将会一一叙述。在这里总结一下所用到的一些语法：Category、Protocol、Method Swizzling、Runtime等，如果你是新手，对这些知识还比较陌生，建议先了解相关知识，这样有助于你理解后面文章中所贴出的代码。

如果你愿意一层一层一层的剥开我的心

从效果中可以很容易分辨出这一刷新效果的组成部分：圆形视图、动画展示刷新的进程。在下拉的过程中，UITableView、UISCrollView的contentOffset并没有发生改变，初始状态能够正常的上滑。当滑动进程不够而结束滑动时，视图回到原点，即隐藏在navigationBar下面；在滑动到刷新过程停留的位置之外时，视图将动态回到停留处并开始动画。动画是连续的，直到刷新完成或者检测到当前网络连接中断（ps：Demo中只是模拟了网络连接的一个固定耗时，并没有做网络连接状态的监测，也就是在Demo中，刷新动作总是能够正常完成的）。刷新完成后，视图逐渐缩小最后消失，下次刷新时，圆形视图依旧从最上面滑动出现。

仅此而已的物语

正如著名小品《钟点工》里宋丹丹所讲的那样：“把大象关冰箱里总共分三步：第一步打开冰箱门，第二步把大象放冰箱里，第三步把冰箱门关上。”且不说第二步如何违背算法实现的可行性原则，只是这一个将具体问题分步骤解决的思想在编程过程中是到处都有所体现的，即面向过程编程。面向对象编程或是面向协议编程不外乎是对实现的过程进行了更深层次的抽象，像是以类的形式组织代码，以对象的形式封装数据等等思想都是以线性的思维过程为基石的，接下来就说明笔者完成Demo的几个步骤：

STEP1 决定图层的所属

从效果上看来很容易想到它是结合UIScrollView或UITableView使用的，因为刷新的一系列操作都有视图的滑动程度相关，因此可以让控制器实现相关的代理方法，并在其中插入对应的逻辑代码即可。从UITableView的tableHeaderView属性中可以获得灵感，即为UIScrollView动态绑定一个属性（ps：UITableView继承自UIScrollView），这里姑且把它命名为ZNHeader。由于这一效果不适用于上拉刷新，故笔者就没有去捣鼓了。我们都知道Category是不能添加属性的，但可以通过Runtime来变相为类添加属性，下面贴出主要代码：

1
2
3
4
5
6
7
8
9
10
#import <objc/runtime.h>
//....
- (ZNRefreshHUD *)ZNHeader {
    return objc_getAssociatedObject(self, (__bridge void *)@"ZNHeader");
}

- (void)setZNHeader:(ZNRefreshHUD *)ZNHeader {
//.....
objc_setAssociatedObject(self, ((__bridge void *)@"ZNHeader"), ZNHeader, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

这几个运行时函数功能很直观，一个是返回对象的对应属性名的实例，一个是指定为哪个对象绑定什么对象到什么属性关键字并指定动态关联策略。这种做法很容易和在类的接口中显式声明属性相互对应起来，应该不难理解。

STEP2 描述图层的行为

笔者将整个图层描述为ZNRefreshHUD: CAShapeLayer的实例（实现了CAAnimationDelegate），并用两个UIBezierPath实例表征它的绘画Path和shadowPath。在它滑动或回滚到预制的停留点时，就让它关联一个CAAnimationGroup对象，其中包含了旋转、绘画开始、绘画结束三种动画。通过动画代理，在动画开始时执行遵循了回调代理协议的代理对象的刷新逻辑，Demo中用了一个延时模拟网络加载，并通过获取最新系统时间来代表数据的刷新与获取。当刷新任务完成时，通过ZNRefreshHUD的一个实例方法finishRefreshing结束动画。下面是这个方法里的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (void)finishRefreshing {
    [self removeAllAnimations];
    
    [CATransaction begin];
    [CATransaction setCompletionBlock:^{
        self.strokeEnd = 0.0f;
        self.strokeStart = 0.0f;
        self.strokeColor = [[UIColor colorWithCGColor:self.strokeColor] colorWithAlphaComponent:0.3f].CGColor;
    }];
    
    [CATransaction setAnimationDuration:0.3f];
    self.transform = CATransform3DScale(self.transform, 0.01f, 0.01f, 0.01f);
    [CATransaction commit];
}

UIView的动画接口其实是CATransaction这专门用于图层动画行为的更上一层级的抽象，不过在使用这一接口时需要注意setCompletionBlock的调用时机。当时笔者是在设置了动画的执行块后调用的，结果发现系统就直接执行完成快里的代码而忽略了动画快。在StackOverflow上查找了相关的问题，上面给出的答案正如上面的代码一样，只要在设定实际的动画逻辑前设置就可以了。（ps：不知道这算不算BUG）

STEP3 让图层可交互

可交互就是让图层能够感知用户的行为来决定当前的刷新进程，给予用户的感觉就是自己能够自由控制刷新是否需要进行下去。为了做到松耦合，那么就不能再图层的拥有者里实现交互逻辑。笔者最初想到的就是使用Method Swizzling，可能是因为平时使用不够熟练，在这过程中走了一些弯路，好在最终达到了终点。

起初，笔者添加了CAShapeLayer分类，用自定义的方法替换了控制器中的scrollViewWillBeginDragging:、scrollViewDidScroll:、scrollViewDidEndDragging:willDecelerate:实现逻辑。由于涉及到两个类之间的方法拌合，如果你要使用self.xxx，就要保证需要操作的对象必须是这两个类的共性。又因为最初笔者是通过为视图添加一个额外的图层来实现功能的，导致笔者不得不写一个单例的类构造方法出来实现统一。

嗯，感觉还不错，编译运行！你丫！！！野指针错误！等等，先让控制器实现这三个代理方法！OK，功能正常。“喂，大兄弟，你这样也太不友好了嘛，我明明什么都不做，还让我写三个空方法，看着让人X疼啊！”，笔者这样设身处地地为别人考量着。分析一下代码流程：我要先拿到控制器原有方法实现体和自实现方法体然后再来拌合，那么当控制器没有显示给出实现体时，系统的默认调用的实现体是存在的吗？默默地NSLog一下，结果发现它根本不允许访问，这就难怪野指针了。那么我用Block自实现方法体来拌合总没问题了吧！Bingo，you are right！

嘿嘿，可以差不多交差了！额，怪了，那么这样我岂不是与控制器强耦合了嘛，真正的生死与共了啊！要不得要不得，别人岂不是就只有叫这个名字的控制器才能使用，因为其中的方法拌合所取出的方法相关类是这一个控制器的类名。要完蛋要完蛋，改改改！好好想想，如果让UIScrollView绑定一个关于下拉刷新视图的属性，当控制器拥有UIScrollView、UITableView属性实例时，就能够以self.tableView.xxx、self.scrollView.xxx这样的形式来访问下拉刷新的图层，那么不同类的在这方面的差异性就消除了。通常情况下，UIScrollView、UITableView的拥有者都可以是UITableViewController，因为这样可以更方便的访问到表视图，所以为什么不在UITableViewController中实现Method Swizzling？很清楚的是，这一做法能够解决之前所遇到的一切问题！于是，笔者兴致勃勃的完成了改进，结果发现当自实现了这三个方法时，所拌合的方法逻辑就将得不到明确的体现！想了一下发现，因为笔者拌合是父类的实现，如果自实现了，父类的方法体就会被覆盖（ps：这里是指用户额外添加的逻辑，而非系统级的核心功能），所以就需要在自实现的方法体里调用父类的实现，这就很像控制器的视图生命周期的各个方法都需要调用父类实现这一行为。就像下面这样：

1
2
3
4
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [super scrollViewWillBeginDragging:scrollView];
}
//....

总结

这个Demo前前后后大概花了两周的时间，主要大三下了课业繁忙加上学驾校的耗时，好在最后完成了，不然脸就要被自己打肿了！这样一个过程还是让自己学到了一些新东西，加深了某些知识点的理解。笔者觉得这样的一个学习方式比起盲目的找各种博客来看来学让人记忆更深刻，毕竟这是你自己给自己定下的任务，而且是在你能力范围之内的。查查资料，好好思考，努力完成它，又何乐而不为了！（ps：不就是因为实验室里没实际项目练手，觉得无趣发发牢骚嘛！）这里可以找到完整代码，有兴趣的可以拉下来把玩把玩，谢谢！

后续

这是关于presentationLayer、modelLayer的知识简要说明，当时笔者做了相关标记要在写这篇文章时提到，但最终还是莫名其妙的忘了，真是抱歉！

其实在笔者转载的文章里有非常详尽的介绍，但是考虑到文章篇幅过长以致于各位看官不容易查找到有关内容，于是就近的给出点解释，希望能解些疑窦。

一个CALayer的实例都具有一个presentationLayer的属性，可以将它理解为呈现或者表现图层。实例的每个属性值都存放在这个图层当中，这个呈现图层实际是实际的模型图层的拷贝，但是它代表了任何指定时刻当前图层外观效果的实际属性值。当你给实际模型图层施加动画效果，CoreAnimation就会将这些属性值的变化交给呈现图层来展示，同时它还将用来处理用户交互。这就是为什么默认进行动画后，如果要重复进行，又得从之前的起始位置开始。我们也可以让图层保留动画后的效果，它本质上就是在动画完成后更新模型图层的位置与呈现视图一致。

]]> <hr> <p>在<code>iOS</code>平台，许多<code>App</code>的下拉刷新都是使用的<code>MJRefresh</code>这个开源库，笔者所接触开发过的几个<code>App</code>就是这样。当然还有很多效果酷炫的下拉刷新，真是不得不佩服开源界大神们的创意！<a href="http://blog.csdn.net/nsurl/article/details/49739429">这里</a>是一些厉害框架的集合，你可以看看！</p> <p>笔者是一个<code>Android</code>粉（ps：蒙谁呢，不就是舍不得肾嘛！），在使用起点读书这一<code>App</code>时，发现它所使用的下拉刷新十分简约，而且也能一定程度上吸引用户的注意，减少用户的心里等待时间。于是心血来潮，就想在<code>iOS</code>平台上实现这一效果。这次实践“捡起”了之前“丢掉”的东西，也学到了一些新东西，只是觉得遗憾的是在一些视觉设计上并没有达到模板的效果，文章后面会提到。这里先贴出一张效果图，如果你用过这个<code>App</code>，你应该就知道笔者简略了哪些地方：<br> iOS平台上aa(见缝插针)游戏的简易实现 https://zeroonet.com/2018/05/22/insert-pin/ 2018-05-22T08:20:40.000Z 2018-05-22T08:20:40.000Z

还记得那是2015年的6月的一场雨后（一场雨，把我困在这里……），老姐拿来了她在QQ空间里看到的一个有趣的游戏：见缝插针。（当时还没入移动开发这行，还是一个刚读大学的愣头青，不知道这是iOS平台上率先推出一款风靡全球的经典休闲游戏：aa）这个网页版的用户体验就没有移动端的感觉好了，不过这都是后来才知道的。诶，这游戏乍一看下不会觉得太难，然后你可能会很快地通过了前面几个很简单的关卡（我最初接触到的只有15关），然后你在8、9关左右可能就会第一次失败，然后很蛋疼的发现游戏又从第1关开始了。一两次还好，要是你好不容易克服“艰难险阻”来到了12、13关，再给你整这么一出，内心的阴影面积可想而知，摔手机的心情都有了！

在“入坑”之后，面对这些东西就不会只是纯粹地欣赏和玩乐了，而是总会下意识地思考这个效果可以兑现为怎样的一段代码。然后借由这个思考结果不断在开发工具里捣鼓摸索着，终于有一日灵光一闪，实验样品出来了。随即又因按捺不住内心的冲动，想要通过某种渠道写点什么东西来分享这么一个实践过程，于是就有了这么一篇文章：iOS平台上aa（见缝插针）游戏的简易实现。

知己知彼，百战不殆

玩过aa的朋友都知道，它的游戏逻辑是这样的：每一关你都有不同数量的“针”，中心的圆盘上初始状态可能就会有“针”已经插入就绪，不过这是为增加游戏难度而设计的。你的任务就是将你所在关卡中所持有的所有“针”插入到中心转动的圆盘上去（插入点是相对固定的），前提是不能与其他“针”相互接触，否则游戏宣告失败。为了不让你很快通关，后面的关卡理所当然难度会越来越大，比如圆盘转速增加、初始就绪“针”数和持有针数增加、顺逆时针变速转动（最坑的就是这一点，我在这上面载了不少跟头！），这里之所以叫做简易实现主要是因为Demo只是简单实现了游戏逻辑，没有设置多重关卡，取而代之的是所谓的无尽模式。

因为开始实践这个游戏时，我已经快要期末考试了，所以需要着手准备考试和实习的事情，没有太多的精力去设计游戏的美化和后继的关卡。当然，如果后面有机会的话，应该会有Demo2.0版本。

关于这个游戏的实现，我最开始的想法就是当你点击屏幕时，扩展中心圆盘（CAShapeLayer实例）的path属性，以达到最终“针”插在圆盘上的效果。对于“针”的动态移动过程， 就可以创建一个过渡的“针”视图来等效代替。那么核心的问题就来了：我在扩展图层的路径时，怎么确定绘制的起始点和终点呢？因为在中心圆盘的旋转过程中，其上的个点也会随之一起做仿射变换。如果你在图层旋转时还是以圆盘静止时硬编码取到的起点和终点来确认绘制“针”的话，那么新绘制的“针”就会和之前“插上”的“针”重合在一起，导致的结果就是：无论你怎么“插针”，圆盘上看到的就只有一根“针”，虽然实际上它是很多“针”重叠在一起而表现出来的结果。

那么首要问题就是如何得到当前“针”的绘制起点和终点？

实践是检验真理的唯一标准

值得庆幸的是中心转轴是圆形的（故称之为圆盘），而且也只能是在圆形的情况下才能设计出aa这样的游戏效果。因为插针的起点和终点的计算依赖于圆形的中心到边界各点的距离相等这一性质，具体可以用如下两张图来表示坐标点的换算过程：


其中的基准点为在静止时“针”的插入点（对应于绘制“针”的起点），而终点可以通过相同的方法来实现换算，只不过半径r的值需要做出相应的调整。

那么实践所面临的问题又转向了如何取得在旋转过程中图层的旋转角度了，很不幸地说，Apple没有提供直接的API来获取这么一个值。在笔者实践了一些方法无果后，就决定在Stack Overflow去刷下存在感，问一下问题，结果就遇到了一些尴尬的事情！就把它当做是一个小插曲，分享给各位，望引以为戒！

无疑，在Ask question之前，你得先搜索相关问题是否有人已经提出，或许你就可以直接捡现成的了。这不，刚输入关键字就发现了可能的解决方法：

看一看问题描述：

看看回答：

咦！好像有那么一回事，先拿来试下！………………… （此处略去100字的实践过程）结果发现，它只能计算旋转最终状态时的角度值，即如果别人不告诉你某个视图将要旋转多少角度，你可以这样来得到他预先设定值。计算结果显然是和XXView.transform.b、XXView.transform.a相关的，因为在设定结束后，相应的仿射变换也会随即生效。

问题没有得到解决，于是新的问题就有提出来的必要了：

完了之后，就被人“嘲笑”了，这是理由：

这是他把我的问题改版前后的对照结果：

唉！原谅我这个新手的不懂规矩啊！这也从一个侧面反映了Stack Overflow的专业性，也就难怪大神们都愿意在这里进行技术交流。下面是我的道谢：

很遗憾，到目前为止还没有任何人回答这个问题！真是大写的尴尬啊！所以在遇到问题时，向别人请教的同时自己也需要不断思考问题的解决方案。正所谓“自己动手，丰衣足食”。

其实，之前的回答已经告诉了我们答案，只是这里我们需要在动画过程中通过某种方式来获得类似于XXView.transform.b、XXView.transform.a这样的量。我们都知道的是要是涉及到动画的话，图层会将动画的过程交给presentationLayer（表现层）来完成。至于动画的初值和终值之间的中间值则由系统不断计算，并通过表现层来展示。说到这里就很明确了，我们在这里所涉及到的需求依据变颜色这段文字，所遇到的麻烦就迎刃而解了。

一直向前

既然我们选用的是图层，我们就需要知道它的transform属性是一个名为CATransform3D的结构体变量，而XXView的transform属性是一个名为CGAffineTransform的结构体变量。前者就自然没有a、b这样的成员变量，而是这样的一个矩阵结构：

1
2
3
4
5
6
7
struct CATransform3D
{
  CGFloat m11, m12, m13, m14;           
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

其中的m14、m24、m34、m44只是作为矩阵的占位符，通常会将m14、m24、m34设置为0，m44设为1。其他分量的值对应于不同的场景，表示如下：

这个例子中我们是围绕z轴旋转的，我们就可以使用反正切变换函数参入实际参数m21、m22的值就可以实时地知道图层的当前旋转角度了，不过这肯定需要一些修正以适配于顺时针、逆时针的角度计算结果值域为0 ~ 2π（反正切计算结果以弧度制表示）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//此方法为对外开放的方法，主要用于在不同旋转方向下，能够实时获取图层的旋转角度
- (CGFloat)transformAngleWithRotationDirection:(BOOL)clockwise {
    return clockwise ? [self transformRotationAngle] : 2.0f * M_PI - [self transformRotationAngle];
}

//此方法为私有方法，它所返回的值对于坐标变换计算有直接使用之便
- (CGFloat)transformRotationAngle {
//这里其实可以用反正弦和反余弦来计算角度值
    CGFloat degreeAngle = - atan2f(self.presentationLayer.transform.m21, self.presentationLayer.transform.m22);
    
    if (degreeAngle < 0.0f) {
        degreeAngle += (2.0f * M_PI);
    }
    
    return degreeAngle;
}

借助于数学诱导公式，坐标的变换计算公式可以统一为如下形式：

1
2
3
4
5
- (CGPoint)convertPointWhenRotatingWithBenchmarkPoint:(CGPoint)point roundRadius:(CGFloat)radius {
    CGFloat rotationAngle = [self.presentationLayer transformRotationAngle];

    return CGPointMake(point.x + sinf(rotationAngle) * radius, point.y - radius + cosf(rotationAngle) * radius);
}

下面是最终的效果图：

总结

虽然，在书写文章的时候给人的感觉思路是很明确的，且整个过程是连贯的，但是事实上在实践中走弯路甚至半途而废是不可避免的。拿这个Demo来说，在这之前动手写过一次的，但是那次可能因为技术的储备不够（到现在为止，网上依然找不到其他人在iOS平台上对这个游戏的实现Demo），半途而废了！但就在前几天，觉得技术提升与否需要通过是否能完成之前不能完成的任务来衡量。加上做别人没有做过的实践，总是会更有趣和更有挑战意义的，这不就是价值的体现吗？这里是Demo的下载地址，有兴趣的朋友可以下载下来看看，谢谢捧场！

]]> <hr> <p>还记得那是2015年的6月的一场雨后（一场雨，把我困在这里……），老姐拿来了她在QQ空间里看到的一个有趣的游戏：见缝插针。（当时还没入移动开发这行，还是一个刚读大学的愣头青，不知道这是iOS平台上率先推出一款风靡全球的经典休闲游戏：<font size=5>aa</font>）这个网页版的用户体验就没有移动端的感觉好了，不过这都是后来才知道的。诶，这游戏乍一看下不会觉得太难，然后你可能会很快地通过了前面几个很简单的关卡（我最初接触到的只有15关），然后你在8、9关左右可能就会第一次失败，然后很蛋疼的发现游戏又从第1关开始了。一两次还好，要是你好不容易克服“艰难险阻”来到了12、13关，再给你整这么一出，内心的阴影面积可想而知，摔手机的心情都有了！</p> <p>在“入坑”之后，面对这些东西就不会只是纯粹地欣赏和玩乐了，而是总会下意识地思考这个效果可以兑现为怎样的一段代码。然后借由这个思考结果不断在开发工具里捣鼓摸索着，终于有一日灵光一闪，实验样品出来了。随即又因按捺不住内心的冲动，想要通过某种渠道写点什么东西来分享这么一个实践过程，于是就有了这么一篇文章：<code>iOS</code>平台上<code>aa</code>（见缝插针）游戏的<font color=gray size = 5>简易</font>实现。<br> iOS版QQ的黏性下拉刷新效果简易实现 https://zeroonet.com/2018/05/22/qq-refresh/ 2018-05-22T06:00:08.000Z 2018-05-22T06:00:08.000Z

对于市面上用户群体较大的App来说，Android和iOS两个版本的某些部分的使用体验有些差异。这种现象的起因或归结于平台的操作系统本身的不同，也可以想成是充分利用平台本身提供的资源，打造符合其使用习惯的应用。

为了和文题相关，这里就举例QQ来说明。Android版本的下拉刷新就是一个翻转的小箭头效果，而iOS版本的却是其平台本身很经典的牛皮糖(黏性)效果。

考虑到Tencent在后来推出针对强迫症用户清理消息记录的那样一个黏性气泡样式，这也就说明Android是可以实现这样的功能的。(这也是理所应当的，Android也是很强大的。）再说左滑将消息记录删除、置顶、标记为未读的功能选项，这两个版本的QQ都具备。不过仔细观察的话，不难发现Android上的可能是仿照的iOS原生的功能，前者的使用体验明显没有后者丝滑、流畅，因为前者的这些功能选项是拼接在视图的尾部的。或许、估计、大概Android原生没有这样的使用效果，而QQ的iOS开发团队使用原生效果开发出来以后产品经理觉得这使用体验很不错，就督促Android开发小组也整个一样的。（完全靠猜，错了别打我！）不然的话，上述的功能选项你就只能长按视图然后在弹出的一个界面中来找了，就像起点读书的Android版本一样。（用起来真心别扭，唉！被Apple的使用体验惯坏了！）

咳咳，不好意思，以上闲扯了许多，其实就想说明Android在使用体验上与iOS还有一定的距离。而Apple也不是个好东西，卖得太贵贵贵。

对你黏、黏、黏不完

前文说到的简易实现是指文章中的例子会以很简单的方式来完成黏性的效果，因此可能会一定程度上影响自然度，也就是曲线的曲率看起来或多或少有些不协调。不过这只是些微的对美观的破坏，总体来说成效能达到百分之八九十，剩下的份额为采用这样一个简易的绘制过程所付出的一些代价，它对应为这样的过程：

整个黏性的视图由四段曲线绘制填充形成，分别是上下两个半圆和左右两条二阶贝塞尔曲线。最开始的实践方案是采用上下两个圆，就会导致曲线的填充出现问题。你可以试试，看看会发生怎样的现象。

说到这里相信你对最终的实现已经成竹在胸了：黏性视图使用CAShapeLayer来表现，通过路径来绘制它的外观轮廓。当然，以上整个过程得在UITableView/UIScrollView的拖拽过程中进行，因为只有这样我们才能判断当前应当展示怎样的黏性程度。

贯彻组件化思想

参照原生的UIRefreshControl设计思想，我在这里设计了一个类ZNStickyRefreshControl来等效替代它（习惯了OC添加的前缀了，Swift中的命名空间机制可以不再这么麻烦。不过默认的命名空间为整个项目，其中的文件都是共享的，所以你可能需要使用pod来管理你的第三方库，这也是Apple建议的做法。这只是个小Demo，简单起见，姑且加上。）。它继承自UIControl，主要负责一些逻辑上的判断，比如通过监听UIScrollView的ContentOffset来判断当前刷新视图应该进入何种状态，是继续黏性拉伸还是开始刷新。以上兑现为Swift代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
override func willMove(toSuperview newSuperview: UIView?) {
super.willMove(toSuperview: newSuperview)
        
guard let newSuperview = newSuperview as? UIScrollView else { return }
        
scrollView = newSuperview
        
// let `self` observe newSuperview's contentOffset
newSuperview.addObserver(self, forKeyPath: "contentOffset", options: [], context: nil)
    }
    
// remove observer
override func removeFromSuperview() {
superview?.removeObserver(self, forKeyPath: "contentOffset")
        
super.removeFromSuperview()
}

// KVO call-back
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
guard let scrollView = scrollView else { return }
        
    let isRefreshing = refreshView.state == .isRefreshing
        
    let topInset = isRefreshing ? navBarHeight : scrollView.contentInset.top
        
    let height = -(topInset + scrollView.contentOffset.y)
        
    // drag and drop up from original point
    if height < 0 {
    return
    }
        
    // set refresh control's frame
    self.frame = CGRect(x: 0,
                        y: -height,
                        width: scrollView.bounds.width,
                        height: height)
        
    if !isRefreshing {
    refreshView.parentViewHeight = height
    } else {
        return
    }
        
    if height >= originalHeight && scrollView.isDragging && height <= 2.0 * originalHeight {
refreshView.state = .showStickyEffect
} else if height < originalHeight {
        refreshView.state = .normal
    } else if height > 2.0 * originalHeight && refreshView.state != .isRefreshing {
beginRefreshing()
    }
}

它持有一个ZNStickyRefreshView类型的视图实例，用来表现刷新的视图效果，并提供了两个方法：beginRefreshing()和endRefreshing()来控制开始和结束刷新。刷新视图的状态对应为一个枚举：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
enum refreshState {
    
    /// original state
    case original
    
    /// start pulling
    case normal
    
    /// display main sticky refresh effect
    case showStickyEffect
    
    /// show refreshing effect
    case isRefreshing
    
    /// show refreshing result
    case failedRefreshing
    case succeededRefreshing
}

通过didSet方法完成对应的状态逻辑处理，以下贴出showStickyEffect这个状态的程序代码，也就是展现黏性效果的控制逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
case .showStickyEffect:
stickyView.frame.origin.y = stickyViewOriginY
    stickyView.frame.size.height = parentViewHeight - stickyViewOriginY * 2.0
                
    let stretchHeight = parentViewHeight - maxStretchHeight
                
    let stretchScaleFactor = 1 - maxScaleFactor * stretchHeight / maxStretchHeight
                
stickyView.iconScale = stretchScaleFactor
                
// top half round
let strokePath = UIBezierPath(arcCenter: CGPoint(x: stickyViewStrokeRadius, y: stickyViewStrokeRadius), radius: stickyViewStrokeRadius * stretchScaleFactor, startAngle: .pi, endAngle: 2.0 * .pi, clockwise: true)
    
let bottomRoundCenter = CGPoint(x: stickyViewStrokeRadius, y: parentViewHeight - 2.0 * stickyViewOriginY - stickyViewStrokeRadius * stretchScaleFactor * stretchScaleFactor)

let topRoundXOffset = stickyViewStrokeRadius * stretchScaleFactor
let bottomRoundXOffset = stickyViewStrokeRadius * stretchScaleFactor * stretchScaleFactor

let topCurveLeftControlPoint = CGPoint(x: stickyViewStrokeRadius - bottomRoundXOffset, y: stickyViewStrokeRadius + (bottomRoundCenter.y - stickyViewStrokeRadius) / 2)
let topCurveRightControlPoint = CGPoint(x: stickyViewStrokeRadius + bottomRoundXOffset, y: stickyViewStrokeRadius + (bottomRoundCenter.y - stickyViewStrokeRadius) / 2)
            
let topRoundLeftPoint = CGPoint(x: stickyViewStrokeRadius - topRoundXOffset, y: stickyViewStrokeRadius)
            
// right curve
let bottomRoundRightPoint = CGPoint(x: bottomRoundCenter.x + bottomRoundXOffset, y: bottomRoundCenter.y)
strokePath.addQuadCurve(to: bottomRoundRightPoint, controlPoint: topCurveRightControlPoint)
            
// bottom half round
strokePath.addArc(withCenter: bottomRoundCenter, radius: stickyViewStrokeRadius * stretchScaleFactor * stretchScaleFactor, startAngle: 0, endAngle: .pi, clockwise: true)
            
// left curve
strokePath.addQuadCurve(to: topRoundLeftPoint, controlPoint: topCurveLeftControlPoint)
            
stickyView.strokePath = strokePath

对于黏性视图，我将其封装成一个ZNStickyView类。它只有两个成员：刷新Icon（UIImageView）和黏性图层（CAShapeLayer），在下拉过程中也就可以通过didSet来完成仿射变换和图层路径的更新。

总结

前段时间一直在看OC的一些底层实现和刷一些算法逻辑题，期间产生了一些疑惑，就是说阅读底层的源码就我个人而言很多时候是大致知道了怎样的一个过程，而并没有真正理解这样设计的原因。（当然这其中也有些体悟，特别是Apple对bit mask的运用。有点急功近利！反省反省！）包括网上一些大牛的关于运行时原理的解读，大都只是把源码拿出来遛一遛，然后分析每步的作用和机理之类的，而关于设计原因方面的一些东西很少提到。

就拿个简单的例子来说，对象引用计数的管理使用全局的hash表为什么会优于将其作为属性变量来持有？是因为线程安全的效率？还是说方便集中管理？而这样的一些问题又不能再网上搜寻到答案同时线下又没人能解惑，就想到还不如写点界面效果来得直接。（这种想法不可取，不可取！）于是就趁着国庆，写了这个小例子分享给各位，也算是排解下心中的烦闷与不安的心情吧！

最终效果如下：

Demo可以在这里找到，谢谢！

]]> <hr> <p>对于市面上用户群体较大的<code>App</code>来说，<code>Android</code>和<code>iOS</code>两个版本的某些部分的使用体验有些差异。这种现象的起因或归结于平台的操作系统本身的不同，也可以想成是充分利用平台本身提供的资源，打造符合其使用习惯的应用。</p> <p>为了和文题相关，这里就举例<code>QQ</code>来说明。<code>Android</code>版本的下拉刷新就是一个翻转的小箭头效果，而<code>iOS</code>版本的却是其平台本身很经典的牛皮糖(黏性)效果。<br> iOS中保存图片到本地的坑 https://zeroonet.com/2018/05/15/photo-save/ 2018-05-15T02:31:31.000Z 2018-05-15T02:31:31.000Z

这篇文章主要说一说使用UIImageWriteToSavedPhotosAlbum将图片保存到本地的坑点，不过你还有另外几种方式可以选择，比方说ALAssetsLibrary和 PHPhotoLibrary。

笔者之前在扇贝大耳狐英语将在微信关联家长的二维码保存到手机的业务中，采用的是第一种方式，因为它是最为简单方便的手段。它是C风格的函数，只需要传入要保存的UIImage对象即可，而不用关心不同iOS系统版本导致的API使用兼容问题。

如果你把这里的UIImage对象简单理解为UIImageView的image属性值的话，你会在保存的过程中遇到麻烦，即保存失败。以下是这个函数的声明：

1
2
3
4
// Adds a photo to the saved photos album.  The optional completionSelector should have the form:
//  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo;
public func UIImageWriteToSavedPhotosAlbum(_ image: UIImage, _ completionTarget: Any?, _ completionSelector: Selector?, _ contextInfo: UnsafeMutableRawPointer?)


那么我想我们使用这个函数的方式都是正确的，因为这个函数的第一个参数就是UImage类型。为了得到保存的结果，我们需要传入completionSelector，如下：
1
2
3
4
5
6
7
8
9
10
UIImageWriteToSavedPhotosAlbum(imageView.image, self, #selector(imageSaveFinished(image:error:content:)), nil)

@objc func imageSaveFinished(image: UIImage, error: Error?, content: UnsafeRawPointer) {
        if let error = error {
            debugPrint("保存失败 error：\(error.localizedDescription)")
        } else {
            debugPrint("保存成功", in: self)
        }
}


这时，你会郁闷的发现，保存的结果始终是失败的，因为操作不能完成(或者与之类似)。但结合此函数的文档解释，我们不会怀疑自己调用错了API。于是，我们打开了StackOverflow，寻求上面的前辈的帮助，以下就是解决方案：
1
2
3
4
5
6
7
8
9
10
// 需要先使用内存截图，才能存储成功
UIGraphicsBeginImageContextWithOptions(qrImageView.bounds.size, false, UIScreen.main.scale)
image.draw(in: qrImageView.bounds)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
        
if let result = result {
UIImageWriteToSavedPhotosAlbum(result, self, #selector(imageSaveFinished(image:error:content:)), nil)
}


相信你看到这里，就不得不承认这是API的坑了。不过，我们得以平(S)和(H)心(I)态(T)面对开发过程中遇到的各种问题，毕竟工程系统不可能像理论研究那样完备。

每一个开发人员都是折翼的天使，Pray that I will not meet again.

]]> <hr> <p>这篇文章主要说一说使用<code>UIImageWriteToSavedPhotosAlbum</code>将图片保存到本地的坑点，不过你还有另外几种方式可以选择，比方说<code>ALAssetsLibrary</code>和 <code>PHPhotoLibrary</code>。<br>