动画分析
- 当前控件既可以显示图片,有可以显示文字,那么我们就可以通过按钮来最为当前的控件.
- 当拖动控件,当前控件尺寸不会改变,起始位置处会有一个同尺寸的控件随着偏移的距离,逐渐变小.起始位置的控件只是简单的用来显示,所以这里可以用一个View来完成.而2控件中间的纽带我们可以通过图层来实现.
text.gif
1.搭建界面
- 从storyboard中创建一个按钮,并且自定义一个继承自UIButton的类,修改按钮的class
- 在初始化方法中,初始化我们自定义按钮的属性
- 考虑到按钮分装重用,将初始化方法抽取出来,分别在
awakeFromNib和initWithFrame中实现
- 考虑到按钮分装重用,将初始化方法抽取出来,分别在
-(void) setUp
{
self.radius = self.bounds.size.width * 0.5;
//设置圆角
self.layer.cornerRadius = self.radius;
self.layer.masksToBounds = YES;
}
2.平移控件
- 在初始化方法中,给控件添加平移手势,实现方法
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
- 在平移手势的方法中,获取当前的偏移点来移动控件
//无法通过设置transform方法来获得移动中控件的frame位置的变化
CGPoint transPoint = [pan translationInView:self];
//平移控件
self.transform = CGAffineTransformTranslate(self.transform, transPoint.x, transPoint.y);
[pan setTranslation:CGPointZero inView:self];
//利用center来改变控件的位置
//获取偏移点
CGPoint transPoint = [pan translationInView:self];
//平移控件
CGPoint center = self.center;
center.x += transPoint.x;
center.y += transPoint.y;
self.center = center;
//复原
[pan setTranslation:CGPointZero inView:self];
3.终点的view
- 添加一个view在起始位置处.平移手势方法调用频繁,所以选择在初始化方法中添加
//添加小圆
UIView *smallRadius = [[UIView alloc] initWithFrame:self.bounds];
smallRadius.layer.cornerRadius = self.radius;
smallRadius.center = self.center;
smallRadius.backgroundColor = [UIColor redColor];
// [self.superview addSubview:smallRadius];此方法是将子控件添加到父控件上,并且让其在最上面显示
//将添加的view添加到父控件上
[self.superview insertSubview:smallRadius belowSubview:self];
- 自定义一个形变系数,通过两圆的圆心距,获得起始圆的形变尺寸
//获得2圆心距离
-(CGFloat) distanceWithSmallView:(UIView *) smallView withBigView:(UIView *) bigView
{
CGFloat distanceX = bigView.center.x - smallView.center.x;
CGFloat distanceY = bigView.center.y - smallView.center.y;
return sqrt(distanceX * distanceX + distanceY * distanceY);
}
//获取小圆的半径
CGFloat radius = self.radius - space;
//修改小圆的尺寸
self.smallView.bounds = CGRectMake(0, 0, radius * 2, radius * 2);
self.smallView.layer.cornerRadius = radius;
4.不规则矩形的创建
- 通过形状图层,将不规则的矩形渲染到视图
- 创建贝塞尔曲线
-(UIBezierPath *) beziserWithSmallView:(UIView *) smallView withBigView:(UIView *)bigView
{
//小 圆
CGPoint small = smallView.center;
CGFloat r = smallView.bounds.size.width * 0.5;
//大 圆
CGPoint big = bigView.center;
CGFloat R = bigView.bounds.size.width * 0.5;
CGFloat distance = [self distanceWithSmallView:smallView withBigView:bigView];
//两控件x,y轴上的偏移量
CGFloat spaceX = big.x - small.x;
CGFloat spaceY = big.y - small.y;
//获取偏移角度
CGFloat sinθ = spaceX / distance;
CGFloat cosθ = spaceY / distance;
//路径点
CGPoint pointA = CGPointMake(small.x - r * cosθ, small.y + r * sinθ);
CGPoint pointB = CGPointMake(small.x + r * cosθ, small.y - r * sinθ);
CGPoint pointC = CGPointMake(big.x + R * cosθ, big.y - R * sinθ);
CGPoint pointd = CGPointMake(big.x - R * cosθ, big.y + R * sinθ);
//曲线控制点
CGPoint ctlOne = CGPointMake(pointA.x + distance * 0.5 * sinθ, pointA.y + distance * 0.5 * cosθ);
CGPoint ctltwo = CGPointMake(pointB.x + distance * 0.5 * sinθ, pointB.y + distance * 0.5 * cosθ);
[self.path moveToPoint:pointA];
[self.path addLineToPoint:pointB];
//曲线控制点
[self.path addQuadCurveToPoint:pointC controlPoint:ctlOne];
[self.path addLineToPoint:pointd];
//曲线控制点
[self.path addQuadCurveToPoint:pointA controlPoint:ctltwo];
return self.path;
}
- 声明一个CAShapeLayer属性,并且懒加载
-(CAShapeLayer *)shapeLayer
{
if (!_shapeLayer) {
CAShapeLayer *shapLayer = [CAShapeLayer layer];
shapLayer.fillColor = [UIColor redColor].CGColor;
//将形状图层渲染到主视图
[self.superview.layer addSublayer:shapLayer];
_shapeLayer = shapLayer;
}
return _shapeLayer;
}
动画实现
- 吸附效果
if (distance >= dkSpace) { //超出范围,将起始view和形状图层隐藏
self.smallView.hidden = YES;
// self.shapeLayer.hidden = YES;//隐藏无法达到吸附效果
[self.shapeLayer removeFromSuperlayer];
}else if (distance < dkSpace && !self.smallView.hidden){ //只有当控件满足范围条件,并且起始view没有隐藏的条件下,才实现该效果
//通过贝塞尔创建不规则曲线
self.shapeLayer.path = [self beziserWithSmallView:self.smallView withBigView:self].CGPath;
}
- 回弹效果
if (distance < dkSpace && !self.smallView.hidden) {//没有满足要求
//返回起始点
[UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
//返回起始点
self.frame = self.smallView.frame ;
[self.shapeLayer removeFromSuperlayer];
} completion:^(BOOL finished) {
self.smallView.hidden = NO;
}];
- 结尾动画效果
//实现动画
UIImageView *ani = [[UIImageView alloc]initWithFrame:self.bounds];
ani.animationImages = self.icons;
ani.animationRepeatCount = 1;
ani.animationDuration = 1;
[self addSubview:ani];
//开始动画
[ani startAnimating];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.9 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self removeFromSuperview];
});
注意
- 应为我们是在storyboard中拖得控件,所以默认是会将Autoresizing转自动布局,需要利用代码来设置取消
self.view.translatesAutoresizingMaskIntoConstraints = NO;