IOS-购物车动画效果(图片移动)

代码为从左边图片抛物线投掷到右下角购物车动画,同理改动即可,渣代码见谅

//
//  ViewController.m
//  动画
//
//  Created by Jack on 15-5-25.
//  Copyright (c) 2015年 Jack. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIButton *button1;//动画起点button
    button1 = [[UIButton alloc]initWithFrame:CGRectMake(0, 80, 120, 90)];
    [button1 setImage:[UIImage imageNamed:@"11"] forState:UIControlStateNormal];
    [self.view addSubview:button1];
    
    UIButton *button2;//动画起点button
    button2 = [[UIButton alloc]initWithFrame:CGRectMake(0, 170, 120, 90)];
    [button2 setImage:[UIImage imageNamed:@"12"] forState:UIControlStateNormal];
    [self.view addSubview:button2];
    
    UIButton *button3;//动画起点button
    button3 = [[UIButton alloc]initWithFrame:CGRectMake(0, 260, 120, 90)];
    [button3 setImage:[UIImage imageNamed:@"13"] forState:UIControlStateNormal];
    [self.view addSubview:button3];
    
    UIButton *gwc;//购物车
    gwc = [[UIButton alloc]initWithFrame:CGRectMake(260, 500, 50, 50)];
    gwc.backgroundColor = [UIColor greenColor];
    [self.view addSubview:gwc];
    
    [button1 addTarget:self action:@selector(touch:) forControlEvents:UIControlEventTouchUpInside];
    [button2 addTarget:self action:@selector(touch:) forControlEvents:UIControlEventTouchUpInside];
    [button3 addTarget:self action:@selector(touch:) forControlEvents:UIControlEventTouchUpInside];
}

-(void)touch:(UIButton *)button
{
    /*************
     按钮的其他功能
     ************/
    
    [self move:button];//传递的参数是需要进行抛物线操作的对象
}
//以上为展示效果,下面是主体代码
-(void)move:(UIButton *)button
{
    float x1 = button.center.x;
    float y1 = button.center.y;
    
    //***********可更改参数************
    float x2 = 285.0f;//购物车中心坐标x
    float y2 = 525.0f;//购物车中心坐标y
    int times = 30;//动画帧数
    float end_side = 30.0f;//动画结束时模块大小
    float vv = 4.0f; //曲线弯曲度(必须大于2)
    float action_time = 0.7f;//动画总时长
    //*********可更改参数结束***********
    
    float height = button.frame.size.height;
    float width = button.frame.size.width;
    float height_change = (height - end_side)/times;//高度变化值
    float width_change = (width - end_side)/times;//宽度变化值
    float layer_change = end_side/2.0/times;//棱角变化值(若不需要,设为0即可)
    float dx = x2 - x1;
    float dy = y2 - y1;
    float xx1 = x1 + dx / vv * 2.0;
    float x0 = ( x1 + xx1 ) / 2.0;
    float a = dy / ( (x2-x0)*(x2-x0) - (xx1-x0)*(xx1-x0) );
    float b = -(x0 * 2 * a);
    float c = y1 - a*x1*x1 - b*x1;
    float x_change = dx / times;
    
    UIButton *tmp = [[UIButton alloc]init];//构建虚拟button来完成动画
    tmp.layer.masksToBounds = YES;
    tmp.layer.cornerRadius = 0;
    [tmp setImage:button.imageView.image forState:UIControlStateNormal];//设置按钮图片
    [self.view addSubview:tmp];
    for ( int i=0 ; i<=times ; i++ )
    {
        float x = x1 + x_change * i ;
        float y = a*x*x + b*x + c;
        height -= height_change;
        width -= width_change;
        tmp.layer.cornerRadius += layer_change;
        CGRect rect = CGRectMake( x-width/2.0, y-height/2.0, width, height);//动画按钮所需移动到的位置
        NSValue *value = [NSValue valueWithCGRect:rect];
        [self performSelector:@selector(waitfor:) withObject:[NSArray arrayWithObjects:tmp,value, nil] afterDelay:i*action_time/times];
    }
    //动画执行完毕之后删除button
    [self performSelector:@selector(remove:) withObject:tmp afterDelay:(times+1)*action_time/times];
    
}
- (void)remove:(UIButton *)tmp
{
    [tmp removeFromSuperview];//移除动画button
}
- (void)waitfor:(NSArray *)inputArray//通过数组实现多参数传递
{
    [self wait:[inputArray objectAtIndex:0] valueto:[inputArray objectAtIndex:1]];
}
- (void)wait:(UIButton *)tmp valueto:(NSValue *)value
{
    CGRect newrect = [value CGRectValue];//提取位置rect
    tmp.frame = newrect;//更新位置
}
@end


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值