看新浪微博的时候,新闻详情页下面那块的广告模块,图片是可以跟着ScrollView的滑动而变化位置的,效果挺好玩,就模拟的做了一个。第一感觉是UIview新增属性了,可以通过变化锚点而改变位置,后来发现我还是太年轻了,这只是UIView和UIimageView组合的效果而已。
Gif没做好具体实现思路是这样:一个UIView作为父视图,UIimageView添加到这个UIView上,UIimageView的frame要比UIView的大,把UIView添加到UIScrollView上,滚动的时候改变UIimageView的起始点位置就可以了, 是不是很简单???
我自定义了一个YLMoveImageView,在init方法中代码如下:
func setupView() {
self.clipsToBounds = true
self.contentMode = UIViewContentMode.scaleAspectFill
self.addSubview(self.m_imageView)
}
clipsToBounds属性必须设置为true,为了尽量不失真,需要设置self.contentMode = UIViewContentMode.scaleAspectFill,UIimageView的也一样,这是关键点之一。
另一个关键点是在滑动的时候设置偏移量,YLMoveImageView中要设置一个SET方法,如下所示:
var image_offset:CGFloat? {
get{
return_image_offset
}
set(image_offset) {
_image_offset= image_offset
varnew_y = -(_image_offset!/2.0);
ifnew_y >0{
new_y =0
} elseifnew_y
new_y =self.frame.height-self.m_imageView.frame.height
}
self.m_imageView.frame=CGRect.init(x:0, y: new_y, width:self.m_imageView.frame.size.width, height:self.m_imageView.frame.size.height)
}
}
记得最好定义一个变量:var _image_offset:CGFloat?,等同于OC中的Set方法的实现。
在外部视图控制器中,代码如下:
funcscrollViewDidScroll(_scrollView:UIScrollView) {
self.m_moveImage!.image_offset= scrollView.contentOffset.y
}
到这里基本上就能实现那个动效了,不得不吐槽一下简书,写文章的时候竟然没找到附件在哪里上传,需要完整demo的可以到这里下载。
网友评论