IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    使用POP框架来写一个计数的动画

    键盘上的舞者发表于 2016-10-22 15:56:27
    love 0

    动画效果如下所示:

    我们使用大名鼎鼎的Facebook提供的POP框架来实现这个动画效果。

    自定义一个类RDNumberAnimation继承自UIView

    //
    //  RDNumberAnimation.h
    //  POP动画
    //
    //  Created by 键盘上的舞者 on 10/19/16.
    //  Copyright © 2016 键盘上的舞者. All rights reserved.
    //
    
    #import <Foundation/Foundation.h>
    #import <UIKit/UIKit.h>
    
    @class RDNumberAnimation;
    
    @protocol RDNumberAnimationDelegate <NSObject>
    
    @required
    - (void)RDNumberAnimation:(RDNumberAnimation *)animation currentValue:(CGFloat)currentValue;
    
    @end
    
    @interface RDNumberAnimation : NSObject
    
    @property (nonatomic, weak) id<RDNumberAnimationDelegate> delegate;
    
    @property (nonatomic, assign) CGFloat fromValue;
    
    @property (nonatomic, assign) CGFloat toValue;
    
    @property (nonatomic, assign) CGFloat currentValue;
    
    @property (nonatomic, assign) NSTimeInterval duration;
    
    @property (nonatomic, strong) CAMediaTimingFunction *timingFunction;
    
    /**
     *  动画开始
     */
    - (void)startAnimation;
    /**
     *  动画结束
     */
    - (void)stopAnimation;
    /**
     *  保存属性
     */
    - (void)saveValues;
    
    
    @end

    //
    //  RDNumberAnimation.m
    //  POP动画
    //
    //  Created by 键盘上的舞者 on 10/19/16.
    //  Copyright © 2016 键盘上的舞者. All rights reserved.
    //
    
    #import "RDNumberAnimation.h"
    #import "POP.h"
    
    @interface RDNumberAnimation ()
    
    @property (nonatomic, strong) POPBasicAnimation *numberAniamtion;
    
    @end
    
    @implementation RDNumberAnimation
    
    - (instancetype)init {
        if (self = [super init]) {
            self.numberAniamtion = [POPBasicAnimation animation];
        }
        return self;
    }
    
    - (void)saveValues {
        self.numberAniamtion.fromValue = @(self.fromValue);
        self.numberAniamtion.toValue = @(self.toValue);
        self.numberAniamtion.duration = self.duration;
        if (self.timingFunction) {
            self.numberAniamtion.timingFunction = self.timingFunction;
        }
    }
    
    - (void)startAnimation {
        if (self.delegate && [self.delegate respondsToSelector:@selector(RDNumberAnimation:currentValue:)]) {
            __weak RDNumberAnimation *weakSelf = self;
            self.numberAniamtion.property = [POPMutableAnimatableProperty propertyWithName:@"numberAnimation" initializer:^(POPMutableAnimatableProperty *prop) {
                
                prop.writeBlock = ^(id object, const CGFloat values[]) {
                    weakSelf.currentValue = values[0];
                    [weakSelf.delegate RDNumberAnimation:weakSelf currentValue:values[0]];
                };
                
            }];
            
            [self pop_addAnimation:self.numberAniamtion forKey:nil];
        }
    }
    
    - (void)stopAnimation {
        [self pop_removeAllAnimations];
    }
    
    @end

    我们使用POPBasicAnimation时,常会指定它的property,这里我们不指定,并自定义它的property,使用它提供的writeBlock来获取到动画运行时的数值,然后自己定义了一个delegate,然后在使用到这个VC中实现这个delegate方法,在这个delegate里面来更新UILabel的值,这样就实现了动态更新的效果,这个效果还是蛮酷的!



沪ICP备19023445号-2号
友情链接