swift_动画

最新推荐文章于 2023-06-01 17:06:33 发布

原创最新推荐文章于 2023-06-01 17:06:33 发布 · 510 阅读

0 ·

CC 4.0 BY-SA版权

iOS 同时被 2 个专栏收录

92 篇文章

订阅专栏

swift

58 篇文章

订阅专栏

本文介绍了Swift中实现各种UIView动画的方法，包括简单的渐变动画、无动画效果的属性修改、重复动画、组合动画、弹簧效果动画以及关键帧动画。同时讲解了过渡动画和UIImageView的动画效果，提供了一些实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们制作UIView的相关动画

1、最简单的一个动画创建一个UIView

UIView.animate(withDuration: 2) {
            self.redView.backgroundColor = UIColor.green
            self.redView.center.y += 50
            self.redView.alpha = 0.2
        }

这里面写一些自己想要改变的值，实际这个就是渐变效果，自己设置完成时间，从原始状态变为你更改到你想要的效果。同时这个方法支持多视图，不要以为就只能单个视图控制，想放几个就放几个

2、 UIView.animate(withDuration: 5) {
             self.redView.backgroundColor = UIColor.green
            UIView.performWithoutAnimation {
                self.redView.alpha = 0.1
            }
        }

这种动画实际就是添加了一个performWithoutAnimation闭包语句，主要作用就是你还想语句生效，但是还不想有动画效果，那就把你想要改变的属性方法performWithoutAnimation闭包中执行就好，会瞬间完成，相关属性不会有动画效果，如 self.redView.alpha = 0.1，当你看到视图的时候透明度就已经变成0.1了

3、 let opts = UIView.AnimationOptions.repeat
        UIView.animate(withDuration: 5, delay: 2, options: opts, animations: {
            self.redView.center.y += 500
        }, completion: nil)

UIView.AnimationOptions.repeat //可以理解成动画展示的样式，里面有好多，可以自己鼠标点击在command进去看看写写

这个是数据比较多的动画了，各个参数的意思：

withDuration ：动画时长；delay：延迟时间（不需要延迟就设置为0）options：你就当做需要的动画样式,特别注意的是options这里可以方n多个动画样式你也可以这样理解options:[opts,opts1,opts2]，animations闭包动画执行需要修改的属性，一般completion会设置成nil，但是有额外需要的可以将闭包打开使用,例如

let opts = UIView.AnimationOptions.curveLinear

UIView.animate(withDuration: 3, delay: 0, options: opts, animations: {

             //UIView.setAnimationRepeatCount(3) //循环次数
             self.redView.center.y += 500
        }) { (_) in
                 self.redView.center.y -= 500
        }

动画结束了直接让返回原来的位置，里边的样式太多，组合起来也会有不同效果就不一一列举了

4、如果一个动画时间很长然后你不厌烦了，可以使用

self.redView.layer.removeAllAnimations()来取消动画

5、   UIView.animate(withDuration: 1.2) {
            self.redView.transform = CGAffineTransform.identity
                .translatedBy(x: -100, y: 0)
                .rotated(by:CGFloat(Double.pi/4))
                .scaledBy(x: 0.5, y: 0.5)
        }

此动画主要取决于self.redView.transform，后边的动画样式可以多个一起组合使用，同时也可添加 UIView.setAnimationRepeatCount(3)运行次数

    UIView.animate(withDuration: 3, animations: {
            self.redView.transform = CGAffineTransform.identity
                .translatedBy(x: -100, y: 0)
                .rotated(by:CGFloat(Double.pi/4))
                .scaledBy(x: 0.5, y: 0.5)
        }) { (_) in
            self.redView.transform = CGAffineTransform.identity
        }

运行之后又恢复原样

6、 UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.3, options: .curveEaseInOut, animations: {
            self.redView.center.x -= 100
        }) { (_) in

        }

出现弹簧效果usingSpringWithDamping值小于1，值越小摆动的越缓。initialSpringVelocity表示一个初始速度，动画执行快慢由他和duration共同决定。

7、 UIView.animateKeyframes(withDuration: 4, delay: 0, options: [], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1, animations: {

            })

            UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 1, animations: {

            })
            UIView.addKeyframe(withRelativeStartTime: 2.0, relativeDuration: 1, animations: {

            })
            UIView.addKeyframe(withRelativeStartTime: 3.0, relativeDuration: 1, animations: {

            })
        }) { (_) in

        }

可以把这种动画看成区段处理动画，规定一个动画总时和样式，然后在里边分成不同的区段，每个区段在自行定义

接下来我们看一下过渡动画（这种动画强调的一般是改变内容就是可能UIView上边多了什么子控件或者替换了图片等）

    UIView.transition(with: self.SelfImageView, duration: 3, options: .transitionFlipFromTop, animations: {
            if self.SelfImageView.image == #imageLiteral(resourceName: "avatar_vip") {
                self.SelfImageView.image = #imageLiteral(resourceName: "common_icon_membership_expired")
            }else{
                self.SelfImageView.image = #imageLiteral(resourceName: "avatar_vip")
            }
        }) { (_) in

        }

这个实际就是一个图片替换，只不过我们给加上一个动画，这里的transitionFlipFromTop实现的上下翻转的一个效果，我们这个实际应用中我们可以创建两个UIView进行替换的时候，带上点特效也是蛮不错的

UIImageView和图动画

self.SelfImageView.image = UIImage.animatedImageNamed(""voice"", duration: 3)

这个不如我们自己定义一个连环动画，比如播放语音的时候三个点，会在图片后面自动添加数字（voice0，voice1，voice2）,会形成一个连续的动画,停止动画用 self.SelfImageView.stopAnimating()。如果图片名字不一样也想做动画，用UIImage.animatedImage(with:, duration:)