UICollectionView和UIDynamicanimation结合使用

又是星期天了,今天说一个如何在UICollectionView中,使用UIDynamicanimation,做一个可以左右摆动的动画效果



首先,新建一个DynamicView的类,继承自UIView,在这个类中,我们封装了一个带有左右摆动的动画效果

#import "DynamicView.h"

@implementation DynamicView
{
UIDynamicAnimator *_animator;
UIPushBehavior *_pushBehavior;

}

- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {

self.backgroundColor = [UIColor clearColor];

//挂件
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.origin.x + 30, self.bounds.origin.y + 20, self.bounds.size.width - 60, self.bounds.size.height - 40)];
self.imageView.userInteractionEnabled = YES;
[self addSubview:self.imageView];

//花纹
self.topImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0 , self.bounds.size.width - 60, 50)];
[self addSubview:self.topImageView];

//love寄语
self.love = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 60, 40)];
self.love.center = CGPointMake(self.bounds.size.width / 2, self.topImageView.center.y );
self.love.userInteractionEnabled = YES;
self.love.image = [UIImage imageNamed:@"love"];
[self addSubview:self.love];

//添加滑动
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleView:)];
[self.imageView addGestureRecognizer:pan];

//KVO观察者模式
[self.imageView addObserver:self forKeyPath:@"center" options:NSKeyValueObservingOptionNew context:nil];

//加载动画
[self applyDynamic];
}
return self;
}

- (void)applyDynamic {

UIDynamicBehavior *behavior = [[UIDynamicBehavior alloc] init];

CGPoint anchor = self.imageView.center;
anchor.y -= 200;

self.topImageView.center = anchor;
UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:self.imageView attachedToAnchor:anchor];
[behavior addChildBehavior:attachment];

//重力
UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[self.imageView]];
gravity.magnitude = 10;
[behavior addChildBehavior:gravity];

//物理引擎公有属性
UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.imageView]];
itemBehavior.elasticity = 1.0;
itemBehavior.allowsRotation = NO;
itemBehavior.resistance = 2.0f;
[behavior addChildBehavior:itemBehavior];

//将动画加入到contentView中
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self];
[_animator addBehavior:behavior];

}

- (void)handleView:(UIPanGestureRecognizer *)pan {
if (pan.state == UIGestureRecognizerStateBegan) {
if (_pushBehavior) {
[_animator removeBehavior:_pushBehavior];
}
//推力
_pushBehavior = [[UIPushBehavior alloc] initWithItems:@[pan.view] mode:UIPushBehaviorModeContinuous];
[_animator addBehavior:_pushBehavior];
}

CGFloat offset = [pan translationInView:self].x / 10.f;
_pushBehavior.pushDirection = CGVectorMake(offset, 0);
if (pan.state == UIGestureRecognizerStateEnded) {
[_animator removeBehavior:_pushBehavior];
_pushBehavior = nil;
}
}

//画连线
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
//起点
CGPoint anchor = self.topImageView.center;
//终点
CGPoint pointLeft = CGPointMake(self.imageView.frame.origin.x + 62, self.imageView.frame.origin.y + 12);
CGPoint pointRight = CGPointMake(self.imageView.frame.origin.x + self.imageView.frame.size.width - 57, self.imageView.frame.origin.y + 10);

CGContextMoveToPoint(context, anchor.x - 120, anchor.y - 15);
CGContextAddLineToPoint(context, pointLeft.x, pointLeft.y);

CGContextMoveToPoint(context, anchor.x + 120, anchor.y - 15);
CGContextAddLineToPoint(context, pointRight.x, pointRight.y);
CGContextSetLineWidth(context, 1.0f);
[[UIColor blackColor] setStroke];

CGContextSetAllowsAntialiasing(context, YES);
CGContextSetShouldAntialias(context, YES);
self.layer.shouldRasterize = YES;

CGContextDrawPath(context, kCGPathFillStroke);

}

//刷新画线
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
[self setNeedsDisplay];
}

//移除KVO
- (void)dealloc {
[self.imageView removeObserver:self forKeyPath:@"center" context:nil];
}

然后,新建一个cell,继承自UICollectionViewCell;

#import "BookCoverCell.h"

@implementation BookCoverCell

{
UIDynamicAnimator *_animator;
UIPushBehavior *_pushBehavior;
}

//初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {

//设置contentView的背景颜色
self.contentView.backgroundColor = [UIColor clearColor];

self.viewDynamic = [[DynamicView alloc] initWithFrame:self.bounds];
[self.contentView addSubview:self.viewDynamic];

}
return self;
}

