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

【源码】

https://github.com/YouXianMing/POPNumberCount

【效果】

【特点】

* 支持富文本

* 可定制型强(继承父类重写父类的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 的设计类似于设计模式中的策略模式,提供接口让子类重写来实现不一样的功能,父类基本不会修改,具体到某个子类,只需要修改子类中的特定实现即可。(父类中的协议类似于一个个策略,具体由子类来实现)

时间: 2024-10-12 16:57:18

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

对于带富文本的博客/随笔/文章的处理

这是在工作中遇到的问题,首先介绍一下我使用的场景: 数据表: sys_article -- 存放文章标题.作者等等基础信息 sys_article_detail -- 存放较为复杂的富文本内容信息(用 content 字段存储),用 article_id 外键与文章关联,一对一 sys_annex -- 存放公共的附件信息,包括附件基本信息,以及远程服务器地址,用 obj 和 obj_id 图片与文章的关联,分为两种: 一是文章封面,obj为article,obj_id为文章id,type为co

「wxParser」小程序插件:想在小程序中快速部署富文本?这个插件让你一步搞定

上期,我们在<「微信同声传译」小程序插件:快速实现语音转文字.文本翻译.语音合成等能力>一文中介绍了「微信同声传译」小程序插件的意义.作用以及应用.而在此之前,我们还介绍过「腾讯地图」.「腾讯视频」.「医院 LBS 位置服务」插件,有兴趣了解的读者可以点击「微信极客WeGeek」公众号底部菜单「极客干货 - 小程序插件」了解. 今天我们为大家推荐的是一款富文本渲染插件「wxParser」,目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持表格.代

Android富文本编辑器RichEditor的使用

以前有个项目做一个笔记本类似的东西,觉得写的不太好,最近重新写,就发现了这个富文本编辑器他的效果是这样的 感觉有点厉害啊 废话不多说开始撸码 1先添加依赖 dependencies { compile 'jp.wasabeef:richeditor-android:1.2.0' } 2写布局 <jp.wasabeef.richeditor.RichEditor android:id="@+id/editor" android:layout_width="match_pa

富文本粘贴文本去除默认格式

在我们开发过程中,经常用到的文本输入框,常用的是input/textarea.然而在有些情况下,input/textarea可能满足不了我们的业务需求,textarea/input大部分是处理纯文本,不能附加一些自定义样式,文本域内业务操作空间也不怎么大,但是富文本,即可以编辑的HTML,可以针对输入内容做任意自定义处理,因此,在特定业务需求下,富文本编辑更符合我们的实际业务要求. 富文本基本使用:只需要给HTML标签添加一个contenteditable=‘true’即可完成普通HTML与富文

富文本编辑器 CKeditor 配置使用 (带附件)

Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.getData(); //获取带HTML的值 var stemTxt=CKEDITOR.instances.TextArea1.document.getBody().getText();//获取纯文本 CKEDITOR.instances.TextArea1.setData(data.content)

富文本带点击事件的解决方案

效果 分析 富文本中要添加点击link事件,需要深入到CoreText里面才能够解决,本人将TTTAttributedLabel进行了封装(封装并不完全,以后会继续完善),简化了操作. 源码 https://github.com/YouXianMing/TTTAttributeLabelView https://github.com/TTTAttributedLabel/TTTAttributedLabel // // TTTAttributeLabelView.h // TappedLabel

Selenium2+python自动化24-js处理富文本(带iframe)【转载】

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题 一.加载配置 1.打开博客园写随笔,首先需要登录,这里为了避免透露个人账户信息,我直接加载配置文件,免登录了. 不懂如何加载配置文件的,看这篇Selenium2+python自动化18-加载Firefox配置 二.打开编辑界面 1.博客首页地址:bolgurl = "http://www.cn

Selenium2+python自动化24-js处理富文本(带iframe)

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题 一.加载配置 1.打开博客园写随笔,首先需要登录,这里为了避免透露个人账户信息,我直接加载配置文件,免登录了. 不懂如何加载配置文件的,看这篇Selenium2+python自动化18-加载Firefox配置 二.打开编辑界面 1.博客首页地址:bolgurl = "http://www.cn

tinymce 富文本编辑器 编写资料

tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequest 2.0的家臣们 URL.createObjectURL和URL.revokeObjectURL 如何使用 blob:http:// 隐藏一个mp3文件的真实地址? https://www.z-u-i-d-a-i-m-a.com/question/3913274460982272.htm 使用