为了账号安全,请及时绑定邮箱和手机立即绑定

Swift 多图片动画实现缩放渐变切换

2019.11.07 17:54 1119浏览

实现目标  举例:5张图片  A、B、C、D、E

看看效果:http://img4.sycdn.imooc.com/5dc3e8810001664602430529.jpg

动画间隔2s     0     ->   2s内 图片缩放    1 -> 0.88

                    1.5s  ->   2s内 图片透明度 1 -> 0

底层图片为了无缝的缩放动画,需要在前一张开始渐变动画时开始缩放,也就是:每张图片需要提前0.5s开始缩放

也就是每张图片的动画也就是2.5s

   http://img1.sycdn.imooc.com/5dc3eb3b0001b80417000288.jpg

每张图片动画完成会被移动到最底层,等待下次轮换


  • 完成动画的分时刻的View的分类

func addMoreScaleAnimationGroupAnimation(time:CFTimeInterval? = 0.5) {

        self.layer.removeAllAnimations()

        //透明度

        let opacity: CABasicAnimation = CABasicAnimation.init(keyPath: "opacity")

        opacity.fromValue = 1

        opacity.toValue = 0

        opacity.duration = time!

        opacity.beginTime = 4*time!

        //缩放

        let scale = CABasicAnimation.init(keyPath: "transform.scale")

        scale.duration = 5*time!

        scale.fromValue = 1

        scale.toValue = 0.85

        let group = CAAnimationGroup.init()

        group.timingFunction = CAMediaTimingFunction.init(name: CAMediaTimingFunctionName.easeIn)

        group.duration = 5*time!

        group.autoreverses = false

        group.animations = [scale,opacity]

        group.isRemovedOnCompletion = false

        group.fillMode = .forwards

        group.repeatCount = 1

        //        group.delegate = self

        self.layer.add(group, forKey: nil)

       }

  • 完成ImagesToVideoView封装

import UIKit

/*

    多图片模拟特效视频的使用实例

    var names:[String] = ["55.png","44.png","33.png","22.png","11.png"]

    let imgsView = ImagesToVideoView(frame: self.view.bounds, imgNames: names,spead: .quick)

    self.view.addSubview(imgsView)

*/

enum ImagesVideoSpead {

    case quick // 快速

    case slow //慢点的

}

class ImagesToVideoView: UIView {

    //图片名称数组

   private var imageNames:[String] = []


   private var imageViews:[UIImageView] = []

    

    var spead:ImagesVideoSpead = ImagesVideoSpead.slow

    

    convenience init(frame:CGRect,imgNames:[String],spead:ImagesVideoSpead = ImagesVideoSpead.slow) {

        self.init(frame: frame)

        self.imageNames = imgNames

        self.spead = spead

        self.initialImagesViews()

    }

    

    override init(frame: CGRect) {

        super.init(frame: frame)

        

    }

    

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")

    }

    

    func initialImagesViews(){

        guard imageNames.count > 0 else {

            return

        }

        for (_,name) in imageNames.enumerated() {

            let size = self.frame.size

            let w = size.width

            let h = size.height

            let padTop  = 0.1*h

            let padLeft = 0.1*w

            let imgView = UIImageView.init(frame: CGRect(x: -padLeft, y: -padTop, width: 1.2*w, height: 1.2*h))

            imgView.image = UIImage(named: name)

            imgView.contentMode = .scaleAspectFill

            

            self.addSubview(imgView)

            imageViews.append(imgView)

        }

        

        let num = imageViews.count

        let sepNum = num*4

        var count = 0

        let sp = spead == .slow ? 0.5 : 0.4

        Timer.scheduledTimer(withTimeInterval: sp, repeats: true) { (timer) in

           

            if count%4 == 0{

                let index = count%sepNum/4 //0/4/8/12/16   --- 0/1/2/3/4 == 4/3/2/1/0

                self.imageViews[num-index-1].addMoreScaleAnimationGroupAnimation(time: sp)

            }else if count%4 == 1 && count != 1{

                //0-1-2-3-4

                let index = (count-1)%sepNum/4

                let sIndex = num-index-1 == num-1 ? 0 : num-index

                self.imageViews[sIndex].layer.removeAllAnimations()

                self.sendSubviewToBack(self.imageViews[sIndex])

            }

            count += 1

        }

    }

}

  • 简单的使用

var names:[String] = ["55","44","33","22","11"]//图片的名称数组

let imgsView = ImagesToVideoView(frame: self.view.bounds, imgNames: names,spead: .slow)

self.view.addSubview(imgsView)

有待优化,有新想法,请在下方留言


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消