iOS Core Animation详解(四)AutoLayout中的动画_html/css_WEB-ITnose
前言:AutoLayout定义了View的位置,也就是说,在Auto Layout的工程里,如果不修改约束本身,在视图重新绘制的时候,还会回到最开始的位置。AutoLayout中的动画与视图的位置和大小有关。
先看看效果
实现过程
在Storyboard上拖拽一个UIImageview。设置约束为:水平垂直正中心,大小很定100*100
拖拽Imageview以及Constraint为Outlet
注意拖拽Y相关的约束,也就是这个
对应代码
@IBOutlet weak var imageview: UIImageView! @IBOutlet weak var yConstraints: NSLayoutConstraint!
在viewDidload中设置imageview的初始状态
yConstraints.constant = yConstraints.constant - CGRectGetHeight(UIScreen.mainScreen().bounds)/2 self.imageview.alpha = 0.0; self.imageview.transform = CGAffineTransformMakeScale(0.1, 0.1) self.view.layoutIfNeeded();
ViewWillAppear中创建动画
yConstraints.constant = yConstraints.constant + CGRectGetHeight(UIScreen.mainScreen().bounds)/2 UIView.animateWithDuration(1.0, animations: { () -> Void in self.imageview.alpha = 1.0 self.imageview.transform = CGAffineTransformIdentity self.view.layoutIfNeeded() })
原理
原理比较简单,就是利用修改约束NSLayoutConstraint中的属性constant,然后调用layoutIfNeeded来实现动画。注意,属性multiplier目前(iOS 8.4)还是只读的,不能修改。但是可以通过关系view1.property = view2.property * multiplier + constant进行转换。
纯代码的AutoLayout动画
上述动画用纯代码实现
class ViewController: UIViewController { var imageview:UIImageView? weak var yConstraint:NSLayoutConstraint? override func viewDidLoad() { super.viewDidLoad() //添加Imageview let image = UIImage(named: "1_hello_hwc.jpg") imageview = UIImageView(image: image) self.imageview?.setTranslatesAutoresizingMaskIntoConstraints(false) self.view.addSubview(self.imageview!) //创建约束,定义最开始的位置 let hC = NSLayoutConstraint(item:self.view, attribute:NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.imageview, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0) let vC = NSLayoutConstraint(item:self.view, attribute:NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.imageview, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0.0) yConstraint = vC; yConstraint!.constant = yConstraint!.constant - CGRectGetHeight(UIScreen.mainScreen().bounds)/2 let widthC = NSLayoutConstraint(item:self.imageview!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem:nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 100) let widthH = NSLayoutConstraint(item:self.imageview!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem:nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 100) self.view.addConstraints([hC,vC,widthC,widthH]) //定义最开始的状态 self.imageview?.alpha = 0.0; self.imageview?.transform = CGAffineTransformMakeScale(0.1, 0.1); self.view.layoutIfNeeded() } override func viewWillAppear(animated: Bool) { yConstraint!.constant = yConstraint!.constant + CGRectGetHeight(UIScreen.mainScreen().bounds)/2 UIView.animateWithDuration(1.0, animations: { () -> Void in self.imageview!.alpha = 1.0 self.imageview!.transform = CGAffineTransformIdentity self.view.layoutIfNeeded() }) }}
定位Constraints
设置属性identifier
yConstraint.identifier = "identifier"
然后在过滤,定义到这个Constraints,
let constraint = filter(self.view.constraints() as! [NSLayoutConstraint], { (constraint:NSLayoutConstraint) -> Bool in return constraint.identifier == "identifier" }).first

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。
