用POP动画编写带富文本的自定义动画效果

简介:

用POP动画编写带富文本的自定义动画效果

【源码】

https://github.com/YouXianMing/UI-Component-Collection

 

【效果】

 

【特点】

* 支持富文本

* 可定制型强(继承父类重写父类的startAnimation方法即可)

* 支持动画的中断与持续

* 支持CAMediaTimingFunction

* 数据与UI隔离,便于你封装属于你的类

 

【核心】

//
//  POPNumberCount.h
//  POP
//
//  Created by XianMingYou on 15/4/10.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <Foundation/Foundation.h>
#import "POP.h"

@class POPNumberCount;

@protocol POPNumberCountDelegate <NSObject>
@optional
/**
 *  最原始的方法
 *
 *  @param numberCount 对象自己
 *  @param number      变化的值
 */
- (void)numberCount:(POPNumberCount *)numberCount currentNumber:(NSNumber *)number;

/**
 *  子类可以实现的方法
 *
 *  @param numberCount 对象自己
 *  @param string      子类返回的富文本
 */
- (void)numberCount:(POPNumberCount *)numberCount currentAttributedString:(NSAttributedString *)string;

/**
 *  子类可以实现的方法
 *
 *  @param numberCount 对象自己
 *  @param string      子类返回的文本
 */
- (void)numberCount:(POPNumberCount *)numberCount currentString:(NSString *)string;

@end


@interface POPNumberCount : NSObject

@property (nonatomic, weak)   id<POPNumberCountDelegate> 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; // 时间函数
@property (nonatomic, strong) POPBasicAnimation         *conutAnimation;

/*
 *  存储值(执行动画之前,请先将设置的值进行存储)
 */
- (void)saveValues;

/*
 *  开始动画(继承的子类需要重写本方法来,然后与代理一起配合使用)
 */
- (void)startAnimation;

/*
 *  停止动画
 */
- (void)stopAnimation;

@end


//
//  POPNumberCount.m
//  POP
//
//  Created by XianMingYou on 15/4/10.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "POPNumberCount.h"
#import "ConfigAttributedString.h"

@implementation POPNumberCount

- (instancetype)init {
    self = [super init];
    if (self) {
        self.conutAnimation = [POPBasicAnimation animation];
    }
    return self;
}

- (void)saveValues {
    self.conutAnimation.fromValue = @(self.fromValue);
    self.conutAnimation.toValue   = @(self.toValue);
    self.conutAnimation.duration  = (self.duration <= 0 ? 0.4f : self.duration);
    if (self.timingFunction) {
        self.conutAnimation.timingFunction = self.timingFunction;
    }
}

- (void)startAnimation {
    // 只有执行了代理才会执行计数引擎
    if (self.delegate && [self.delegate respondsToSelector:@selector(numberCount:currentNumber:)]) {
        /* 将计算出来的值通过writeBlock动态给控件设定 */
        self.conutAnimation.property = \
        [POPMutableAnimatableProperty propertyWithName:@"conutAnimation"
                                           initializer:^(POPMutableAnimatableProperty *prop) {
                                               prop.writeBlock      = ^(id obj, const CGFloat values[]) {
                                                   NSNumber *number = @(values[0]);
                                                   _currentValue    = values[0];
                                                   
                                                   /* ------------- 子类重写父类的这个方法 ------------- */
                                                   [_delegate numberCount:self currentNumber:number];
                                                   /* ---------------------------------------------- */
                                               };
                                           }];
        
        // 添加动画
        [self pop_addAnimation:self.conutAnimation forKey:nil];
    }
}

- (void)stopAnimation {
    [self pop_removeAllAnimations];
}

@end

【说明】

父类  POPNumberCount 的设计类似于设计模式中的策略模式,提供接口让子类重写来实现不一样的功能,父类基本不会修改,具体到某个子类,只需要修改子类中的特定实现即可。(父类中的协议类似于一个个策略,具体由子类来实现)

目录
相关文章
|
6月前
|
前端开发 算法 JavaScript
从基础到进阶:实现div控件的拖拽和缩放功能
从基础到进阶:实现div控件的拖拽和缩放功能
103 0
|
4月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
103 0
|
JavaScript
jQuery——手风琴完美实现效果(不会出现重复点击动画还没加载完成)
手风琴完美实现效果(不会出现重复点击动画还没加载完成)
106 0
|
JavaScript 程序员
jQuery框架实现元素显示及隐藏动画【附案例分析】
jQuery框架实现元素显示及隐藏动画【附案例分析】
250 0
jQuery框架实现元素显示及隐藏动画【附案例分析】
自定义加载动画的两种实现方式
自定义加载动画的两种实现方式
|
前端开发 JavaScript Web App开发
如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1373 0
|
JavaScript
jQuery图片列表拖拽排序布局
在线演示 本地下载
800 0
|
前端开发 JavaScript 内存技术
|
JavaScript 前端开发 容器
ScrollReveal-元素随页面滚动产生动画的js插件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84181029 简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。
2549 0
|
前端开发 C# 算法
WPF路径动画(动态逆向动画)
原文:WPF路径动画(动态逆向动画) WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点   个人写了关于Path.Data数据反向,意思就是把Path的数据逆转,但是图形是没有变化的 Xaml代码如下: ...
1988 0
下一篇
无影云桌面