您的位置:首页 > 产品设计 > UI/UE

UIView动画

2016-07-28 15:38 375 查看
1、淡入效果

// MARK: - UIView动画-淡入
@IBAction func simpleAnimationFadeIn()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
testImageView.alpha = 0.0
UIView.commitAnimations()

//        //通过闭包实现 UIView淡入
//        UIView.animateWithDuration(0.3, animations: { () -> Void in
//            self.testImageView.alpha = 0.0
//        })
}


2、淡出效果

// MARK: - UIView动画-淡出
@IBAction func simpleAnimationFadeOut()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
testImageView.alpha = 1.0
UIView.commitAnimations()
}


3、移动效果

// MARK: - UIView动画-移动
@IBAction func simpleAnimationMoveCenter()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
testImageView.center = CGPointMake(300, 300)
UIView.setAnimationCurve(UIViewAnimationCurve.EaseOut)//设置动画相对速度
UIView.commitAnimations()
}


EaseInOut:动画开始缓慢,中间加快,最后又变为缓慢;

EaseIn:动画由缓慢到加快;

EaseOut:动画由快到缓慢;

Linear:动作从开始至终匀速。

4、大小调整效果

// MARK: - UIView动画-大小调整
@IBAction func simpleAnimationFrame()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
testImageView.frame = CGRectMake(100, 165, 60, 60)
UIView.commitAnimations()
}


5、两个UIView对象之间的切换

// MARK: - UIView动画-过度动画
var redView:UIView?
var blueView:UIView?

//    enum UIViewAnimationTransition : Int {
//
//        case None
//        case FlipFromLeft
//        case FlipFromRight
//        case CurlUp
//        case CurlDown
//    }


首先添加两个过度动画

//过度动画 添加两个视图
redView = UIView(frame: CGRectMake(200, 70, 120, 400))
redView?.backgroundColor = UIColor.redColor()
self.view.insertSubview(redView!, atIndex: 0)

blueView = UIView(frame: CGRectMake(200, 70, 120, 400))
blueView?.backgroundColor = UIColor.blueColor()
self.view.insertSubview(blueView!, atIndex: 1)


1)上翻页面切换

//上翻页
@IBAction func excessiveAnimationRed()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(1.0)//设置动画时间
UIView.setAnimationTransition(UIViewAnimationTransition.CurlUp, forView: self.view, cache: true)
self.view.exchangeSubviewAtIndex(1, withSubviewAtIndex: 0)
UIView.commitAnimations()
}


2)下翻页面切换

//下翻页
@IBAction func excessiveAnimationBlue()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(1.0)//设置动画时间
UIView.setAnimationTransition(UIViewAnimationTransition.CurlDown, forView: self.view, cache: true)
self.view.exchangeSubviewAtIndex(0, withSubviewAtIndex: 1)
UIView.commitAnimations()
}


6、翻转效果

// MARK: - UIView动画-翻转
@IBAction func flipAnimation()
{
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(1.0)//设置动画时间
UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: testImageView, cache: true)
//        UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView: testImageView, cache: true)
UIView.commitAnimations()
}


7、push和揭开动画效果

//CATransition动画-揭开(Push动画)
@IBAction func caAnimationChage1()
{
let transition = CATransition()
transition.duration = 1.0
transition.type = kCATransitionPush //推送类型
transition.subtype = kCATransitionFromLeft//从左侧
self.view.exchangeSubviewAtIndex(1, withSubviewAtIndex: 0)
self.view.layer.addAnimation(transition, forKey: nil)

}

//CATransition动画-推出
@IBAction func caAnimationChage2()
{
let transition = CATransition()
transition.duration = 1.0
transition.type = kCATransitionMoveIn
transition.subtype = kCATransitionFromTop
self.view.exchangeSubviewAtIndex(0, withSubviewAtIndex: 1)
self.view.layer.addAnimation(transition, forKey: nil)
}


// MARK: - CATransition动画

