用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.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动画编写带富文本的自定义动画效果的更多相关文章
- Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示
Think php6.0官网网址:序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn) 下面是基础配置 第一步:创建TP框架,命名为tp composer create- ...
- 关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- 适用于 Mpvue 的微信小程序富文本解析自定义组件
废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...
- Extjs6 编写自己的富文本组件(以ueditor为基础)
一.下载ueditor 地址:http://ueditor.baidu.com/website/ 二.将ueitor资源引入自己的项目 在index.html中引入ueditor.config.js. ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...
- 编写带有点击特效的UIButton
编写带有点击特效的UIButton 效果: 源码: // // ViewController.m // Button // // Created by XianMingYou on 15/1/18. ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
随机推荐
- c++ 网络编程(十一) LINUX下 初步制作基于HTTP的WEB服务器
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9663028.html HTTP概要 理解Web服务器端: 编写HTTP(超文本传输协议)服务器 ...
- Install Papirus Icon Theme on Ubuntu
sudo add-apt-repository ppa:papirus/papirus sudo apt update && sudo apt install papirus-icon ...
- 微服务Kong(三)——添加一个API
在开始前,请确保您已经安装了KONG服务,并且已经启动了KONG服务. 在本节中,您可以学习到:如何在KONG层添加一个API.这是您使用KONG来管理您的API的第一步.对于此篇教程,我们将使用 h ...
- HighCharts理解与总结
摘自:http://www.highcharts.com/docs/getting-started/installation Installation Highcharts requires two ...
- python实例:元组命名 频次统计 字典排序
1.为元组中元素命名 方法1.定义常量 NAME, AGE = 0, 1 student = ('乔峰', 29, 'qf@jinyong.com') name = student[NAME] age ...
- pureMVC与strangeIoc框架对比
前言 最近有机会了解到了StrangeIoc框架,就拿来跟自己比较熟悉的pureMVC进行一下简要的对比.这两套开源框架都是基于MVC模式的扩展,pureMVC是一个跨平台跨语言的MVC轻量级应用框架 ...
- 注解完成spring json返回数据格式配置
import com.fasterxml.jackson.databind.ObjectMapper;import com.fasterxml.jackson.databind.module.Simp ...
- SQL Serever学习6——数据表
数据表 表的构成 数据库中的基本表由记录(行)和字段(列)构成,SQLServer2008每个表可以有1024个列,每个列可以有8060字节(不包括iamge,ntext,text类型). 记录(Re ...
- DataGridView 隔行显示不同的颜色
两种方法 第一种 DataGridview1.Rows[i].DefultCellStyle.backcolor 第二种 AlternatingRowsDefutCellstyle 属性 获取或设置应 ...
- WAMP配置httpd.conf允许外部访问
在电脑上开启Apache服务后,如何让外部网络访问呢? 在网上查找答案和问过一些小伙伴后,得到以以下方案.大致是在httpd.conf中加入一些语句以及利用自己的WiFi建立热点,让需要访问的设备连接 ...