自定义动画问题

时间:2018-08-25 20:40:59

标签: ios swift core-animation

因此,我想获得一种动画效果,例如在日历/日期元素上按下向下箭头时,该视图中会出现这种动画。

https://medium.com/@phillfarrugia/building-a-tinder-esque-card-interface-5afa63c6d3db

我决定尝试分块制作动画,首先尝试旋转成功完成的箭头,然后尝试将屏幕放下,但这就是一切出错的时候。

文本会自动将其大小调整为不希望的字体大小。我真的想保持不变,即使我已经将其设置为safeAreaLayoutGuide

,该单元的顶部也会插入导航栏。

这是我当前在动画块中拥有的内容,我还将为特定元素提供视图约束。我不喜欢动画,所以这对我来说很难。

class CalendarView: UIView {
    let cellID = "cellID"
    let headerID = "headerID"
    let formatter = DateFormatter()
    var rootRef: MainViewController?

    let cellView: UIView = {
        let cellView = UIView()
        cellView.backgroundColor = .white
        cellView.layer.cornerRadius = 8
        cellView .layer.masksToBounds = false
        cellView.setupShadow2()
        return cellView
    }()

    lazy var showCalendar: UIButton = {
        let showCalendar = UIButton()
        showCalendar.setImage(UIImage(named: "icons8-expand-arrow-52 (1)"), for: .normal)
        showCalendar.setTitle("Grow", for: .normal)
        showCalendar.addTarget(self, action: #selector(showCalendarPressed), for: .touchUpInside)
        return showCalendar
    }()

    //day labels for calendar

    let dayOfWeekLabel : UILabel =  {
        let dayOfWeekLabel = UILabel()
        dayOfWeekLabel.text = "Today"
        dayOfWeekLabel.textAlignment = .center
        dayOfWeekLabel.font = UIFont(name:"NoirPro-Medium", size: 20)
        dayOfWeekLabel.adjustsFontForContentSizeCategory = true
        return dayOfWeekLabel
    }()

    let dayNumberLabel : UILabel =  {
        let dayNumberLabel = UILabel()
        dayNumberLabel.textAlignment = .center
        dayNumberLabel.layer.shouldRasterize = true
        dayNumberLabel.font = UIFont(name:"NoirPro-Medium", size: 20)
        dayNumberLabel.adjustsFontForContentSizeCategory = true
        return dayNumberLabel
    }()
    let monthLabel : UILabel =  {
        let monthLabel = UILabel()
        monthLabel.layer.shouldRasterize = true
        monthLabel.textAlignment = .center
        monthLabel.font = UIFont(name:"NoirPro-Medium", size: 20)
        monthLabel.adjustsFontForContentSizeCategory = true
        return monthLabel
    }()

    //collectionview for calendar view
    let calendarCollectionView: JTAppleCalendarView = {
        let cv = JTAppleCalendarView(frame: .zero)
        cv.cellSize =  cv.frame.width / 3.0
        cv.scrollDirection = .horizontal
        cv.allowsSelection = true
        cv.allowsMultipleSelection = false
        cv.backgroundColor = UIColor.white
        cv.minimumInteritemSpacing = 0
        cv.minimumLineSpacing = 0
        cv.scrollingMode = .stopAtEachCalendarFrame
        return cv
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        calendarCollectionView.alpha = 0
        setupViews()
    }

    @objc func showCalendarPressed(){
        print("show calendar pressed")
        //will check if there has been any animation work done on the UIVIEW
        if self.showCalendar.transform == .identity {


            UIView.animate(withDuration: 1.5, animations: {
                self.showCalendar.transform = CGAffineTransform(rotationAngle: self.radians(degrees: 179.99) )
                self.cellView.transform = CGAffineTransform(scaleX: 1, y: 2)
                self.transform = CGAffineTransform(scaleX: 1, y: 2)
                self.rootRef?.pagingViewController.view.transform = CGAffineTransform(translationX: 0, y: 90)
            }) { (true) in

                //change the alpha for the calendar collectionView in success


            }

        }else {
            //there is a transform on it and we need to change it back
            UIView.animate(withDuration: 1.5, animations: {
                //will remove the transform and animate it back
                self.showCalendar.transform = .identity
                self.cellView.transform = .identity
                self.transform = .identity
                self.rootRef?.pagingViewController.view.transform = .identity
            }) { (true) in

            }
        }
    }

    @objc func setupViews(){

        let stackview = UIStackView(arrangedSubviews: [dayOfWeekLabel,dayNumberLabel,monthLabel,showCalendar])
        stackview.axis = .horizontal
        stackview.distribution = .fillProportionally
        stackview.setCustomSpacing(-40, after: dayOfWeekLabel)
        stackview.setCustomSpacing(-30, after: dayNumberLabel)
        stackview.setCustomSpacing(150, after: monthLabel)
        addSubview(cellView)

        cellView.snp.makeConstraints { (make) in
           make.edges.equalTo(self.safeAreaLayoutGuide)
        }

        cellView.addSubview(stackview)

        stackview.snp.makeConstraints { (make) in
            make.left.right.equalTo(cellView)
            make.top.equalTo(cellView).offset(2)
        }

        cellView.addSubview(calendarCollectionView)

        calendarCollectionView.visibleDates { (visibleDates) in
            self.setupViewsOfCalendar(from: visibleDates)
        }
        calendarCollectionView.scrollToDate(Date(), animateScroll: false)
        calendarCollectionView.selectDates([Date()])

        calendarCollectionView.isPagingEnabled = true
        calendarCollectionView.calendarDataSource = self
        calendarCollectionView.calendarDelegate = self
        calendarCollectionView.showsHorizontalScrollIndicator = false
        calendarCollectionView.showsVerticalScrollIndicator = false
        calendarCollectionView.register(CalendarCell.self, forCellWithReuseIdentifier: cellID)
        calendarCollectionView.register(CalendarHeader.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerID)
        calendarCollectionView.snp.makeConstraints { (make) in
            make.top.equalTo(stackview.snp.bottom).offset(5)
            make.left.right.equalTo(cellView)
            make.bottom.equalTo(cellView.snp.bottom).inset(5)
        }
        let date = Date()
        self.formatter.dateFormat = "EEE"
        self.dayOfWeekLabel.text = self.formatter.string(from: date) + ", "
        self.formatter.dateFormat = "MMM"
        self.monthLabel.text = self.formatter.string(from: date)
        self.formatter.dateFormat = "dd"
        self.dayNumberLabel.text = self.formatter.string(from: date)
    }

    func radians(degrees: Double) -> CGFloat{
        return CGFloat(degrees * .pi / 180)
    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

任何人都可以向我展示完成动画的正确步骤,如当前链接中提到的那样

enter image description here

0 个答案:

没有答案