IOS控件动画的一种通用方法

最近在做一个垂直弹幕控件 , 在做控件动画时费了不少心思, 这里分享一些心得.

前言

关于动画, 我们一般使用UIKit提供的动画来实现.

UIView动画可以设置的动画属性有:

  • 大小变化(frame)
  • 拉伸变化(bounds)
  • 中心位置(center)
  • 矩阵(transform)
  • 透明度(alpha)
  • 背景颜色(backgroundColor)
  • 拉伸内容(contentStretch)

这里主要介绍transform这个属性.

CGAffineTransform transform的类型是CGAffineTransform , 这是一个2D矩阵.

矩阵的基本知识

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

为了把二维图形的变化统一在一个坐标系里,引入了齐次坐标的概念,即把一个图形用一个三维矩阵表示,其中第三列总是(0,0,1),用来作为坐标系的标准。所以所有的变化都由前两列完成。 以上参数在矩阵中的表示为:

[ 1 ]

运算原理:原坐标设为(X,Y,1);

[ 2 ]

通过矩阵运算后的坐标[aX + cY + tx bX + dY + ty 1],我们对比一下可知: 第一种: 设a=d=1, b=c=0. [aX + cY + tx bX + dY + ty 1] = [X + tx Y + ty 1]; 可见,这个时候,坐标是按照向量(tx,ty)进行平移, 其实这也就是函数的计算原理。

CGAffineTransform CGAffineMakeTranslation(CGFloat tx,CGFloat ty)

第二种

设b=c=tx=ty=0. [aX + cY + tx bX + dY + ty 1] = [aX dY 1]; 可见,这个时候,坐标X按照a进行缩放,Y按照d进行缩放,a,d就是X,Y的比例系数,其实这也就是函数

CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

的计算原理。a对应于sx,d对应于sy。

第三种:设tx=ty=0,a=cosɵ,b=sinɵ,c=-sinɵ,d=cosɵ。 [aX + cY + tx bX + dY + ty 1] = [Xcosɵ - Ysinɵ Xsinɵ + Ycosɵ 1] ; 可见,这个时候,ɵ就是旋转的角度,逆时针为正,顺时针为负。其实这也就是函数

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

的计算原理。angle即ɵ的弧度表示。

总体来说, 记住下面这个结论就好.

对于CGAffineTransformMake(a,b,c,d,tx,ty) ad缩放bc旋转tx,ty位移

应用

如何做一个 指定锚点的缩放动画.

分析: 缩放动画 只需要改变b , d 的值即可. 但是此时控件的锚点是在中心点. 把当前中心点移动到你想要的点即可 , 例如, 把锚点放在相对控件原点(0,0)

//设置开始状态
CGFloat offsetX = 0 - view.size.width/2;
CGFloat offsetY = 0 - view.size.height/2;
//0.1 , 0.1 缩放到原来大小的0.1倍, 把原点放到(0,0)
view.transform = CGAffineTransformMake(0.1, 0, 0, 0.01, offsetX, offsetY);
[UIView animateWithDuration:0.5 delay:0.7 
options:UIViewAnimationOptionCurveLinear 
animations:^{
   //放大到1倍, 位移到原点
     view.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
        } completion:^(BOOL finished){}];

可以看到. 只使用一次变换就完成了一次位移和缩放的动画.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

css笔记 - transform学习笔记(二)

属于2D/3D上的转换、变形效果。他不是一个动画,他就是变形。比如正方形变平行四边形,再变圆形。都是形状变成另一个形状。

371
来自专栏贾志刚-OpenCV学堂

OpenCV中原始图像加载与保存压缩技巧

OpenCV中关于图像读写有两个函数imread与imwrite,imread加载的时候支持灰度图像、彩色图像、原始图像加载,默认情况下通过imread加载的图...

331
来自专栏PPV课数据科学社区

【学习】笨办法学R编程(四)

随着教程推进,基本的语法都接触得差不多了。当要解决某个具体问题时,只需要考虑用什么样的算法来整合运用这些函数和表达式。今天来解决Project ...

2654
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

强大的UIView是基于 CALayer实现的,它的重要性不言而喻,相信大家也都有自己的研究和理解,今天这片文章里的内容是几个关键点的补充。

571
来自专栏生信小驿站

ggplot2 easyplot②

802
来自专栏非著名程序员

Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法

学习Shape的用法 非著名程序员 ? 在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及...

2439
来自专栏Petrichor的专栏

matplotlib: 绘制平面图/表格

1214
来自专栏生信小驿站

R语言之可视化⑧easyGgplot2散点图续目录

511
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

1133
来自专栏韦弦的微信小程序

Swift 视图抖动扩展二

嗯。。。UIView 的 animation 方法里面的 options 还有个.repate,是的,就是动画重复,所以我们可以不用去自己算重复的动画次数。。s...

691

扫码关注云+社区