在网站上看到一个很绚丽的注册設计,先看下原设计效果:
本文讲解如何通过属性动画实现该效果
整个动画流程分成下面三部分来单独实现:
- 注册按钮点击后的扩散动画
擴散动画:当用户点击注册按钮后,整个按钮呈圆形扩散直至铺满整个屏幕
网络请求动画可以分为以下几个部分:
-
signUp
文字入场动画:文字从丅往上平移,同时播放缩放动画并且透明度逐渐加深。 - 白线延长动画线条向右延伸,
-
success
文字入场动画同时伴随sign up
文字的出场动画,由左往右移动与sign up
碰撞后减速停止sign up
向右移动并消失,俩个文字透明度皆发生变化
请求网络动画播放成功后跳转到主页面,主页的Tab栏由铺满整個屏幕逐渐变小到原始高度并且Tab栏的俩个菜单按钮透明度也发生变化。
2、注册按钮后的扩散动画
点击注册按钮后显示动画播放view,开始播放缩放动画
整个缩放动画就是一个圆形的view的放大动画,将该view的背景设置为shape即可实现圆形效果
圆形view的背景代码: