Как добиться эффекта непрерывного перетаскивания в меню?

Question

Я пытаюсь добиться эффекта перетаскивания в меню. Я не уверен, как это сделать, возможно, у кого-то есть опыт с этим точным эффектом.

Проще говоря, когда пользователь касается элемента меню, я хочу, чтобы в его месте касания отображалась графика. Их касание теперь будет управлять панорамированием графики. После отпускания касания изображение будет стоять на своем месте и принимать полную альфу.

Я уже знаком с созданием жестов панорамирования и созданием графики. Пока что я могу создать графику, к которой относится пункт меню. Самая большая проблема заключается в том, как я «пропускаю» жест касания, чтобы это было одно непрерывное движение.

Кроме того, должен ли пункт меню быть UIButton или UIImageView?

Любая помощь приветствуется. Спасибо

Answer 1

Мне было весело с этим. Следующий код будет захватывать изображение с кнопки при прикосновении, перетаскивать это изображение при альфа = 0,5 и перетаскивать его туда, где ваши прикосновения заканчиваются при альфа = 1,0. После этого он будет продолжать перетаскиваться.

После импорта QuartzCore создайте новый файл. .H должен читать:

#import <Foundation/Foundation.h>
#import <QuartzCore/CAGradientLayer.h>
#import <QuartzCore/CALayer.h>

@interface DraggableImage : CAGradientLayer

- (void)draw:(UIImage *)image;

- (void)moveToFront;

- (void)appearDraggable;

- (void)appearNormal;

@end

и .m должен читать:

#import "DraggableImage.h"

@implementation DraggableImage

- (void)draw:(UIImage *)image{
    CGRect buttonFrame = self.bounds;
    int buttonWidth = buttonFrame.size.width;
    int buttonHeight = buttonFrame.size.height;
    UIGraphicsBeginImageContext( CGSizeMake(buttonWidth, buttonHeight) );
    [image drawInRect:self.bounds];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [newImage drawInRect:self.bounds];
}

- (void)moveToFront {
    CALayer *superlayer = self.superlayer;
    [self removeFromSuperlayer];
    [superlayer addSublayer:self];
}

- (void)appearDraggable {
    self.opacity = 0.5;
}


- (void)appearNormal {
    self.opacity = 1.0;
}

@end

Теперь в вашем главном контроллере вида добавьте:

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#import "DraggableImage.h"

@interface YourViewController : UIViewController{
    DraggableImage *heldImage;
    DraggableImage *imageForFrame[5]; // or however many
    UIButton *buttonPressed;
    int imageCount;
}
@property (weak, nonatomic) IBOutlet UIButton *imageButton;
-(IBAction)buildImageLayerForButton:(UIButton *)sender;
- (void)moveHeldImageToPoint:(CGPoint)location;
- (CALayer *)layerForTouch:(UITouch *)touch;

В этом случае imageButton будет вашей яблочной кнопкой. Теперь в вашем .m файле добавьте это:

@synthesize imageButton;

#pragma - mark Touches

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    CALayer *hitLayer = [self layerForTouch:[touches anyObject]];
    if ([hitLayer isKindOfClass:[DraggableImage class]]) {
        DraggableImage *image = (DraggableImage *)hitLayer;

        heldImage = image;
        [heldImage moveToFront];
    }
    hitLayer = nil;
    [super touchesBegan:touches withEvent:event];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

        if (heldImage) 
        {
            UITouch *touch = [touches anyObject];
            UIView *view = self.view;
            CGPoint location = [touch locationInView:view];
            [self moveHeldImageToPoint:location];
        }

}

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    if (heldImage) {
        [heldImage appearNormal];
        heldImage = nil;
    }
}

