JTNumberScrollAnimatedView

本人视频教程系类   iOS中CALayer的使用

效果:

Use JTNumberScrollAnimatedView for have a nice animation for display number. It's easy to use, easy to customize.

使用 JTNumberScrollAnimatedView来展示一个效果非常不错的显示数字变化的动画效果的控件,使用很简单,非常容易定制。

Usage

Basic usage - 基本的使用

You can use JTNumberScrollAnimatedView like a normal view.

你可以像使用一个普通的view一样来使用JTNumberScrollAnimatedView

#import <UIKit/UIKit.h>

#import "JTNumberScrollAnimatedView.h"

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet JTNumberScrollAnimatedView *animatedView;

@end

You just have to call setValue with a NSNumber and use startAnimation for launch the animation.

你只需要调用setValue方法然后执行startAnimation方法就能显示效果。

- (void)viewDidLoad
{
[super viewDidLoad]; [self.animatedView setValue:@249];
} - (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated]; [self.animatedView startAnimation];
}

WARNING - 注意

For now the value must be a positive integer.

现在,这个值必须是正的不能是负数。

Customization - 定制

You can easily change some properties of the animation. Each caracter have its own column.

你可以很简单的修改以下的一些属性

  • textColor
  • font
  • duration
  • durationOffset, delay between the end of the animation of each column
  • density, number of characters by column for the animation
  • minLength, you can force the minimum count of columns
  • isAscending, the direction of the scroll

If you change one of this properties, you have to call setValue for update the view.

如果你修改了其中的一个属性,你需要调用 setValue 来更新画面。

Requirements

  • iOS 7 or higher                                 iOS7 或者更高版本
  • Automatic Reference Counting (ARC)  ARC
//
// JTNumberScrollAnimatedView.h
// JTNumberScrollAnimatedView
//
// Created by Jonathan Tribouharet
// #import <UIKit/UIKit.h> @interface JTNumberScrollAnimatedView : UIView @property (strong, nonatomic) NSNumber *value; @property (strong, nonatomic) UIColor *textColor;
@property (strong, nonatomic) UIFont *font;
@property (assign, nonatomic) CFTimeInterval duration;
@property (assign, nonatomic) CFTimeInterval durationOffset;
@property (assign, nonatomic) NSUInteger density;
@property (assign, nonatomic) NSUInteger minLength;
@property (assign, nonatomic) BOOL isAscending; - (void)startAnimation;
- (void)stopAnimation; @end
//
// JTNumberScrollAnimatedView.m
// JTNumberScrollAnimatedView
//
// Created by Jonathan Tribouharet
// #import "JTNumberScrollAnimatedView.h" @interface JTNumberScrollAnimatedView(){
NSMutableArray *numbersText;
NSMutableArray *scrollLayers;
NSMutableArray *scrollLabels;
} @end @implementation JTNumberScrollAnimatedView - (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(!self){
return nil;
} [self commonInit]; return self;
} - (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if(!self){
return nil;
} [self commonInit]; return self;
} - (void)commonInit
{
self.duration = 1.5;
self.durationOffset = .;
self.density = ;
self.minLength = ;
self.isAscending = NO; self.font = [UIFont systemFontOfSize:[UIFont systemFontSize]];
self.textColor = [UIColor blackColor]; numbersText = [NSMutableArray new];
scrollLayers = [NSMutableArray new];
scrollLabels = [NSMutableArray new];
} - (void)setValue:(NSNumber *)value
{
self->_value = value; [self prepareAnimations];
} - (void)startAnimation
{
[self prepareAnimations];
[self createAnimations];
} - (void)stopAnimation
{
for(CALayer *layer in scrollLayers){
[layer removeAnimationForKey:@"JTNumberScrollAnimatedView"];
}
} - (void)prepareAnimations
{
for(CALayer *layer in scrollLayers){
[layer removeFromSuperlayer];
} [numbersText removeAllObjects];
[scrollLayers removeAllObjects];
[scrollLabels removeAllObjects]; [self createNumbersText];
[self createScrollLayers];
} - (void)createNumbersText
{
NSString *textValue = [self.value stringValue]; for(NSInteger i = ; i < (NSInteger)self.minLength - (NSInteger)[textValue length]; ++i){
[numbersText addObject:@""];
} for(NSUInteger i = ; i < [textValue length]; ++i){
[numbersText addObject:[textValue substringWithRange:NSMakeRange(i, )]];
}
} - (void)createScrollLayers
{
CGFloat width = roundf(CGRectGetWidth(self.frame) / numbersText.count);
CGFloat height = CGRectGetHeight(self.frame); for(NSUInteger i = ; i < numbersText.count; ++i){
CAScrollLayer *layer = [CAScrollLayer layer];
layer.frame = CGRectMake(roundf(i * width), , width, height);
[scrollLayers addObject:layer];
[self.layer addSublayer:layer];
} for(NSUInteger i = ; i < numbersText.count; ++i){
CAScrollLayer *layer = scrollLayers[i];
NSString *numberText = numbersText[i];
[self createContentForLayer:layer withNumberText:numberText];
}
} - (void)createContentForLayer:(CAScrollLayer *)scrollLayer withNumberText:(NSString *)numberText
{
NSInteger number = [numberText integerValue];
NSMutableArray *textForScroll = [NSMutableArray new]; for(NSUInteger i = ; i < self.density + ; ++i){
[textForScroll addObject:[NSString stringWithFormat:@"%ld", (number + i) % ]];
} [textForScroll addObject:numberText]; if(!self.isAscending){
textForScroll = [[[textForScroll reverseObjectEnumerator] allObjects] mutableCopy];
} CGFloat height = ;
for(NSString *text in textForScroll){
UILabel * textLabel = [self createLabel:text];
textLabel.frame = CGRectMake(, height, CGRectGetWidth(scrollLayer.frame), CGRectGetHeight(scrollLayer.frame));
[scrollLayer addSublayer:textLabel.layer];
[scrollLabels addObject:textLabel];
height = CGRectGetMaxY(textLabel.frame);
}
} - (UILabel *)createLabel:(NSString *)text
{
UILabel *view = [UILabel new]; view.textColor = self.textColor;
view.font = self.font;
view.textAlignment = NSTextAlignmentCenter; view.text = text; return view;
} - (void)createAnimations
{
CFTimeInterval duration = self.duration - ([numbersText count] * self.durationOffset);
CFTimeInterval offset = ; for(CALayer *scrollLayer in scrollLayers){
CGFloat maxY = [[scrollLayer.sublayers lastObject] frame].origin.y; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.y"];
animation.duration = duration + offset;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; if(self.isAscending){
animation.fromValue = [NSNumber numberWithFloat:-maxY];
animation.toValue = @;
}
else{
animation.fromValue = @;
animation.toValue = [NSNumber numberWithFloat:-maxY];
} [scrollLayer addAnimation:animation forKey:@"JTNumberScrollAnimatedView"]; offset += self.durationOffset;
}
} @end

