码迷,mamicode.com
首页 > 其他好文 > 详细

CABasicAnimation精讲

时间:2016-05-03 16:14:41      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

前言

本教程写了这个效果图的demo,同时总结CABasicAnimation的使用方法。

技术分享

看完gif动画完,看到了什么?平移、旋转、缩放、闪烁、路径动画。

实现平移动画

实现平移动画,我们可以通过transform.translation或者水平transform.translation.x或者垂直平移transform.translation.y添加动画。

translation是平移的意思,大家需要记住它。这里只是水平移动,其实我们可以直接对transform.translation.x设置动画。不过直接使用transform.translation也是可以的,我们设置y值为0就可以了。

首先,我们通过属性路径的方法来创建动画对象:

我们设置目的地为水平移动到屏宽再减去控件的宽50,由于我们只是水平移动,垂直方向没有移动,因此第二个参数设置为0即可。我们需要明确一点,toValue这里是指移动的距离而不是移到这个点:

对于其它属性的设置,看注释里的说明就可以明白了。

旋转动画

旋转动画需要借助CATransform3D这个表示三维空间的结构体,可以X轴旋转、Y轴旋转、Z轴旋转:

我们通过属性路径创建动画:

然后通过创建CATransform3D结构体,指定旋转的角度为180度,X、Y轴不旋转,Z轴旋转180度:

其它属性设置与平移动画一样。

缩放动画

transform.scale这个是图的属性路径,设置scale值就可以达到缩放的效果:

我们通过属性路径方法创建动画对象:

我们设置了初始变换和最终变换为1和0:

其实由于图初始状态值为正常状态,没有任何缩放,因此其值本就是1,所以fromValue可以不设置的。

闪烁动画

我们这里说的闪烁动画其实就是透明度的变化,当然我们不能通过alpha值的变化来实现闪烁动画,因此这个属性是不具备隐式动画效果的。不过系统提供了opacity,我们可以通过这个值的变化来实现闪烁效果。

我们通过属性路径opacity来创建动画对象,注意不能使用alpha,否则不会有动画效果的:

我们设置透明度从1->0变换,其它属性设置与上面平移动画一样:

路径动画

路径动画这里添加了灰常详细的注释说明,几乎都包含了所有常用的属性设置了:

在图中position是层相对于父层的中心,而UI控件的center中心一样。这里要整体曲线路径移动,我们通过position中心点的变换就可以曲线路径移动。

这里设置了CAMediaTiming协议中的所有属性,详细看代码中的注释吧,已经很详细了!

CABasicAnimation精讲

标签:

原文地址:http://www.cnblogs.com/yjg2014/p/5454995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!