kelele67的学习笔记-swift动画学习（二）

发表于 | 阅读次数

Swift3.0 动画编程(2)

学习自老镇swift课堂: 舞动Swift-Swift动画编程指南

JNWSpring Animation

  • JNWSpringAnimation 是 CAKeyframeAnimation 的子类，它支持创建阻尼动画效果。
  • 尽管，JNWSpringAnimation 是 CAKeyframeAnimation 的子类，但是，你应该把他当做 CABasicAnimation 的子类来使用:)。
  • 把4个源文件拷贝到你的工程当中。
  • 你可以使用专用的初始化方法 +animationWithKeyPath:。当然，你也可以使用 +animation 方法，之后再来设置 keyPath 。目前所有兼容的属性动画都包含在头文件当中。
    JNWSpringAnimation *animation = [JNWSpringAnimation animationWithKeyPath:@”position.x”];
  • 下一步，fromeValue 与 toValue 属性需要插入正确的值。
    animation.toValue = @(toX);animation.fromValue = @(currentX);
  • 最后，阻尼动画的一些参数也可以修改，目前包括 stiffness（生硬程度），damping（衰弱程度）以及 mass（质量）。
    animation.mass = 30; // this will move extremely slowly// and so on
  • 这个动画本身可以被任何CAAnimation的子类接收，你可以将他添加到CALayer中。

CAKeyframeAnimation

  • 关键帧动画
  • 多个关键帧组成动画
  • 可以设置时间间隔
  • 设置位移，缩放等动画属性

JNW-缩放动画

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
//
//  ViewController.swift
//  JNWSpring Animation 01
//
//  Created by 刘启 on 2016/10/10.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
        redBall.layer.cornerRadius = 50
        self.view.addSubview(redBall)
        
        //*缩放动画
        // 创建jnw对象
        let scale = JNWSpringAnimation(keyPath:"transform.scale")
        // 设置阻尼值
        scale?.damping = 6
        // 弹性系数
        scale?.stiffness = 100
        // 设置质量
        scale?.mass = 2
        
        // 设置初始值和结束值
        scale?.fromValue = 1
        
        scale?.toValue = 2
        
        // 将JNW赋予redBall
        redBall.layer.add(scale!, forKey: scale?.keyPath)
        // 手动设置到结束状态
        redBall.transform = CGAffineTransform.init(scaleX: 2, y: 2)
        
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

JNW-旋转动画

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
//
//  ViewController.swift
//  JNWSpring Animation 01
//
//  Created by 刘启 on 2016/10/10.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
//        redBall.layer.cornerRadius = 50 使用红色方块
        self.view.addSubview(redBall)
        // *旋转动画
        // 创建jnw对象
        let rotation = JNWSpringAnimation(keyPath:"transform.rotation")
        // 设置阻尼值
        rotation?.damping = 6
        // 弹性系数
        rotation?.stiffness = 100
        // 设置质量
        rotation?.mass = 2
        
        // 设置初始值和结束值
        rotation?.fromValue = 0
        
        rotation?.toValue = M_PI_2
        
        // 将JNW赋予redBall
        redBall.layer.add(rotation!, forKey: rotation?.keyPath)
        // 手动设置到结束状态
        redBall.transform = CGAffineTransform.init(rotationAngle: CGFloat(M_PI_2))
        
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

JNW-位移动画

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
//
//  ViewController.swift
//  JNWSpring Animation 01
//
//  Created by 刘启 on 2016/10/10.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
//        redBall.layer.cornerRadius = 50
        self.view.addSubview(redBall)
        //*位移动画
        // 创建jnw对象
        let move = JNWSpringAnimation(keyPath:"transform.translation.x")
        // 设置阻尼值
        move?.damping = 6
        // 弹性系数
        move?.stiffness = 100
        // 设置质量
        move?.mass = 2
        // 设置初始值和结束值
        move?.fromValue = 0
        
        move?.toValue = 400
        
        // 将JNW赋予redBall
        redBall.layer.add(move!, forKey: move?.keyPath)
        // 手动设置到结束状态
        redBall.transform = CGAffineTransform.init(translationX: 400, y: 0)
        
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

组合动画

把每个实例加起来就可以实现 JNW 的组合动画了，把之前注释掉的代码还原就能实现放大旋转位移动画了。