您的位置：首页 > 移动开发 > Swift

Beginning iOS Animation Series (Swift 2)

2016-07-05 17:44 756 查看

Beginning iOS Animation Series (Swift 2)

对应raywenderlich上Beginning iOS Animation Series (Swift 2)的内容。

Constraint Animations

Constraint的一般形式为：



其中
multiplier
为只读

Constraint Animations的简单使用方式为：



这里修改的是
constant


例如：

@IBAction func actionToggleMenu(sender: AnyObject) {
isMenuOpen = !isMenuOpen

menuHeightConstrait.constant = isMenuOpen ? 200.0 : 60.0;
closeButtonTrailing.constant = isMenuOpen ? 16.0 : 8.0;
titleLabel.text = isMenuOpen ? "Select Item" : "Packing List";

UIView.animateWithDuration(0.33, delay: 0, options: [.CurveEaseOut], animations: {
let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0
self.buttonMenu.transform = CGAffineTransformMakeRotation(angle);
self.slider.alpha = self.isMenuOpen ? 1 : 0;
self.view.layoutIfNeeded()
}, completion: nil)

}


如何修改mutiplier？

找到对应的constraint，创建一个新的constraint来替换。

for constraint in titleLabel.superview!.constraints {
if constraint.identifier == "TitleCenterX" {
constraint.constant = isMenuOpen ? -100.0 : 0.0
}
if constraint.identifier == "TitleCenterY" {
constraint.active = false
let newConstraint = NSLayoutConstraint(
item: titleLabel,
attribute: .CenterY,
relatedBy: .Equal,
toItem: titleLabel.superview!,
attribute: .CenterY,
multiplier: isMenuOpen ? 0.67 : 1.0,
constant: 5.0);
newConstraint.identifier = "TitleCenterY"
newConstraint.active = true
}
}


下面是其对应的Challenge中的动画内容，主要也是修改
constant
，但是其创建
constraint
的方式很特别，如下：

let conX = imageView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor)
let conBottom = imageView.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor, constant: imageView.frame.height)
let conWidth = imageView.widthAnchor.constraintEqualToAnchor(view.widthAnchor, multiplier: 0.33, constant: -50.0)
let conHeight = imageView.heightAnchor.constraintEqualToAnchor( imageView.widthAnchor)
NSLayoutConstraint.activateConstraints([conX, conBottom, conWidth, conHeight])
view.layoutIfNeeded()

conBottom.constant = -imageView.frame.size.height/2
conWidth.constant = 0.0

UIView.animateWithDuration(0.33, delay: 0.0, options: [.CurveEaseOut], animations: {
self.view.layoutIfNeeded()
}, completion: nil);

UIView.animateKeyframesWithDuration(0.67, delay: 2.0, options: [], animations: {
conBottom.constant = imageView.frame.height
conWidth.constant = -50.0
self.view.layoutIfNeeded()
}) { _ in
imageView.removeFromSuperview()
}


动画效果：



Spring Animations

UIView.animateWithDuration(1.0, delay: 0,

usingSpringWithDamping: 0.4, initialSpringVelocity: 10.0,

options: [.CurveEaseOut], animations: {

self.view.layoutIfNeeded()

let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0
self.buttonMenu.transform = CGAffineTransformMakeRotation(angle)

}, completion: nil)


Spring damping: the smaller the damping the more the view bounces at the end of the animation. The closer the parameter is to 1.0 the less bouncing you get at the end of the animation; if you try 1.0 you get straight movement from point A to B)

Initial velocity: If you set this parameter to 1.0 and the animation moves the view 50 points across the screen - it will give the view 50 points/sec of initial velocity. If you set the parameter to 2.0 - the view will have 100 points/sec initial velocity.

具体的解释可以参考使用 iOS 8 Spring Animation API 创建动画

usingSpringWithDamping
的范围为
0.0f
到
1.0f
，数值越小「弹簧」的振动效果越明显

initialSpringVelocity
则表示初始的速度，数值越大一开始移动越快。

View Transitions

Three things that can trigger a transition:

hidden

addSubview()

removeFromParent()

hidden

delay(seconds: 1.0, completion: {

UIView.transitionWithView(imageView, duration: 1.0,
options: [UIViewAnimationOptions.TransitionFlipFromBottom],
animations: {
imageView.hidden = true
}, completion: { _ in

})

})


动画效果：



removeFromParent()

delay(seconds: 0.35, completion: {
self.actionToggleMenu(self)
})

let titleBar = slider.superview!
UIView.transitionWithView(titleBar, duration: 0.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {
self.slider.removeFromSuperview()
}, completion: {_ in
titleBar.addSubview(self.slider)
})

}


动画效果



Keyframe Animations

主要使用方法是

UIView.animateKeyframesWithDuration(2, delay: 0, options: [], animations: {
// add keyframes
}, completion: nil)


在其中嵌套使用
addKeyframeWithRelativeStartTime(_: relativeDuration: animations: )


该方法有三个参数：

startTime：关键帧开始时间，该时间是相对整个关键帧动画持续时间的相对时间，一般值在0到1之间。如果为0，则表明这一关键帧从整个动画的第0秒开始执行，如果设为0.5，则表明从整个动画的中间开始执行。

relativeDuration：关键帧持续时间，该时间同样是相对整个关键帧动画持续时间的相对时间，一般值也在0到1之间。如果设为0.25，则表明这一关键帧的持续时间为整个动画持续时间的四分之一。

animations：设置视图动画属性的动画闭包。

代码为：

UIView.animateKeyframesWithDuration(1.5, delay: 0.0,
options: [], animations: {

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 80.0
self.planeImage.center.y -= 10.0
})

UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4, animations: {
self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
})

UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 100.0
self.planeImage.center.y -= 50.0
self.planeImage.alpha = 0
})

UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01, animations: {
self.planeImage.transform = CGAffineTransformIdentity
self.planeImage.center = CGPoint(x: 0, y: originalCenter.y)
})

UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45, animations: {
self.planeImage.alpha = 1.0
self.planeImage.center = originalCenter
})

}, completion: nil)


动画效果为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  swift ios 动画
相关文章推荐
新的分享
章节导航