Swift之Facebook POP动画使用和实战

2017-10-17  本文已影响380人  TitanCoder
image

GitHub项目地址

一. POP自我介绍

二. POP参数介绍

POP默认支持三种动画，但同时也支持自定义动画

1、相关属性介绍

1-1、属性简单介绍

1-2、动画可配置属性

/**
 Common CALayer property names.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;


/**
 Common UIView property names.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;


/**
 Common UINavigationBar property names.
 */
extern NSString * const kPOPNavigationBarBarTintColor;

/**
 Common UIToolbar property names.
 */
extern NSString * const kPOPToolbarBarTintColor;

/**
 Common UITabBar property names.
 */
extern NSString * const kPOPTabBarBarTintColor;

/**
 Common UILabel property names.
 */
extern NSString * const kPOPLabelTextColor;

以上仅仅列出了常用的一些属性,更多控件/更多参考框架里面类
POPAnimatableProperty.h

1-3、POPBasicAnimation可配置的属性与默认值为

POPBasicAnimation *basic = [POPBasicAnimation linearAnimation];
basic.fromValue = @(0);//从0开始    basic.toValue = @(3*60);//180秒后结束
basic.duration = 3*60;//持续3分钟
[lab pop_addAnimation:basic forKey:nil];


let basic1 = POPBasicAnimation(propertyNamed: kPOPLayerPositionX)
basic1?.fromValue = redView.layer.position.x
basic1?.toValue = 300
basic1?.beginTime = CFTimeInterval() + 1.0
redView.pop_add(basic1, forKey: "position.x")

三. POPBasicAnimation基础动画

1. 先看一下效果, 其动画效果如下

image

2. 示例代码

let basic1 = POPBasicAnimation(propertyNamed: kPOPLayerPositionX)
basic1?.toValue = 300
//开始时间
basic1?.beginTime = CFTimeInterval() + 1.0
redView.pop_add(basic1, forKey: "position.x")

3. 可以看到，添加一个动画最少仅需三步

4. Core Animation 和 POP 运行动画对比

四. POPSpringAnimation弹性动画

1. 属性介绍

注意: 以上的六个属性中一般只会设置springBounciness和springSpeed, 如有特殊需求才会设置其他属性

2. 代码示例

let spring = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)
//注意: 这里改变的是x和y的比例,参数赋值也要传两个; 若只需要其中一个,则可设置
//`spring?.fromValue = 0.4`即可
spring?.fromValue = CGSize(width: 0.3, height: 0.3)
spring?.toValue = CGSize(width: 2, height: 2)
spring?.springSpeed = 5
spring?.springBounciness = 15
lightBlue.pop_add(spring, forKey: "scale")

五. POPDecayAnimation

属性介绍

代码示例

let decay = POPDecayAnimation(propertyNamed: kPOPViewSize)
decay?.velocity = CGSize(width: 300, height: pictureBtn.frame.height)
//延迟1秒后执行
decay?.beginTime = CACurrentMediaTime() + 1.0
pictureBtn.pop_add(decay, forKey: "size")

六. 自定义属性

POP默认支持的三种动画都继承自POPPropertyAnimation, POPPropertyAnimation中定义了一个叫property的属性（之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property这个属性则是用来驱动POP的动画效果中的重要一环

1. 实力模块

if let proper = POPAnimatableProperty.property(withName: "prop", initializer: { (prop) in
    guard let prop = prop else { return }
    //read
    prop.readBlock = { (obj, values) in
                
    }
            
    //write
    prop.writeBlock = {(obj, values) in
                
    }
    prop.threshold = 0.01
            
}) as? POPAnimatableProperty {
    anim.property = proper
}

2. 属性介绍

其组成就是一个readBlock一个writeBlock和一个threashold

POPAnimatableProperty其实是POP中一个比较重要的东西 像上面提到的POP自带的动画属性 查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已 其作用就是当动画的某个时间片被触发时 告诉系统如何根据当前时间片做出变化

