因此,我想获得一种动画效果,例如在日历/日期元素上按下向下箭头时,该视图中会出现这种动画。
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")
}
}
任何人都可以向我展示完成动画的正确步骤,如当前链接中提到的那样