//    /* 动画样式 */
//    let kCATransitionFade: NSString!    //翻页
//    let kCATransitionMoveIn: NSString!  //弹出
//    let kCATransitionPush: NSString!    //推出
//    let kCATransitionReveal: NSString!  //移出
//
//    /* 动画执行的方向 */
//    let kCATransitionFromRight: NSString!   //右侧
//    let kCATransitionFromLeft: NSString!    //做成
//    let kCATransitionFromTop: NSString!     //上部
//    let kCATransitionFromBottom: NSString!  //底部

/* 非公开动画效果 */
//    "cube"          //立方体
//    "suckEffect"    //吸收
//    "oglFlip"       //翻转
//    "rippleEffect"  //波纹
//    "pageCurl"      //卷页
//    "cameralrisHollowOpen"          //镜头开
//    "cameralrisHollowClose"          //镜头关


8、平移动画效果

//CATransition动画-平移
@IBAction func caTranatate()
{
//每次都是从前前位置平移
self.testImageView.transform=CGAffineTransformTranslate(self.testImageView.transform, -1.9, -1.9)//正负 代表方向

//每次都从最开始的位置计算平移
//        self.testImageView.transform=CGAffineTransformMakeTranslation(1.2, 1.2)
}


9、旋转效果

//CATransition动画-旋转
@IBAction func caRotate()
{
//连续旋转
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
self.testImageView.transform=CGAffineTransformRotate(self.testImageView.transform, CGFloat(-M_PI/2))
UIView.commitAnimations()

//独立旋转,以初始位置旋转
//        self.testImageView.transform=CGAffineTransformMakeRotation(CGFloat(M_PI/6))
}


10、缩放效果

//CATransition动画-缩放
@IBAction func caScale()
{

//连续缩放
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
self.testImageView.transform=CGAffineTransformScale(self.testImageView.transform, 1.5, 1.5);//1.0以下缩小,1.0以上放大
UIView.commitAnimations()

//独立缩放,以初始位置缩放
//        self.testImageView.transform=CGAffineTransformMakeScale(1.2, 1.2)

}


11、反转到某个状态

//CATransition动画-反转到某个状态
@IBAction func caInvert()
{
self.testImageView.transform=CGAffineTransformIdentity;//返回到初始状态

//连续反转
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2.0)//设置动画时间
self.testImageView.transform=CGAffineTransformConcat(self.testImageView.transform,CGAffineTransformInvert(self.testImageView.transform));
UIView.commitAnimations()

//独立反转,以初始位置反转
//        self.testImageView.transform=CGAffineTransformInvert(self.testImageView.transform)
}


12、不透明效果

//CABasicAnimation-不透明度
@IBAction func cabOpacity()
{
let animation = CABasicAnimation(keyPath: "opacity")

animation.fromValue = 1.0
animation.toValue = 0.0
animation.duration = 3.0
self.testImageView.layer.addAnimation(animation, forKey: "Image-opacity")
self.testImageView.alpha=0.0;
}


13、开启 clip subview 属性

//开启 clip subview 属性
@IBAction func cabExpend()
{
//从小到下(如果把Mode 属性改成 Center后,此效果为遮照)
let animation = CABasicAnimation(keyPath: "bounds.size")
animation.fromValue = NSValue(CGSize: CGSizeMake(2.0, 2.0))
animation.toValue = NSValue(CGSize: self.testImageView.frame.size)
animation.duration = 3.0
self.testImageView.layer.addAnimation(animation, forKey: "Image-expen")
}


14、关键针动画

//CAKeyframeAnimation-关键针动画
@IBAction func cakFly()
{
let animation = CAKeyframeAnimation(keyPath: "position")

//设置5个位置点
let p1 = CGPointMake(0.0, 0.0)
let p2 = CGPointMake(320, 0.0)
let p3 = CGPointMake(0, 460.0)
let p4 = CGPointMake(320.0, 460.0)
let p5 = CGPointMake(160.0, 200.0)

//赋值
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 = 5.0

self.testImageView.layer.addAnimation(animation, forKey: "Image-Fly")
}


15、动画代理

//动画代理
override func animationDidStart(anim: CAAnimation)
{
//动画开始
}

override func animationDidStop(anim: CAAnimation, finished flag: Bool)
{
//动画结束
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: