动画

作者: Bearger | 来源:发表于2017-03-24 18:48 被阅读6次

介绍下iOS开发动画的几种方式吧:

一. 代码放在Begin和Commit之间:

[UIView beginAnimations:nil context:nil]; // 开始动画
// Code...
[UIView commitAnimations]; // 提交动画

e.g.

[UIView beginAnimations:nil context:nil]; // 开始动画
[UIView setAnimationDuration:10.0]; // 动画时长

/**
 *  图像向下移动
 */
CGPoint point = _imageView.center;
point.y += 150;
[_imageView setCenter:point];

[UIView commitAnimations]; // 提交动画

但这一方式好像是有些过时了,API文档最后面是这样写的:

Use of this method is discouraged in iOS 4.0 and later. You should use the block-based animation methods to specify your animations instead.


二. Block

UIView类几个类方法用于实现相对简单的动画
e.g.

//准备工作
lazy var box:UIView = UIView()
.
.
.
self.view.addSubview(box)
box.backgroundColor = UIColor.red
box.snp.makeConstraints { (make) -> Void in
    make.width.height.equalTo(50)
    make.centerY.equalTo(self.view)
    make.left.equalTo(self.view.snp.left)
}
1. 基本动画
        UIView.animate(withDuration: 3) { 
            self.box.frame.origin.x = self.view.frame.width - 50
        }

2. 添加结束处理
        UIView.animate(withDuration: 3, animations: { 
            self.box.frame.origin.x = self.view.frame.width - 50
        }) { (isFinished) in
            if isFinished {
                UIView.animate(withDuration: 3, animations: { 
                    self.box.frame.origin.x = 0
                })
            }
        }

3. 添加动画配置
        UIView.animate(withDuration: 3, delay: 0.0, options: [.repeat,.autoreverse], animations: {
            self.box.frame.origin.x = self.view.frame.width - 50
        }) { (isFinished) in
            
        }
4. Spring动画
        UIView.animate(withDuration: 3, delay: 1, usingSpringWithDamping: 1.0, initialSpringVelocity: 5.0, options: .curveEaseIn, animations: {
            self.box.frame.origin.x = self.view.frame.width - 50
        }) { (isFinished) in
            
        }

5. 关键帧动画
    func doKeyFrameworkAnimation() {
        
        UIView.animateKeyframes(withDuration: 4.0, delay: 0.0, options: [.calculationModeCubic, .calculationModeLinear], animations: { 
            let colors:[UIColor] = [UIColor.black,UIColor.red,UIColor.blue,UIColor.yellow]
            let frames:[CGRect] = [CGRect.init(x: 0, y: 0, width: 20, height: 20),
                                   CGRect.init(x: 50, y: 50, width: 30, height: 30),
                                   CGRect.init(x: 100, y: 100, width: 40, height: 40),
                                   CGRect.init(x: 150, y: 150, width: 50, height: 50)]

            for index in 0 ..< colors.count {
                
                UIView.addKeyframe(withRelativeStartTime: Double(index)/Double(colors.count), relativeDuration: Double(1)/Double(colors.count), animations: {
                    self.box.backgroundColor = colors[index]
                    self.box.frame = frames[index]
                })
            }

        }) { (isFinished) in
            
        }   
    }

以上各方法说明与参数说明请参看文档。不复制,不翻译了😁


三. Core Foundation(略)


四. Lottie

Lottie Git
使用这个库以后,很多动画都让UED去做了。终于,开发不用再写动画了~!?🤔

相关文章

  • Android回顾--(十六) 动画简析

    动画: 补间动画(Tween动画) 帧动画(Frame动画) 属性动画(Property动画) 补间动画 特点: ...

  • 在山西太原,做个二维动画需要哪些制作流程?

    二维动画有哪些类型? flash动画,课件动画,mg动画,ae动画,GIF动画,手绘动画,网页动画,企业动画,宣传...

  • Android 动画

    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...

  • 动画学习

    动画 分为 组动画,属性动画,渐变动画,其中属性动画包括 普通动画和关键帧动画,其他动弹动画,动画层分为 pres...

  • Android动画

    Android动画分类: 视图动画:补间动画、逐帧动画 属性动画 视图动画 补间动画 可以在xml中定义动画,然后...

  • iOS动画

    iOS动画-从UIView动画说起iOS动画-Transform和KeyFrame动画iOS动画-layout动画...

  • Android动画之视图动画

    分类 Android动画主要包括视图动画和属性动画。视图动画包括Tween动画和Frame动画。Tween动画又包...

  • Android 动画

    android动画分为三种 帧动画,视图动画(补间动画),属性动画逐帧动画 视图动画 属性动画 Window和A...

  • android动画

    动画: 分类:分为视图动画和属性动画,其中视图动画又分为补间动画和逐帧动画。补间动画又分为平移动画、缩放动画、旋转...

  • Android中的动画概述

    动画可以分为三类:View动画,帧动画,属性动画。 一、View动画 1.View动画包括四种:平移动画,缩放动画...

网友评论

      本文标题:动画

      本文链接:https://www.haomeiwen.com/subject/siofottx.html