用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封装了我们需要的一 ...
随机推荐
- JS中typeof和instanceof的用法和区别
typeof和instanceof的区别 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的 instanceof的用法 instanceof返回的是一个布尔值 ...
- ubuntu18.04 安装docker
https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1Change "stable" ...
- 数据库分库分表(一)常见分布式主键ID生成策略
主键生成策略 系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,下面介绍一些常见的ID生成策略. Sequence ID UUID GUID COMB Snowflake 最开始的自增ID为了实 ...
- TCP/IP协议的三次握手及实现原理
TCP/IP是很多的不同的协议组成,实际上是一个协议组,TCP用户数据报表协议(也称作TCP传输控制协议,Transport Control Protocol.可靠的主机到主机层协议.这里要先强调一下 ...
- linux 下vim的使用(必看)
vi与vimvi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对U ...
- Android OpenGL教程-第六课【转】
第六课 纹理映射: 在这一课里,我将教会你如何把纹理映射到立方体的六个面. 激动的时刻来了,加载图片了. 复习一下android加载图片的知识.放一个png到drawable里面. (图片文件名:ne ...
- Scrum 冲刺博客第六篇
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 判断用户输入的答案是否正确并将其输出到界面中 今天计划完成的工作 对排行榜 ...
- js 继承介绍
js中继承的方式并不是明确的,这里介绍常用的几种 一.对象冒充(构造函数绑定) 原理:使用对象冒充继承基类,实质上是使用call或apply方法改变this 指针的指向 function Monkey ...
- i.mx6 Android5.1.1 初始化流程之框架
Android启动过程分为以下几个步骤: 1. Boot ROM: 上电后启动芯片固话代码. 2. BootLoader:固话代码会根据启动模式启动bootloader,(一般为启动引脚的电平的 ...
- Mac上微信小程序官方开发工具卡死的问题
Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...