用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.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[]);
_currentValue = values[]; /* ------------- 子类重写父类的这个方法 ------------- */
[_delegate numberCount:self currentNumber:number];
/* ---------------------------------------------- */
};
}]; // 添加动画
[self pop_addAnimation:self.conutAnimation forKey:nil];
}
} - (void)stopAnimation {
[self pop_removeAllAnimations];
} @end

【说明】

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

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

  1. Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示

    Think php6.0官网网址:序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn) 下面是基础配置 第一步:创建TP框架,命名为tp composer create- ...

  2. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  3. UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  4. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  5. Extjs6 编写自己的富文本组件(以ueditor为基础)

    一.下载ueditor 地址:http://ueditor.baidu.com/website/ 二.将ueitor资源引入自己的项目 在index.html中引入ueditor.config.js. ...

  6. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  7. java通过freemarker导出包含富文本图片的word文档

    废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...

  8. 编写带有点击特效的UIButton

    编写带有点击特效的UIButton 效果: 源码: // // ViewController.m // Button // // Created by XianMingYou on 15/1/18. ...

  9. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

随机推荐

  1. 【数组】Triangle

    题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...

  2. 17.Generator函数的异步应用

    异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可. 1.传统方法 ES6 诞生以前,异步编程的方法,大概有下面 ...

  3. 安装Ubunutu音频视频库

    sudo apt-get install ubuntu-restricted-extras

  4. 2-4 js基础-事件对象小结

    var e=ev||event; e.cancelBubble=true; document.documentElement   html document.body                  ...

  5. Nginx 的信号控制

    摘自:Nginx服务器初识:Nginx启动.停止与信号控制 名称 功能 说明 HUP 重启   QUIT 从容关闭   TERM 快速关闭   INT 从容关闭   USR1 切换日志文件 通常用在切 ...

  6. msyql int(x) 中的x

    先看一个mysql表结构 Sql代码 CREATE   TABLE  `test` ( `TYPEID` int (2) ) ENGINE=MyISAM CHARSET=latin1; Sql代码   ...

  7. HTML5学习笔记:HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]

    使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...

  8. 使gitignore生效

    git rm -r --cached . // 删除本地缓存 git add . // 添加要提交的文件 初次提交直接声明gitignore并提交就可以: 非初次提交,改动的gitignore要进行上 ...

  9. IOS使用Auto Layout中的VFL适配

    做登录页面,之前做都是用frame做,今天想着用Auto Layout中的VFL来做.觉得做的效果还是可以的(自恋一下下). 首先看下效果图和标记图 自己在做的过程中也遇到了好多问题,不过也一个一个的 ...

  10. [转]Porting to Oracle with Entity Framework NLog

    本文转自:http://izzydev.net/.net/oracle/entityframework/2017/02/01/Porting-to-Oracle-with-Entity-Framewo ...