• swift 动画合集


    本例参照objective-c的动画合集进行swift的转换,objective-c地址参照地址    https://github.com/yixiangboy/IOSAnimationDemo

    1、基础动画


    1)位移:

      
            let animation = CABasicAnimation.init(keyPath: "position")
            animation.fromValue = NSValue.init(cgPoint: .init(x: centerView.frame.midX, y: centerView.frame.midY))
            animation.toValue = NSValue.init(cgPoint: .init(x: centerView.frame.midX, y: 400))
            animation.duration = 2.0
            
            
            //所有设置动画属性的代码必须放在视图添加动画的前面  否则动画属性不被执行   不添加任何属性的情况下默认回到原位
            animation.fillMode = kCAFillModeForwards   //动画执行完毕会停留在动画结束的位置
            animation.isRemovedOnCompletion = false   //设置动画结束不被移除
            animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn) //动画执行的间奏
    
            centerView.layer .add(animation, forKey: "positionAnimation")
            //
    

     2)透明度:

       //透明度 opacity
            
            let animation = CABasicAnimation.init(keyPath: "opacity")
            animation.toValue = NSNumber.init(value: 0.2)
            animation.duration = 2.0
            
            //下面两个属性需要同时存在才会保持动画结束时候的状态
            animation.fillMode = kCAFillModeForwards
            animation.isRemovedOnCompletion = false
            
            centerView.layer.add(animation, forKey: "opacity")
            
            
    

     3)形变:

     //缩放动画
            
            let animation = CABasicAnimation.init(keyPath: "transform.scale")
            animation.toValue = NSNumber.init(value: 2.0)
            animation.duration = 1.0
            //保持动画结束时候的状态
            animation.fillMode = kCAFillModeForwards
            animation.isRemovedOnCompletion = false
            
            centerView.layer.add(animation, forKey: "scale")
    
    //transform.scale.x 表示x轴形变  .y表示y轴形变  bounds表示自定义形变
    

    4)旋转:

        //旋转动画
            let animation = CABasicAnimation.init(keyPath: "transform.rotation.z")
            animation.toValue = NSNumber.init(value: M_PI_2) //旋转180度
            animation.duration = 2
            animation.fillMode = kCAFillModeForwards
            animation.isRemovedOnCompletion = false
            centerView.layer.add(animation, forKey: "rotation")
    
          //3D旋转
            let animation3D = CABasicAnimation.init(keyPath: "transform")
            animation3D.toValue = NSValue.init(caTransform3D:          CATransform3DMakeRotation(CGFloat(M_PI_2), 0, 10, 50))
            animation3D.fillMode = kCAFillModeForwards
            animation3D.isRemovedOnCompletion = false
            centerView.layer.add(animation3D, forKey: "rotation")
    

     5)背景色变化:

            //背景色变化动画
            let animation = CABasicAnimation.init(keyPath: "backgroundColor")
            animation.toValue = UIColor.red.cgColor    //此处一定要用CGColor
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "backgroundColor")
    

    2、关键帧动画

    CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。 
    重要属性 
    values : 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 
    path : 可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略。 
    keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。

    事实上,基础动画可以看作只有两个关键帧的关键帧动画


    1)关键帧动画:

    //        关键帧动画
            
            let animation = CAKeyframeAnimation.init(keyPath: "position")
            let value1 = NSValue.init(cgPoint: .init(x: 100, y: 100))
            let value2 = NSValue.init(cgPoint: .init(x: 40, y: 40))
            let value3 = NSValue.init(cgPoint: .init(x: 60, y: 60))
            let value4 = NSValue.init(cgPoint: .init(x: 100, y: 100))
            
            animation.values = [value1,value2,value3,value4]
            animation.duration = 3.0
    //        animation.delegate = self   设置代理可以方便在动画开始和结束的时候进行代码操作
            centerView.layer.add(animation, forKey: "keyFrame")
    

     2)path动画:

    //        path动画
            let animation = CAKeyframeAnimation.init(keyPath: "position")
            //创建一个圆形路径
            animation.path = CGPath(ellipseIn: .init(x: 100, y: 400,  200, height: 200),transform: nil)
        
            animation.duration = 2.0
            animation.fillMode = kCAFillModeForwards
            animation.isRemovedOnCompletion = false
            centerView.layer.add(animation, forKey: "path")
    

     3)抖动效果:

    //        抖动效果 连续旋转不同的角度
            let animation = CAKeyframeAnimation.init(keyPath: "transform.rotation")
            let value1 = NSNumber.init(value: -M_PI/180*10)
            let value2 = NSNumber.init(value: M_PI/180*10)
            let value3 = NSNumber.init(value: -M_PI/180*10)
            animation.values = [value1,value2,value3]
            animation.repeatCount = 3
            centerView.layer.add(animation, forKey: "抖动效果")
    

     3、组动画:


    1)同时执行的组动画

    //        组动画   //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行    //或者将多个不同的animation分个添加到layer,也有组动画的效果
            let groupAnimation = CAAnimationGroup.init()
            groupAnimation.animations = [animation,animation1] //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行
            groupAnimation.duration = 4.0
            centerView.layer.add(groupAnimation, forKey: "组动画")
    

     2)按顺序执行的组动画

    //        path动画
            let animation1 = CAKeyframeAnimation.init(keyPath: "position")
            //创建一个圆形路径
            animation1.path = CGPath(ellipseIn: .init(x: 100, y: 400,  200, height: 200),transform: nil)
        
            animation1.duration = 2.0
            //设置动画开始的时间
            let time:CFTimeInterval = centerView.layer.convertTime(CACurrentMediaTime(),from:nil)
            animation1.beginTime = time
            animation1.fillMode = kCAFillModeForwards
            animation1.isRemovedOnCompletion = false
            centerView.layer.add(animation1, forKey: "path")
    
    //        抖动效果 连续旋转不同的角度
            let animation = CAKeyframeAnimation.init(keyPath: "transform.rotation")
            let value1 = NSNumber.init(value: -M_PI/180*10)
            let value2 = NSNumber.init(value: M_PI/180*10)
            let value3 = NSNumber.init(value: -M_PI/180*10)
            animation.values = [value1,value2,value3]
            animation.repeatCount = 3
            //较上一个动画延迟一秒执行
            animation.beginTime = time + 1.0
            centerView.layer.add(animation, forKey: "抖动效果")
    

    4、过渡动画

    重要属性 
    type:动画过渡类型

    Apple 官方的SDK其实只提供了四种过渡效果。  
    - kCATransitionFade 渐变效果 
    - kCATransitionMoveIn 进入覆盖效果 
    - kCATransitionPush 推出效果 
    - kCATransitionReveal 揭露离开效果 
    私有API提供了其他很多非常炫的过渡动画,比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。 私有API不建议使用,这是苹果人家吃饭的家伙

    subtype:动画过渡方向

    • kCATransitionFromRight 从右侧进入
    • kCATransitionFromLeft 从左侧进入
    • kCATransitionFromTop 从顶部进入
    • kCATransitionFromBottom 从底部进入

    startProgress:动画起点(在整体动画的百分比) 
    endProgress:动画终点(在整体动画的百分比)


    1)逐渐消失

    //         逐渐消失  原视图的背景颜色逐渐消失变为红色
            centerView.backgroundColor = UIColor.red
            let animation = CATransition.init()
            animation.type = kCATransitionFade
            animation.subtype = kCATransitionFromRight
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "逐渐消失")
    

    2)进入覆盖效果

     //进入覆盖效果   一张红色的视图从顶部逐渐出现覆盖掉原来的视图
            centerView.backgroundColor = UIColor.red
            let animation = CATransition.init()
            animation.type = kCATransitionMoveIn
            animation.subtype =  kCATransitionFromTop
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "进入覆盖效果")
    

     3)推出效果

    //        推出效果
            centerView.backgroundColor = UIColor.red
            let animation = CATransition.init()
            animation.type = kCATransitionPush
            animation.subtype = kCATransitionFromTop
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "推出效果")
    

     4)揭露离开效果

           centerView.backgroundColor = UIColor.red
            let animation = CATransition.init()
            animation.type = kCATransitionReveal
            animation.subtype = kCATransitionFromTop
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "推出效果")
    

     5)其他牛的像逼一样的特效自己去试一下,但是不建议在项目中使用,原因你懂得。把type替换成你想要的模式就行了,为了格式我还是放一串代码吧5哈哈

       centerView.backgroundColor = UIColor.red
            let animation = CATransition.init()
            animation.type = "cube"
            animation.subtype = kCATransitionFromTop
            animation.duration = 2.0
            centerView.layer.add(animation, forKey: "推出效果")
    

    有时间了会把objective-c中的实例也用swift改写了

  • 相关阅读:
    仿当当网鼠标经过图片翻转
    静态随鼠标移动的Tip
    Weblogic免项目名
    weblogic中文乱码问题
    IE6下的{clear:both}出现怪异的空白
    动态随鼠标移动的Tip
    base标签在ie6下的恶心问题
    javascript中for和for in 区别
    jQuery性能优化<<转>>
    Ant项目打包脚本
  • 原文地址:https://www.cnblogs.com/lidarui/p/5999279.html
Copyright © 2020-2023  润新知