前言:看到鳳凰新聞 頭條欄目的編輯推薦新聞是這個效果,以爲不錯,就想着實現一下,如下就是個人實現過程,示例代碼請看這兒→UIScrollView視覺差動畫。git
該功能太基礎,直接先貼一個UIScrollView,而後幾個UIImageView啪啪啪往UIScrollView上面一扔.......Over,不在此囉嗦咯。github
注意:這裏的left和right是區分拖動中可見的兩個視圖。bash
由總效果圖和第一步的普通的瀏覽效果圖對比能夠看出,在拖拽過程當中,第一步中的普通效果圖是圖片之間首尾相連,當前(left)的圖片尾部鏈接下一個(right)的圖片首部;而目標總效果圖中的是圖片之間首首相連,尾尾相連,且滑動過程當中,當前可見的圖片有漸進的裁剪效果;前者就像是平鋪在一塊兒的一行書,一起左右平移,然後者就像是翻書時看到的效果,當前頁***left***內容由邊到內逐漸消失,而下一頁***right***內容由邊緣到裏逐漸顯示。微信
經過效果分析對比可知,咱們須要在第一步的基礎上把每個圖片視圖ImageView包裝在***WSLAnimationView***裏,讓WSLAnimationView去處理ImageView的動畫效果,那問題來了,咱們怎麼處理呢?動畫
- 咱們能夠在拖拽過程當中相對應的改變right/left圖片在父視圖WSLAnimationView上的X座標,把***right***圖片的座標位置放到***相對***於***left***圖片的**正下/偏右方位置,而後隨着拖拽滑動逐漸改變right以及left圖片的相對位置X座標,直至復位,回到它們在WSLAnimationView上的初始位置X=0,超出父視圖的部分裁剪掉,也是設置WSLAnimationView對象的clipsToBounds = YES。
@interface WSLAnimationView ()
@property (nonatomic, strong) UIImageView * imageView;
/**
imageView的橫座標 用於拖拽過程當中的動畫
*/
@property (nonatomic, assign) CGFloat contentX;
@end
@implementation WSLAnimationView
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.clipsToBounds = YES;
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
[self addSubview:_imageView];
}
return self;
}
- (void)setContentX:(CGFloat)contentX{
_contentX = contentX;
_imageView.frame = CGRectMake(contentX, 0, self.frame.size.width, self.frame.size.height);
}
複製代碼
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
#define SCROLLVIEW_WIDTH SCREEN_WIDTH
#define BaseTag 10
/**
動畫偏移量 是指rightView相對於leftView的偏移量
*/
#define AnimationOffset 100
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat x = scrollView.contentOffset.x;
NSInteger leftIndex = x/SCROLLVIEW_WIDTH;
//這裏的left和right是區分拖動中可見的兩個視圖
WSLAnimationView * leftView = [scrollView viewWithTag:(leftIndex + BaseTag)];
WSLAnimationView * rightView = [scrollView viewWithTag:(leftIndex + 1 + BaseTag)];
leftView.contentX = ((SCROLLVIEW_WIDTH - AnimationOffset) + (x - ((leftIndex + 1) * SCROLLVIEW_WIDTH))/SCROLLVIEW_WIDTH * (SCROLLVIEW_WIDTH - AnimationOffset));
rightView.contentX = -(SCROLLVIEW_WIDTH - AnimationOffset) + (x - (leftIndex * SCROLLVIEW_WIDTH))/SCROLLVIEW_WIDTH * (SCROLLVIEW_WIDTH - AnimationOffset);
}
複製代碼
動畫偏移量AnimationOffset = 0 時 即***right***圖片的座標位置放到***相對***於***left***圖片的***正下方***位置,此時的效果以下圖所示;當AnimationOffset > 0 時就會出現目標總效果圖了。ui
剛向左拖拽時的leftView和rightView視圖結構示意圖以下所示, 那麼拖拽中,逐漸移動復位rightView上的RightImage的X座標: rightView.contentX = 須要移動距離長度 - 移動百分比 * 須要移動距離長度 ; leftView.contentX 和這個相似,交由小夥伴們去思考。atom
須要移動距離長度 = SCROLLVIEW_WIDTH - AnimationOffset;
移動百分比 = 拖拽距離 / 一頁寬度即屏幕寬度
拖拽距離 = (偏移量X - leftView橫座標);
偏移量X = scrollView.contentOffset.x;
leftIndex = 偏移量X/SCROLLVIEW_WIDTH;
leftView橫座標 = leftIndex * SCROLLVIEW_WIDTH;
複製代碼
以上就是我實現這個效果的過程,示例代碼請看這兒UIScrollView視覺差動畫;若是小夥伴們有其餘的實現方法,歡迎再此留言交流😊😊😀😀🤗🤗spa
若是須要跟我交流的話: ※ Github: github.com/wsl2ls ※ 我的博客:wsl2ls.github.io ※ 簡書:www.jianshu.com/u/e15d1f644… ※ 微信公衆號:iOS2679114653 ※ QQ:16855275403d