还是以一个实际的例子来说明如何使用自定义属性 比如我们要实现一个像系统的时钟APP里秒表计时的一个效果

计时器效果

3. 完整代码示例

if let proper = POPAnimatableProperty.property(withName: "prop", initializer: { (prop) in
    guard let prop = prop else { return }
    //read
    prop.readBlock = { (obj, values) in
        guard let array = values else { return }
        print(array[0])
    }
    
    //write
    prop.writeBlock = {(obj, values) in
        guard let button = obj as? UIButton, let array = values else { return }
        let value = array[0]
        button.setTitle(String(format: "%02d:%02d:%02d", Int(value / 60), Int(value.truncatingRemainder(dividingBy: 60)), Int((value * 100).truncatingRemainder(dividingBy: 100))), for: .normal)
    }
    prop.threshold = 0.01
    
}) as? POPAnimatableProperty {
    if let popBasic = POPBasicAnimation.linear() {
        //秒表用线性的时间函数初始化
        popBasic.property = proper
        popBasic.fromValue = 0 //从0开始
        popBasic.toValue = 18  //到18秒
        popBasic.duration = 18 //持续18秒
        popBasic.beginTime = CACurrentMediaTime() + 2 //延迟2秒开始
        pictureBtn.pop_add(popBasic, forKey: "linear")
    }
}

4. 注意:

七. 类似微博中间发布按钮弹出动画

先看一下效果吧

微博动画效果图

动画分为两个部分

下面来看一下部分的核心代码

1. 六个按钮的弹出和消失动画
for i in 0..<titles.count {
    let button = BaseButton()
    button.setTitle(titles[i], for: .normal)
    button.setImage(UIImage(named: images[i]), for: .normal)
    button.addTarget(self, action: #selector(buttonClick(button:)), for: .touchUpInside)
    addSubview(button)
    
    //计算X/Y
    let row = i / maxCols
    let col = i % maxCols
    let buttonX = btnStsrtX + CGFloat(col) * (xMargin + buttonW)
    let buttonEndY = btnStartY + CGFloat(row) * buttonH
    let buttonStartY = buttonEndY - kScreenHeight
    
    //按钮动画
    let popSpring = POPSpringAnimation(propertyNamed: kPOPViewFrame)
    popSpring?.fromValue = CGRect(x: buttonX, y: buttonStartY, width: buttonW, height: buttonH)
    popSpring?.toValue = CGRect(x: buttonX, y: buttonEndY, width: buttonW, height: buttonH)
    popSpring?.springBounciness = kSpringFactor
    popSpring?.springSpeed = kSpringFactor
    popSpring?.beginTime = CACurrentMediaTime() + kAnimationDelay * Double(i)
    button.pop_add(popSpring, forKey: "spring")
}
2. 最上部分标语的弹出和消失
//z执行动画
let imagePOP = POPSpringAnimation(propertyNamed: kPOPViewCenter)
imagePOP?.fromValue = CGPoint(x: kScreenWidth * 0.5, y: 0.2 * kScreenHeight - kScreenHeight)
imagePOP?.toValue = CGPoint(x: kScreenWidth * 0.5, y: 0.2 * kScreenHeight)
imagePOP?.springSpeed = kSpringFactor
imagePOP?.springBounciness = kSpringFactor
imagePOP?.beginTime = CACurrentMediaTime() + Double(btnCount) * kAnimationDelay
imagePOP?.completionBlock = { popAnim, finished in
    //所有动画执行完毕,回复View点击事件
    kRootView?.isUserInteractionEnabled = true
    self.isUserInteractionEnabled = true
}
topImage.pop_add(imagePOP, forKey: nil)

以上是类似微博动画的部分核心代码, 具体代码详见GitHub项目, 喜欢请star

github项目介绍

注: 项目持续更新中......

上一篇下一篇

猜你喜欢

热点阅读