如何在iOS中实现类似Instagram的特效？

Question

如何在iOS中实现类似Instagram的特效？

4

我正在开发一款社交应用程序，想要实现类似于Instagram的点赞功能。应用程序中有与Instagram相似的图片动态信息流，当用户双击任何一张图片时，应该显示一个带有类似于Instagram的心形图标的动画效果。我尝试了同样的做法，但无法实现这种动画效果。请问有人可以告诉我如何做到这一点吗？
我附上了Instagram点赞功能的图片。
enter image description here

- rahul

你的问题听起来像是一个代码请求。相反地，请展示你的代码并描述哪里出了问题。 - Amar

不，我不是在寻求代码，我只是想知道如何实现。 - rahul

2个回答

1

创建一个UIView的子类(HEARTShapedView)，其中包含绘制为UIBezierPath的心形，添加到CAShapedLayer中，在layoutSubviews期间使用CABasicAnimation进行动画处理。然后，当动画完成时，从其superview中删除心形视图(self)。

要在表格视图中使用它，请将其作为子视图添加到表格视图单元格或图像视图中，并且该视图应该在完成后自动执行动画并删除自身。

- Audun Kjelstrup

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krisrak · Accepted Answer

这里是一个实现:

- (void) animateLike {
    [UIView animateWithDuration:0.3f delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        heartPopup.transform = CGAffineTransformMakeScale(1.3, 1.3);
        heartPopup.alpha = 1.0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.1f delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
            heartPopup.transform = CGAffineTransformMakeScale(1.0, 1.0);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3f delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
                heartPopup.transform = CGAffineTransformMakeScale(1.3, 1.3);
                heartPopup.alpha = 0.0;
            } completion:^(BOOL finished) {
                heartPopup.transform = CGAffineTransformMakeScale(1.0, 1.0);
            }];
        }];
    }];
}

Swift 3.0 代码

func likeAnimation() {
    UIView.animate(withDuration: 0.3, delay: 0, options: .allowUserInteraction, animations: {() -> Void in
        heartPopup.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
        heartPopup.alpha = 1.0
    }, completion: {(_ finished: Bool) -> Void in
        UIView.animate(withDuration: 0.1, delay: 0, options: .allowUserInteraction, animations: {() -> Void in
            heartPopup.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }, completion: {(_ finished: Bool) -> Void in
            UIView.animate(withDuration: 0.3, delay: 0, options: .allowUserInteraction, animations: {() -> Void in
                heartPopup.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
                heartPopup.alpha = 0.0
            }, completion: {(_ finished: Bool) -> Void in
                heartPopup.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
            })
        })
    })
}

heartPopup是一个UIImageView，在界面构建器中将其设置在图像的中心，并将其alpha设置为零。调用上述方法来实现点赞效果的动画。

Swift 4（评论中的代码）

if let bigLikeImageV = likeImageV, liked == true {
        UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.2, options: .allowUserInteraction, animations: {
            bigLikeImageV.transform = CGAffineTransform(scaleX: 1.6, y: 1.6)
            bigLikeImageV.alpha = 1.0
        }) { finished in
            bigLikeImageV.alpha = 0.0
            bigLikeImageV.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }
}