本博向大家演示如何通过添加动画,为原有界面元素变换增加连贯的过渡效果.为UI代码一丝动态与活力感.
缘起第三方的一个图片裁剪器,拿过来做了几点修改:
- 将其封装到动态库中,方便集成
- 扩充了一些功能,比如等待菊花和是否允许进行裁剪等
- 用封装好的动态库创建了一个ImageCropRow类,这样就可以在Eureka中方便的使用了
大致就是如此,细节不必深究,现在的效果是这个样子的:
总体符合本猫的要求,不过感觉好像少了点神马…
貌似感觉选择不同裁剪比例时,裁剪区域改变有点唐突,有点僵硬…
我们接下来的工作就是试图改变这种情况,使裁剪区域改变的更顺畅一些.
救兵甲:View动画我们首先来完成白色裁剪框外观改变的动画,因为裁剪框是用若干View拼凑而成的,所以我们可以直接用视图动画来做改变的效果.
找到裁剪比例选择按钮的回调,里面有一句:
_tkImageView.cropAspectRatio = currentProportion;
我们将其修改为如下代码:
[UIView animateWithDuration:0.5 animations:^{
_tkImageView.cropAspectRatio = currentProportion;
];
神马!?这就可以了么???
别急,我们看一下修改
