动画学习1

首先看看这次动画的效果图

动画学习1_第1张图片

好了,现在开始本次教程

分析:这个动画其实可以分解为3部分

1、图片随着手指的滑动进行移动

2、随着图片的移动图片进行以x进行旋转

3、随着图片的移动图片开始进行缩放

首先开始第一步

static CGPoint initialPoint; //必须是静态变量

CGPoint transition = [gesture translationInView:self.superview];

if (gesture.state == UIGestureRecognizerStateBegan) {

//将要移动

initialPoint = self.center;

}else if (gesture.state == UIGestureRecognizerStateChanged){

//移动

self.center = CGPointMake(initialPoint.x, initialPoint.y + transition.y);

}else if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateCancelled){

//拖动结束或者取消

self.center = initialPoint;

}

第二步:随着图片的移动图片进行缩放

下面涉及到了高中的数学知识,鉴于本人早已毕业很多年就不自己分析了,直接贴上参考的文档


动画学习1_第2张图片
动画学习1_第3张图片

CGFloat Y =MIN(SCROLLDISTANCE,MAX(0,ABS(transition.y)));

//一个开口向下,顶点(SCROLLDISTANCE/2,1),过(0,0),(SCROLLDISTANCE,0)的二次函数

factorOfAngle = MAX(0,-4/(SCROLLDISTANCE*SCROLLDISTANCE)*Y*(Y-SCROLLDISTANCE));

//一个开口向下,顶点(SCROLLDISTANCE,1),过(0,0),(2*SCROLLDISTANCE,0)的二次函数

factorOfScale = MAX(0,-1/(SCROLLDISTANCE*SCROLLDISTANCE)*Y*(Y-2*SCROLLDISTANCE));

CATransform3D t = CATransform3DIdentity;

t.m34  = 1.0/-1000;

//缩放

t = CATransform3DScale(t, 1-factorOfScale*0.2, 1-factorOfScale*0.2, 0);

第三步随着图片的移动图片以x轴进行旋转

原理同第二步

动画学习1_第4张图片
动画学习1_第5张图片

//旋转

t = CATransform3DRotate(t,factorOfAngle*(M_PI/5), transition.y>0?-1:1, 0, 0);

本文为《A-GUIDE-TO-iOS-ANIMATION-master》电子书学习而进行的个人记录

附加demo下载地址(随后补上)

你可能感兴趣的:(动画学习1)