Итак, я хочу создать анимацию, подобную той, которая присутствует в этом представлении, когда на элементе календаря / даты нажата стрелка вниз.
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")
}
}
Может кто-нибудь показать мне правильные шаги для завершения анимации, подобной той, которая упомянута в ссылке в настоящее время, все, что я получаю, это
