拉动缩放动画

Question

我相信许多人都使用过类似Tinder和Dripper的应用程序，您可以在包含图像的视图上下拉，以放大图像。当您松开时，图像会缩小回到其原始状态。

让我们以Tinder为例：

原始状态:和下拉放大状态:

在iOS中，它是通过 完成的。

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"church-welcome.png"]];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    self.cachedImageViewSize = self.imageView.frame;
    [self.tableView addSubview:self.imageView];
    [self.tableView sendSubviewToBack:self.imageView];
    self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 170)];

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat y = -scrollView.contentOffset.y;
    if (y > 0) {
        self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y);
        self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y);
    }

}

由于我对Objective C和iOS的专业知识非常有限，因此无法在Android中实现它。

这是我认为应该做的：

• 捕捉下拉手势
• 根据拉的距离增加视图的高度
• 对图像进行某种比例动画，以适应扩展的视图

是否有人知道是否有可以用于此目的的库？

- Swayam

Answer 1

查看这个项目：

https://github.com/Gnod/ParallaxListView

如果将其与ViewPagerIndicator库结合使用，您就可以获得类似Tinder个人资料页面的功能集。

https://github.com/JakeWharton/Android-ViewPagerIndicator

- Adam Kis

---

这正是我一直在寻找的！我不知道它被称为视差列表视图！仅仅这个名字就帮助我在上面完成了一些很棒的项目！非常感谢，Adam！ :) - Swayam

WebView是否可以应用相同的缩放策略进行缩放？ - Sergii

@Swayam 你能像 Tinder 那样实现它吗？我的意思是将它与 ViewPager 结合起来吗？ - Atul O Holic

是的，我曾经使用过。我不确定我是否还有代码，但是使用Parallax ListView是正确的方法。 - Swayam

Answer 2

我认为最简单的方法是覆盖View的onTouchEvent方法。

像这样：

boolean inZoom = false;
float prevY = 0;

@Override
public boolean onTouchEvent(MotionEvent event) {
    float eventY = event.getY();
    float eventX = event.getX();
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        if(touchedTheImage(eventX, eventY)){
            setZoomCenter(eventX, eventY);
            prevY = eventY;
            inZoom = true;
            return true;
        }
        break;
    case MotionEvent.ACTION_MOVE:
        if(inZoom){
            changeZoomLevel(prevY, eventY);
            return true;
        }
        break;
    case MotionEvent.ACTION_UP:
        if(inZoom){
            resetZoomLevel();
            inZoom = false;
            return true;
        }
        break;
    }
  return false;
}

编辑： 对于动画部分，请参考以下帖子： https://dev59.com/SGw15IYBdhLWcg3wYasx#6650473

- bgoeschi

---

谢谢你的答案！我在动画和触摸事件方面有点新手。你能否给一个更加详细的回答？我的意思是，zoom（）函数会执行什么样的操作等等。再次感谢！ - Swayam

你可以尝试使用setBounds()方法进行调整...请参考我引用的帖子；不要使用width/2和height/2，而是使用通过"setZoomCenter"设置的值（别忘了转换为imageView坐标），而"changeZoomLevel"则显然设置了另一篇帖子中所称的"zoomController"。 - bgoeschi

这个链接看起来非常有前途！我会试一试的！谢谢！ - Swayam