swift - 头像弹性动画，类似即刻App的头像动画

首先附上 Demo地址

看下我们实现的效果

效果实现应该有很多种方法，先讲一下涉及到的几个动画属性

1.UIDynamicAnimator 仿真物理属性，不懂的可以看下边的网页链接进行学习奥

UIDynamicAnimator - 仿真物理学

2.UISnapBehavior 动力弹性属性，下边附带学习链接

UISnapBehavior - 动力学

3.UIAttachmentBehavior,吸附效果属性，下边是学习链接

UIAttachmentBehavior - 吸附效果

4.最后就是我们的UIPanGestureRecognizer这个我们都熟悉的手势了，

大家如果对这几个物理仿真属性不是太了解的也可以自行百度查找学习一下

为了方便外部使用，这里通过UIView的扩展（extension)实现上述效果，调用比较方便，

//object代表UIView的子类，直接调用这句话即可
object.signleDragable()

我们来看下代码实现这块，因为考虑到在扩展里边没办法直接添加属性，因此。我们用到了OC里的那一套，用runtime来添加

上图



上代码

private var zm_playground: UIView? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_playgroundKey!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_playgroundKey!) as? UIView
}
}

private var zm_animator: UIDynamicAnimator? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_animatorKey!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_animatorKey!) as? UIDynamicAnimator
}
}

private var zm_snapBehavior: UISnapBehavior? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_snapBehavior!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_snapBehavior!) as? UISnapBehavior
}
}

private var zm_attachmentBehavior: UIAttachmentBehavior? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_attachmentBehavior!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_attachmentBehavior!) as? UIAttachmentBehavior
}
}

private var zm_panGesture: UIPanGestureRecognizer? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_panGesture!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_panGesture!) as? UIPanGestureRecognizer
}
}

private var zm_centerPoint: CGPoint? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_centerPoint!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_centerPoint!) as? CGPoint
}
}

private var zm_damping: CGFloat? {
set{
objc_setAssociatedObject(self, RuntimeKey.zm_damping!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
get{
return objc_getAssociatedObject(self, RuntimeKey.zm_damping!) as? CGFloat
}
}

这里用这个runtime之前我还专门百度一下和OC的用法区别，果不其然。有人说key这个玩意不定义好容易为空，具体我也没细看原因。

因此，一方面为了方便，另一方面为了后期扩展，自己定义了一个结构体来承载这些key

static let zm_playgroundKey = UnsafeRawPointer.init(bitPattern: "zm_playgroundKey".hashValue)
static let zm_animatorKey = UnsafeRawPointer.init(bitPattern: "zm_animatorKey".hashValue)
static let zm_snapBehavior = UnsafeRawPointer.init(bitPattern: "zm_snapBehaviorKey".hashValue)
static let zm_attachmentBehavior = UnsafeRawPointer.init(bitPattern: "zm_attachmentBehaviorKey".hashValue)
static let zm_panGesture = UnsafeRawPointer.init(bitPattern: "zm_panGestureKey".hashValue)
static let zm_centerPoint = UnsafeRawPointer.init(bitPattern: "zm_centerPointKey".hashValue)
static let zm_damping = UnsafeRawPointer.init(bitPattern: "zm_dampingKey".hashValue)

我们来看下核心功能区，pan手势那里都进行了什么操作

//swift 4.0语法，记得方法带上@objc
@objc func signlePanGesture(pan: UIPanGestureRecognizer) -> Void {
let panLocation = pan.location(in: zm_playground)
if pan.state == .began {
signleUpdateSnapPoint()
let offSet = UIOffsetMake(panLocation.x - (zm_centerPoint?.x)!, panLocation.y - (zm_centerPoint?.y)!)
zm_animator?.removeAllBehaviors()
zm_attachmentBehavior = UIAttachmentBehavior.init(item: self, offsetFromCenter: offSet, attachedToAnchor: panLocation)
zm_animator?.addBehavior(zm_attachmentBehavior!)
} else if pan.state == .changed {
zm_attachmentBehavior?.anchorPoint = panLocation
} else if (pan.state == .ended) || (pan.state == .cancelled) || (pan.state == .failed) {
zm_animator?.addBehavior(zm_snapBehavior!)
zm_animator?.removeBehavior(zm_attachmentBehavior!)
}
}

这里分了几个步骤实现

1.当手势触发时，添加UISnapBehavior 动力弹性属性，UIAttachmentBehavior - 吸附效果，并且放到我们的UIDynamicAnimator 仿真物理属性这个里边

2.当手势开始发生改变的时候，我们看动画可以看出，是一直跟着手势滑动的，因此这里把中心点坐标拿了出来

3.当我们手势结束，取消，或者出现了不可控的情况导致手势结束的情况下，移除当前动画效果就可以了

以上就是关于swift版，头像仿物理引擎动画。 Demo地址

有疑问的同学，可以下方评论区探讨奥