动画(1/2) UIView 动画

一、UIView 动画简介

UIView 动画实质上是对 Core Animation 的封装,以 block 形式提供简洁的动画接口。
UIView动画可以设置的动画属性有:
frame、center、bounds、
alpha、backgroundColor、
transform。

备注:bounds 一般只用于修改 size,并且以 center 为中心进行修改。

重要概念:frame

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
if the transform property contains a non-identity transform, the value of the frame property is undefined and should not be modified. In that case, reposition the view using the center property and adjust the size using the bounds property instead.

frame 是一个复合属性,由 center、bounds 和 transform 共同计算而来。
transform 改变,frame 会受到影响,但是 center 和 bounds不会受到影响。

二、简单属性动画:通过修改属性完成动画

// 普通动画
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
                      delay:(NSTimeInterval) //动画延迟执行的时间
                    options:(UIViewAnimationOptions) //动画的过渡效果
                 animations:^{
                  //执行的动画
}                completion:^(BOOL finished) {
                  //动画执行完毕后的操作
}];
// 具有弹性效果的动画
[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
                      delay:(NSTimeInterval)//动画延迟执行的时间
     usingSpringWithDamping:(CGFloat)//震动效果,范围0~1,数值越小震动效果越明显,和劲度系数描述一样性质
      initialSpringVelocity:(CGFloat)//初始速度,数值越大初始速度越快
                    options:(UIViewAnimationOptions)//动画的过渡效果
                 animations:^{
                    //执行的动画
}               completion:^(BOOL finished) {
                    //动画执行完毕后的操作
}];

三、Transition 转场

两个“画面”转场效果。
分为单个view “内容”变化形成的两个“画面”和两个不同view形成的两个“画面”
单个 view 转场动画:view “内容” 前后发生了变化,以转场动画方式把前后“两个” view 转场。
“内容”变化例如:图片方式变化,添加或者移除了子视图,背景变化等等。

[UIView transitionWithView:<#(nonnull UIView *)#>
                  duration:<#(NSTimeInterval)#>
                   options:<#(UIViewAnimationOptions)#>
                animations:<#^(void)animations#>
                completion:<#^(BOOL finished)completion#>];

添加的视图 toVIew,移除的视图 fromView
转场动画的作用对象是父视图(过渡效果体现在父视图上)
toView added to fromView.superview, fromView removed from its superview

[UIView transitionFromView:<#(nonnull UIView *)#>
                    toView:<#(nonnull UIView *)#>
                  duration:<#(NSTimeInterval)#>
                   options:<#(UIViewAnimationOptions)#>
                completion:<#^(BOOL finished)completion#>];

UIViewAnimationOptions 选项说明:

UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn //时间曲线,慢进
UIViewAnimationOptionCurveEaseOut //时间曲线,慢出
UIViewAnimationOptionCurveLinear //时间曲线,匀速

UIViewAnimationOptionTransitionNone //转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页

四、Keyframes 动画

[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
                               delay:(NSTimeInterval)//动画延迟执行的时间
                             options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
                          animations:^{
                        //执行的关键帧动画
}
                          completion:^(BOOL finished) {
                        //动画执行完毕后的操作
}];

[UIView addKeyframeWithRelativeStartTime:(double)//各帧动画开始的时间(占总时间的比例)
                        relativeDuration:(double) //从开始时间动画持续时间(占总时间的比例)
                              animations:^{
                            //执行的动画
}];

例子

    [UIView animateKeyframesWithDuration:6 delay:0 options:0 animations:^{
        // 第一帧
        [UIView addKeyframeWithRelativeStartTime:0.0   // 相对于6秒所开始的时间(第0秒开始动画)
                                relativeDuration:1/3.0 // 相对于6秒动画的持续时间(动画持续2秒)
                                      animations:^{
                                          self.view.backgroundColor = [UIColor redColor];
                                      }];
        // 第二帧
        [UIView addKeyframeWithRelativeStartTime:1/3.0 // 相对于6秒所开始的时间(第2秒开始动画)
                                relativeDuration:1/3.0 // 相对于6秒动画的持续时间(动画持续2秒)
                                      animations:^{
                                          self.view.backgroundColor = [UIColor yellowColor];
                                      }];
        // 第三帧
        [UIView addKeyframeWithRelativeStartTime:2/3.0 // 相对于6秒所开始的时间(第4秒开始动画)
                                relativeDuration:1/3.0 // 相对于6秒动画的持续时间(动画持续2秒)
                                      animations:^{
                                          self.view.backgroundColor = [UIColor greenColor];                                                                }];
        } completion:^(BOOL finished) {
            
        }];

五、Transform 动画---CGAffineTransform 反射变化动画

1、CGAffineTransform 构造:

struct CGAffineTransform {
CGFloat a, b, c, d;
CGFloat tx, ty;
};

2、直接构造映射
// [ a b c d tx ty ]
CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
// [ 1 0 0 1 0 0 ] 未变化
CGAffineTransformIdentity
// [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ] 逆时针旋转 angle 弧度
CGAffineTransformMakeRotation(CGFloat angle) 
// [ 1 0 0 1 tx ty ] x 轴方向平移 tx,y 轴方向平移 ty
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
// [ sx 0 0 sy 0 0 ] x 轴方向放大 sx,y 轴方向放大 sy
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
3、间接构造映射
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy) 
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
4、常见方法
// 常用方法
CGAffineTransformIsIdentity(CGAffineTransform t)
CGAffineTransformInvert(CGAffineTransform t)
CGAffineTransformEqualToTransform(CGAffineTransform t1, CGAffineTransform t2)
CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2)

// 局部效果
CGPoint CGPointApplyAffineTransform(CGPoint point, CGAffineTransform t)
CGSize CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t)
CGRect CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t)
上一篇:IOS绘制小黄人,对绘图知识的一个练习


下一篇:iOS 混合变换旋转 CGAffineTransform 的使用