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 ：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。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, width: 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, width: 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改写了

巴特西

swift 动画合集

最新文章

热门文章