最近在网上看到关于动画的学习教程,觉得那些复杂动画做起来的效果确实很炫酷。为了丰富下自己的业余知识,我从最基本的动画开始做起,起初看到的demo,是别人用Swift语言写的动画,在此,我用OC语言进行了临摹,当然,希望后期我能在他们的基础上,创作自己的动画构思,文中记录的demo暂且涵盖了CABasicAnimation基本用法。
- iOS 的动画都是基于 CALayer 的,每个UIView都对应有一个CALayer。
所以修改UIView的属性所呈现的动画都是CALayer实现的。CALayer不能响应事件。
设定动画的属性和说明
| 属性 | 说明 |
|---|---|
| duration | 动画的时长 |
| repeatCount | 重复的次数。不停重复设置为 HUGE_VALF |
| repeatDuration | 设置动画的时间。在该时间内动画一直执行,不计次数。 |
| beginTime | 指定动画开始的时间。从开始延迟几秒的话,设置为【CACurrentMediaTime() + 秒数】 的方式 |
| timingFunction | 设置动画的速度变化 |
| autoreverses | 动画结束时是否执行逆动画 |
| fromValue | 所改变属性的起始值 |
| toValue | 所改变属性的结束时的值 |
| byValue | 所改变属性相同起始值的改变量 |
一些常用的animationWithKeyPath值的总结
| 值 | 说明 | 使用形式 |
|---|---|---|
| transform.scale | 比例转化 | @(0.8) |
| transform.scale.x | 宽的比例 | @(0.8) |
| transform.scale.y | 高的比例 | @(0.8) |
| transform.rotation.x | 围绕x轴旋转 | @(M_PI) |
| transform.rotation.y | 围绕y轴旋转 | @(M_PI) |
| transform.rotation.z | 围绕z轴旋转 | @(M_PI) |
| cornerRadius | 圆角的设置 | @(50) |
| backgroundColor | 背景颜色的变化 | (__bridge id _Nullable)([UIColor redColor].CGColor) |
| bounds | 大小变化,中心不变 | [NSValue valueWithCGRect:CGRectMake(200,550,80,40)] |
| position | 位置(中心点的改变) | [NSValue valueWithCGPoint:CGPointMake(40, 240)] |
| contents | 内容,比如UIImageView的图片 | (__bridge id _Nullable)([UIImage imageNamed:@"from.jpg"].CGImage) |
| opacity | 透明度 | @(0.7) |
| contentsRect.size.width | 横向拉伸缩放 | @(0.4)最好是0~1之间的 |
demo下载地址:https://github.com/wcmyzyp/VariousAnimation
欢迎大家提问题和交流!
以下是DEMO的演示动图:
