美文网首页
Swift-图片滚动效果

Swift-图片滚动效果

作者: 断水殇 | 来源:发表于2018-09-06 15:03 被阅读0次

    看新浪微博的时候,新闻详情页下面那块的广告模块,图片是可以跟着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的可以到这里下载。

    相关文章

      网友评论

          本文标题:Swift-图片滚动效果

          本文链接:https://www.haomeiwen.com/subject/nyrxgftx.html