用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封装了我们需要的一 ...
随机推荐
- reifiable type与raw type
下面的逻辑需要明白如下两个概念: 4.7. Reifiable Types 4.8. Raw Types 举几个是Reifiable Types的例子,如下: class A{} class B< ...
- linux mint 18.2 install erlang
由于Linux min 18.2仓库中的erlnag是18.2,我们手动安装最新版本,参考 https://www.erlang-solutions.com/resources/download.ht ...
- Oracle数据库调优总结
oracle采用物理读和逻辑读,第一次查询数据库采用的是物理读,以后如果使用相同的sql语句查询,那么它会采用逻辑读,直接从内存中读取数据. 采用执行计划查看执行顺序和耗时:一般查看object na ...
- 解决问题的思维方式之Problem->Desgin->Solution(笔记)
Problem->Desgin->Solution: 1.对于每个需要实现的功能问题,我们都称之为Problem(问题). 2.解决问题的具体思考过程,寻求解决问题的方案,即为Desgin ...
- WPF在XAML中使用MultiBinding的两个例子
使用MultiBinding的原则:数据源有一个以上: 1. 需求:在一个需要显示的内容中,不同的部分要进行的处理不一样,这时可以使用MultiBinding <TextBlock> &l ...
- java几个经典的算法题目----------查询子串和等于已知数字
给出一个排序好的数组和一个数,求数组中连续元素的和等于所给数的子数组 public class testClockwiseOutput { public static void main(String ...
- ES6 读书笔记
一.let和const命令 二.变量的解构赋值 三.字符串的扩展 四.数值的扩展 五.正则的扩展 六.数组的扩展 七.函数的扩展 八.对象的扩展 九.symbol 十.proxy和reflect 十一 ...
- JS 教程
1简介 1.JavaScript 是脚本语言 1.1轻量级的编程语言 1.2可插入 HTML 页面的编程代码 1.3可由所有的现代浏览器执行 2.您将学到什么 2.1JavaScript:写入 HTM ...
- ASP.NET HttpWebRequest和HttpWebResponse
HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性. 模拟艺龙旅游网登录 想模拟登录,首先整理一下流程 1.通过360浏览器 ...
- [PHP] apache在worker模式配置fastcgi使用php-fpm
1.准备: dpkg -L apache2查看所有安装的apache2的应用 a2query -M查看apache2使用的模式 httpd -l旧版本查看当前apache模式 2.查看apache的进 ...