Swift-动画效果

作者: GoGooGooo | 来源:发表于2016-01-15 13:56 被阅读2891次
  • 通过设置视图的transform属性实现动画(效率低,简单)

  • CABasicAnimation实现动画(高效)

  • CAKeyframeAnimation实现动画(根据路径实现帧动画)


一、transform

设置视图对象的transform属性,可以实现各种动画效果。

1,移动
指在同一平面内,将控件按照某个直线方向平移一定的距离。

//每次都从当前位置平移
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -2.1, -2.1)
 
//每次都从最开始的位置计算平移
self.imageView.transform = CGAffineTransformMakeTranslation(2.3, 2.3)

2,旋转

//连续旋转
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(3.0) //设置动画时间
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, CGFloat(-M_PI/2))
UIView.commitAnimations()
 
//独立旋转,以初始位置旋转
self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI/4))

3,缩放

//连续缩放
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(3.0) //设置动画时间
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 1.5 ,1.5)
UIView.commitAnimations()
 
//独立缩放,以初始位置缩放
self.imageView.transform = CGAffineTransformMakeScale(1.3, 1.3)

4,反转

//返回初始状态
self.imageView.transform = CGAffineTransformIdentity
 
//连续反转
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(3.0) //设置动画时间
self.imageView.transform = CGAffineTransformConcat(self.imageView.transform,
    CGAffineTransformInvert(self.imageView.transform))
UIView.commitAnimations()
 
//独立反转,以初始位置反转
self.imageView.transform = CGAffineTransformInvert(self.imageView.transform)

二、CABasicAnimation

  1. CABasicAnimation类只有三个属性:
    fromValue:开始值
    toValue:结束值
    Duration:动画的时间

  2. 通过animationWithKeyPath键值对的方式设置不同的动画效果
    transform.scale
    transform.scale.x
    transform.scale.y
    transform.rotation.z
    opacity
    margin
    zPosition
    backgroundColor
    cornerRadius
    borderWidth
    bounds
    contents
    contentsRect
    cornerRadius
    frame
    hidden
    mask
    masksToBounds
    opacity
    position
    shadowColor
    shadowOffset
    shadowOpacity
    shadowRadius

  3. 使用样例
    (1)改变透明度动画(逐渐消失)

let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 1.0
animation.toValue = 0.0
animation.duration = 3.0
self.imageView.layer.addAnimation(animation, forKey: "Image-opacity")
self.imageView.alpha = 0

(2)从小变大动画(还原为默认尺寸)

let animation = CABasicAnimation(keyPath: "bounds.size")
animation.fromValue = NSValue(CGSize: CGSizeMake(2.0, 2.0))
animation.toValue = NSValue(CGSize: self.imageView.frame.size)
animation.duration = 3.0
self.imageView.layer.addAnimation(animation, forKey: "Image-expend")

三、CAKeyframeAnimation

  1. CAKeyframeAnimation介绍
    CAKeyframeAnimation可以实现关键帧动画,这个类可以实现某一属性按照一串的数值进行动画,就像是一帧一帧的制作出来一样。

  2. 使用样例(设置五个关键点坐标,图片依次按关键点移动)

let animation = CAKeyframeAnimation(keyPath: "position")
 
//设置5个位置点
let p1 = CGPointMake(0.0, 0.0)
let p2 = CGPointMake(300, 0.0)
let p3 = CGPointMake(0.0, 400)
let p4 = CGPointMake(300, 400)
let p5 = CGPointMake(150, 200)
 
//赋值
animation.values = [NSValue(CGPoint: p1), NSValue(CGPoint: p2),
    NSValue(CGPoint: p3), NSValue(CGPoint: p4), NSValue(CGPoint: p5)]
 
//每个动作的时间百分比
animation.keyTimes = [NSNumber(float: 0.0), NSNumber(float: 0.4),
    NSNumber(float: 0.6), NSNumber(float: 0.8), NSNumber(float: 1.0), ]
 
animation.delegate = self
animation.duration = 6.0
 
self.imageView.layer.addAnimation(animation, forKey: "Image-Move")

可以设置动画代理,监听开始和结束动作

animation.delegate = self
 
override func animationDidStart(anim: CAAnimation!) {
    println("动画开始")
}
 
override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
    println("动画结束")
}

相关文章

  • Swift-动画效果

    通过设置视图的transform属性实现动画(效率低,简单)CABasicAnimation实现动画(高效)CAK...

  • Swift-粉碎动画效果

    先上一张GIF图片 。。。图片是不是有点儿大呢? 不要在意这些细节啦,上教学。 还是老套路,首先将我Demo中的S...

  • Swift-帧动画

    title: Swift-帧动画date: 2016-07-05 15:26:24categories: Code...

  • Swift-动画

    动画块:UIView 的几个方法 (1)animateWithDuration:animation(2)anima...

  • Swift-自定义控件之IndicatorButton(带动画的

    Swift-自定义控件之IndicatorButton(带动画的按钮) 应用场景 登录或者注册时,点击按钮发送请求...

  • iOS 动画框架pop使用方法

    pop支持4种动画类型:弹簧动画效果、衰减动画效果、基本动画效果和自定义动画效果。 弹簧动画效果 1.效果图如下:...

  • 仿菁优网首页动画效果

    1、菁优网首页动画效果图 2、动画效果分析 1、动画效果一定是UIView动画,因为核心动画是CALayer的动画...

  • 小程序所遇问题总结

    重构篇 Q1:小程序动画效果较多 问题:小动画动画效果较多,手动调动画较繁琐解决:使用在线动画制作工具,动画效果...

  • Swift-手指点击动画效果示例FingerTips(MBFin

    自定义图片手指点击动画效果示例 默认手指点击动画效果示例 使用方法 声明:Swift版本只是对原作者mapbox/...

  • 记录ProgressBar实现Loading

    旋转 旋转资源 帧动画效果 帧动画效果资源

网友评论

    本文标题:Swift-动画效果

    本文链接:https://www.haomeiwen.com/subject/dashkttx.html