Swift4 写一个小卡片的底部弹出背景变暗的动画

目标效果

底部弹出一个小界面,同时背景变暗。效果图如下——

底部弹出动画.gif

原理分析

弹出的是一个UICollectionView,背景变暗是是一个调整了背景颜色的UIView。
弹出的动画效果实际就是一个view的平移
其实Swift中的动画都被封装到UIView里了,是layer的一部分属性的集合。我们直接调用就可以啦。使用起来非常方便~

开始动手啦

这里只列出核心代码

弹出动画

    @objc func showQuesCollectionView(_ button: UIButton) {
//quesListBkgView是变暗的背景
        quesListBkgView.frame = window.bounds
        quesListBkgView.backgroundColor = UIColor(white: 0.1, alpha: 0.6)
//这里addSubview加到window上也可以
        self.view.addSubview(quesListBkgView)
      
//quesListCollectionView是弹出的卡片的view
        self.view.addSubview(quesListCollectionView)
//先把quesListCollectionView添加到屏幕的下方,用户开始看不到
        quesListCollectionView.frame = CGRect(x: 0, y: deviceHeight + 30, width: deviceWidth, height: 0.45 * deviceHeight)

//同时添加动画,使view向上平移,出现弹出效果
        UIView.animate(withDuration: 0.3) {
//再将quesListCollectionView添加到应该出现的位置。
            self.quesListCollectionView.frame = CGRect(x: 0, y: 0.55 * deviceHeight, width: deviceWidth, height: 0.45 * deviceHeight)
        }

//添加手势识别,点击变暗的区域触发收回动作
        let gesture = UITapGestureRecognizer(target: self, action: #selector(hindQuesList))
        quesListBkgView.addGestureRecognizer(gesture)
    }

收回动画


    @objc func hindQuesList() {
        UIView.animate(withDuration: 0.3) {
// 尾随闭包播放弹出动画
            self.quesListCollectionView.frame = CGRect(x: 0, y: deviceHeight + 30, width: deviceWidth, height: 0.45 * deviceHeight)
            
// 提交一个延时任务线程
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                self.quesListCollectionView.removeFromSuperview()
                self.quesListBkgView.removeFromSuperview()
            }
        }
    }

至此,动画效果就实现啦哈哈哈

希望我的整理能对你有点帮助~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 文/施页 1 闺蜜跟男友是朋友介绍认识的,约会的第二天他们就确定了恋爱关系。一直吵嚷嚷地说再不恋爱就嫁不出去的闺蜜...
    施页阅读 1,863评论 5 29
  • 一路昏昏沉沉,到了发小所在的城市。 发小到车站来接我,拍了拍我肩膀,露出一个浅浅的微笑。 什么都不...
    江湖就是一个破罐子阅读 651评论 0 1
  • 《日精进打卡》 姓名:卜令其 公司名称:宁波大发化纤有限公司 《幸福精进》学习营第41期努力组 【日精进打卡第04...
    _奋斗的破小子_阅读 118评论 0 0