[翻译] JTNumberScrollAnimatedView的更多相关文章

  1. 《Django By Example》第五章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...

  2. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  3. [翻译]开发文档:android Bitmap的高效使用

    内容概述 本文内容来自开发文档"Traning > Displaying Bitmaps Efficiently",包括大尺寸Bitmap的高效加载,图片的异步加载和数据缓存 ...

  4. 【探索】机器指令翻译成 JavaScript

    前言 前些时候研究脚本混淆时,打算先学一些「程序流程」相关的概念.为了不因太枯燥而放弃,决定想一个有趣的案例,可以边探索边学. 于是想了一个话题:尝试将机器指令 1:1 翻译 成 JavaScript ...

  5. 《Django By Example》第三章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...

  6. 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...

  7. 《Django By Example》第一章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  8. 【翻译】Awesome R资源大全中文版来了,全球最火的R工具包一网打尽,超过300+工具,还在等什么?

    0.前言 虽然很早就知道R被微软收购,也很早知道R在统计分析处理方面很强大,开始一直没有行动过...直到 直到12月初在微软技术大会,看到我软的工程师演示R的使用,我就震惊了,然后最近在网上到处了解和 ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

随机推荐

  1. happy in java之io流简介

    闲来没事,重温马士兵老师的java基础... 流  水流的流  流氓的流,,流 英文叫做stream,溪流 流的分类: 流是用来读写数据的. 流就像水流一样,File类封装的是文件的名字,它是内存里头 ...

  2. 《python灰帽子》学习笔记:调试器设置

    一.构造 C  数据类型 C Type | Python Type | ctypes Type ____________________________________________________ ...

  3. JavaScript设计模式-7.单例模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Ubuntu系统Java开发环境的搭建

    操作系统:Linux x64 / Ubuntu 14.04 Java JDK版本:jdk-8u65-linux-x64.tar.gz 声明:转载请注明出处及本文链接 本文原文地址:Ubuntu系统Ja ...

  5. C#中复制数组

    string array = new string[]{"abc", "bcd", "efg"}; string bArray = new ...

  6. Training Logisches Denken

    1.Das Begriff 1.1 Die Arten von Begriff 1.1.1 alleines Begriff,universales Begriff,Leeres Begriff: A ...

  7. oracle 树状结构递归 PL/SQL输出控制 包括空格输出控制

    树状结构 存储过程中通过递归构建,类似BBS回帖显示,代码共三段: 建表,插入数据,创建存储过程显示: 1.create table article(id number primary key,con ...

  8. CADisplayLink+弹簧动画实现果冻效果

    项目中在Tabbar中间的按钮要从底部弹出视图并有果冻效果,在CocoaChina中找了一篇博客用 UIBezierPath 实现果冻效果,github,自己就按着上面的demo修改了一下( 之前也是 ...

  9. 从源码看 Promise 概念与实现

    Promise 是 JS 异步编程中的重要概念,它较好地解决了异步任务中回调嵌套的问题.在没有引入新的语言机制的前提下,这是如何实现的呢?上手 Promise 时常见若干晦涩的 API 与概念,它们又 ...

  10. pythonchallenge(七)

    转眼间又一个月没有逛博客园,明显的感觉到自己的代码能力变弱,前两周搞项目去了,只是形式上面的答辩而已,并没有涉及到代码层面,也就玩了一下验证码,没有识别玩出校器网页的验证码:转眼间又是各种考试,所幸, ...