@end

随后,新建一个布局,继承自UICollectionViewFlowLayout,对cell进行布局,可以左右滑动的cell

#import "BookCoverLayout.h"

@implementation BookCoverLayout

//这两个常量用来设置cell的尺寸;
static CGFloat PageWidth = 450;
static CGFloat PageHeight = 360;
//初始化方法
- (instancetype)init {
self = [super init];
if (self) {
self.scrollDirection = UICollectionViewScrollDirectionHorizontal; //1 滚动方向
self.itemSize = CGSizeMake(PageWidth, PageHeight); //2 cell的尺寸
self.minimumInteritemSpacing = 10; //3 cell间最小间距
}
return self;
}

//重写prepareLayout方法;
//告诉Layout对象去更新当前的layout;
- (void)prepareLayout {
[super prepareLayout];
//滚动视图的比例
//1.设置滚动视图的停止速度
self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;

//2.设置插入间隔区域;定义一个在scrollview被拽出一个contentOffset 的时候的一个空间
self.collectionView.contentInset = UIEdgeInsetsMake(0,
self.collectionView.bounds.size.width / 2 - PageWidth / 2 ,
0,
self.collectionView.bounds.size.width / 2 - PageWidth / 2);

}

//设置每个cell的布局
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

NSArray *array = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *attributes in array) {
CGRect frame = attributes.frame;
CGFloat distance = 0;
//计算间距
distance = fabs(self.collectionView.contentOffset.x + self.collectionView.contentInset.left - frame.origin.x);
//根据相互间距离,设置缩放比例
CGFloat scale = 0.7 * MIN(MAX(1 - distance / (self.collectionView.bounds.size.width), 0.75), 1);
attributes.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}

//当collection View 的bounds发生改变时,能够重新计算cell属性,当滚动时,UICollectionView会改变它的bounds;
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}

//封面快速到位,当手指抬起时,停止的点
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
CGPoint newOffset;
//获取当前位置
UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
//计算总宽度
CGFloat width = layout.itemSize.width + layout.minimumLineSpacing;
//计算偏移量
CGFloat offset = proposedContentOffset.x + self.collectionView.contentInset.left;

if (velocity.x > 0) {
//ceil(x) 返回一个更大的数
offset = width * ceil(offset / width); //如果velocity.x > 0,向右滚动,根据(偏移量 /宽度),决定滚动到哪个封面
} else if (velocity.x == 0) {
//round(x) 返回一个四舍五入的值
offset = width * round(offset / width); //如果velocity.x = 0,滑动不充足,仍旧是当前cell
} else if (velocity.x < 0) {
//floor(x) 取不大于x的最大整数
offset = width *floor(offset / width); //如果velocity.x < 0,向左滚动
}
newOffset.x = offset - self.collectionView.contentInset.left;
newOffset.y = proposedContentOffset.y; //总是相同
return newOffset;
}

@end

最后,新建一个View,继承自UICollectionView,实现数据源代理

#import "CollectionVIew.h"

@implementation CollectionVIew

static NSString *const reuseIdentifier = @"cell";

- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout {
self = [super initWithFrame:frame collectionViewLayout:layout];
if (self) {
self.dataSource = self;
self.delegate = self;
[self registerClass:[BookCoverCell class] forCellWithReuseIdentifier:reuseIdentifier];
self.backgroundColor = [UIColor clearColor];
}
self.showsHorizontalScrollIndicator = NO;
return self;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 5;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
BookCoverCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
cell.viewDynamic.imageView.image = [UIImage imageNamed:@"bg2"];
cell.viewDynamic.topImageView.image = [UIImage originalSizeImageWithPDFNamed:@"mybg4.pdf"];
return cell;
}

@end

这样,所有的准备工作就做完了,我们在ViewController中,alloc一下,就OK了;

#import "ViewController.h"
#import "CollectionVIew.h"
#import "BookCoverCell.h"
#import "BookCoverLayout.h"
#define  kScreenWidth  [UIScreen mainScreen].bounds.size.width
#define  kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
@property (strong, nonatomic) CollectionVIew *collectionView;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];

BookCoverLayout *myLayout = [[BookCoverLayout alloc] init];
self.collectionView = [[CollectionVIew alloc] initWithFrame:CGRectMake(0, kScreenHeight * 0.25, kScreenWidth, kScreenHeight * 0.55) collectionViewLayout:myLayout];
[self.view addSubview:self.collectionView];
}
@end

demo下载地址:
http://download.csdn.net/download/et295394330/9122053