[转] 关于旋转的动画

最近做到了图片旋转的需求,发现一篇不错的关于动画旋转的文章,转载一下:

原文地址:http://blog.csdn.net/fanxiaochuan/article/details/9348293

最主要的是CGAffineTransform 这个是动画变换的基石。

还有就是如下这段英文:

if you want to stop a specific animation, not all animations, your best best bet is to use CAAnimations explictly rather than the UIView animation helper methods, then you will have more granular control and can stop animations explicitly by name.

简单区分了下CAAnimation 和 UIView直接动画的区别。

还有暂停这段动画的方法:http://stackoverflow.com/questions/17681050/how-to-cancel-the-uiview-rotate-block-animations  关键是

最开始的想法是让旋转的弧度从0到2 * M_PI,  让动画不停的repeat,实验了一下,没有任何效果,系统动画的时候看到0与2 *M_PI是同一起一始点,所以没有效果。

后来想到一种办法,就是一个变量不断的累加变大,这样影响弧度也随着变化,就达到了圆周运动的效果。

直接上代码:

  1. void
    {
  2. [UIView beginAnimations:nil context:nil];
  3. [UIView setAnimationDuration:0.01];
  4. [UIView setAnimationDelegate:self];
  5. [UIView setAnimationDidStopSelector:@selector(endAnimation)];
  6. imageView.transform = CGAffineTransformMakeRotation(angle * (M_PI / 180.0f));
  7. [UIView commitAnimations];
  8. }
  9. -(void
    {
  10. angle += 10;
  11. [self startAnimation];
  12. }

当然你可以用block的方式写也是一样的。

  1. void
    {
  2. CGAffineTransform endAngle = CGAffineTransformMakeRotation(imageviewAngle * (M_PI / 180.0f));
  3. [UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
  4. imageView.transform = endAngle;
  5. } completion:^(BOOL
            angle += 10; [self startAnimation];
  6. }];
  7. }

PS:其中angle是double类型。

2013-07-17
22:31:10.898 CircleTest[605:c07] label = <UILabel: 0x75591c0; frame =
(46.4184 41.6974;
107.163 66.6052); transform = [-0.984808, -0.173648, 0.173648,
-0.984808, 0, 0]; text = ‘hello world‘; clipsToBounds = YES;
userInteractionEnabled = NO; layer = <CALayer: 0x75592a0>>
2013-07-17
22:31:16.266 CircleTest[605:c07] label = <UILabel: 0x75591c0; frame
= (62.9109 20.2332; 74.1782 109.534); transform = [0.258819, -0.965926,
0.965926, 0.258819, 0, 0]; text = ‘hello world‘; clipsToBounds = YES;
userInteractionEnabled = NO; layer = <CALayer: 0x75592a0>>
在旋转过程中label的frame也在不断的发生着变化。

附加:

CABasicAnimation animationWithKeyPath Types

When using the ‘CABasicAnimation’ from the
QuartzCore Framework in Objective-C, you have to specify an
animationWithKeyPath.  This is a long string and is not easily listed in
the CABasicAnimation, CAPropertyAnimation, or the CAAnimation
class.

I ended up finding a handy chart within the Core Animation Programming guide in Apple’s iPhone OS Reference Library.

这下就可以360度旋转了。

还有一种方法:

CABasicAnimation* rotationAnimation;  
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];  
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];  
rotationAnimation.duration = duration;  
rotationAnimation.cumulative = YES;  
rotationAnimation.repeatCount = repeat;  
[_loadingView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

还可以用这个方法找到这个动画,动态的对动画属性进行改变,而且如果你使用的是组合动画,那么这个方法会动态的改变你的某个动画效果,从而让你的动画变的更加牛b。But 我刚刚试了试,好像不能对这些已有的属性进行修改。rotationAnimation 这个你是改不了的。

【label.layeranimationForKey:@"rotationAnimation"】

但是你可以进行移除操作如下:

[label.layerremoveAnimationForKey:@"rotationAnimation"];

暂停动画

-(void)pauseLayer:(CALayer*)layer

{

CFTimeInterval pausedTime = [label.layer
convertTime:CACurrentMediaTime()
fromLayer:nil];

label.layer.speed =
0.0;

label.layer.timeOffset = pausedTime;

}

移除动画

-(void)resumeLayer:(CALayer*)layer

{

CFTimeInterval pausedTime = [label.layer
timeOffset];

label.layer.speed =
1.0;

label.layer.timeOffset =
0.0;

label.layer.beginTime =
0.0;

CFTimeInterval timeSincePause = [label.layer
convertTime:CACurrentMediaTime()
fromLayer:nil] - pausedTime;

label.layer.beginTime = timeSincePause;

}

时间: 2024-11-18 04:32:38

[转] 关于旋转的动画的相关文章

纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效.该3D立方体使用CSS3 perspective制作,可以在水平方向.垂直方向和平面视角方向旋转,效果相当震撼.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹! 在线演示:http://www.htmleaf.com/Demo/201501251274.html 下载地址:http://ww

纯CSS3悬停图标旋转导航动画代码

分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_contant"> <a class="xzt1" href="#"><img src="images/xztz_1.png" /></a> <a class="xzt2" hr

前端每日实战:127# 视频演示如何用纯 CSS 创作一个圆环旋转错觉动画

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPWJNj/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cbvPWHM 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/

android等待旋转圆圈动画

先创建一个动画的xml文件如下 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com" android:oneshot="false"><!--设置为false是动画不循环播放--!> <item android:drawable="@d

用CSS3制作的旋转六面体动画

这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

使用变换属性的旋转和动画属性实现大风车效果

主体部分: <div id="car"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> 最外面的div是这个大风车的框,里面

旋转立方体动画demo

园子里看到很不错的3D图片展示,需要在 chrome 或 Edge 下正常工作 . 效果图: 源代码: <html> <head></head> <body> <div class="newsItem"> <div id="blog-news"><!--时钟 <object id="honehoneclock" width="160" heig

css3 旋转出现动画

@-moz-keyframes daf{ 0% { -moz-transform: rotate(-360deg) scale(0.2); -webkit-transform: rotate(-360deg) scale(0.2); -o-transform: rotate(-360deg) scale(0.2); -ms-transform: rotate(-360deg) scale(0.2); transform: rotate(-360deg) scale(0.2); } 100% {

CSS 实现加载动画之一-菊花旋转

原文:CSS 实现加载动画之一-菊花旋转 最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来引用,这种方式最简单,也不会有兼容性的问题.不过本人有时爱折腾,看到一些动画的效果,不管是简单也好,复杂也好,也想尝试用代码来实现它,换一种思维方式,就算在项目中用到的可能性很小,自己多动手多写写总归不会有坏处. CSS3新增了很多强大的功能,虽然会有兼容性