- (void)dragBegan:(UIControl *)c withEvent:ev {
}
- (void)dragMoving:(UIControl *)c withEvent:ev {
    UITouch *touch = [[ev allTouches] anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    [self moveHeldImageToPoint:touchPoint];
}

- (void)dragEnded:(UIControl *)c withEvent:ev {
    UITouch *touch = [[ev allTouches] anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    [self moveHeldImageToPoint:touchPoint];
    [heldImage appearNormal];
    heldImage = nil;
}



-(IBAction)buildImageLayerForButton:(UIButton *)sender{


        DraggableImage *image = [[DraggableImage alloc] init];
        buttonPressed = sender;
        CGRect buttonFrame = sender.bounds;
        int buttonWidth = buttonFrame.size.width;
        int buttonHeight = buttonFrame.size.height;

        image.frame = CGRectMake(120, 24, buttonWidth*3, buttonHeight*3);
        image.backgroundColor = [UIColor lightGrayColor].CGColor;
        image.delegate = self;
        imageForFrame[imageCount] = image;
        [self.view.layer addSublayer:image];
        [image setNeedsDisplay];
        [image moveToFront];
        [image appearDraggable];
        heldImage = image;
        [self moveHeldImageToPoint:sender.center];

        imageCount++;

}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    UIGraphicsPushContext(ctx);

    DraggableImage *image = (DraggableImage *)layer;
    [image draw:[buttonPressed imageForState:UIControlStateNormal]];

    UIGraphicsPopContext();
}

- (void)moveHeldImageToPoint:(CGPoint)location 
{
    float dx = location.x;
    float dy = location.y;
    CGPoint newPosition = CGPointMake(dx, dy);

    [CATransaction begin];
    [CATransaction setDisableActions:TRUE];
    heldImage.position = newPosition;
    [CATransaction commit];
}

- (CALayer *)layerForTouch:(UITouch *)touch 
{
    UIView *view = self.view;

    CGPoint location = [touch locationInView:view];
    location = [view convertPoint:location toView:nil];

    CALayer *hitPresentationLayer = [view.layer.presentationLayer hitTest:location];
    if (hitPresentationLayer) 
    {
        return hitPresentationLayer.modelLayer;
    }

    return nil;
}

-(void)viewDidLoad{
    [imageButton addTarget:self action:@selector(dragBegan:withEvent:) forControlEvents: UIControlEventTouchDown];
    [imageButton addTarget:self action:@selector(dragMoving:withEvent:) forControlEvents: UIControlEventTouchDragInside | UIControlEventTouchDragOutside];
    [imageButton addTarget:self action:@selector(dragEnded:withEvent:) forControlEvents: UIControlEventTouchUpInside | UIControlEventTouchUpOutside];
    [super viewDidLoad];
}

- (void)viewDidUnload {
    [self setImageButton:nil];
    [super viewDidUnload];
}

Et вуаля! Подключите свою кнопку, установите ее изображение и выбросьте копии по всему экрану. :)

Примечание: я не особо комментировал, но был бы рад ответить на любые вопросы.

Ура!

РЕДАКТИРОВАТЬ: исправлено -(void)draw:(UIImage *)image{}, так что это будет правильно изменить размер изображения.

Answer 2

если вы хотите передать функцию касания второму графику (большому), я думаю, вы можете сделать что-то вроде этого

в .h, вы должны объявить изображения, которые вы собираетесьперетаскивать и перемещать переменную, чтобы запомнить предыдущую точку перетаскиваемой кнопки (я предполагаю, что вы используете IOS 5 SDK)

@property(nonatomic, strong) UIImageView* myImage;
@property float pointX;
@property float pointY;

, затем, на .m вы можете сделать это

myImage = [[UIImageView alloc]initWithImage:@"appleImage.jpg"];
myImage.alpha = 0;

//default UIImageView interaction is disabled, so lets enabled it first
myImage.userInteractionEnabled = YES;

[button addTarget:self action:@selector(wasDragged:withEvent:) forControlEvents:UIControlEventTouchDragInside];

и затем сделайте функцию перетаскивания

- (void)wasDragged:(UIButton *)button withEvent:(UIEvent *)event
{

        self.myImage.alpha = 0.5;

    UITouch *touch = [[event touchesForView:button] anyObject];


    CGPoint previousLocation = [touch previousLocationInView:button];
    CGPoint location = [touch locationInView:button];
    CGFloat delta_x = location.x - previousLocation.x;
    CGFloat delta_y = location.y - previousLocation.y;

    // move button, to keep the dragging effect 
    button.center = CGPointMake(button.center.x + delta_x,
                                button.center.y + delta_y);

        // moving the image
        button.center = CGPointMake(button.center.x + delta_x,
                                button.center.y + delta_y);

    self.pointX = previousLocation.x;
    self.pointY = previousLocation.y;

    [button addTarget:self action:@selector(dragRelease:withEvent:) forControlEvents:UIControlEventTouchUpInside];
}

, наконец, сделайте функцию dragRelease, где вы вернете кнопку в исходное положение и установите альфа изображений на 1

-(void)dragRelease:(UIButton *)button withEvent:(UIEvent *)event
{
     self.myImage.alpha = 1;
     button.center = CGPointMake(pointX, pointY);
}

ивсе готово: 3

это просто основная идея, хотя, может быть, это не то, что вы хотите, но я надеюсь, что это поможет

edit *: о, и не забудьтесинтезировать все свойства, также если вы используете SDK ниже 5.0, вы можете изменить свойство "strong" на "сохранить"