Beginning iOS Animation Series (Swift 2)
发布日期:2022-03-18 08:27:37 浏览次数:33 分类:技术文章

本文共 5664 字,大约阅读时间需要 18 分钟。

Beginning iOS Animation Series (Swift 2)

对应上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/2conWidth.constant = 0.0UIView.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.

具体的解释可以参考

usingSpringWithDamping的范围为0.0f1.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)

动画效果为:

动画效果

转载地址:https://windzen.blog.csdn.net/article/details/51832414 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:iOS开源项目学习——SVProgressHUD
下一篇:iOS9下代码创建约束

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月05日 21时06分30秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

oracle 查询中用case,oracle case when 在查询时候的用法。 2019-04-21
oracle正在运行的程序包,ORACLE PL/SQL编程详解之程序包的创建与应用 2019-04-21
php局部页面滚动,在访问另一页面后保留浏览器滚动位置 - php 2019-04-21
jmeter运行linux命令行,Jmeter在linux上运行(命令行运行Jmeter) 2019-04-21
linux服务器怎么添加站点,如何增加站点或虚拟主机及文件说明 2019-04-21
linux系统输入指令,Linux系统基础 - 基本操作命令 2019-04-21
linux设备管理命令,Linux命令(设备管理).doc 2019-04-21
linux 中文utf-8转gbk编码,Linux平台下 GBK编码转UTF-8编码 2019-04-21
linux安装软件在boot,在Linux系统上安装Spring boot应用的教程详解 2019-04-21
linux进入用户user1主目录,Linux系统命令提示符为[user1@localhost root]当前用户所在目录为( )... 2019-04-21
取消linux自动登录,linuxdeepin 如何取消自动登录啊? 2019-04-21
linux线程存储,Linux系统编程手册:线程:线程安全和每线程存储 2019-04-21
linux以root账号登陆gnome,CentOS 7 - 以root身份登入Gnome 2019-04-21
linux crontab 备份数据库 空文件,Linux下使用crontab自动备份数据库 2019-04-21
linux批处理模式,巧用linux-top的批处理模式 2019-04-21
linux信号量机制例题,第二章 信号量机制及几个经典例题 2019-04-21
linux ba 模拟,在你的 Python 游戏中模拟引力 | Linux 中国 2019-04-21
c语言表达式3649的值是,535个C语言经典实例目录.doc 2019-04-21
c语言Wndproc未定义,小弟我用c语言写了一个windows窗口,为什么有提示未定义的变量类型... 2019-04-21
c语言中malloc数组,如何在C中对malloc()数组进行一行赋值? 2019-04-21