html js微信朋友圈下拉刷新效果,仿朋友圈下拉刷新动画(基础动画)
示意图:
2.0.gif
demo地址:仿朋友圈下拉刷新动画
动画的起源源于好奇
因为刚开是学动画,恨不得把所有的都实现一遍,试了一下微信朋友圈的下拉刷新动画。
如果ViewController的第一个子视图为UIScrollview的子类,系统会默认有个偏移量 ,如果不想这样可以设置
self.automaticallyAdjustsScrollViewInsets = NO;
下面所有的Navbar 都是默认透明的,设置为不透明就需要处理下。
首先我们需要自定义一个headerView,但是不要设置self.layer.masksToBounds = Yes ,这样超出的部分都会被剪掉。
header 的组成部分:
{
UIImageView *_backgroundImageView;
UIImageView *_iconView;
UILabel *_nameLabel;
}
因为要做成微信朋友圈的效果我们需要这样处理
//背景图 y 设置为 负的。
_backgroundImageView.frame = CGRectMake(0, -60, KWidth, CGRectGetHeight(self.frame)+60);
_iconView.frame = CGRectMake(KWidth - 70 -15, CGRectGetHeight(self.frame)-40, 70, 70);
_nameLabel.frame = CGRectMake(KWidth - 70 -15 -20-200, CGRectGetHeight(self.frame)-20-10, 200, 20);
接下来处理下拉刷新的部分
tableview是Viewcontroller的第一个子视图,所以默认的Contentoffset.y为-64,我们需要的就是在下拉刷新的时候给headerview添加动画。
可以将监听contentoffset抽取出来,减少Viewcontroller的冗杂。
自定义一个view,给其一些属性:
#import
typedef enum {
LXWXRefreshViewStateNormal,
LXWXRefreshViewStateWillRefresh,
LXWXRefreshViewStateRefreshing,
} LXWXRefreshViewState;
@interface LX_RefreshView : UIView
+ (instancetype)refreshHeaderWithCenter:(CGPoint)center;
//传入我们需要的处理下拉刷新的UIscrollview的子类
@property(nonatomic,strong)UIScrollView *scrollView;
//刷新ing的回调,用来处理数据
@property (nonatomic, copy) void(^refreshingBlock)();
@property (nonatomic, assign) LXWXRefreshViewState refreshState;
//结束刷新,回到主线程刷新tableview
- (void)endRefreshing;
2 .m文件中的处理
- (void)setupView
{
self.backgroundColor = [UIColor clearColor];
//动态添加到 headerview上,做动画处理
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AlbumReflashIcon"]];
self.bounds = imageView.bounds;
[self addSubview:imageView];
//刷新时请求数据等待动画
_rotateAnimation = [[CABasicAnimation alloc] init];
_rotateAnimation.keyPath = @"transform.rotation.z";
_rotateAnimation.fromValue = @0;
_rotateAnimation.toValue = @(M_PI * 2);
_rotateAnimation.duration = 1.0;
_rotateAnimation.repeatCount = MAXFLOAT;
}
将viewcontroller中监听contentoffset属性迁移到这里,在设置属性的时候开始监听
- (void)setScrollView:(UIScrollView *)scrollView
{
_scrollView = scrollView;
[scrollView addObserver:self forKeyPath:ObserveKeyPath options:NSKeyValueObservingOptionNew context:nil];
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
if (keyPath != ObserveKeyPath) return;
[self updateRefreshHeaderWithOffsetY:self.scrollView.contentOffset.y];
}
在更新contentoffset.y 的时候做一些判断,处理旋转角度,可以自己调整。在拖拽以及停止拖拽的时候判断刷新状态,进而进行不同的动画处理。
- (void)updateRefreshHeaderWithOffsetY:(CGFloat)y
{
CGFloat rotateValue = y / 47.0 * M_PI;
if (y < contentOffetY) {
y = contentOffetY;
if (self.scrollView.isDragging && self.refreshState != LXWXRefreshViewStateWillRefresh) {
self.refreshState = LXWXRefreshViewStateWillRefresh;
} else if (!self.scrollView.isDragging && self.refreshState == LXWXRefreshViewStateWillRefresh) {
self.refreshState = LXWXRefreshViewStateRefreshing;
} }
if (self.refreshState == LXWXRefreshViewStateRefreshing) return;
CGAffineTransform transform = CGAffineTransformIdentity;
//这里处理纵向偏移是因为 tableview为第一个子视图,我们需要设向下偏移,所以取负值。否则是看不到这个视图的。
transform = CGAffineTransformTranslate(transform, 0, -y);
transform = CGAffineTransformRotate(transform, rotateValue);
self.transform = transform;
}
对不同刷新状态的处理 在刷新完成时我们需要再做一个动画,使其纵向消失,然后在动画完成后移除。
- (void)setRefreshState:(LXWXRefreshViewState)refreshState
{
_refreshState = refreshState;
if (refreshState == LXWXRefreshViewStateWillRefresh) {
self.hidden = NO;
}
if (refreshState == LXWXRefreshViewStateRefreshing) {
if (self.refreshingBlock) {
self.refreshingBlock();
}
[self.layer addAnimation:_rotateAnimation forKey:AnimationKey];
} else if (refreshState == LXWXRefreshViewStateNormal) {
[self.layer removeAnimationForKey:AnimationKey];
self.transform = CGAffineTransformIdentity;
CABasicAnimation *basic =[CABasicAnimation animation];
basic.keyPath = @"position";
basic.fromValue =[NSValue valueWithCGPoint:self.center];
basic.toValue = [NSValue valueWithCGPoint:CGPointMake(self.center.x, -self.center.y)];
basic.duration = 0.5;
basic.delegate = self;
[self.layer addAnimation:basic forKey:PositionKey];
}
}
-(void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag
{
if ([anim.keyPath isEqualToString:PositionKey]) {
[self.layer removeAnimationForKey:PositionKey];
self.hidden = YES;
}
}
刷新view 封装完成,接下来 我们在Viewcontroller中引用下即可
html js微信朋友圈下拉刷新效果,仿朋友圈下拉刷新动画(基础动画)相关推荐
- android 美团下拉菜单,Android仿美团分类下拉菜单实例代码
本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下 效果图 操作平台 AS2.0 第三方框架:butterknife build.gradle depe ...
- hooks taro 下拉刷新_小程序自定义下拉刷新(Taro版)
在考虑实现自定义的下拉刷新组件的时候,首先要明确,这个算是一种hack方案.并不是说自定义的有多么好,反而自定义的下拉刷新在android下会有细微的卡顿(我这种实现方式).所以尽量还是用小程序自带的 ...
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- RecyclerView实现QQ空间和微信朋友圈头部刷新效果
RecyclerView实现QQ空间和微信朋友圈头部刷新效果 老规矩先上图 本篇主要讲RecyclerView实现QQ空间和微信朋友圈头部刷新效果,如果想了解ListView如何实现,请查看上篇:Li ...
- 微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果 前言 思路分析 实现 尾巴 前言 看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
- 微信小程序 通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果
微信小程序 通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果 一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...
- 微信小程序 - 手写下拉刷新效果
问题 最近在仿写腾讯新闻小程序,在首页中分别有三个板块,它们是在一个页面中通过滑动tab的效果来进行切换.所以我用swiper + scroll-view来模仿这样的效果,但是在后面做下拉刷新的时候, ...
- uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象 为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
- vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载 功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
最新文章
- Nature:2020年最佳科学影像,每一张都是壁纸,每一张都是历史
- 【网络安全】一次授权的渗透测试
- OA工作流程怎么梳理
- 5年前面试题引发的“血案”(番外篇)(总结和乱侃)
- Scrapy定向爬虫教程(三)——爬取多个页面
- My97DatePicker在asp.net项目中的使用
- python计时器程序设计总框图_怎么用python编写计时器?这个编程的方法你一定不要错过...
- SpringBoot继承TkMapper通用Mapper
- 一个人不孤单,想一个人才孤单
- TensorFlow tf.keras.layers.Permute
- dll反编译(dll反编译工具)
- KYLO的Java基础知识总结(其二)
- 向量场的散度和旋度_矢量场散度和旋度的物理意义
- 设置html字体大小 js,js如何改变文章的字体大小
- 校友会2019中国大学计算机,校友会2019中国大学一流专业排名800强发布,北大清华复旦前三...
- nodejs websocket 并发调试笔记
- texstudio暗色主题
- python保存不了_python文件无法保存怎么解决
- 模电电路笔记———同向比例放大电路的使用
- 微信小程序 mark用法
热门文章
- go语言基础学习13章节详细总结欢迎一起入门学习
- Nomalized Compression Distance(NCD)详解
- git连接华为云DevCloud
- 利用MSSQL getshell
- AI芯片-算力相关介绍
- 【读书笔记】linux系统编程
- 设计静电保护所需要的理论基础(ESD保护理论基础)转载自集成电路版图设计公众号
- c语言中程序文件与程序的转换,MCU-C程序基本编程规范(转)
- Golang10进制转16进制的几种方法
- 量化交易软件 python_量的解释|量的意思|汉典“量”字的基本解释