12/08/2018, 14:20

Giới thiệu: EasyAnimation, đơn giản hóa animation trong iOS

Hàm "UIView.animateWithDuration:animations:" rất quen thuộc và dễ sử dụng để tạo các chuyển động của view. Nhược điểm của nó là không thao tác được với layer, và không get được đối tượng để handle về sau. EasyAnimation đã giải quyết chuyện đó, giúp mọi chuyện với animation lại càng dễ dang ...

Hàm "UIView.animateWithDuration:animations:" rất quen thuộc và dễ sử dụng để tạo các chuyển động của view. Nhược điểm của nó là không thao tác được với layer, và không get được đối tượng để handle về sau.

EasyAnimation đã giải quyết chuyện đó, giúp mọi chuyện với animation lại càng dễ dang hơn.

Easy Layer Animations

EasyAnimation hỗ trợ việc animation với layer mà không cần phải sử dụng "CABasicAnimation". Chỉ cần mô tả trạng thái cuối cùng của Layer trong block "animation:".

// Sử dụng CABasicAniamtion
let anim = CABasicAnimation(keyPath: "position.x")
    anim.fromValue = 100.0
    anim.toValue = 200.0
    anim.duration = 2.0
    view.layer.addAnimation(anim, forKey: nil)
// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, animations: {
        self.view.layer.position.x = 200.0
    })

Kết quả:

moveX.gif

Cần thêm chút delay, option hoặc curve cộng thêm animation bo tròn:

// Sử dụng CABasicAnimation
let anim = CABasicAnimation(keyPath: "position.x")
    anim.fromValue = 100.0
    anim.toValue = 200.0
    anim.duration = 2.0
    anim.fillMode = kCAFillModeBackwards
    anim.beginTime = CACurrentMediaTime() + 2.0
    anim.timingFunction = CAMediaTimingFunction(name:
        kCAMediaTimingFunctionEaseOut)
    anim.repeatCount = Float.infinity
    anim.autoreverses = true
    view.layer.addAnimation(anim, forKey: nil)

let anim2 = CABasicAnimation(keyPath: "cornerRadius")
    anim2.fromValue = 0.0
    anim2.toValue = 20.0
    anim2.duration = 2.0
    view.layer.addAnimation(anim2, forKey: nil)
// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, delay: 2.0,
        options: [.repeat, .autoreverse, .curveEaseOut],
        animations: {
        self.view.layer.position.x += 200.0
        self.view.layer.cornerRadius = 20.0
        self.view.layer.borderWidth = 5.0
    }, completion: nil)

Kết quả:

corners.gif

Với block "completion:", đỡ phải sử Delegate để bắt khi nào animation xong.

Hoặc với Spring Animation:

// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, delay: 0.0,
      usingSpringWithDamping: 0.25,
      initialSpringVelocity: 0.0,
      options: [],
      animations: {
        self.view.layer.position.x += 200.0
        self.view.layer.cornerRadius = 50.0
        self.view.layer.transform = CATransform3DMakeScale(1.2, 1.2, 1.0)
    }, completion: nil)

spring.gif

Với EasyAnimation sẽ dễ dàng thao tác với layer animation hơn, ko cần tạo nhiều đối tượng animation cho từng thuộc tính hay CAAnimationGroup để nhóm CABasicAnimation lại.

Chain Animations

EasyAnimation hỗ trợ kết hợp nhiều animation lại thành với nhau. Gọi animateAndChain(duration:delay:options:animations:completion:) và cứ thêm animation bằng lệnh animate(duration:animations...)...

UIView.animateAndChain(duration: 1.0, delay: 0.0,
      options: [], animations: {
        self.view.center.y += 100
    }, completion: nil).animate(duration: 1.0, animations: {
        self.view.center.x += 100
    }).animate(duration: 1.0, animations: {
        self.view.center.y -= 100
    }).animate(duration: 1.0, animations: {
        self.view.center.x -= 100
    })

chain.gif

Note: animateAndChain không thể add animation bất cứ lúc nào tùy thích. Bạn chỉ có thể lên kế hoạch cho nó và cho nó và cho nó chạy, không thểm thêm hoặc bớt sau đó được. (Nếu muốn dừng chain animation đó lại và tạo một chainAnimation mới)

Cancel Chain Animations

Nếu muốn dừng animation bất cứ lúc nào, chỉ cần get object và gọi hàm cancelAnimationChain để dừng bất cứ khi nào.

let chain = UIView.animateAndChain(duration: 1.0, delay: 0.0,
    options: [], animations: {
        self.square.center.y += 100
    }, completion: nil).animate(duration: 1.0, animations: {
  [... the rest of the animations in the chain]
  // cancel animation
  chain.cancelAnimationChain()
  // cancel animation with Block
  chain.cancelAnimationChain({
  self.myView.center = initialPosition
  //etc. etc.
})

Bạn có thể sự dụng cancelAnimationChain(block) để thêm việc sử lý sau khi dừng. Animation sẽ không dừng lại ngay mà sẽ dừng sau khi hoàng thành một step animation của nó.

Nguồn: https://github.com/icanzilb/EasyAnimation

0