概述
在做对于图层的动画效果时,往往直接改变属性或者使用隐式动画是不能满足我们的需求的,所以我们就用到了显式动画,CAAnimation。它可以管理重复动画、准确的控制时间和步调,并且能设定图层过渡。当然,所有隐式动画能做到的,显式动画也都能做到。
来看下CAAnimation的继承体系
CABasicAnimation
- (void)demoViewBasicAnimation
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(_demoView.center.x, _demoView.center.y)]; //可以省略...
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(270, 410)];
animation.duration = 3.0f;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //动画速度设置
[_demoView.layer addAnimation:animation forKey:nil];
}
编译运行,会发现动画在执行后demoView回到了起点,这里需要对动画的两个属性进行设置,让图层在完成动画后停留在动画后的状态。
......
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
......
加入这两行代码后就简单的完成了位移动画
注意这里填写的keyPath是一个NSString类型的字符串,这是系统封装好的键路径,2维常用的主要有 transform opacity position等。
在CAAnimation中可以实现代理方法
- animationDidStart:
- animationDidStop:finished:
分别对应刚启动时的状态和完成后的状态
在addAnimation:forKey:方法中,也可以给这个动画设置一个键,可以在其他地方将其取出来,进行一些操作,比如删除。这也充分体现了kvc的灵活。
用到CALayer的 removeAnimationForKey:方法。
CAKeyframeAnimation
如果是简单的动画CABasicAnimation就能完成,CAKeyframeAnimation(关键帧动画)弥补了基本动画只能传入一对对应值的不足,关键帧动画支持传入一套数值或一个路径来完成动画。
- (void)demoViewKeyframeAnimation
{
_demoView.layer.anchorPoint = CGPointMake(0.5, 0.0);
CAKeyframeAnimation *animaiton = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];
animaiton.values = rotationVelues;
animaiton.duration = 3.0f;
animaiton.repeatCount = HUGE_VALF; // #define HUGE_VALF 1e50f
[_demoView.layer addAnimation:animaiton forKey:nil];
}
编译运行后可以发现demoView像一个钟摆一样不停摇晃,如果想效果更逼真,可以使用连续动画配合timingFunction来实现。
动画添加贝塞尔路径
- (void)demoViewBezierPathAnimation
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_demoView.center]; //一定要设置 不然底层的CGPathRef找不到起始点,将会崩溃
[path addCurveToPoint:CGPointMake(270, 410) controlPoint1:CGPointMake(0, Screen_Height) controlPoint2:CGPointMake(Screen_Width, 0)]; //以左下角和右上角为控制点
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = path.CGPath;
animation.duration = 3.0f;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[_demoView.layer addAnimation:animation forKey:nil];
}
设置了一个贝塞尔路径,赋给动画的路径属性,两个控制点为左下以及右上
Demo源码
点击打开链接
以上为本篇博客全部内容,欢迎指正和交流。转载请注明出处~
分享到:
相关推荐
Android——贝塞尔曲线动画——直播平台点赞效果.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
直播平台中点击心形进行贝塞尔曲线运动
IOS应用源码之用贝塞尔曲线做路径画浮云动画 .zip
Android 贝塞尔曲线动画 拿去直接用
核心动画中基本动画,关键帧,贝塞尔路径的使用。
路径动画 贝塞尔路径绘制动画
考虑曲率连续性和最大曲率约束,一种新颖的路径平滑算法是根据三次贝塞尔曲线提出的。 在算法中,贝塞尔转弯和贝塞尔路径分别为发达。 Bezier 转弯首先设计用于连接两个任意配置。 然后可以通过以下方式获得贝塞尔...
优化后的路径编辑器,可以编辑直线和贝塞尔曲线.仅供学习使用。对捕鱼开发者 有很大帮助。仅供学习使用,严禁商用,网络开源代码!!!
项目中抽取出来的通过属性动画使空间沿贝塞尔曲线运动,运动时长,幅度可自己控制,同时可以给控件设置点击事件。
通过属性动画实现控件沿贝塞尔曲线运动,有助于初学者或者研究属性动画或者贝塞尔曲线的码农学习
带关键帧的非三次贝塞尔曲线缓解 使用关键帧和动画进行非三次贝塞尔曲线的缓动。 在这里使用: : 项目设置 安装依赖项: yarn install 在开发模式下运行应用程序: yarn serve 运行测试: yarn test:unit
Android 贝塞尔曲线特效和绚丽的动画
Android贝塞尔动画
通过使用基于贝塞尔曲线的路径规划算法,可以实现物体在动画中的平滑移动,增加动画的流畅性和真实感。 游戏开发:在游戏开发中,路径规划可以用来控制角色或物体的移动路径。通过使用基于贝塞尔曲线的路径规划算法...
siri语音识别动画,贝塞尔曲线完成
基于贝塞尔曲线的自定义属性动画: 1) 实现自定义对话框 2) 实现对话框中的属性动画
利用ae制作的转场动画, ...转场四:路径变换转场:矩形+转换贝塞尔曲线+路径关键帧动画设定+对称复制翻转 转场五:时钟旋转转场:圆形旋转动画+径向擦除动画。 转场六:混合动画转场:矩形+旋转+比例动画
贝塞尔曲线使用——模拟心跳曲线
2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全
Android自定义View——贝塞尔曲线实现直播点赞效果 Android自定义View——贝塞尔曲线实现直播点赞效果