欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iOS 视图(UIView)动画

程序员文章站 2024-03-22 23:57:58
...

如果需要在视图(UIView)上进行一些简单动画,可以使用视图动画。视图动画底层也是使用Core Animation,只是动画的实现细节都封装起来了。UIKit类通常都有animated布尔型参数,它可以开启动画效果。

swift:func setOn(_ on:Bool,animated:Bool)
objectiveC:-(void)setOn:(BOOL)on animated:(BOOL)animated

每个视图都关联到一个图层(CALayer)对象,视图主要来处理时间,图层用来处理动画,视图上所有的动画、绘制和可视效果都直接或间接地由图层处理。

视图有一列支持动画的属性,包括frame、bounds、center、alpha和transform等。此外还有一些属性,比如动画延迟事件、动画曲线(淡入/淡出、淡入、淡出和线性等)、动画过度、重复册数和自动反转等属性。

1、动画块

视图(UIView)动画采用代码块(Swift为闭包)形式的方法,其主要方法如下:
(1)+ animateWithDuration:delay:options:animations:completion:
(2)+ animateWithDuration:animations:completion:
(3)+ animateWithDuration:animations:
这些方法之间是重载关系,相同名字的参数含义相同。

+animateWithDuration:delay:options:animations:completion:,这个方法是静态方法,其中参数
duration:是动画持续的时间;
delay:是动画延迟执行的时间,如果为0,则动画马上执行;
options:是执行动画选项的类型(UIViewAnimationOptions类型)。动画选项包括:动画曲线、动画过度、重复次数和自动反转等内容设置;
animations:是一个代码块(Swift为闭包),用来设置动画的属性;
completion:是一个代码块(Swift为闭包),是在动画结束时调用的。

:点击按钮,让一个UIView上下移动
swift代码

// An highlighted block
	@IBOutlet weak var animationView: UIView!
    @IBOutlet weak var animationButton:UIButton!
    //animationView运动的方向标识,1为乡下运行,-1为向上运行
    var flag=1
    override func viewDidLoad() {
        super.viewDidLoad()

        
    }
    
    @IBAction func animationView_Click(_ sender: Any) {
        self.animationButton.alpha=0.0
        UIView.animate(withDuration: 2, animations: {
            var frame=self.animationView.frame;
            frame.origin.y+=CGFloat(200*self.flag)
            self.flag *= -1//取反
            self.animationView.frame=frame
        },completion: {(finished)->Void in
            self.animationDone()
        }
        )
        
    }
    //动画结束后的处理方法
    func animationDone() {
        //为按钮显示过程添加动画
        UIView.animate(withDuration: 1.0) {
            //动画结束后,将按钮设置为可见
            self.animationButton.alpha=1.0
        }
    }

objective-C代码

// An highlighted block
#import "AnimationViewController.h"
@interface AnimationViewController(){
	//animationView运动的方向标识,1为乡下运行,-1为向上运行
	int flag;
}
@property week UIView *animationView;
@property week UIButton *animationButton;
@end

@implementation AnimationViewController
	-(void)viewDidLoad{
		[super viewDidLoad];
		//初始化animationView运动的方向标识
		flag=1;
	}
	-(IBAction)animationView_Click:(id)sender{
		self.animationButton.alpha=0.0;
		[UIView animateWithDuration:2 animations:^{
			CGRect frame=self.animationView.frame;
			frame.origin.y+=200*flag;
			flag *=-1;//取反
			self.animationView.frame=frame;
		} completion:^(BOOL finished)
		{
			[self animationDone];
		}
		];
	}
	////动画结束后的处理方法
	-(void)animationDone{
		[UIView animateWithDuration:1.0 animations:^{
			//动画结束后,将按钮设置为可见
			self.animationButton.alpha=1.0;
		}];
	}
	
@end

运行效果
iOS 视图(UIView)动画
iOS 视图(UIView)动画

2、过度动画

两个过度动画的静态方法
(1)+transitionWithView:duration:options:animations:completion:,在指定的容器内创建动画过度。
属性说明:
view:视图对象;
duration:是动画持续的时间;
options:执行动画的选项;
animations:是一个代码块;
completion:动画结束后调用的代码块。
(2)+transitionFromView:toView:duration:options:completion:,在指定的两个视图之间创建过度动画。
属性说明:同上

options说明
options参数(UIViewAnimationPotions类型),可以设置不同的动画过度类型和动画曲线类型。一些常用类型如下:
UIViewAnimationOptionCurveEaseInOut,还如换出,开始和结束时减速,swift是curveEaseInOut。
UIViewAnimationOptionCurveEaseIn,缓入,开始时减速,swift是curveEaseIn。
UIViewAnimationOptionCurveEaseOut,缓出,结束时减速,swift是curveEaseOut。
UIViewAnimationOptionCurveLinear,线性,即均速运动,swift是curveLinear。
UIViewAnimationOptionTransitionFlipFromLeft,设置从左往右翻转,swift是transitionFlipFromLeft。
UIViewAnimationOptionTransitionFlipFromRight,设置从右往左翻转,swift是transitionFlipFromRight。
UIViewAnimationOptionTransitionCurlUp,设置向上翻页,swift是transitionCurlUp。
UIViewAnimationOptionTransitionCurlDown,设置向下翻页,swift是transitionCurlDown。
UIViewAnimationOptionTransitionCrossDissolve,设置交叉溶液效果,swift是transitionCrossDissolve。
UIViewAnimationOptionTransitionFlipFromTop,设置从上往下翻转,swift是transitionFlipFromTop。
UIViewAnimationOptionTransitionFlipFromBottom,设置从下往上翻转,swift是transitionFilpFromBottom。

options参数选项类型中的成员值是位掩码,这些成员可以进行位或运算。例如:
objectiveC中:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionTransitionFlipFromLeft
swift中:[.curveEaseInOut | transitionFlipFromLeft]

相关标签: ios